CSS의 모든 것 7부 - 영역 분할

Posted Jan 12, 2024

By Code Wanderlust 4 min read

전 포스팅까지는 CSS의 속성들에 대해 대부분 언급하였습니다. 이번 마지막 포스팅에서는 홈페이지의 일반적인 배치 구성과 스타일에 대해, 대략적인 HTML코드와 이에 대응하는 CSS를 셋팅해 봤습니다.

1. CSS속성 - 영역 분할

아래는 일반적인 홈페이지를 구성하는 요소들을 이용해서 작성해본 HTML코드와 CSS코드 입니다. 보통 홈페이지를 구성하는 요소들은 header, navigation, side bar, main content, footer들이 있습니다. 이에 대한 자세한 내용은 HTML의 모든것 5부 - HTML의 구조적 정보와 tags, 그리고 head tags을 참조해 주시기 바랍니다. 아래는 예시 코드로 자세한 내용들은 주석처리 하였습니다.

  
    * {
        box-sizing: border-box; /* 모든 tag의 width값이 padding과 border의 두께값까지 포함된 것이 적용되게 해줌. */
    }

    .header {
        background-image: url('something.img');
        padding: 10px;
        color: white;
    }

    body{
        margin: 0;
    }

    .nav ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: blue;
    }

    .nav ul li {
        float: left; /* 위로 뜬다는 의미로, tag들 위로 떠서 왼쪽으로 가고, 그 뒤에 나머지 tag들은 계속 왼쪽방향으로 둘러싸집니다. */
        position: relative; /* 자식 tag들이 위치를 정할때, 부모 tag의 위치를 기준으로 위치를 잡습니다. */
    }

    .nav ul::after { /* 여기서 after는 pseudo element로, 가상 엘리먼트를 의미합니다.  */
        content: " ";
        display: table;
        clear: both; /* float 속성값이 left이던, right이던 둘다 그 속성을 해지한다는 의미 이다. */
    }

    .nav ul li a {
        display: block;
        padding: 10px 20px;
        text-decoration: none; /* 밑줄이 없어짐 */
        white-space: nowrap; /* 줄바뀜이 안됨 */
        color: white;
    }

    .nav li:hover > a{ /* nav class에 있는 li에 hover되었을때, 그 자식 a tag들에 적용시킨다는 의미. */
        background-color: red;
    }

    .nav li ul{
        display: none; /* sub menu가 마우스 위로 올라가기 전까지는 안보이게 하고 싶기 때문에, 이렇게 설정함. */
        background: gray;
    }

    .nav li:hover > ul{ /* 마우스를 올렸을때, sub menu가 보이도록 설정함. */
        display: block;
        position: absolute;
    }

    .nav ul ul ul{ /* 3단계 메뉴에 위치속성을 지정함. */
        left: 100%;
        top: 0;
    }

    .side {
        float: left;
        padding: 10px;
        width: 150px;
    }

    .main{
        float:left;
        padding: 10px;
        width: calc(100% - 150px); /* 마이너스 양쪽으로 space를 반드시 입력해야함.  */
    }

    .footer{
        clear: both;
        background-color: lightgray;
        padding: 10px;
        text-align: center;
    }

  
<!DOCTYPE html>
<html>
    <head>
        <title>My website</title>
        <link rel="stylesheet" href="somewhere/style.css">
    </head>
    <body>
        <div class="header">
            <h1>Welcome to my homepage</h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Services</a>
                    <ul>
                        <li><a href="#">Service 1</a></li>
                        <li><a href="#">Service 2</a></li>
                        <li><a href="#">Service 3</a>
                            <ul>
                                <li><a href="#">Item 1</a></li>
                                <li><a href="#">Item 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
            </ul>
        </div>

        <div class="side">
            <h2>Side</h2>
            <p>This is Side bar</p>
        </div>

        <div class="main">
            <h2>Main Content</h2>
            <p>Main content 1</p>
            <p>Main contetn 2</p>
        </div>

        <div class="footer">
            <h1>Footer</h1>
        </div>


    </body>
</html>

Web, CSS

This post is licensed under CC BY 4.0 by the author.

1. CSS속성 - 영역 분할

Trending Tags