[FrontEnd1] 4월 다섯째주 한페이지 개념 정리

SMALL

안녕하세요~ 보라해바라기 입니다:)

벌써 5월이 다가왔군요 ㅎㅎ

4월 개념은 4월 안에 다 정리하고 싶었지만... 5월이 되었네요...?ㅎㅎ

그래도 늦은 만큼 더 열심히 복습했답니다.

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review(220501)</title>
    <link rel="stylesheet" href="./css/review(220501).css">
</head>
<body>
    <h1>4월 5째주 개념 정리</h1>
    <div id="wrap">
        <div id="r1">
            <div id="c1">
                <h4>margin과 padding + border-radius (시계방향 순, padding도 동일)</h4>
                <div id="left">
                    <div id="margin1">
                        margin: 20px 
                        <br>(전체 margin이 20px)
                    </div>
                    <div id="margin2">
                        margin: 20px 40px
                        <br>(위, 아래: 20 <br>좌, 우: 40)
                    </div>
                </div>
                <div id="right">
                    <div id="margin3">
                        margin: 20px 40px 60px
                        <br>(위: 20, 좌, 우: 40, <br>아래: 60)
                    </div>
                    <div id="margin4">
                        margin: 20px 40px 60px 80px
                        <br>(위: 20, 우: 40, <br>아래: 60, 좌:80)
                    </div>
                </div>
            </div>
            <div id="c2">
                <h4>relative (div 가로)</h4>
                <div id="div1">
                    1
                </div>
                <div id="div2">
                    relative 
                    <br>(top, left 30)
                </div>
                <div id="div3">
                    3
                </div>
            </div>
            <div id="c3">
                <h4>relative (div 세로)</h4>
                <div id="div1">
                    1
                </div>
                <div id="div2">
                    relative 
                    <br>(top, left 30)
                </div>
                <div id="div3">
                    3
                </div>
            </div>
        </div>
        <div id="r2">
            <div id="c1">
                <h4>absolute (부모 요소 기준점 X)</h4>
                <div id="div1">
                    div1
                </div>
                <div id="div2">
                    <b>body</b>를 기준으로 정렬됨.
                    <br>(top 300, left 20)
                </div>
                <div id="div3">
                    div3
                </div>
            </div>
            <div id="c2">
                <h4>absolute (부모 요소 기준점 O)</h4>
                <div id="div1">
                    div1
                </div>
                <div id="div2">
                    <b>c2(부모요소)</b>를 기준으로 정렬됨.
                    <br>(top 70, left 70)
                    <br>c2에 position:relative
                </div>
                <div id="div3">
                    div3
                </div>
            </div>
            <div id="c3">
                <h4>폰트(ttf파일, link, import)</h4>
                <div id="ttf">
                    보라해바라기
                </div>
                <div>
                    link, import는 html head에서 가능
                </div>
            </div>
        </div>
        <div id="r3">
            <div id="c1">
                <h4>팝업창 (relative)</h4>
                <div id="contents">
                    <div id="popup">
                        popup
                    </div>
                    <div id="notice">
                        <p>안녕하세요. 저는 보라해바라기입니다.</p>
                        <p>제가 이 글을 쓰는 이유는 스크롤이 넘어가도록 하기 위해서입니다.</p>
                        <p>제가 보여드리고 싶은 것은 팝업창을 relative로 설정했을 때, 
                            팝업창이 고정되지 않고 움직이는 모습입니다.</p>
                    </div>
                </div>
            </div>
            <div id="c2">
                <h4>팝업창 (fixed)</h4>
                <div id="contents">
                    <div id="popup">
                        popup
                    </div>
                    <div id="notice">
                        <p>안녕하세요. 저는 보라해바라기입니다.</p>
                        <p>제가 이 글을 쓰는 이유는 스크롤이 넘어가도록 하기 위해서입니다.</p>
                        <p>제가 보여드리고 싶은 것은 팝업창을 fixed로 설정했을 때, 
                            팝업창이 고정된 모습입니다.</p>
                    </div>
                </div>
            </div>
            <div id="c3">
                <h4>이미지 스프라이트</h4>
                <div id="search"></div>
                <br>
                <div id="lock"></div>
                <br>
                <div id="gmarket-logo"></div>
            </div>
        </div>
    </div>
</body>
</html>

2. css

@charset "utf-8";

@font-face{
    src: url(../fonts/GmarketSansTTFLight.ttf);
    font-family: 'gmarket-font';
}

*{
    margin: 0;
    padding: 0;
}

h1{
    text-align: center;
    margin-bottom: 10px;
}

h4{
    text-align: center;
}

#wrap{
    width: 1500px;
    height: 750px;
    background-color: aliceblue;
}

