Chap4 CSS

Let's Just Go·2022년 4월 23일

CSS html

CSS

목록 보기

4/5

CSS

relative

relative

position : relative를 하게 되면 움직이는 대상은 다른 대상에 영향을 주지 않음

위의 Box를 기준으로 움직이는 것을 확인했고 이것은 상대적으로 position이 정해진다는 것을 확인할 수 있음

<!DOCTYPE html>
<html lang="ko">
<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>Relative</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: blue;
            border: 4px dashed orange;
            border-radius: 10px;
            /* border-radius : 모서리를 깍는것 */
            font-size: 30px;
        }
        .relative{
            position: relative;
            left: 70px;
            top: 50px;
        }
        /* 왼쪽을 기준으로 70을 밀어내고 위를 기준으로 50밀어냄
            position은 지목한 대상만 움직이고 지목한 대상은 나머지 대상에 영향을 주지 않음 */

    </style>
</head>
<body>
    <!-- relative : 내가 있어야할 자리에서 어디로 움직일지 생각 
        오른쪽으로 이동하고 싶으면 왼쪽 이동  -->
    
    
    <div class="box">1</div>
    <div class="box relative">2</div>
    <div class="box">3</div>
    
    
</body>
</html>

absolute

absolute

부모를 기준으로 이동
Absolute를 사용하기 위해서 어떤 부모를 기준으로 움직일 것인지 position을 활용하여 기준을 정하며 정한 부모를 기준으로 absolute를 한 대상이 움직임

부모에 relative 지정해야함

<!DOCTYPE html>
<html lang="ko">
<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>Absolute</title>
    <style>
        .grandparent{
            width: 400px;
            height: 300px;
            padding: 100px;
            border: 4px dashed gray;
            position: relative;
        }
        .parent{
            width: 300px;
            height: 300px;
            border: 4px dashed lightgray;
        }

        .child{
            width: 120px;
            height: 80px;
            background : red;
            border: 4px dashed red;
            border-radius: 10px;
            font-size: 30px;
        }

        .absolute{
            position: absolute;
            right: 100px;
            bottom: 150px;
        }
        /* absolute는 부모의 기준으로 움직이며 부모는 내가 원하는 부모를 기준으로 움직임
            예시 grandparent를 기준으로 child2가 부모인 grandparent기준으로 바닥에서 150px 오른쪽에서 100px 이동 
            즉 '부모를 기준으로 어디를 이동해라'가 absolute  */
    </style>
</head>
<body>

    <div class="grandparent relative">
        
        <div class="parent">
            <div class="child">1</div>
            <div class="child absolute">2</div>
            <div class="child">3</div>
        </div>
    </div>
    
</body>
</html>

Practice

position을 활용하여 페이지 디자인 연습

<!DOCTYPE html>
<html lang="ko">
<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>Answer</title>
    <style>
        article{
            width: 300px;
            background: #ffeffe;
            border: 2px solid #ccc;
            padding: 10px;
            position: relative;
        }
        article > h1{
            font-size: 18px;
            color: #080;
            margin: 0px;
        }

        ul{
            list-style: none;
            padding: 0px;
        }

        li > a{
            text-decoration: none;
            color: #666;
        }
        li a:hover{
            text-decoration: underline;
            color: #00f;
        }

        .more{
            position: absolute;
            right : 20px;
            top : 10px;
        }

    </style>
</head>
<body>
    <article class="relative">
        <h1>동물병원 24시</h1>
        <ul>
            <li><a href="#">밥 먹이는 시간 지킬 것</a></li>
            <li><a href="#">길고양이 주사 맞히기</a></li>
            <li><a href="#">눈 아픈 동물 목에 깔떄기 씌우기</a></li>
            <li><a href="#">매일 목욕 시킬 것</a></li>
            <li><a href="#">이름없는 애들 이름 짓지 말기</a></li>
        </ul>
        <div class="more absolute">
            <a href="#">더보기</a>
        </div>
    </article>
</body>
</html>

fixed

fixed

사용자가 보는 화면 기준으로 움직임

absolute와 다르게 기준이 되는 부모가 없고 화면을 기준으로 대상이 움직임

<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
    <style>

        body{
            height: 2000px;
        }

        .grandparent{
            width: 400px;
            height: 300px;
            padding: 100px;
            border: 4px dashed gray;
        }
        .parent{
            width: 300px;
            height: 300px;
            border: 4px dashed lightgray;
        }

        .child{
            width: 120px;
            height: 80px;
            background : red;
            border: 4px dashed red;
            border-radius: 10px;
            font-size: 30px;
        }

        .fixed{
            position: fixed;
            right: 100px;
            bottom: 150px;
        }

    </style>
