display 속성
HTML5 시대가 되면서 display 속성에 입력할 수 있는 다양한 키워드가 등장 했습니다.
하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없습니다. 그러므로 모든 웹 브라우저에서 지원하는 display 속성을 중심으로 살펴봅니다.
3장의 공간 분할 태그에서 div 태그는 블록 형식이고 span 태그는 인라인 형식이라고 설명했는데 기억하나요/ 이번 주제를 살펴보면 도움이 될 것입니다. display 속성을 사용해 인라인 형식, 블록형식, 인라인-블록 형식을 설정할 수 있기 때문입니다.
display 속성 : block, complact, flexbox, grid, inherit, initial, inline, inline-block, inline-flexbox
이 내용에서 다루는 display 속성 키워드
키워드 설명
none 태그를 화면에서 감추기
block 태그를 블록 형식으로 지정
inline 태그를 인라인 형식으로 지정
inline-block 태그를 인라인-블록 형식으로 지정
기본 예제 6-4 display 속성
1. none 키워드 적용하기 display 속성에 none 키워드를 적용하면 태그가 홤녀에서 보이지 않습니다. 즉, 중간의 div 태그 전체가 화면에서 사라집니다.
코드 6-12 none 키워드 적용
<!DOCTYPe html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: none;
}
</style>
</head>
<body>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
</body>
</html>
2. block 키워드 적용하기 #box 태그의 display 속성을 block 키워드로 바꿔 봅니다.
코드 6-13 block 키워드 적용
<style>
#box {
display: block;
}
</style>
3. inline 키워드와 inline-block 키워드 적용하기 div 태그의 display 속성에 inline 키워드와 inline-block 키워드를 지정해 봅시다. 코드를 다음 두 가지 방법으로 변경한 후 실행해 보세요. 실행 결과는 서로 동일합니다.
코드 6-14 inline과 inline-block 키워드 적용
<style>
#box {
display: inline;
}
</style>
<style>
#box {
display: inline-block;
}
</style>
더미 객체 대상 객체 더미 객체
블록 형식과 인라인 형식은 3장에서 잠깐 살펴본 적이 있으므로 쉽게 이해할 것입니다.
" 그런데 인라인 형식과 인라인-블록 형식은 차이가 없나요?
서로 다르니 이름이 다르겠지요? width와 height 속성, margin 속성을 사용할 때 두 형식의 차이를 확인할 수 있습니다.
에제로 살펴봅시다. 다음 inline 키워드를 적용한 코드에는 width와 height 속성이 지정되지 않습니다. 또 margin 속성이 div 태그의 좌우로만 적용됩니다. [코드6-14]의 결과 화면과 비교하면 미세한 차이가 있습니다. 반면 inline-block 키워드를 적용하면 width와 height 속성이 적용되고 margin 속성도 상하좌우로 적용됩니다.
---- inline 키워드 ----
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline;
background-color: red;
width: 100px; height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<p>의미 없는 더미 객체</p>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
<p>의미 없는 더미 객체</p>
</body>
</html>
---- inline-block 키워드 ----
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
#box {
display: inline-block;
background-color: red;
width: 100px; height: 50px;
margin: 10px;
}
</style>
</head>
<body>
<p>의미 없는 더미 객체</p>
<span>더미 객체</span>
<div id="box">대상 객체</div>
<span>더미 객체</span>
<p>의미 없는 더미 객체</p>
</body>
</html>
블록 형식도 width, height, margin 속성을 적용할 수 있습니다. 인라인 형시고가 블록 형식, 인라인 블록의 차이를 알 수 있겠나요? 굉장히 중요한 내용이므로 꼭 짚고 넘어갑시다.
