반응형
display 속성
태그에는 block, inline 두 종류가 있다. block은 해당 요소의 옆에 다른 요소가 들어갈 수 없고 inline 요소는 해당 요소 옆에 다른 요소가 들어갈 수 있다. 하지만 block요소를 inline 요소처럼 옆에 다른 요소가 오게 만들거나 inline요소 옆에 다른 요소가 올 수 없게 만들 수도 있다. 바로 display 속성을 사용하는 것이다.
span 태그 block으로 만들기
<!-- 기본적인 span 태그의 display 속성값 -->
<head>
<style>
span {
display: inline;
background-color: turquoise;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</body>
기본적으로 span 태그의 display 속성값은 inline이다. 하지만 해당 속성값을 block으로 바꾸면 다음과 같은 결과가 나온다.
<!-- display 속성값 변경 -->
<head>
<style>
span {
display: block;
background-color: turquoise;
}
</style>
</head>
<body>
<span>hello</span>
<span>hello</span>
</body>
div태그 inline으로 만들기
기본적으로 div 태그의 display 속성값은 block이다. 해당 조건으로 height 150px, width 150px 크기의 div태그를 만들어 출력하면 다음과 같다.
<head>
<style>
div {
display: block;
height: 150px;
width: 150px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
div 태그의 display 속성값을 inline으로 바꾸면 다음과 같은 결과가 나온다.
<head>
<style>
div {
display: inline;
height: 150px;
width: 150px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>결과는 나오지 않고 사라져버린다. 그 이유는 inline 요소에는 높이와 너비가 없기 때문이다.
반응형
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| padding의 개념과 id로html에 css 주입하는 방법 (0) | 2023.07.22 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
