생각 작업실 The atelier of thinking

16. <CSS> 레이아웃 - float, display 본문

웹(Web) 이야기

16. <CSS> 레이아웃 - float, display

knowledge-seeker 2024. 2. 21. 11:09

지난 회차에는 레이아웃의 종류 및 구성 요소 등에 대해서 알아봤습니다. 이번 회차에는 직접 레이아웃을 작성해보겠습니다.
레이아웃을 작성할 때 알아두면 좋은 HTML의 시맨틱 태그(Semantic Tag)에 대해서 먼저 간단히 알아보겠습니다.

 

 

1. 시맨틱 태그(Semantic Tag)

 

시맨틱 태그는 문서 구조와 의미를 명확하게 전달하는 역할을 하는 태그들을 말합니다. 시맨틱 태그는 웹페이지의 구조를 이해하고 해석하는 데 도움을 주며, 검색 엔진 최적화(SEO)나 웹 접근성을 향상시키는 데에도 기여합니다. 시맨틱 태그를 사용하면 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.

[ 시맨틱 태그 예시 ]

<article>
<aside>
<details>
<figcaption>, <figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>

 

(1) <header>


문서나 섹션의 헤더를 나타냅니다. 주로 제목, 로고, 네비게이션 등이 포함됩니다.


(2) <nav>


네비게이션 링크를 그룹화합니다. 주로 메뉴나 링크 목록에 사용됩니다.


(3) <main>


문서의 주요 내용을 포함합니다. 페이지에는 하나의 <main> 요소만 사용해야 합니다.

 

(4) <article>


독립적으로 구분되거나 재사용 가능한 콘텐츠 영역을 나타냅니다. 블로그 포스트, 뉴스 기사 등이 예시입니다.


(5) <section>


문서의 섹션을 나타냅니다. 주로 연관된 콘텐츠를 그룹화할 때 사용됩니다.


(6) <aside>


주요 콘텐츠와 직접적인 관련이 없는 부가 정보를 나타냅니다. 사이드바나 콜아웃 박스 등에 사용될 수 있습니다.


(7) <footer>


문서나 섹션의 푸터를 나타냅니다. 주로 저작권 정보, 연락처, 관련 링크 등이 위치합니다.


(8) <figure>와 <figcaption>


이미지나 도표, 그래프 등의 콘텐츠와 캡션을 나타냅니다. <figure>는 콘텐츠를 감싸고, <figcaption>은 캡션을 제공합니다.

2. Holy Grail Layout

이번 회차에 작성해 볼 레이아웃은 Holy Grail Layout 으로 성배를 찾아다녔지만 못찾은 것처럼 많은 앞선 프로그래머들이 위와 같은 레이아웃을 만들기 위해 성배를 찾는 것만큼 힘들었다는데서 유래되었다고 합니다.

 

HTML의 시맨틱 태그와 CSS 속성을 이용하여 단계적으로 만들어 보겠습니다.
웹페이지가 어떻게 바뀌는 지 보면서 코드를 하나씩 확인해 보시기 바랍니다.

 

3. HTML 구문

 

<header>,<nav>,<section>,<article>,<footer> 태그를 사용하여 아래와 같이 코드를 작성하였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Layout</title>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>
    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
    <section class="row">
        <article class="column">
            <h3> Column 1</h3>
            <p> Content</p>
        </article>
        <article class="column">
            <h3> Column 2</h3>
            <p> Main Content </p>
        </article>
        <article class="column">
            <h3> Column 2</h3>
            <p> Content</p>
        </article>
    </section>
    <footer>
        <p>Footer</p>
    </footer>
</body>
</html>

 

4. CSS 구문

 

CSS 구문을 이용하여 각 부분을 꾸며보겠습니다.

 

