코딩 스쿨 CSS

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ CSS Tutorial
CSS HOME
CSS Introduction
CSS Syntax
CSS Selectors
CSS How_To
CSS Comments
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Padding
CSS Height-Width
CSS Box Model
CSS Outline
CSS Text
CSS Fonts
CSS Icons
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Combinators
CSS Pseudo-class
CSS_Pseudo-element
CSS_Opacity
CSS Navigation_Bar
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attr Selectors
CSS Forms
CSS Counters
CSS Website Layout
CSS Units
CSS Specificity
CSS !important
CSS Math Functions

CSS Display

CSS Display: 웹 페이지에서 요소를 배치하는 방법

CSS Display 속성은 HTML 요소가 화면에 표시되는 방식을 결정하는 중요한 속성입니다. Display 속성을 사용하면, 요소가 블록 요소, 인라인 요소, 플렉스 박스, 그리드 등 다양한 방식으로 배치되며, 웹 페이지의 레이아웃을 효율적으로 관리할 수 있습니다. 이 자료에서는 CSS Display 속성을 활용하여 레이아웃을 제어하는 다양한 방법을 다룹니다.

1. Display 속성의 기본 값

Display 속성은 HTML 요소가 어떻게 배치되고 렌더링될지를 정의합니다. HTML 기본 요소는 크게 두 가지로 분류됩니다:

  1. 블록 레벨 요소(Block-level elements): 화면에서 새 줄에 배치되고, 가로 전체를 차지하는 요소. 예: <div>, <h1>, <p>, <section>.
  2. 인라인 요소(Inline elements): 콘텐츠 안에 삽입되고, 내용의 크기만큼 공간을 차지하는 요소. 예: <span>, <a>, <strong>.

기본적으로 요소는 HTML 태그에 따라 적절한 display 값이 설정되지만, 이를 CSS로 수정할 수 있습니다.

기본 display 예시:

div {
    display: block;
}

span {
    display: inline;
}

2. display: block (블록 레벨 요소)

display: block 속성은 해당 요소가 블록 레벨 요소로 작동하게 만듭니다. 이 요소는 새로운 줄에 배치되고, 가로 전체를 차지합니다. 기본적으로 블록 요소는 다른 요소 위에 쌓입니다.

예시:

div {
    display: block;
    width: 100%; /* 부모 요소의 전체 너비를 차지 */
    padding: 10px;
    background-color: #f0f0f0;
}

위 코드는 div 요소를 블록 요소로 정의하고, 가로 전체를 차지하게 만듭니다. 이는 기본 블록 레벨 요소의 동작 방식입니다.

3. display: inline (인라인 요소)

display: inline 속성은 요소가 인라인 요소로 작동하도록 만듭니다. 이 요소는 다른 요소들과 한 줄에 배치되며, 콘텐츠 크기만큼의 공간만 차지합니다.

예시:

span {
    display: inline;
    color: red;
}

위 코드는 span 요소가 텍스트 안에 삽입되며, 인라인 요소로 작동하게 만듭니다. 인라인 요소는 너비와 높이 값을 지정할 수 없으며, 마진과 패딩이 제한적으로 적용됩니다.

4. display: inline-block

  • *display: inline-block*은 인라인 요소처럼 한 줄에 배치되면서도, 블록 요소처럼 너비와 높이를 지정할 수 있습니다. 이 속성은 인라인 배치와 블록 스타일의 장점을 결합한 방식으로, 자주 사용됩니다.

예시:

button {
    display: inline-block;
    width: 150px;
    height: 50px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
}

위 코드는 버튼 요소를 인라인블록으로 설정하여 가로 및 세로 크기를 지정하면서, 다른 요소들과 같은 줄에 배치됩니다.

5. display: none (요소 숨기기)

display: none 속성은 해당 요소를 화면에서 완전히 숨기고 공간도 차지하지 않게 만듭니다. 요소가 DOM에 남아 있지만, 사용자에게는 보이지 않으며, 해당 요소의 공간도 배제됩니다.

예시:

div.hidden {
    display: none;
}

위 코드는 div 요소에 hidden 클래스를 추가하면 화면에서 완전히 사라지게 설정합니다. 이 속성은 요소를 숨길 때 자주 사용됩니다.

