display를 활용한 CSS 레이아웃

CSS

display 프로퍼티

display 프로퍼티는 HTML 요소들을 레이아웃 하는데 자주 사용된다.

  • display: block; –> block 특성을 가지는 요소로 지정
  • display: inline; –> inline 특성을 가지는 요소로 지정
  • display: inline-block; –> inline-block 특성을 가지는 요소로 지정
  • display: none; –> 요소를 화면에 표시하지 않음(공간도 제거)

각 HTML 요소들은 block 또는 inline의 특성을 가지고 있다.


요소의 종류

block 요소

[1] block 요소 특징

  • 새로운 라인에서 시작
  • width, height, margin, padding 프로퍼티 지정이 가능
  • block 요소내에 inline 레벨 요소를 포함 가능
  • 화면 크기 전체의 가로폭을 차지(width: 100%)

[2] block 요소 종류

  • div
  • ul
  • li
  • p
  • h1~h6
  • table
  • form
  • hr
  • ol


inline 요소

[1] inline 요소 특징

  • 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
  • width, height, margin, padding 프로퍼티 지정이 ‘불’가능
  • inline 요소내에 block 레벨 요소를 포함 ‘불’가능(inline 요소는 일반적으로 block 요소내에 포함되어 사용)
  • content의 너비만큼 가로폭을 차지
  • 상, 하 여백은 line-height로 지정
  • inline 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정

[2] inline 요소 종류

  • span
  • a
  • img
  • strong
  • br
  • input
  • select
  • button
  • textarea


inline-block 요소

[1] inline-block 요소 특징(block과 inline 요소의 특징을 모두 갖음)

  • inline 요소와 같이 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있음
  • block 요소와 같이 width, height, margin, padding 프로퍼티 지정이 가능
  • content의 너비만큼 가로폭을 차지
  • 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어 가능
  • inline-block 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정


display v. visibility

visibility 프로퍼티는 요소를 보이게/안보이게 할 것인지를 정의한다. 즉, 요소의 렌더링 여부를 결정한다.

  • display: visible; –> 해당 요소를 보이게 함 (default)
  • display: hidden; –> 해당 요소를 보이지 않게 함
  • display: collapse; –> table 요소에 사용하며 행이나 열을 보이지 않게 함
  • display: none; –> table 요소의 row나 column을 보이지 않게 함.(IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작)

display:none; 과 visibility:hidden 의 차이

  • display: none;은 해당 요소의 공간까지 사라진다.
  • visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.


display 활용 방법

로고와 navigation을 포함한 Header를 다음과 같이 만들어보자.(React)

최종 Header


현재상태는 다음과 같다.

현재 Header

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// css
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 2000;
  background-color: #fff;
}

// Header component

import React from "react";
import Logo from "../images/logo.png";

const Header = () => {
  return (
    <div id="wrap">
      <header>
        <a className="logo" href="#home">
          <img src={Logo} height="36px" alt="my" />
        </a>
        <nav>
          <ul className="nav-items">
            <li>
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#projects">Projects</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
          </ul>
        </nav>
      </header>
    </div>
  );
};

export default Header;


[1] Navagation을 우측 상단으로 정렬한다.

1
2
3
nav {
  float: right;
}

현재 Header


[2] logo 이미지를 수직으로 중앙 정렬을 한다.

  • logo 이미지를 포함하는 “a” 태그의 height를 img 태그(logo 이미지)와 동일한 height인 36px로 지정한다.
  • header의 height인 60px과 맞추기 위해, 상/하 여백으로 맞추는데, margin을 사용한다.
  • 이때, a 태그는 inline 요소이기 때문에, margin을 적용하기 위해서는 “display: inline-block;”을 설정해야 한다.
1
2
3
4
5
.logo {
  display: inline-block;
  height: 36px;
  margin: 12px 0 12px 25px;
}

현재 Header


[3] Navigation의 각 요소들을 수평정렬한다.

  • 각 Navigation의 요소들은 “li”로 block 요소이기 때문에, “display:inline-block;”로 설정해야한다.
1
2
3
.nav-items > li {
  display: inline-block;
}

현재 Header


[4] 각 Navigation 요소들을 Header와 맞추기 위해 수직으로 중앙 정렬한다.

  • 각 Navigation의 텍스트의 높이를 Header의 height 동일하게 하기 위해 “line-height: 60px;”를 설정한다.
1
2
3
4
5
.nav-items > li > a {
  line-height: 60px;
  padding: 0 30px;
  color: rgba(0, 0, 0, 0.4);
}

현재 Header


[5] 각 Navigation의 텍스트에 Mouse를 갖다대면 색상이 변하게 한다.

  • 가상 셀렉터인 “:hover”를 이용한다.
1
2
3
.nav-items > li > a:hover {
  color: rgba(0, 0, 0, 1.5);
}

현재 Header