display: inline-block;
display: block;
display: inline;
이것들에 대해 알아보기 전에 먼저 간단한 예제를 보자.
<div>안녕하세요</div>
<div>저는 <span>친절한 소나무</span>입니다</div>
출력 결과
안녕하세요
저는 친절한 소나무입니다
<div>태그 뒤에 줄바꿈이 일어나고 <span>태그 뒤에는 줄바꿈이 일어나지 않는 것이 보일 것입니다.
왜 이런 현상이 발생할까요?
두 태그에 border값을 주면 확인할 수 있습니다.
display: block;
<div>태그는 block 요소입니다.
block요소는 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. block이니까 기다란 블럭이라고 생각하면 외우기 쉽겠죠?
p 태그, h 태그#, li 태그 를 한번 떠올려 보세요!
보통 줄바꿈이 되는 경우가 떠오르죠?
또한 width, height 속성을 지정할 수 있다는 특징이 있습니다.
display: inline;
<span>태그는 inline요소 입니다.
block 과 달리 줄 바꿈이 되지 않고, 그 자체 텍스트 성질을 갖고 있습니다. 즉 텍스트 크기만큼만 존재하고 width와 height값을 지정할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
span 태그, b 태그, i 태그, a 태그 등이 이에 해당됩니다.
<a>태그를 많이 써봤을 겁니다. 글 중간에 링크를 달아본 적이 떠오르시지 않나요?
display: inline-block;
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정할 수 있습니다. 즉 inline의 줄바꿈이 되지 않는 텍스트 자체 성질을 가지면서도 block의 크기를 지정할 수 있는 요소를 반반 섞어놓은 것이라고 볼 수 있겠군요!
예를 들어 <a>태그의 style에 display: inline-block; 요소를 주면 어떻게 될까요? 그리고 width와 height값을 넓게 지정해봅시다.
줄이 바꿔지진 않지만 링크 걸려지는 범위가 커져서 다른 사이트로 쉽게 이동할 수 있을 겁니다.
자, 이제 가로로 정렬되어 있는 메뉴를 만드는 실습을 통하여 개념을 확실히 다져봅시다!
<!DOCTYPE html>
<html>
<head>
<title>간단한 메뉴바 만들기</title>
<style>
#topMenu { // 전체 크기 지정
width:850px;
height: 30px;
text-align: center;
}
#topMenu ul li { // 리스트 style을 정의
list-style: none;
border: 1px solid blue;
float: left; // 리스트 정렬
/* float: left; 대신 display: inline-block; 쓰면 양 옆 마진 값이 어쩔 수 없이 존재하게 됨. inline값이 기본적으로 가지고 있는 텍스트 성질 */
background-color: palevioletred;
}
.menuLink { // <a>태그 style을 정의. inline요소임
color: black;
text-decoration: none; // 글 밑에 링크표시 줄을 없앰
text-align: center;
font-size: 10px;
display: inline-block; // inline-block 요소를 지정해 링크가 넓게 걸리게 함
width: 150px; // 그 넓이를 지정
border: 1px solid yellow; // 눈으로 링크 범위를 확인해보자(노란색 테두리)
}
#topMenu ul li:hover {
background-color:tomato;
}
</style>
</head>
<body>
<nav id="topMenu">
<ul>
<li><a class="menuLink" href="#">About us</a></li>
<li><a class="menuLink" href="#">Ministries</a></li>
<li><a class="menuLink" href="#">Community</a></li>
<li><a class="menuLink" href="#">Locations</a></li>
<li><a class="menuLink" href="#">Blog</a></li>
</ul>
</nav>
</body>
</html>
'🧚🏻♂️ HTML , CSS' 카테고리의 다른 글
| CSS - 반응 선택자, 상태 선택자, 구조 선택자 (0) | 2021.09.19 |
|---|---|
| CSS - tag, id, class 선택자, 속성 선택자, 후손 및 자손 선택자 등 (0) | 2021.09.19 |
| HTML 비디오 태그, 폼 태그, 시멘틱 태그 (0) | 2021.09.17 |
| HTML 기본 태그 (0) | 2021.09.17 |
| flexbox에 대하여 (0) | 2020.05.15 |