6. display: flex (플렉스 박스)

  • *display: flex*는 **플렉스 박스 레이아웃(Flexbox)**을 적용하여 자식 요소들을 정렬하고, 배치 및 정렬을 효율적으로 관리할 수 있습니다. 플렉스 박스는 가로 및 세로 방향에서의 정렬과 공간 분배를 쉽게 할 수 있는 강력한 레이아웃 시스템입니다.

기본 플렉스 박스 레이아웃 예시:

.container {
    display: flex;
    justify-content: space-between; /* 자식 요소 사이에 간격 배분 */
    align-items: center; /* 자식 요소를 수직으로 중앙 정렬 */
}

.item {
    padding: 10px;
    background-color: #ffeb3b;
}

위 코드는 플렉스 컨테이너와 플렉스 아이템을 설정하여, 자식 요소가 가로로 배치되고 공간을 효율적으로 분배합니다. **justify-content**와 align-items 속성을 사용해 가로와 세로에서 자식 요소를 정렬할 수 있습니다.

7. display: grid (그리드 레이아웃)

  • *display: grid*는 그리드 레이아웃을 사용해 **행(row)**과 **열(column)**로 요소를 정렬합니다. 그리드 레이아웃은 복잡한 레이아웃을 손쉽게 구현할 수 있는 강력한 도구로, 페이지 레이아웃을 만들 때 자주 사용됩니다.

기본 그리드 레이아웃 예시:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3개의 동일한 열로 분할 */
    gap: 10px; /* 각 셀 사이에 10px 간격 추가 */
}

.item {
    background-color: #2196F3;
    color: white;
    padding: 20px;
}

위 코드는 그리드 레이아웃을 설정하여 3개의 열로 구성된 레이아웃을 만들고, 각 요소 간의 간격을 10px로 설정합니다. **grid-template-columns**를 사용해 열의 크기와 개수를 쉽게 조정할 수 있습니다.

8. display: table (테이블 레이아웃)

  • *display: table*은 해당 요소를 테이블 레이아웃처럼 배치합니다. 이 속성은 HTML의 테이블 요소를 사용하지 않고도 테이블 형태의 레이아웃을 만들 수 있습니다.

테이블 레이아웃 예시:

.container {
    display: table;
    width: 100%;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid #ddd;
}

위 코드는 div 요소를 사용해 테이블 스타일 레이아웃을 구현하는 예시입니다. **display: table**은 요소들을 테이블 행과 셀로 정렬하는 데 유용합니다.

9. display: contents

  • *display: contents*는 요소의 부모 역할은 유지하면서, 해당 요소 자체는 렌더링에서 제외되는 속성입니다. 이 속성은 요소가 레이아웃에 영향을 미치지 않으면서도 자식 요소들만 표시될 수 있게 해줍니다.

예시:

.container {
    display: contents;
}

.container > div {
    padding: 20px;
    background-color: #03a9f4;
}

위 코드는 container 요소는 렌더링되지 않지만, 자식 요소들은 여전히 화면에 표시됩니다. 이를 통해 레이아웃에서 요소의 중간 단계를 제거하고 자식 요소만 유지할 수 있습니다.

10. display: inline-flex 및 display: inline-grid

  • *display: inline-flex*와 display: inline-grid 속성은 플렉스 박스 또는 그리드 레이아웃을 인라인 요소처럼 사용하게 해주는 속성입니다. 즉, 한 줄에 배치되면서도 플렉스 박스나 그리드 레이아웃의 기능을 사용할 수 있습니다.

display: inline-flex 예시:

