본문 바로가기
실습

HTML + CSS로 간단한 홈페이지 만들기 실습

by 코딩쥐 2024. 7. 13.

 flex까지 배운 상태에서 정말 간단한 홈페이지를 만드는 실습을 해봤다. 실습을 계속해서 하고 있기는 하지만, 역시 지식으로 아는 것과 직접 하는 것은 엄청난 차이가 있다는 것을 새삼 실감한다. 

 

<홈페이지>

  • HTML 시맨틱 태그로 홈페이지 내용을 작성함
  • 메뉴(nav)의 경우 <ul>태그 사용 및 display: inline-block; 을 사용함
  • header와 footer의 경우에는 배치를 하기 위해서 display: flex; 적용함
  • main에 display: flex;를 사용하여 section과 aside를 배치함

 

  • nav의 경우 display: sticky;를 주어서 밑으로 스크롤을 해도 계속해서 상단에 유지될 수 있도록 함

 

  • 미디어쿼리를 이용해서 max-width가 760px일 때 main 부분의 flex-direction: column;으로 설정하였고, aside의 순서를 1로 변경하여 section보다 먼저 나올 수 있게 함
  • :hover를 이용하여, <a>태그에 마우스를 가져놓았을 때 글자 아래로 밑줄이 생기게 함

 

 

<HTML코드>

더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="homepage.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
        </ul>
    </nav>
    <header> 
        <h1>홈페이지 타이틀</h1>
    </header>
    <main>
    <section>
        <article>
            <h2><a href="#">제목</a></h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
            </p>
        </article>
        <article>
            <h2><a href="#">제목</a></h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
            </p>
        </article>
        <article>
            <h2><a href="#">제목</a></h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
            </p>
        </article>
        <article>
            <h2><a href="#">제목</a></h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, alias hic beatae laborum libero neque
                odio maiores tempore voluptatem dolor possimus qui molestias vero eligendi porro, reiciendis dolores,
                minus in.
            </p>
        </article>
    </section>
    <aside>
        <h2> 사이드바 </h2>
        <ul>
            <li><a href="#">주소1</a></li>
            <li><a href="#">주소2</a></li>
            <li><a href="#">주소3</a></li>
        </ul>
    </aside>
</main>
    <footer>
        <h2> 코딩쥐의 공부방 </h2>
    </footer>
</body>

</html>

 

<CSS코드>

더보기
    /* homepage.css */

    /* 초기화 */
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            text-decoration: none;
            color: black;
        }
        body{
            width: 100vw;
            height: 100vh;
        }
        /* 공통된 애니메이션 */
        a:hover{
            text-decoration: underline;
        }
        /* nav 스타일 */
        nav {
            background-color: rgb(238, 220, 255);
            position:sticky;
            top:0px;
        }
        nav ul li{
            list-style: none;
            display: inline-block;
            padding: 30px;
        }

        /* header 스타일 */
        header{
            height: 30vh;
            background-color: rgb(255, 226, 197);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2em;
        }

        /* main 스타일 */
        main{
            display: flex;
        }
        /* section과 article 스타일 */
        section{
            flex-basis: 70vw;
            flex-grow: 2;
            flex-shrink: 1;
            background-color: lightyellow;
        }
        article{
            margin: 10px;
            padding: 20px;
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            background-color: rgb(255, 255, 184)

        }
        article>h2{
            margin-bottom: 10px;
        }

        /* aside 스타일 */
        aside{
            background-color: rgb(190, 255, 190);
            flex-grow: 1;
            padding: 30px;  
        }
        aside ul{
            padding: 20px;
            line-height: 40px;
        }

        /* footer 스타일 */
        footer{
            background-color: rgb(198, 198, 198);
            padding: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        @media(max-width: 760px){
            main{
                flex-direction:column;  
            }
            aside{
                order: 1;
            }
            section{
                order: 2;
            }
        }