HTML / CSS 를 만지작거리다 보면 자꾸 헷갈리는 게 있는데, display 이 녀석이 가장 심하다. 특히 flex로 지정했을 때 내 마음대로 안 움직여주는 요소들을 보며... 이녀석 꼭 정리하리라 마음먹었다. 사실 HTML / CSS 정리도 얘때문에 나왔다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<div style="width: 400px; height: 400px; background: skyblue">
<span>This is span element.</span>
</div>
</body>
</html>
결과:
작은 div 박스 안에 간단한 문장이 들어가있다. 현재 <span>태그 뒤에 또 다른 <span>태그를 입력하면 어떻게 될까?
<div style="width: 250px; height: 250px; background: skyblue">
<span>This is span element.</span>
<span style="color: darkorange">This is another span element.</span>
</div>
결과:
첫 번째 span태그에 이어서 그대로 옆에 온다. 이렇게 줄바꿈이 존재하지 않고 같은 줄에 배치되는 요소(Element)를 인라인 요소(Inline element)라 한다. Inline element에는 다음과 같은 태그들이 있다.
ex) span, a, strong, em, img, input 등
여기서 주의할 점은 인라인 요소가 줄바꿈은 일으키지 않지만, 요소 사이에 공백이 존재하면 띄어쓰기로 간주한다.
<span>This is span element.</span><span style="color: darkorange">This is another span element.</span>
처럼 쓰면 각 문장 사이에 띄어쓰기는 사라진다. 위 결과는 두 span 태그 사이에 줄바꿈이 존재하므로 문장 사이에 띄어쓰기가 존재한다. 이때 span 태그 사이에 공백이 얼마나 있든 띄어쓰기 하나로 인식한다.
<span>This is span element.</span>
<span style="color: darkorange">This is another span element.</span>
이거나
<span>This is span element.</span> <span style="color: darkorange">This is another span element.</span>
이거나 똑같다는 이야기.
그런데 위 span을 p로 바꾸면 어떻게 될까?
<div style="width: 250px; height: 250px; background: skyblue">
<p>This is p element.</p>
<p style="color: darkorange">This is another p element.</p>
</div>
결과:
각 p 태그는 특정 높이를 차지한다. 이후 생기는 element는 줄바꿈이 되어 나타난다. 이러한 녀석들을 블록 요소(Block element)라 한다. Block element는 항상 새로운 줄에서 시작하고, 다른 element 아래에 쌓이게 된다. blcok element에는 다음과 같은 태그들이 있다.
ex) p, h1, div
<div style="width: 250px; height: 250px; background: skyblue">
<span>This is span element. And I just write anything in this tag.</span>
<p style="color: darkorange">This is another p element.</p>
</div>
이 코드의 결과도 위와 같다. span tag는 inline element지만, p는 block element로 새로운 줄에서 자신만의 block을 형성한다.
그렇다면 inline-block은 뭘까?
inline-block에 대해 알기 위해서는 inline 과 block의 결정적 차이를 알아야 한다. inline element는 높이와 너비가 없다! 위 span 태그의 style에 height를 얼마나 부여하든 아무런 변화가 없다. 그러나 span을 p로 바꾸면 어떻게 될까?
<div style="width: 250px; height: 250px; background: skyblue">
<p style="height: 100px">This is p element.</p>
<p style="color: darkorange">This is another p element.</p>
</div>
결과:
위 p 태그의 block이 100px이라는 높이를 가지게 되고, 그 다음 p 태그가 해당 block이 끝나는 지점부터 새롭게 자신의 block을 가지게 된다. 그러니까 block element라는 건 정말 자신의 block을 형성하고 있다고 생각하면 된다! 만약 p태그 안에서 텍스트를 길게 적어 여러 줄이 되면 어떻게 될까?
<div style="width: 250px; height: 250px; background: skyblue">
<p>This is p element. And I just write anything for line break.</p>
<p style="color: darkorange">This is another p element.</p>
</div>
결과:
당연한 결과지만 줄바꿈을 한 만큼 밑의 p 태그도 함께 내려온다. 그런데 block의 관점에서 보면 안의 글이 한 줄일 땐 block의 height가 한 줄 높이로 설정이 되고, 줄바꿈이 일어나 두 줄이 되면 block의 height가 두 줄 높이로 설정이 된다! block element는 콘텐츠의 높이에 따라 자동으로 결정된다는 사실. 그래서 height 속성을 명시적으로 지정하지 않는다면 block element의 height는 내부 콘텐츠에 맞춰 유동적으로 변한다.
여기서 다시 inline-block에 대해 알아보자. inline 요소는 height와 width를 갖지 않지만, inline-block은 갖는다!
<div style="width: 250px; height: 250px; background: skyblue">
<span style="display: inline-block; height: 100px">This is span element.</span>
<span style="color: darkorange">This is another span element.</span>
</div>
결과:
첫 번째 span 태그에 이어서 콘텐츠가 쌓이지만, 줄바꿈이 일어나며 100px 아래에서 다음 콘텐츠가 작성된다. 여기서 첫 번째 span 태그의 콘텐츠를 많이 작성해서 줄바꿈이 일어나게 되면 어떻게 될까?
<div style="width: 250px; height: 250px; background: skyblue">
<span style="display: inline-block; height: 100px">This is span element. And I just write anything for line break.</span>
<span style="color: darkorange">This is another span element.</span>
</div>
결과:
짠. 그래서 inline-block 요소는 네비게이션 메뉴 버튼이나 이미지 갤러리 등, 특정 block을 차지하지만 우측에 순차적으로 콘텐츠가 쌓일 수 있도록 하는 항목 배치에 사용된다.
다음 글에서는 flex에 대해 알아본다.
'공부 > 코딩' 카테고리의 다른 글
| JavaScript 정리 1편 : 배열 메서드 (Array Method) (0) | 2024.09.06 |
|---|---|
| HTML / CSS 정리 3편 : Flexbox (0) | 2024.09.01 |
| HTML / CSS 정리 1편: DOM과 HTML, 그리고 Web page (0) | 2024.08.31 |
| Java 이야기 - 객체 지향 프로그래밍 (Object-Oriented Programming) (0) | 2024.08.09 |
| <김영한의 실전 자바: 중급 2편> - 수강 완료 (with 쉽배자) (0) | 2024.08.06 |
