border
border 속성은 HTML의 각 태그들에 테두리를 만들어낼 수 있다.
border 속성을 이용하여 태그들의 경계가 어디까지인지 육안으로 식별 가능하며, 웹 브라우저에서 각각의 태그들을 구분하기 쉬워진다.
border 스타일 종류
각각의 스타일은 전부 3px의 두께를 기준으로 표현했다.
solid
dotted
dashed
double
inset
outset
ridge
groove
border 속성 사용법
border 속성 하나만 사용
border 속성 하나만을 이용하여 두께, 테두리 스타일, 색상을 지정할 수 있다.
단, 테두리의 형태는 필수로 지정해줘야지 화면에 나오게 된다.
border.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid #000000;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
(실행결과)
border
border-style 속성 사용
border-style 속성을 이용하여 '상 우 하 좌' 를 각각 원하는 테두리 스타일로 지정할 수 있다.
border-style.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid dashed double;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
(실행결과)
border
border-style로만 지정하게 되면 속성값의 순서에 따라 변화되는 위치가 달라진다.
속성값이 첫번째만 있을때는 상 하 좌 우 전부 다 첫번째의 속성값을 따른다.
속성값이 두번째까지 있을때는 상 하 는 첫번째 값을, 좌 우 는 두번째 값을 따른다.
속성값이 세번째까지 있을때는 상 은 첫번째 값을, 좌 우 는 두번째 값을 하 는 세번째 값을 따른다.
속성값이 네번째까지 있을때는 첫번째부터 네번째 값까지 각각 상 우 하 좌 를 따르게 된다.
아니면,
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: double;
}
</style>
위의 코드처럼, 직접 위치를 지정하여 각각 원하는 곳에 스타일을 지정해줄 수도 있다.
border-width 속성 사용
border-width 속성을 사용하는 경우는 border-style 속성을 이용해서 테두리 스타일을 지정했거나, 테두리 굵기를 각각 다르게 지정하고 싶을 때 사용한다.
border-width.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-width: 1px 3px 5px 7px;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
(실행결과)
border
border-style과 똑같이 속성 값의 순서(상 우 하 좌)에 따라서 각각 변화되는 위치가 다르며, 직접 위치를 정할 수도 있다.
<style>
p {
border-top-width: 1px;
border-right-width: 3px;
border-bottom-width: 5px;
border-left-width: 7px;
}
</style>
border-color 속성 사용
border-color 속성을 사용하는 경우는 border-style을 이용하여 테두리 스타일을 지정했거나, 테두리 색상을 각각 다르게 지정하고 싶을 때 사용한다.
border-color.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-color: red blue orange green;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
(실행결과)
border
border-style과 똑같이 속성 값의 순서(상 우 하 좌)에 따라서 각각 변화되는 위치가 다르며, 직접 위치를 정할 수도 있다.
<style>
p {
border-top-color: red;
border-right-color: blue;
border-bottom-color: orange;
border-left-color: green;
}
</style>
단, border-color를 지정하지 않으면 기본 색상으로는 검은색이 나오며, 해당 태그에 color 속성이 존재한다면 그 color 색상을 따라가게 된다.
border에 위치 지정
위에서 알아왔던 속성들을 border에 위치지정으로 통합할 수 있다.
border-location.html
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top: 1px dotted red;
border-right: 3px solid blue;
border-bottom: 5px dashed orange;
border-left: 7px double green;
}
</style>
</head>
<body>
<p>border</p>
</body>
</html>
(실행결과)
border
'HTML_CSS > CSS' 카테고리의 다른 글
| CSS를 HTML에 적용시키는 방법 (0) | 2021.06.20 |
|---|---|
| 글자에 테두리, 그림자 넣기 (5) | 2020.03.30 |