(1) header 태그

 <style>
        header{
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
    </style>

 

배경색 (background-color), 텍스트 위치(text-align), 여백(padding) 속성을 이용하여 헤더부문을 위와 같이 나타냈습니다.

 

(2) nav 태그

네비게이션 링크를 그룹화합니다.

nav {
      overflow: hidden;
      background-color: #333;
     }
 nav a {
        float: left;
        display: block;
        color: #f1f1f1;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        }
 nav :hover {
        background-color: #ddd;
        color: black;
        }

 

▶ overflow 속성은 요소의 내용이 요소의 상자에 맞지 않을 때 어떻게 처리할지를 지정하는 속성입니다. 주로 박스의 크기가 내용보다 작을 때 발생하는 오버플로우(overflow)를 처리하는 데 사용됩니다.
hidden 값은 요소의 내용이 상자를 벗어나면 가려져서 보이지 않게 됩니다. 가려진 부분은 잘립니다.

▶  text-decoration: none; 을 이용하여 a 태그의 밑줄을 없앴습니다.

▶ 가상셀렉터인 hover를 이용하면 마우스를 올리면 아래와 같이 바뀌게 됩니다.

 

 

▶ float는 주로 블록 레벨 요소를 좌우 방향으로 띄우거나, 텍스트를 이미지 주위로 띄우는 등의 레이아웃 설계에 사용됩니다. <a> 태그를 왼쪽으로 나란히 배치하게 만들어 주었습니다.

▶ display는 요소를 어떻게 표시할지를 지정합니다. HTML 문서의 각 요소는 기본적으로 특정한 display 값으로 설정되어 있습니다. 이 값을 변경하여 요소의 레이아웃을 조정하거나, 시각적인 표현 방식을 바꿀 수 있습니다.
block은 해당 요소를 블록 레벨 요소로 설정합니다. 즉, 요소는 새로운 라인에서 시작하고, 가능한 가로 영역을 모두 차지합니다.

 

(3) contents 부문 - section 태그, article 태그

 

* {
   box-sizing: border-box;
   }
.column {
         float: left;
         width: 33.33%;
         padding: 15px;            
        }

 

▶ * 는 전체를 나타냅니다. 여기서는 body 안의 모든 태그를 의미합니다.

 

▶  box-sizing은 CSS 속성 중 하나로, 박스 모델에서 요소의 크기를 어떻게 계산할지를 지정합니다. 기본적으로 HTML 요소의 크기는 해당 요소의 콘텐츠 크기와 여백(padding) 및 테두리(border)를 포함합니다. box-sizing 속성을 사용하면 이 계산 방식을 변경할 수 있습니다.


content-box (기본값)는 요소의 크기는 콘텐츠 박스만을 포함합니다. 여백과 테두리는 요소의 크기에 추가되지 않습니다.
border-box는 요소의 크기는 콘텐츠 박스, 여백(padding), 그리고 테두리(border)를 모두 포함합니다. 이 값은 주로 사용자가 요소의 크기를 더 직관적으로 제어하고자 할 때 유용합니다. 
border-box 값을 사용하면, 예를 들어 요소의 너비를 변경하더라도 테두리와 여백이 포함된 크기가 변하지 않습니다. 이는 레이아웃을 설계하고 구현할 때 편리하게 사용될 수 있습니다.

 

▶  width : 33.33% 로 너비(폭)이 모두 같게 만들어 봤습니다.

 

양쪽 side bar와 중앙의 너비를 다르게 하려면, 아래와 같이 양쪽 side와 가운데 부분을 다른 class로 설정하고 너비(width)를 다르게 설정하면 됩니다.

 

<HTML>

<section class="row">
        <article class="column side">
            <h3> Column 1</h3>
            <p> Content</p>
        </article>
        <article class="column middle">
            <h3> Column 2</h3>
            <p> Main Content </p>
        </article>
        <article class="column side">
            <h3> Column 3</h3>
            <p> Content</p>
        </article>
    </section>

 

<CSS>

 .column {
            float: left;
            text-align: center;
            padding: 15px;
            border: 1px solid gray;            
        }
 
 .column.side {
            width: 25%;
        }
 
 .column.middle {
            width: 50%;
        }
 .row::after {
       content: '';
       display: table;
       clear: both;
        }

 

▶ ::after는 가상 요소 중 하나로, 선택한 요소의 가장 뒤에 내용을 생성하는 데 사용됩니다. 이를 통해 선택한 요소에 시각적인 요소를 추가하거나 스타일링할 수 있습니다.
여기서는 column 이후의 float를 제거합니다.

 

(4) footer 태그

 

  footer {
            background-color: #ddd;
            text-align: center;
            padding-top: 30px;
        }

 

 

▶  footer를 작성함으로써 layout 작성은 마무리 하였습니다.

'웹(Web) 이야기' 카테고리의 다른 글

18. <CSS> Grid Layout 예제  (1) 2024.02.24
17. <CSS> 그리드 레이아웃 (Grid Layout)  (0) 2024.02.22
15. <CSS> 레이아웃(Layout)  (0) 2024.02.20
14. <CSS> 박스모델  (1) 2024.02.19
13. <CSS>에서 색상(Color) 표현 방법  (1) 2024.02.18
'웹(Web) 이야기' Related Articles more