[CSS 속성] 레이아웃 (display, visibility)
목차
1. display
2. visibility
display
모든 요소는 기본적으로 가지고 있는 display값이 있다.
그리고 그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정된다.
display 속성으로 해당 요소의 렌더링 박스 유형을 변경할 수 있으며 심지어 렌더링 여부도 결정할 수 있다.
display의 기본값은 요소마다 다르기 때문에 딱히 정해져있지 않다.
display의 속성값으로 사용할 수 있는 값들은 아주 많다. CSS가 버전업되면서 점점 더 추가될 것이다.
예제를 통해 none, inline, box, inline-block들만 확인해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div>box1</div>
</div>
<div>
<div>box2</div>
</div>
<div>
<div>box3</div>
</div>
<div>
<div>box4</div>
</div>
</body>
</html>
첫번째 box1을 display: none으로 설정해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div style="display: none;">box1</div>
</div>
<div>
<div>box2</div>
</div>
<div>
<div>box3</div>
</div>
<div>
<div>box4</div>
</div>
</body>
</html>
브라우저에서 보이는 것 처럼 box1이 없어졌다.
display을 none으로 설정해서 렌더링되지 않았기 때문이다.
이번에는 box2의 display를 inline으로 설정해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div style="display: none;">box1</div>
</div>
<div>
<div style="display: inline;">box2</div>
</div>
<div>
<div>box3</div>
</div>
<div>
<div>box4</div>
</div>
</body>
</html>
브라우저에는 별다른 변화가 보이지 않는다.
개발자 도구에서 확인해보면
이렇게 인라인 레벨 요소처럼 선택되는 것을 확인할 수 있다.
div 태그는 블록 레벨 요소이기 때문에 원래라면 아래 이미지처럼 선택된다.
box3의 display를 block으로 설정해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div style="display: none;">box1</div>
</div>
<div>
<div style="display: inline;">box2</div>
</div>
<div>
<div style="display: block">box3</div>
</div>
<div>
<div>box4</div>
</div>
</body>
</html>
이번에도 브라우저에서는 변화가 없다.
사실 앞에도 말했듯이 div 태그가 블록 레벨 요소이기 때문에 display를 block으로 설정해도 달라지는 것이 없다.
마지막으로 box4를 inline-block로 설정해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div style="display: none;">box1</div>
</div>
<div>
<div style="display: inline;">box2</div>
</div>
<div>
<div style="display: block;">box3</div>
</div>
<div>
<div style="display: inline-block;">box4</div>
</div>
</body>
</html>
마찬가지로 브라우저에 변화가 보이지 않는다.
개발자 도구로 확인해보면
display를 inline으로 설정한 box2와 다를게 없어보인다.
그렇다면 inline과 inline-block은 무슨 차이가 있을까?
새로운 예제로 그 차이를 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<div>
<div style="display: inline;" class="inline">box</div>
</div>
<div>
<div style="display: block;" class="block">box</div>
</div>
<div>
<div style="display: inline-block;" class="inlineblock">box</div>
</div>
</body>
</html>
각 box에 class를 설정해뒀다.
여기에 box model 속성을 적용시키면서 inline과 inline-block의 차이를 알아볼것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
<link href="css/display.css" rel="stylesheet">
</head>
<body>
<div>
<div style="display: inline;" class="inline">box</div>
</div>
<div>
<div style="display: block;" class="block">box</div>
</div>
<div>
<div style="display: inline-block;" class="inlineblock">box</div>
</div>
</body>
</html>/*display.css 파일*/
.inline {
width: 100px;
height: 100px;
background-color: pink;
}inline 클래스에 width와 height를 100px씩 적용해봤다.
그런데 브라우저 화면에서 width와 height가 변한것 같지 않다.
개발자 도구에서는 콘텐츠 영역의 크기가 100x100으로 표기가 되어 있다.
width와 height값을 더 크게 설정해서 차이가 있는지 확인해보자.
/*display.css 파일*/
.inline {
width: 2000px;
height: 2000px;
background-color: pink;
}
이번에도 브라우저에서 적용이 안된 것처럼 보인다.
마찬가지로 개발자 도구에서는 2000x2000으로 보인다.
이처럼 inline은 width와 height를 변경시켜도 그 의미가 없다.
이번에는 margin, border, padding을 설정해보자.
/*display.css 파일*/
.inline {
width: 2000px;
height: 2000px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
얼핏보면 잘 적용된 것처럼 보인다.
하지만 부모 요소를 개발자 도구에서 확인해보면
이렇게 부모 요소에는 전혀 영향을 주지 못하는 것을 알 수 있다.
이후에 block 레벨 요소에서의 box model 속성을 설정할 때에 그 차이를 확실히 알 수 있을 것이다.
결론부터 말하자면 inline에서 margin을 제외한 padding, border는 상하좌우 모두 적용이 된다(margin은 좌우만 적용됨).
하지만 부모 요소에 영향을 주지 못하기 때문에 인접한 다른 콘텐츠와 겹칠 수 있어 padding, border 또한 보통 상하에 길이를 지정하지 않는다(따라서 실무에서는 좌우만 설정함).
아래 그림을 보면 이해가 더 쉽다.
그림 1에서 child는 inline 레벨 요소인데 border와 padding이 적용되어도 parent의 박스에 영향을 주지 못한다.
이럴 때 그림 2처럼 새로운 콘텐츠가 아래에 추가되면 콘텐츠가 겹쳐보일 수 있게된다.
block 레벨 요소는 box model 속성을 설정하면 아래와 같이 보인다.
/*display.css 파일*/
.inline {
width: 2000px;
height: 2000px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
.block {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
이렇게 부모 요소또한 영향을 받는 것을 볼 수 있다.
마지막으로 inline-block을 확인해보자.
/*display.css 파일*/
.inline {
width: 2000px;
height: 2000px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
.block {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
.inlineblock {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
border: 10px solid red;
padding: 10px;
}
inline-block 레벨 요소는 block 요소와 동일하게 동작하는 것을 확인할 수 있다.
즉, inline-block은 inline처럼 렌더링(배치)되면서 block 레벨의 성질을 갖는다.
번외로 inline요소를 여러개 만들면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
<link href="css/display.css" rel="stylesheet">
</head>
<body>
<div>
<div style="display: inline;" class="inline">box</div>
<div style="display: inline;" class="inline">box</div>
<div style="display: inline;" class="inline">box</div>
</div>
<div>
<div style="display: inline-block;" class="inlineblock">box</div>
<div style="display: inline-block;" class="inlineblock">box</div>
<div style="display: inline-block;" class="inlineblock">box</div>
</div>
</body>
</html>/*display.css 파일*/
.inline {
background-color: pink;
}
.inlineblock {
background-color: pink;
}
브라우저에서 보이는 것처럼 약간의 여백이 생기는데
이는 inline요소가 공백이나 개행을 하나의 여백으로 받아들이기 때문이다.
따라서 inline과 inline-block의 경우 태그 사이에 공백이나 개행이 있을 경우 약 4px의 여백을 갖게 된다.
<!--개행을 없앤 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>display</title>
<link href="css/display.css" rel="stylesheet">
</head>
<body>
<div>
<div style="display: inline;" class="inline">box</div><div style="display: inline;" class="inline">box</div><div style="display: inline;" class="inline">box</div>
</div>
<div>
<div style="display: inline-block;" class="inlineblock">box</div><div style="display: inline-block;" class="inlineblock">box</div><div style="display: inline-block;" class="inlineblock">box</div>
</div>
</body>
</html>/*display.css 파일*/
.inline {
background-color: pink;
}
.inlineblock {
background-color: pink;
}
개행을 없애니 여백이 사라진 것을 확인할 수 있다.
표로 inline, block, inline-block을 정리해보면
| display | width | height | margin | padding | border |
| block | O | O | O | O | O |
| inline | X | X | 좌/우만 적용 | O | O |
| Oinline-block | O | O | O | O | O |
이렇게 정리된다.
visibility
요소의 화면 표시 여부를 지정하는 속성이다.
기본값은 visible이며 이 속성값은 화면에 표시한다는 뜻이다.
hidden은 화면에 표시하지 않는다(공간은 차지함).
collapse는 셀 간의 경계를 무시하고 숨긴다. 이 속성값은 테이블 요소에만 적용 가능하다.
display: none과 visibility: hidden을 잘 구별해서 사용하도록 하자.
display: none은 요소가 렌더링조차 되지 않는 것이고
visibility: hidden은 요소가 보이지는 않지만 렌더링되며 화면에 공간을 차지하고 있는 것이다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [CSS 속성] 레이아웃 (position, z-index) (0) | 2022.12.30 |
|---|---|
| [CSS 속성] 레이아웃 (float, clear) (0) | 2022.12.29 |
| [CSS 속성] 텍스트 (0) | 2022.12.27 |
| [CSS 속성] 폰트 (1) | 2022.12.23 |
| [CSS 속성] 단위, 배경, 박스모델 (0) | 2022.12.21 |