</head>
<body>
    <div class="grandparent relative">
        
        <div class="parent">
            <div class="child">1</div>
            <div class="child fixed">2</div>
            <div class="child">3</div>
        </div>
    </div>

    <!-- fixed는 스크롤을 내려도 화면에 고정되어 있어 따라오는 느낌을 줌 -->
</body>
</html>

sticky

sticky

스크롤 기준까지는 static, 설정한 위치에 도달하면 fixed

<!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>Sticky</title>

    <style>
        .container{
            width: 400px;
            height: 400px;
            border : 4px solid red;
            margin-right: 40px;
            overflow: auto;
        }

        section{
            height: 200px;
            border: 4px dashed lightgray;
        }

        section h1{
            text-align: center;
            line-height: 2px;

            position: sticky;
            top: 0%;
        }
    </style>
    <!-- sticky 
        - 속성 : top, bottom, right, left
        - 속성 중 하나만 필수로 설정 
        - 스크롤이 내려가면서 h1에 작성한 내용이 유지되다가 블록을 넘어서면 다른 내용을 변경되며 반복되는 기능 
        - 내가 설정한 기준까지는 static하게 움직이고 설정한 위치에 도달하면 스크롤 영역 내에서 fixed하게 움직임 -->
</head>
<body>
    <div class="container">
        <section>
            <h1>Title 1</h1>
        </section>
        <section>
            <h1>Title 2</h1>
            
        </section>
        <section>
            <h1>Title 3</h1>
        </section>
        <section>
            <h1>Title 4</h1>
        </section>
        <section>
            <h1>Title 5</h1>
        </section>
        <section>
            <h1>Title 6</h1>
        </section>
        <section>
            <h1>Title 7</h1>
        </section>
        <section>
            <h1>Title 8</h1>
        </section>
    </div>
</body>
</html>

Practice2

<!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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <title>Document</title>
    <style>
        body{
            background-image: url("./Apple/bg.png");
        }

        header .logo {
            width: 100%;
            margin: 20px auto;
            text-align: center;
            /* 이미지는 inline요소라서 text처럼 레이아웃 적용가능 */
        }

        .menu{
            background: black;
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        .menu li {
            display: inline;
            /* 세로로 지정된 것들을 가로로 지정하기 위해 inline으로 지정 */
            padding: 20px;
        }

        .menu li:hover{
            background: lightslategray;
        }

        .menu li a{
            text-decoration: none;
            color: white;
            font-size: 20px;
            font-weight: bold;
            padding: 50px;
        }

        .slider {
            background: white;
        }

        .slider ul {
            width: 75%;
            margin: 0 auto;
        }

        .slider ul li {
            width: 25%;
            box-sizing: border-box;
            float: left;
            text-align: center;
            margin: 40px 0;
        }

        .clearfix::after{
            content: '';
            display: block;
            clear : both;
        }

        .top {
            width: 50px;
            height: 50px;
            background: #c13333;
            position: fixed;
            right: 0;
            top:0;
            text-align: center;
            line-height: 50px;
        }
        /* 수평정렬 : line-height와 height 같이 해주면 됨 */

        .top a{
            color: #fff;
            text-decoration: none;
        }

        section{
            width: 700px;
            margin: 0 auto;
            position : relative;
        }

        section .left{
            position : absolute;
            top : 0;
            left: -240px;
        }

        section .right{
            position : absolute;
            top : 0;
            right: -240px;
        }

    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="./Apple/logo.jpg" alt="로고가 들어감">
        </div>

        <nav >
            <ul class="menu clearfix">
                <li><a href="#">메뉴 1</a></li>
                <li><a href="#">메뉴 2</a></li>
                <li><a href="#">메뉴 3</a></li>
                <li><a href="#">메뉴 4</a></li>
            </ul>
        </nav>
    </header>

    <article class="slider">
        <ul class="clearfix">
            <li><img src="./Apple/item01.png" alt="iPhone"><br>iPhone</li>
            <li><img src="./Apple/item02.png" alt="iPod"><br>iPod</li>
            <li><img src="./Apple/item03.png" alt="iPad"><br>iPad</li>
            <li><img src="./Apple/item04.png" alt="iMac"><br>iMac</li>
        </ul>
    </article>

    <section>
        <div class="content">
            <img src="./Apple/ipad.jpg" alt="">
        </div>
        <aside class="left fixed">
            <img src="./Apple/side01.png" alt="">
            <br><br>
            <img src="./Apple/side02.png" alt="">
        </aside>

        <aside class="right fixed1">
            <img src="./Apple/side03.png" alt="">
            <br><br>
            <img src="./Apple/side04.png" alt="">
        </aside>
    </section>

    <div class="top">
        <a href="#">TOP</a>
    </div>
</body>
</html>

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

Chap3 CSS

다음 포스트