2021.11.05 Today I Learned

유니·2021년 11월 5일

Sticky

sticky는 fixed와 비슷하지만 부모의 범위안에서만 작동한다는 점에서 틀리다.

<!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></title>
    <style>
        section{
            height: 1000px;
            border: 3px solid black;
            margin-bottom: 10px;
            margin-right: 5px;
            padding-right: 5px;
            padding-left: 5px;
        }
        h2{
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <h1>sticky test</h1>
    <section>
        <h2>1. 오늘의 점심 메뉴</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
    </section>
    <section>
        <h2>2. 오늘의 간식</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
    </section>
    <section>
        <h2>3. 오늘의 저녁 메뉴</h2>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt labore tempore, culpa alias expedita odio officia ducimus! Accusantium rem vitae id odit praesentium velit nihil temporibus incidunt quas enim est delectus earum reiciendis, recusandae modi placeat assumenda ipsa reprehenderit impedit similique alias accusamus voluptate laboriosam facilis. Dolorum, adipisci nisi. Incidunt pariatur, dolorum sunt reiciendis eius quas. Molestias maiores laborum sapiente obcaecati doloribus aperiam error cumque, eligendi quis rem exercitationem dignissimos recusandae quod odit iste inventore nostrum porro facere ea? Illo reiciendis eos, tenetur odit eveniet dolorem voluptates! Dolore architecto neque sint. Facere cupiditate sed qui distinctio similique expedita maxime dolor!</li>
        </ul>
    </section>
</body>
</html>

h2에 sticky를 적용시키고 해당 코드를 작동할 시 1. 오늘의 점심메뉴는 첫 section에서 fixed가 작동하고 두번째 section에서는 2. 오늘의 간식이 fixed역활을 수행한다.

float을 해제하는 방법

1. overflow: hidden;

style에서 부모요소에 overflow: hidden 을 넣어준다.

        ul{
            overflow: hidden;
        }
        li{
            float: left;
            width: 300px;
            height: 100px;
            background: pink;
        }

2. display: inline-block;

부모 요소에 display: inline-block;을 넣어준다.

        ul{
            display: inline-block;
        }
        li{
            float: left;
            width: 300px;
            height: 100px;
            background: pink;
        }

3. clear-fix방법론

부모요소에 after 가상요소를 이용하여 clear-fix 를 만들어준다.

        ul::after{
            display: block;
            content: '';
            clear: both;
            
        }
        li{
            float: left;
            width: 300px;
            height: 100px;
            background: pink;
        }

float해제를 이용한 간단한 예시

<!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">
    <link rel="stylesheet" href="reset.css">
    <title></title>
    <style>
        body{
            overflow: hidden;
        }
        .colorblue{
          background: blue;  
        }
        .colorgreen{
            background:green;
        }
        .colorred{
            background: red;
        }
        .colorindigo{
            background: indigo;
        }
        .coloryellow{
            background: yellow;
        }
        div{
            float: left;
            width: 300px;
            height: 100px;
        }
        div:nth-child(1){
            width:100%;
        }
        div:nth-child(2){
            width:33.33%;
        }
        div:nth-child(3){
            width:33.33%;
        }
        div:nth-child(4){
            width:33.34%;
        }
        div:nth-child(5){
            width:100%;
        }
    </style>
</head>
<body>

    <div class="colorblue"></div>
    <div class="colorgreen"></div>
    <div class="colorred"></div>
    <div class="colorindigo"></div>
    <div class="coloryellow"></div>

</body>
</html>

지금까지 배운것들을 이용한 네이버 로그인 박스 구현

<!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">
    <link rel="stylesheet" href="reset.css">
    <title>로그인 구현</title>
    <style>
        .loginbox{
            width: 350px;
            height: 135px;
            background: #f7f9fa;
            border: 1px solid #dae1e6;
            padding: 16px 16px 12px 17px;
            margin: 16px 16px 16px 16px;
        }
        header{
            font-size: 12px;
            color: #808080;
        }
        button{
            width: 100%;
            height: 50px;
            background: #19ce60;
            border: 1px solid #15c654;
            font-size: 14px;
            font-weight: 700;
            color: white;
            margin-top: 20px;
            margin-bottom: 10px;
            padding-right: 20px;
        }
        .naver{
            display: inline;
            font-size: 14px;
            font-weight: 1400;
            color: white;
            margin-right: 5px;

        }
        .naverid{
            display:inline;
            float:left;

        }
        .login-section{
            width: 100%;
            float:left;
            margin-top: 20px;
            color: #202020;
            font-size: 12px;
        }
        .login-section .naverid{
            display:inline;
            margin-right: 6px;
            margin-top : -1px;
        }

        .login-section .naveruser{
            float:right;
        }
        .dot{
            width: 10px;
            height: 10px;
            border: 1px solid black;
            border-radius: 100%;
        }
        .floatimg{
            float:left;
            margin-right: 5px;
            margin-top: -3px;
        }
        .resetfloat::after{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="loginbox">
        <div class="resetfloat">
            <header>
                네이버를 더 안전하고 편리하게 이용하세요
            </header>
            <section>
                <button><img src="./images/title.png" alt="네이버" width="60px"> 로그인</button>
            </section>
            <article class="login-section">
                <img class="floatimg" src="./images/lock.png" alt="아이디" width="10px">
                <p class="naverid"> 아이디 · 비밀번호찾기</p>
                <p class="naveruser"><img src="./images/user.png" alt="회원가입" width="12px"> 회원가입</p>
            </article>
        </div>
    </div>
</body>
</html>

Flex

flex는 새로운 display이다. 컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합이다.

flex는 부모를 Flex-container,
자식들을 Flex-item이라고 부른다.

flex-item들은 Axis를 기준으로 정렬된다.

Flex-direction

flex-direction은 플렉스아이템을 정렬하는 방법을 설정할 수 있다.

flex-dircition: row(default), row-reverse, column, column-reverse, ...

justify-content

축을 기준으로 배열의 위치를 조종하거나 아이템간의 간격을 설정할 수 있다.

        .container {
            display: flex;
            flex-direction: column;
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
            }

위에서 배운것을 종합하여 간단한 박스를 구현해보았다.

<!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></title>
    <style>
        div{
            width:50px;
            height:50px
        }

        .blue{background:blue}
        .green{background:green}
        .yellow{background:yellow}


        article{
            display: flex;
            justify-content: space-between;  
            background:black;
            width:350px;
            height:300px;
        }


        .right_side, .center, .left_side{
        height:300px;
        }
        
        .left_side{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .right_side{
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
        }
        .center{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <article>
        <div class="left_side">
          <div class="blue"></div>
          <div class="green"></div>
          <div class="yellow"></div>
        </div>
        <div class="center">
          <div class="blue"></div>
          <div class="yellow"></div>
        </div>
        <div class="right_side">
          <div class="blue"></div>
          <div class="green"></div>
          <div class="yellow"></div>
        </div>
      </article>
</body>
</html>