#wrap>#r1{
    width: 1500px;
    height: 250px;
    background-color: aliceblue;
}

#wrap>#r1>#c1{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r1>#c1>#left{
    width: 250px;
    height: 200px;
    background-color: lightpink;
    float: left;
    font-size: 10px;
}

#wrap>#r1>#c1>#left>#margin1{
    width: 100px;
    height: 50px;
    background-color: aqua;
    margin: 20px;
    border-radius: 10px;
}

#wrap>#r1>#c1>#left>#margin2{
    width: 100px;
    height: 50px;
    background-color: aqua;
    margin: 20px 40px;
    border-radius: 10px;
}

#wrap>#r1>#c1>#right{
    width: 250px;
    height: 200px;
    background-color: lightgreen;
    float: left;
    font-size: 10px;
}

#wrap>#r1>#c1>#right>#margin3{
    width: 100px;
    height: 50px;
    background-color: aqua;
    margin: 20px 40px 60px;
    border-radius: 10px;
}

#wrap>#r1>#c1>#right>#margin4{
    width: 100px;
    height: 50px;
    background-color: aqua;
    margin: 20px 40px 60px 80px;
    border-radius: 10px;
}

#wrap>#r1>#c2{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r1>#c2>div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    float: left;
}

#wrap>#r1>#c2>#div2{
    background-color: greenyellow;
    position: relative;
    top: 30px;
    left: 30px;
}

#wrap>#r1>#c3{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r1>#c3>div{
    width: 100px;
    height: 50px;
    background-color: blueviolet;
}

#wrap>#r1>#c3>#div2{
    background-color: greenyellow;
    position: relative;
    top: 30px;
    left: 30px;
}

#wrap>#r2{
    width: 1500px;
    height: 250px;
    background-color: aliceblue;
}

#wrap>#r2>#c1{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r2>#c1>div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    float: left;
}

#wrap>#r2>#c1>#div2{
    background-color: greenyellow;
    position: absolute;
    top: 300px;
    left: 20px;
    font-size: 12px;
}

#wrap>#r2>#c2{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
    position: relative;
}

#wrap>#r2>#c2>div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    float: left;
}

#wrap>#r2>#c2>#div2{
    position: absolute;
    top: 70px;
    left: 70px;
    background-color: greenyellow;
    font-size: 12px;
}

#wrap>#r2>#c3{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r2>#c3>div{
    width: 150px;
    height: 50px;
    background-color: cadetblue;
    margin: 10px;
    color: antiquewhite;
}

#wrap>#r2>#c3>#ttf{
    font-family: 'gmarket-font';
    font-size: 20px;

    padding-top: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

#wrap>#r3{
    width: 1500px;
    height: 250px;
    background-color: aliceblue;
}

#wrap>#r3>#c1{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r3>#c1>#contents{
    width: 450px;
    height: 200px;
    overflow: scroll;
}

#wrap>#r3>#c1>#contents>#popup{
    width: 70px;
    height: 70px;
    background-color: chocolate;
    margin: 20px;
    float: left;
    position: relative;
}

#wrap>#r3>#c1>#contents>#notice{
    width: 300px;
    height: 1000px;
    background-color: bisque;
    float: left;
}

#wrap>#r3>#c2{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r3>#c2>#contents{
    width: 450px;
    height: 200px;
    overflow: scroll;
}

#wrap>#r3>#c2>#contents>#popup{
    width: 70px;
    height: 70px;
    background-color: chocolate;
    margin: 20px;
    float: left;
    position: fixed;
}

#wrap>#r3>#c2>#contents>#notice{
    width: 300px;
    height: 1000px;
    background-color: bisque;
    float: left;
}

#wrap>#r3>#c3{
    width: 500px;
    height: 250px;
    background-color: aliceblue;
    float: left;
}

#wrap>#r3>#c3>#search{
    width: 35px;
    height: 40px;
    background: url(../images/icon_set1.png) -82px -420px;
}

#wrap>#r3>#c3>#lock{
    width: 25px;
    height: 25px;
    background: url(../images/icon_set1.png) -197px -141px;
}

#wrap>#r3>#c3>#gmarket-logo{
    width: 350px;
    height: 100px;
    background: url(../images/sprite__common.png) 0px -560px;
}

3. 결과

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[FrontEnd1] 5월 첫째주 한페이지 개념 정리 (0)	2022.05.07
[FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) (0)	2022.05.01
[FrontEnd1] 4월 넷째주 한 페이지 개념 정리 (0)	2022.04.24
[FrontEnd1] 토이스토리 페이지 보강(로그인창, 오피셜 트레일러 삽입, 노래 삽입, 메뉴창) (0)	2022.04.23
[FrontEnd1] 4월 3째주 한 페이지 개념 정리 (0)	2022.04.19