border 속성
경계와 관련된 속성 3가지가 있다. margin, padding, border 이다. margin과 padding은 앞서서 다루어보았다.
2023.07.21 - [TIL/CSS] - margin 속성 사용법과 collapsing margins 현상
2023.07.22 - [TIL/CSS] - padding의 개념과 id로html에 css 주입하는 방법
이번에는 마지막으로 border에 대해 알아볼 것이다.
<head>
<style>
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 20px;
padding: 20px;
}
div {
padding: 20px;
border: 2px solid black;
}
#first {
background-color: orange;
height: 150px;
width: 150px;
}
#second {
background-color: blue;
height: 100px;
width: 100px;
}
#third {
background-color: black;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div>
</body>
이것이 바로 div 태그에 border 속성을 적용해본 모습이다. border 속성에는 테두리의 두께, 종류, 색깔을 값으로 넣어줄 수 있다. 위의 경우에는 2px의 두께, solid라는 종류, black을 색으로 넣어주었다. 더 다양한 border의 종류는 아래의 링크에서 확인할 수 있다.
border-style - CSS: Cascading Style Sheets | MDN
border-style CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.
developer.mozilla.org
border-style 사용하기
전체적으로 같은 border가 적용되어있는 상황에서 특정 태그의 border의 모양만 바꿔주고싶을 수가 있다. 이럴 땐 border-style을 사용하면 된다.
<head>
<style>
* {
border: 2px solid black;
}
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 20px;
padding: 20px;
}
div {
padding: 20px;
}
#first {
background-color: orange;
height: 150px;
width: 150px;
}
#second {
background-color: blue;
height: 100px;
width: 100px;
}
#third {
background-color: white;
height: 50px;
width: 50px;
}
span {
border-style: dotted;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<span>hello</span>
</div>
</div>
</div>
</body>
span 태그를 이용하여 hello 라는 문구를 작성하고 css 내용을 추가해주었다. border 속성이 아닌 border-style 속성을 이용하여 dotted 라는 값을 주었다. 그 결과 hello 라는 문구를 감싼 border가 dotted 모양으로 보이는 것을 확인할 수 있다.
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글