728x90
반응형
CSS 05 : display 속성(none, block, inline, inline-block
display 속성
HTML요소를 어떻게 표시할지를 결정.
display: block이면 Block Level Element이며, display: inline일 경우 inline Level Element.
-> 기본 4가지 값
- none : 요소를 보이지 않게 설정.
- block : 가로 영역을 모두 채움
- inline : 콘텐츠만큼 영역을 차지. 줄 바꿈 X. width, height지정 X
- inline-block : inline처럼 콘텐츠만큼 영역을 차지해 가로 배치 가능, block처럼 내부 속성인 width, height등과 같은 값은 변경 가능.
block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div,
h2 {
border: 1px solid grey;
}
</style>
</head>
<body>
<h1>Display Block</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<h2>title</h2>
</body>
</html>
기본적으로 display: block이기 때문에 content가 가로로 꽉 차며 세로로 배치된 것을 확인할 수 있다.
inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span,
a {
border: 1px solid grey;
display: inline;
}
</style>
</head>
<body>
<h1>Display Inline</h1>
<span>content</span>
<a href="#">Naver</a>
</body>
</html>inline 태그인 span과 a태그를 사용해보았다.
콘텐츠만큼 영역을 차지하여 가로로 배치되는 것을 확인할 수 있다.
none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
span,
a {
border: 1px solid grey;
display: none;
}
</style>
</head>
<body>
<h1>Display Inline</h1>
<span>content</span>
<a href="#">Naver</a>
</body>
</html>display: none;의 경우.
개발자 도구로 body탭을 들어가서 content영역에 마우스를 가져다 대도 아무것도 표시되지 않는 것을 확인할 수 있다.
display: none; 대신 visibility: hidden;을 먹이면 content가 눈에 보이지 않는 건 동일하다. 그러나 content영역이 남아있다는 차이가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div,
span {
border: 1px solid grey;
}
</style>
</head>
<body>
<article>
<h1>Display Inline</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<span>content</span>
<span>content</span>
<span>content</span>
</article>
</body>
</html>
div태그는 content가 block의 형태로 배열되므로 세로로,
span태그는 content가 inline 형태로 배열되므로 가로로 배열된다.
inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
article > div,
article > span {
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid grey;
}
</style>
</head>
<body>
<article>
<h1>Display Inline</h1>
<div>content</div>
<div>content</div>
<div>content</div>
<span>content</span>
<span>content</span>
<span>content</span>
</article>
</body>
</html>
inline-border는 가로로 배치되며, width, height를 조정할 수 있다. 주로 웹사이트의 내비게이션 바를 만들 때 사용한다. 다음 게시글에서 이것을 구현하는 코드를 작성하겠다.
728x90
반응형
'CSS' 카테고리의 다른 글
| CSS 07 : float, clear 속성 (0) | 2022.11.01 |
|---|---|
| CSS 06 : 네비게이션 바(상단바) 만들기 (0) | 2022.11.01 |
| CSS 04 : Box Model(content, padding, border, margin), Box Sizing (0) | 2022.11.01 |
| CSS 03 : 글꼴 속성 정리 MDN (0) | 2022.10.31 |
| CSS 02 : 선택자 정리 (0) | 2022.10.30 |
