위치 정렬 - display

요소 단위를 내가 원하는 위치에 어떻게 배치할 것인지 알아보자. 

 

 

block 과 inline

---

가장 처음 살펴벌 프로퍼티는 display이다. display는 요소가 보여지는 방식을 지정하는 프로퍼티이다.

 

display에 대해 알아보기 전에 아래의 예시를 보자.

<h1>h1 태그</h1>
<div>div 태그</div>
<span>span 태그</span>
<p>p 태그</p>
<a href="/">a 태그</a>
<article>article 태그</article>
<strong>strong 태그</strong>
<li>li 태그</li>

h1, div, p, article, li {
	background-color: pink;
}
span, a, strong{
	background-color: skyblue;
}

 

예시에서 h1, div, p, article, li 부분의 배경색을 pink로, span, a, strong 부분은 skyblue로 지정했다. 코드를 실행해보면 배경색만 지정했음에도 출력되는 형태가 다음과 같이 각각 다른 것을 확인할 수 있다.

이는 각각의 HTML 태그가 다른 display 프로퍼티 값을 기본 스타일로 가지고 있기 때문이다. HTML 요소들은 display 속성의 기본 값으로 block 혹은 inline을 가지고 있다. 

 

 

 

display: block과 dislpay: inline

---

display: block을 가지고 있는 요소는 항상 새로운 줄에서 시작(따로 너비를 지정하지 않아도 width:100% 을 기본값)

div, h1~h6, p, header, footer, section 등이 이에 해당한다.

 

display: lnline을 가지고 있는 inline 요소는 block과 달리 새로운 줄에서 시작하지 않으며 필요한 만큼의 너비만 가진다. 

즉, 요소의 컨텐츠 크기 만큼만 너비를 가진다. span, a, img 등이 이에 해당한다.

<!-- display: block; 📦-->
<h1>h1 태그</h1>
<div>div 태그</div>
<p>p 태그</p>
<article>article 태그</article>
<li>li 태그</li>

<!-- display: inline; 📏 -->
<strong>strong 태그</strong>
<span>span 태그</span>
<a href="/">a 태그</a>

h1, div, p, article, li {
	background-color: pink;
}
strong, span, a {
	background-color: skyblue;
}

block과 lnline을 어떤 상황에서 응용하는 지 밑의 코드를 보자.

<p class="display_block">
	<a href="https://www.goorm.io/" class="display_inline">
    구름</a>은 <strong class="display_inline">“모두가 개발자가 된다.”</strong>
    라는 비전으로, 구름 서비스를 통해 모두가 개발자가 될 수 있는 
    <em class="display_inline">‘개발자 성장’</em> 
    중심의 생태계를 만들어나가고 있습니다.
</p>

.display_block {
	background-color: pink;
}
.display_inline {
	background-color: skyblue;
}

 

block과 inline은 서로 쓰임이 다르기 때문에 가질 수 있는 프로퍼티도 다르다. 

block의 경우 width, height, margin, padding을 모두 사용할 수 있지만, 

inline은 width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 

<p class="box display_block">display: block;</p>
<span class="box display_inline">display: inline;</span>

.box {
	width: 200px;
	height: 200px;
	margin: 24px;
	padding: 24px;
}
.display_block {
	background-color: pink;
}
.display_inline {
	background-color: skyblue;
}

 

inline-block

---

하지만 display: inline-block을 이용하면 해결할 수있다.

<p class="box display_block">display: block;</p>
<span class="box display_inline">display: inline;</span>
<span class="box display_inline-block">display: inline-block;</span>

.box {
	width: 200px;
	height: 200px;
	margin: 24px;
	padding: 24px;
}
.display_block {
	background-color: pink;
}
.display_inline {
	background-color: skyblue;
}
.display_inline-block {
	display: inline-block;
	background-color: lemonchiffon;
}

 

 

display: none

---

display:none으로 설정하면 브라우저에 해당요소가 출력되지 않는다. 이는 주로 자바스크립트를 이요하여 요소를 사라지거나 나타나게 할 때 쓰인다. 

<ul>
	<li>첫 번째 보이는 요소</li>
	<li>두 번째 보이는 요소</li>
	<li class="hidden">세 번째 보이지 않는 요소</li>
	<li>네 번째 보이는 요소</li>
</ul>

li {
	border: 1px solid pink;
	padding: 12px 24px;
	margin-bottom: 8px;
}
li.hidden {
	display: none;
}