[HTML] display

display의 여러가지 속성을 사용하여 요소를 원하는 곳에 배치, 또는 나타나게 해보자.

 

---

div 태그

div 태그는 혼자서 한 줄을 차지하는 block 속성의 태그로 division, 즉 영역을 구분하기 위한 태그다.
div태그만 단독으로 사용할시 p태그와 큰 차이가 없으며 주로 style과 여러 속성을 같이 사용하여 각 영역마다 다양한 스타일을 만들기 위해 사용한다.

가장 많이 사용하게 될 것이고, 기본이 되는 태그이기 때문에 이 태그에 익숙해져야만 한다.

 

---

 

display의 다양한 속성

display : 영역을 설정하여 화면에 출력했을때 보여지는 형태.

block / inline / inline-block

block 속성

• 혼자서 한 줄을 차지한다.
• 연속적으로 배치하면 세로로 배치된다.
• style을 이용하여 너비(width), 높이(height)를 지정할 수 있다.
• 대표적으로 div태그를 사용하여 영역을 설정하면 그 영역은 기본적으로 block이 된다.

inline 속성

• 한 줄에 여러 요소를 배치할 수 있다.
• 연속적으로 배치하면 가로로 배치된다.
• style을 이용하여 너비 및 높이를 지정해도 적용되지 않는다.
• 대표적으로 span을 이용하여 영역을 지정했을 경우 해당 영역은 inline속성을 갖게 된다. 높이/너비 지정이 불가하기 때문에 주로 글씨의 영역을 정해 폰트 크기 및 색상 등을 변경할 때 사용한다.

inline-block 속성

• inline과 block의 특성을 합친 형태
• 한 줄에 여러 요소를 배치할 수 있고, 가로로 배치된다.
• inline과는 달리 너비 및 높이를 지정할 수 있으며 다양한 style을 적용할 수있다.
• div를 이용하여 style에  display: inline-block; 을 작성해주면 적용된다.

 

flex / none

flex 속성

• 요소를 쉽게 수평, 수직으로 정렬 할 수 있다.
• 자식 요소들은 부모의 크기에 맞춰 자동으로 크기가 조절된다.
• justify-content, align-items, align-content 등의 속성을 사용하여 요소 간의 간격을 세밀하게 제어할 수 있다.

<div style="display: flex; justify-content: space-between;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

 

none 속성

• 요소가 화면에서 보이지 않는다. (말 그대로 none임)
• 요소가 화면에서 사라지면 해당 요소가 차지하던 공간도 함께 사라진다.

<div style="display: none;">
  이 텍스트는 화면에 보이지 않는다.
</div>

 

---

위 요소들만 잘 활용해도 웹 페이지를 제작할 때 신기한 기능들 구현이 가능하다.

특히, flex요소를 잘 활용해야 요소 배치가 쉬워질 것 같다.