[CSS] display 속성 (화면 배치 방법 결정) block, inline, inline-block, none

-

display 속성을 이용하면 블록 레벨 요소도 인라인 레벨 요소로 변경이 가능하며 반대로도 변환이 가능하다.

display 속성의 경우 여러 경우에 사용되지만 일반적으로 세로로 출력되는 목록을 가로 네비게이션 메뉴로 바꿀때 사용한다.


{ display : block; }

블록 레벨 요소는 해당 컨텐츠의 크기가 아닌 해당 컨텐츠가있는 해당 행을 모두 차지하며 다른 컨텐츠가 추가되면 줄바꿈이 발생하게 된다.


{ display : inline; }

인라인 레벨 요소는 해당 컨텐츠의 크기 만큼만 화면에서 차지한다. 그래서 추가적으로 컨텐츠가 추가되어도 같은 행에 출력될 수 있다.

예시로 보면

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#block img {
display: block;
margin: 5px;
}
</style>
</head>
<body>
<p>inline 방식</p>
<div id="inline">
<img src="./images/pic.png" alt="초록색 사진" />
<img src="./images/pic.png" alt="초록색 사진" />
<img src="./images/pic.png" alt="초록색 사진" />
</div>

<hr />

<p>block 방식</p>
<div id="block">
<img src="./images/pic.png" alt="초록색 사진" />
<img src="./images/pic.png" alt="초록색 사진" />
<img src="./images/pic.png" alt="초록색 사진" />
</div>
</body>
</html>



위 코드가 사진과 같이 화면에 출력된다.

img 는 기본적으로 인라인 레벨 요소이다. 그런 인라인 레벨 요소에 속성으로 display:block을 주었더니 아래와같이 블록레벨 요소로 변경되어 각각의 이미지들이 한 행을 모두 차지하는것을 확인할 수 있다.

반대로 블록 레벨 요소에 display:inline 속성을 작성해주면 세로에서 가로 방향으로 화면에 출력된다.

대표적으로 많이 사용되는 경우가 세로 목록을 가로 목록의 네비게이션바로 변경할때이다.


하지만 이러한 display:inline 속성은 단점이 존재한다.

한 줄에 여러개의 컨텐츠를 배치할 수 있지만 너비나 높이, 마진, float 과 같은 값이 정확히 적용되지 않는다.

특히 마진값을 주더라도 좌우에는 적용되지만 위아래에는 마진값이 적용되지 않는 문제가 발생한다.

이러한 특성을 보완할 수 있는 속성이 display:inline-block 이다.


{ display : inline-block; }

display:inline-block 속성을 적용하면 블록 레벨 요소의 특성과 인라인 레벨 요소의 두 가지 특성을 모두 갖게 된다.

즉 출력은 inline 방식으로 하면서 inline 방식에서는 하지 못했던 너비나 높이, 마진, float 값을 정확히 적용할 수 있게 된다.

다만 inline-block도 고려할 점이 있다.

inline-block 사이에 공백이 생기게 되는데 이때 부모 태그에 {font-size : 0;} 을 적용하면 공백 문제를 해결할 수 있다.

inline-block 끼리 높이가 안맞을 때 vertical-align 속성을 적용하여 문제를 해결할 수 있다.


{ display : none; }

이 속성을 사용하면 해당 요소를 화면에 아예 표시하지 않는다.

visibility:hidden; 속성도 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요소가 있는 공간은 그대로 차지하지만 

dipslay:none; 속성은 아예 공간조차 차지하지 않는다.








댓글

댓글 쓰기