홈페이지 만들기 2 (html/css)

dev_swan·2021년 12월 23일

CSS html

HTML-CSS-JS

목록 보기

16/19

html/css를 이용하여 홈페이지 만들기

오늘은 content 영역을 만들어 보았다.

`<body>`영역

 <div id="content">
            <div id="left">
                    <ul>
                        <li class="game1">
                            <h2>
                                <span>Game Architecture</span>
                                게임 기획
                            </h2>
                            <p>
                                게임기획자를 위한 정석 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                        <li class="game2">
                            <h2>
                                <span>Game Programming</span>
                                게임 프로그래밍
                            </h2>
                            <p>
                                게임프로그래밍을 위한 정석 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                        <li class="game3">
                            <h2>
                                <span>Game Artworks</span>
                                게임 원화
                            </h2>
                            <p>
                                게임 원화를 위한 정석 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                        <li class="game4">
                            <h2>
                                <span>Progamer Coaching</span>
                                프로게이머 코칭
                            </h2>
                            <p>
                                프로게이머 데뷔 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                        <li class="game5">
                            <h2>
                                <span>AR/VR</span>
                                AR/VR
                            </h2>
                            <p>
                                증강현실/가상현실 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                        <li class="game6">
                            <h2>
                                <span>Block Chain</span>
                                블록체인
                            </h2>
                            <p>
                                블록체인 Class
                            </p>
                            <a href="#">바로가기</a>
                        </li>
                    </ul>
            </div>
        </div>

html을 이용해 메뉴얼을 만들기 위해 어제와 같은 방법으로 메뉴를 만들었다.

CSS 영역

#content > #left > ul > li > h2 {
    font-size: 23px;
    color: #2d2d2d;
}

#content > #left > ul > li > h2 > span {
    display: block;
    font-size: 12px;
    color: #4689e1;
}

#content > #left > ul > li > p {
    font-size: 10px;
    width: 50%;
    margin-top: 30px;
}

#content > #left > ul > li > a {
    display: inline-block;
    width: 100px;
    height: 30px;
    background: #81b4f2;
    border-radius: 15px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-top: 21px;
}

"h2" 부분에 글씨 크기와 색상을 조절하였다.
"h2"와"span" 부분에 block 성질을 이용하여 다음칸으로 넘어주고 글씨크기와 색상을 조절하였다.
"p" 부분에 글씨 크기와 위치를 조절하였다.
"a" 부분에 block 성질을 부여하고 글씨 크기와 색상 위치를 조절하고 border-radius를 이용해 동그란 모양으로 만들었다.

#content {
    width: 1200px;
    background: #eee;
    margin: 0 auto;
}

#content > #left {
    float: left;
    width: 604px;
    border: 1px solid #eee;
    border-right: none;
    border-bottom: none;
    box-sizing: border-box;
}

#content > #left > ul > li {
    float: left;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    border-right: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

"content"의 넓이와 배경을 꾸며준후 margin:0 auto로 중심을 잡아주었다.
"left"의 위치를 왼쪽으로 붙인후 넓이를 정하고 border를 이용해 겉면의 선을 만들었다.
"ul"의 "li"들도 넓이를 모두 같게 하고 border를 이용해 겉면의 선을 만들었다.

border를 이용하여 겉면의 선을 만들때 선이 중첩되지 않게 주의할것.

#content > #left > ul > li.game1{
    background: url('./game1.png') no-repeat right 20px bottom 15px;
}

#content > #left > ul > li.game2{
    background: url('./game2.png') no-repeat right 20px bottom 15px;
}

#content > #left > ul > li.game3{
    background: url('./game3.png') no-repeat right 20px bottom 15px;
}

#content > #left > ul > li.game4{
    background: url('./game4.png') no-repeat right 20px bottom 15px;
}

#content > #left > ul > li.game5{
    background: url('./game5.jpg') no-repeat right 20px bottom 15px;
}

#content > #left > ul > li.game6{
    background: url('./game6.jpg') no-repeat right 20px bottom 15px;
}