K_blueprint
HTML5로 테두리 꾸미기(2) 본문
반응형
[고급 테두리 꾸미기]
CSS3은 둥근 모서리의 테두리나 이미지 테두리 등의 고급 테두리를 지원한다.
- 'border-radius' 프로퍼티를 이용하면 테두리의 모서리를 곡선으로 둥글게 만들 수 있다.
- 아래는 모서리의 반지름을 '50px'로 지정한 둥근 모서리 테두리의 예시 코드와 브라우저 출력 결과이다.
(소스코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>박스 가지고 놀기</title>
<style>
p{
border-radius: 50px; /* 테두리의 둥근 모서리 설정 */
background-color: tomato; /* 테두리의 배경색 설정 */
}
</style>
</head>
<body>
<p>저는 둥근 모서리를 가진 박스입니다.</p>
</body>
</html>
(출력결과)
- 각각의 모서리 별로 반지름을 다르게 설정할 수 있는데 border-top-left(좌측 상단 모서리), border-top-right(우측 상단 모서리), border-bottom-left(좌측 하단 모서리), border-bottom-right(우측 하단 모서리) 이렇게 4개의 모서리에 개별적인 값을 할당할 수 있다.
- 아래는 네 모서리가 모두 다른 형태의 반지름을 가지고 있는 예시코드와 출력 결과이다.
(소스코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>박스 가지고 놀기</title>
<style>
p{
background-color: tomato; /* 테두리의 배경색 설정 */
}
#box1{ border-radius: 50; }
#box2{ border-radius: 0px 20px 40px 60px;}
#box3{ border-radius: 0px 20px 40px; }
#box4{ border-radius: 0px 20px; }
#box5{ border-radius: 50px;
border-style: dotted;}
</style>
</head>
<body>
<h3>다양한 둥근 모서리 박스</h3>
<hr>
<p id="box1">저는 첫 번째 박스입니다.</p>
<p id="box2">저는 두 번째 박스입니다.</p>
<p id="box3">저는 세 번째 박스입니다.</p>
<p id="box4">저는 네 번째 박스입니다.</p>
<p id="box5">저는 다섯 번째 박스입니다.</p>
</body>
</html>
(출력결과)
[이미지 테두리]
- 'border-image' 프로퍼티를 이용하면 테두리에 이미지를 삽입할 수 있게 된다.
- 또한 이미지를 활용한 테두리를 설정할 때 '모서리(corner)'와 '에지(edge)'로 구분하여 각각의 구역에 다른 이미지를 지정할 수 있다.
- 아래는 테두리에 이미지를 입히는 간단한 CSS3 스타일의 예시 코드이다.
/* 삽입할 이미지의 URL + 이미지에서 30픽셀만큼의 구역을 잘라어 모서리에 배치 + 에지 이미지 반복 배치 */
border-image : url("border.png") 30 round;
+ 이미지 테두리를 만들기 위해서는 몇 가지 조건이 필요한데, 내용은 아래와 같다.
- border-width 프로퍼티에 0이 아닌 값이 지정되어 있어야 한다.
- border-image는 border-style 대신 지정되는 것이기 때문에 border-style이 우선적으로 지정되어 있어야 한다.(우선순위가 밀림)
★ 본 게시물은 "HTML5 + CSS3 + Javascript 웹 프로그래밍" 도서를 참고하여
작성되었습니다. ★
728x90
반응형
'HTML & CSS & Java script' 카테고리의 다른 글
| HTML5로 시각적 효과 주기 (0) | 2024.11.25 |
|---|---|
| HTML5로 배경 꾸미기 (2) | 2024.11.24 |
| HTML5로 테두리 꾸미기(1) (4) | 2024.11.22 |
| HTML로 박스 만들기 (2) | 2024.11.20 |
| HTML5로 텍스트 꾸미기 (1) | 2024.11.19 |
'HTML & CSS & Java script' Related Articles
more
