반응형
모든 태그에 css 속성을 적용하는 방법
개발을 하다보면 모든 html 요소들에 대해 같은 css를 적용해야 할 수도 있다. 그럴 때 모든 태그에 같은 css 속성을 추가해주는 대신 사용할 수 있는 방법이 있다.
<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: black;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div>
</body>
div 태그에만 줬던 border 속성을 * 표시에 준 모습이다. 여기서 * 는 모든 html 요소들을 가리킨다. 덕분에 body, div 가릴 것 없이 모두에 border 속성이 추가되었다.
* 를 통해 모든 html 요소에 border를 추가했다면 inline 요소인 span 태그에도 border가 적용될까? third 태그의 안쪽에 span 태그를 추가하고 content는 hello로 넣어준 모습이다.
<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: black;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<span>hello</span>
</div>
</div>
</div>
</body>
span태그 역시 텍스트 주변으로 border가 잘 만들어진 모습을 볼 수 있다.
반응형
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| border와 border-style (0) | 2023.07.23 |
| 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 |
댓글