[CSS] display (block, inline, inline-block, none)
📌 참고 사이트
display - CSS: Cascading Style Sheets | MDN (mozilla.org)
display - CSS: Cascading Style Sheets | MDN
display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
developer.mozilla.org
CSS Flow Layout - CSS: Cascading Style Sheets | MDN (mozilla.org)
CSS Flow Layout - CSS: Cascading Style Sheets | MDN
일반적인 흐름 Normal Flow, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래
developer.mozilla.org
[CSS]display 속성 inline, block, inline-block 에 관하여 (velog.io)
[CSS]display 속성 inline, block, inline-block 에 관하여
🙋♀️ display > CSS에서 display 속성은 웹페이지 상에서 엘리먼트들이 어떻게 보여지고 다른 엘리먼트와 어떻게 상호 배치되는지를 결정한다. display 속성값으로는 대표적으로 inline, block, inline-b
velog.io
📋 display 속성
요소를 블록과 인라인 요소 중 어느 것으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
❓ CSS Flow Layout
특정 레이아웃의 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 블록 요소가 보여지는 방식이다.
어느 한 요소가 흐름에서 벗어나게 되면 그 요소는 독립적으로 동작하게 된다.
➡️ 블록(block) 요소들은 단락이 하나씩 나눠져 배치된다. 즉, 맨 위에서부터 페이지를 따라 아래로 보여진다.(y축 방향으로) 따라서 공간을 만들 수 있고, 상하 배치 작업이 가능하다. width와 height 설정이 가능하다.
ex) <p>, <div>, <h1>~<h6>, <header> 등
➡️ 인라인(inline) 요소들은 왼쪽에서부터 시작하여 하나씩 차례로 보여진다.(x축 방향으로) 따라서 공간을 만드는 것이 불가능하므로 width와 height 설정이 불가하고, 상하 배치 작업이 불가하다.
ex) <a>, <span> 등
블록 요소와 인라인 요소는 그 특성이 반대라고 보면 된다.
ex)
💻 HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>block element & inline element</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="box1">
<p>
생명을 생의 스며들어 끓는 가슴에 산야에 없으면, 말이다. 뜨거운지라,
설레는 찾아다녀도, <span>그러므로 내는 그것은 있으랴?</span> 평화스러운
못할 오아이스도 설산에서 것은 소금이라 보배를 봄바람을 인생에 뿐이다.
</p>
</div>
<div class="box2">
<p>
인간의 살았으며, 타오르고 맺어, 힘있다. 황금시대를 돋고, 이는 그와
구하기 있다. 이것을 할지니, 대한 별과 설레는 바이며, 때까지 트고,
그림자는 듣는다.
</p>
</div>
</body>
</html>
💻 CSS
div {
width: 500px;
height: 200px;
border: solid 2px salmon;
margin-bottom: 20px;
}
.box1 span {
background-color: yellowgreen;
}
분홍색 테두리의 박스들(.box1, .box2)은 블록 레벨에 있기 때문에(<div>) 하나씩 위에서부터 아래로 나타나게 된다.
초록색으로 칠해진 부분은 인라인 레벨에 있기 때문에(<span>) 문장 내에 이어져서 나타난다.
📍 display: block
➡️ display: block을 하면 한 요소는 하나의 줄을 차지한다. 즉, 하나의 요소의 가로 크기가 부모 요소의 가로 크기의 100%를 차지하게 된다.
위 예시에서 분홍색 테두리 박스들 같은 경우를 말한다.
➡️블록 레벨에 있는 요소들은 기본값이 display: block이기 때문에 굳이 적어주지 않아도 된다.
➡️ width, height, margin, padding 속성을 모두 설정 가능하다.
또 다른 예시 살펴보기)
💻 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="index2.css" />
</head>
<body>
<div class="container">
<p class="box1">box1</p>
<p class="box2">box2</p>
<p class="box3">box3</p>
</div>
</body>
</html>
💻 CSS
body {
width: 600px;
}
.container {
border: 2px solid;
display: block /* 생략 가능 */
}
.box1,
.box2,
.box3 {
font-size: 20px;
width: 100px;
height: 100px;
display: inline-block;
margin: 0;
}
.box1 {
background-color: violet;
}
.box2 {
background-color: blueviolet;
}
.box3 {
background-color: purple;
}
display: block 사용 결과 container의 width는 부모 요소인 body의 width의 100%인 600px(container의 border width + content width)가 되고, height는 box들의 height인 100px(container의 height, border 제외)가 되어 있는 것을 볼 수 있다.
display: block 속성이 적용된 container에는 다음과 같이 width, height, paddding, margin 속성 변경이 가능하다.
💻 CSS
.container {
border: 2px solid;
display: block;
width: 500px;
height: 200px;
margin: 20px;
padding: 20px;
}
📍 display: inline
➡️ display: inline가 적용된 요소들은 왼쪽에서부터 차례대로 한 줄에 배치하는 것이 가능하다.
처음에 봤던 예시에서 초록색 바탕을 가진 부분이 display: inline이 적용된 부분이다.
➡️ 인라인 레벨에 있는 요소들은 기본값이 display: inline이기 때문에 굳이 적어주지 않아도 된다.
➡️ block에서와는 다르게 width, height 설정이 적용되지 않는다. margin과 padding은 좌우(right, left)로만 설정이 가능하고 top과 bottom은 적용되지 않는다.
또 다른 예시 살펴보기 1)
위 display: block에서의 CSS예시에서 .container의 display를 inline으로만 바꾸면 된다.
container가 box1과 같은 글자에 맞는 크기로만 자동으로 맞추어져 있는 것을 볼 수 있다.
block에서와 같이 container에 width, height, padding, margin을 적용하면 padding과 좌우 margin을 제외하고 적용되지 않은 것을 볼 수 있다.
상하 padding, margin은 적용되지 않는다고 하였는데 위에서는 상하로 padding이 적용된 것을 볼 수 있다.
상하좌우로 모두 padding이 적용되어 박스의 크기 자체는 더 커진 것처럼 보일 수 있지만 다음과 같이 문장 안에서는 다른 요소에 영향을 미치지 못한다.
또 다른 예시 살펴보기 2)
💻 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body style="width: 500px">
<p>
대통령은 국무회의의 의장이 되고, 국무총리는 부의장이 된다. 교육의
자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여
보장된다.
<span style="display: inline; border: 2px solid salmon; padding: 20px"
>대통령으로 선거될 수 있는 자</span
>는 국회의원의 피선거권이 있고 선거일 현재 40세에 달하여야 한다. 국회는
국가의 예산안을 심의·확정한다.
</p>
</body>
</html>
좌우 padding은 다른 요소에 영향을 미치지만 상하 padding은 다른 요소에 영향을 미치지 않는 것을 볼 수 있다. 상하 padding으로 인한 결과는 박스의 테두리 범위만 넓어질 뿐이다.
📍 display: inline-block
➡️ block과 inline의 속성을 모두 가지고 있다. 기본적으로는 inline 처럼 왼쪽부터 한 줄에 다른 요소들과 배치되는데, inline에서는 불가능했던 width, height, padding, margin 속성을 지정해 주는 것이 모두 가능하다. 이는 block과의 공통점이다.
또 다른 예시 살펴보기 1)
위 display: block에서의 CSS예시에서 .container의 display를 inline-block으로만 바꾸면 된다.
box들의 사이즈에 딱 들어맞게 container의 테두리가 그려져 있는 것을 볼 수 있다.
block에서와 같이 container에 width, height, padding, margin을 적용하면 모두 화면에 적용되어 있는 것을 볼 수 있다.
또 다른 예시 살펴보기 2)
inline에서 또 다른 예시 살펴보기 2) 에서 span의 style에서 display를 inline-block으로 수정하고, margin: 20px도 추가해 보자.
상하좌우로 padding과 margin이 모두 적용되어 다른 요소에도 영향을 주고 있는 것을 볼 수 있다.
but 흐름 자체는 inline의 흐름을 유지하고 있는 것을 볼 수 있다.
* 참고로 block에서는 상하좌우로 padding과 margin이 모두 적용되고, 테두리가 칠해진 <span> 부분이 한 줄을 다 차지하는 결과가 나온다.
📍 display: none
➡️ 레이아웃에 영향을 주지 않도록 요소의 display를 끄게 한다. 모든 하위 요소들에도 적용된다.
➡️ 겉으로 보기에는 마치 해당 요소가 존재하지 않는 것처럼 렌더링된다.
ex)
box 3개 예시에서 static일 때 CSS 코드에서 container의 display를 none으로 바꾼다.
결과로는 화면에 아무것도 나타나지 않는다. .container의 자식 요소들까지도 dispaly: none이 적용된 것이다.
개발자 도구를 열어서 태그들 위에 마우스를 올려도 요소들의 영역이 나타나지 않는다.
* display: none; 대신에 visibility: hidden; 을 사용하면 겉으로 보기에는 none을 사용한 것처럼 화면에 아무것도 나타나지 않지만 개발자 도구를 통해 보면 요소들의 영역은 존재하는 것을 볼 수 있다.
즉, visibility: hidden은 레이아웃에 영향을 준다. 여전히 요소들이 공간을 사용하고 있다는 점이 display: none과 다르다.