block, inline, inline-block의 특징 파악

임창현·2022년 10월 18일

block inline inline block

display

display 속성은 요소를 어떻게 보여줄지를 결정하며 주로 4가지 속성값이 쓰인다.

none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태

1. none

요소를 렌더링하지 않도록 설정합니다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않습니다.

none과 visibility 차이!
none : 엘리먼트가 마치 존재하지 않는 것 처럼 페이지가 렌더링 된다.
visibility : hidden; 엘리먼트가 보이지 않더라도 여전히 공간을 차지한다.

2. block

새로운 줄에서 시작하며, 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% )
전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 )
크기값 가질 수 있음 ( width, height 속성을 지정 가능 )
레이아웃을 작업하는 요소로 적합

1) block tag

<div>, <h1>, <p>, <li>, <section>

2) div tag의 기본값

block태그 중 가장 많이 쓰는 태그는 biv태그 이다.
태그를 입력했는데 화면에 안나오는 이유는 뭘까?

기본값 (width, height 따로 설정하지 않았을 때)

// <div></div> 태그 내에 요소가 있는지 없는지에 따라 다르다.

1) 요소 O 
* width : 화면 전체
* height : 요소의 세로 길이 

2) 요소 X
* width : 0
* height: 0

가운데 정렬 방법
div를 화면의 중앙으로 정렬하고 싶을 때,
margin: 0 auto;를 쓰면 본인 기준으로 좌우에 margin이 생겨 화면의 중앙으로 오게 된다.

단, width를 따로 지정해줘야 한다. 지정하지 않으면
width가 100% (margin 없음) 또는 0이기 때문에 div가 가운데로 오지 않는다.

3. inline

줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다

width, height 적용 불가 (HTML 요소의 내용(content)만큼만 차지)
인라인 태그끼리 연속 사용 시, 좌우 약 5px의 margin이 자동 발생
부모 요소의 너비를 초과하면 새 행으로 자동 줄바꿈

1) inline 태그

<img>, <em>, <span>, <b>, <i>, <a>, <strong>

2) 예제

a 태그는 네비게이션 메뉴바를 만들 때 자주 쓰인다.
메뉴를 중앙 정렬 해보자

부모 div 안에 a 태그를 넣은뒤 inline 태그의 중앙 정렬을 위해, 부모 block 요소에 text-align: center를 적용해주자.
(text-align은 부모-block, 자식-inline 또는 inline-block 일 때만 적용된다, display: flex를 이용해도 된다)
중앙으로 a 태그를 모은 다음, 좌우 간격을 위해 margin을 적용한다.

.navBar {
  background-color: gray;
  padding: 10px 0;
  text-align: center;
  /*
  display: flex;
  justify-content: center;
  */
}

.navBar a {
  margin: 0 20px; /* 좌우 간격 */
  color: white;
  text-decoration: none;
}