.container {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.item {
    padding: 10px;
    background-color: #8BC34A;
    color: white;
}

위 코드는 인라인 플렉스 박스 레이아웃을 사용하여 한 줄에 배치된 요소들이 플렉스 박스의 정렬 및 간격 기능을 사용하는 예시입니다. inline-flex는 플렉스 박스의 장점을 유지하면서도 다른 인라인 요소와 나란히 배치됩니다.

display: inline-grid 예시:

.container {
    display: inline-grid;
    grid-template-columns: repeat(3, 100px); /* 3개의 열로 구성 */
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 10px;
    color: white;
}

이 예시에서는 그리드 레이아웃을 사용하되, 그리드 컨테이너가 인라인 요소처럼 한 줄에 배치됩니다. 이 방식은 그리드 레이아웃을 적용하면서도, 다른 인라인 요소들과 나란히 배치해야 할 때 유용합니다.

11. display: flow-root

display: flow-root 속성은 요소가 자체적인 **블록 포맷 컨텍스트(Block Formatting Context)**를 생성하게 만듭니다. 이 속성은 부모 요소에서 발생하는 부동(float) 문제를 해결하는 데 자주 사용됩니다. 플로팅 요소의 **중단(clearfix)**을 설정하거나 부모 요소가 자식 요소의 높이를 포함하지 않는 문제를 해결할 수 있습니다.

display: flow-root 예시:

.container {
    display: flow-root;
    background-color: #E0E0E0;
    padding: 20px;
}

.float-element {
    float: left;
    width: 50px;
    height: 50px;
    background-color: #4CAF50;
}

이 코드는 플로팅 요소가 있는 상황에서 부모 요소가 자식 요소를 감싸지 않는 문제를 해결하기 위해 **flow-root**를 사용합니다. flow-root는 요소가 자체적으로 블록 포맷 컨텍스트를 생성하여, 플로팅 요소의 레이아웃을 정리합니다.

12. display: list-item

display: list-item 속성은 요소가 목록 항목처럼 작동하게 만듭니다. 이는 주로 <li> 태그에 사용되지만, 다른 요소에도 적용해 목록 스타일을 만들 수 있습니다.

display: list-item 예시:

div {
    display: list-item;
    list-style-type: disc; /* 기본 목록 아이콘으로 설정 */
    margin-left: 20px;
}

위 코드는 div 요소를 목록 항목처럼 스타일링하여, 텍스트 앞에 목록 아이콘을 추가합니다. 이 방법은 목록이 아닌 요소에도 목록 스타일을 적용하고 싶을 때 유용합니다.

13. display: run-in

  • *display: run-in*은 요소가 상황에 따라 블록 또는 인라인 요소로 동작하는 특별한 속성입니다. 이 속성은 일반적으로 제목 요소가 그 뒤에 따라오는 콘텐츠와 한 줄로 결합되거나 별도의 블록 요소로 동작할 때 사용됩니다.

display: run-in 예시:

h2 {
    display: run-in;
    font-weight: bold;
    color: #2196F3;
}
p {
    margin-top: 0;
}

위 코드는 h2 요소가 인라인처럼 p 요소와 한 줄에 결합되어 표시됩니다. run-in 속성은 헤드라인과 본문이 하나의 줄로 연결되도록 할 때 유용하지만, 브라우저에 따라 지원이 제한적이기 때문에 주의가 필요합니다.

14. display: inherit, initial, unset

display: inherit, display: initial, **display: unset**은 특정 상황에서 상속 또는 초기화를 처리할 수 있는 속성입니다.

  • inherit: 부모 요소의 display 값을 상속합니다.
  • initial: 요소의 기본값으로 초기화합니다.
  • unset: 상속받을 수 있는 경우에는 상속하고, 그렇지 않으면 초기화합니다.

예시:

.child {
    display: inherit; /* 부모의 display 값 상속 */
}

위 코드는 부모 요소의 display 속성을 자식 요소에 상속하여 동일한 레이아웃 방식을 유지합니다.

15. 다양한 레이아웃 스타일을 결합한 예시

CSS Display 속성을 사용하면 다양한 레이아웃을 쉽게 결합할 수 있습니다. 예를 들어, 플렉스 박스와 그리드를 함께 사용하거나, 인라인 요소와 블록 요소를 결합하여 페이지 레이아웃을 효율적으로 관리할 수 있습니다.

다양한 레이아웃을 결합한 예시:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    display: inline-block;
    padding: 10px;
    background-color: #FF5722;
    color: white;
    text-align: center;
    width: 100px;
    height: 100px;
}

위 코드는 그리드 레이아웃을 사용하여 페이지를 구성하고, 플렉스 박스를 통해 내부 요소를 가로로 배치한 예시입니다. 각 요소는 인라인블록으로 설정되어 여러 요소가 한 줄에 배치되면서도 고정된 크기를 유지합니다.

CSS Display 속성은 웹 페이지의 레이아웃을 관리하고, 요소들이 어떻게 화면에 표시될지 제어하는 데 중요한 도구입니다. 블록 레벨 요소와 인라인 요소에서부터 플렉스 박스, 그리드 레이아웃에 이르기까지, 다양한 옵션을 통해 복잡한 레이아웃을 쉽게 구축할 수 있습니다.

적절한 디스플레이 속성을 활용하여 웹 페이지의 구조와 사용자 경험을 최적화하고, 요소 간의 배치를 유연하게 관리함으로써 더 효율적이고 직관적인 디자인을 구현할 수 있습니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com