display
모든 html의 요소들은 display 스타일 속성을 가진다. display의 속성이 어떻게 되냐에 따라 스타일의 적용이 다르기 때문에 사용하는 html 요소의 display 속성은 어떤지에 대해서 알아야 하고, display속성이 바뀌었을 때의 변화도 알아야 한다.
html에서 display 스타일 속성값으로 다음의 4가지가 있다.
- block
- inline
- inline-block
- none
속성값들이 각자 어떤 특징을 지니고 있는지 알아보도록 하겠다.
display : block
block 속성은 다음과 같은 특징을 지니고 있다.
- block 속성의 element는 항상 새 라인에서 시작한다.
- block 속성은 가용한 좌우푝을 모두 차지한다.
- css 스타일의 width, height 속성이 적용이 된다.
즉 block 속성을 가지는 태그는 무조건 한 라인을 차지하고 그 라인의 좌우폭을 모두 적용하는 속성인 것이다. 대표적으로 기본값인 block 인 속성들은 아래와 같다.
- div
- h1 ~ h6
- p
- table
- ol
- ul
- 등등...
이제서야 위의 태그들이 한 줄씩 차지 하는지에 대한 이유를 찾은 것이다. 아래 예제는 block 속성이 가지는 특징들을 살펴보기 위한 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 높이 지정 -->
<div style="height: 50px; border : 1px solid">block1</div>
<!-- 너비도 지정 -->
<div style="width : 200px; height: 50px; border : 1px solid">block2</div>
<!-- 위의 공간이 남아도 무조건 새라인 -->
<div style="width : 300px; height: 50px; border : 1px solid">block3</div>
</body>
</html>
결과는 다음과 같다.
display : inline
inline 속성은 block과는 반대되는 특징을 가지는 속성이다.
- 새 라인에서 시작하지 않는다.
- 필요한 만큼의 좌우폭만 차지한다. <= 요소의 컨텐츠에 의해 결정
- css의 width, height 스타일이 적용이 안된다.
inline 속성은 요소의 컨텐츠에 의해서만 크기가 정해지고 새라인에서 시작하지 않아 옆으로 차근 차근 쌓이게 된다. inline속성을 기본값으로 가지는 태그로는 다음이 있다.
- span
- a
- img
- input
- label
- button
- textarea
- 등등
inline 속성은 block 속성에 비해 기본값으로 가지는 태그가 많지 않다. 그렇기 때문에 위의 태그 이외에는 나머지는 block이라고 생각해도 된다.
예제를 통해 inline 속성의 특징에 대해서 살펴보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 기본 크기 <= 콘텐츠에 의해 결정 -->
<span style="border : 1px solid">inline1</span>
<!-- 너비와 높이 지정 => 적용X -->
<span style="width: 200px; height : 100px; border : 1px solid">inline2</span>
<!-- 새 라인에서 시작안함 -->
<span style="width: 200px; height : 100px; border : 1px solid">inline3</span>
</body>
</html>
아래와 같은 결과가 나온다.
display : inline-block
inline-block은 이름에서 알 수 있듯이 inline과 block의 특징을 섞은 하이브리드 속성이다.
- element 들끼리는 inline으로 배치
- 각각의 element는 block처럼 동작 ( width, height가 적용됨)
즉, 새 라인에서 시작하지 않는 컨텐츠에 의해 크기가 결정되는 inline 요소가 width, height 스타일 속성이 적용되는 block의 특징을 가져온 것이라고 생각하면 된다.
아래의 예제를 통해 위의 두 예제를 inline-block 속성으로 바꾸어 보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 첫번째 예제의 inline block 속성 지정 -->
<div style="height: 50px; border : 1px solid; display: inline-block;">block1</div>
<div style="width : 200px; height: 60px; border : 1px solid; display: inline-block;">block2</div>
<div style="width : 300px; height: 50px; border : 1px solid; display: inline-block;">block3</div>
<br><br>
<!-- 두번째 예제의 inline block 속성 지정 -->
<span style="border : 1px solid; display: inline-block;">inline1</span>
<span style="width: 200px; height : 100px; border : 1px solid; display: inline-block;">inline2</span>
<span style="width: 200px; height : 100px; border : 1px solid; display: inline-block;">inline3</span>
</body>
</html>
inline-block 속성만 추가하였는데 결과가 아래와 같이 바뀌었다.
block이 inline 특징을 가지게 되고 inline이 block 속성을 가지게 된 것이다. inline-block은 block과 inline의 특징을 섞은 하이브리드 속성이기 때문에 자주 사용되는 display 속성이기 때문에 자세히 알아 둘 필요가 있다.
display : none
none은 이름 그대로 보여주지 않겠다이다. 여기서 주의할 점은 단순히 육안으로 보여주지 않음을 의미하는 것이 아닌 없는 요소로 취급을 한다는 점이다.
그렇기 때문에 display : none 속성을 가지는 요소는 다른 요소에게 어떠한 영향도 줄 수 없다!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- display : none 다른 요소에게 영향을 줄 수 없음 -->
<!-- 크기를 엄청 키워도 다른 요소들은 그대로.. -->
<div style="height: 5000px; border : 1px solid; display: none;">block1</div>
<div style="width : 200px; height: 60px; border : 1px solid; display: inline-block;">block2</div>
<div style="width : 300px; height: 50px; border : 1px solid; display: inline-block;">block3</div>
</body>
</html>
위의 예제에서 block 속성을 가지는 div의 높이를 5000px로 지정해주어도 display가 none으로 없는 요소 취급을 받기 때문에 아무 영향을 끼치지 않는 것을 볼 수 있다
'Web > HTML' 카테고리의 다른 글
| [HTML] Semantic Tag (0) | 2023.10.30 |
|---|---|
| [HTML] Form (1) | 2023.10.30 |
| [HTML] list (1) | 2023.10.29 |
| [HTML] Table (0) | 2023.10.28 |
| [HTML] Tag - Image (0) | 2023.10.20 |