z-index

- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때, z-index를 사용
- 순서는 숫자의 크기가 클수록 위에 위치하고, 작을수록 아래 위치하게 됨

<head>
    <title>z-index</title>
    <style>
        div#wrapper { position: relative; }
        div.box{
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            font-size: 25px;
        }
        #b1 {
            left: 50px;
            top: 50px;
            background-color: deeppink;
            z-index: 100;
        }

        #b2 {
            left: 120px;
            top: 70px;
            background-color: gold;
            z-index: 1;
        }

        #b3 {
            left: 70px;
            top: 110px;
            background-color: deepskyblue;
            z-index: 10;
        }
    </style>
</head>
<body>
    <h2>z-index</h2>
    <div id="wrapper">
        <div id="b1" class="box">1번째 div</div>
        <div id="b2" class="box">2번째 div</div>
        <div id="b3" class="box">3번째 div</div>
    </div>
</body>

float

- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 다음에 나오는 요소방향을 결정(left, right)
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소(배경)보다 위에 위치

# 예제 1
<head>
    <title>float1</title>
    <style>
        img {
            float: left;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <h2>float1</h2>
    <img src="./gift.png" alt=" 선물">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Numquam ipsa accusantium id suscipit delectus quae reiciendis magni. Magnam, reprehenderit corporis! Illo, earum dolorem. Deleniti, nemo ab eveniet iusto earum harum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis accusamus, sed rem fuga nobis cumque distinctio deleniti at dolores atque ducimus voluptate asperiores alias adipisci, ut optio error sequi repudiandae.
</body>

# 예제 2
<head>
    <title>float2</title>
    <style>
        div {
            padding: 20px;
        }

        #box1 {
            background-color: gold;
            float: left;
            margin-right: 20px;

        }
        #box2 {
            background-color: deeppink;
            float: left;
            margin-right: 20px;

        }
        #box3 {
            background-color: greenyellow;
            float: left;
            margin-right: 20px;

        }
        #box4 {
            background-color: deepskyblue;
            float: right;

        }
    </style>
</head>
<body>
    <h2>float2</h2>
    <div id="box1">박스1</div>
    <div id="box2">박스2</div>
    <div id="box3">박스3</div>
    <div id="box4">박스4</div>
</body>

clear

- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듦
- clear 속성을 이용하여, float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both)

<head>
    <title>clear</title>
    <style>
        body { 
            margin: 20px 30px; max-width: 800px;
        }

        p {
            padding: 10px;
            text-align: center;
            font-size: 20px;
        }

        #p1 {
            float: left;
            width: 38%;
            background-color: gold;
            margin-bottom: 20px;
        }

        #p2 {
            float: right;
            width: 54%;
            background-color: deepskyblue;
        }

        #p3 {
            clear: both;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <h2>clear</h2>
    <div id="p1">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor explicabo velit cum ex culpa aspernatur quas, voluptatibus, iusto eos porro, ullam minima odit voluptates distinctio sequi quae. Voluptatum, aperiam ab.</p>
    </div>
    <div id="p2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, non eius aut nihil at sint unde necessitatibus nesciunt illum nemo voluptas aspernatur consequuntur aliquid praesentium, officiis incidunt ex omnis rem.</p>
    </div>
    <div id="p3">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos ipsa tenetur quisquam recusandae quo? Aut unde sapiente iure assumenda provident odio eius! Tempora, sint sunt temporibus voluptatem at omnis impedit!</p>
    </div>
</body>

다단 레이아웃

- 텍스트를 column 속성으로 다단을 생성
- 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성
    column-count: 단의 개수를 설정
    column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상을 설정
    column-gap: 단과 단사이의 여백을 설정
    column-span: 단과 안의 포함된 요소를 다단편집에서 해제(all)

# 2단 레이아웃
<head>
    <title>2단 레이아웃</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <div id="contents">
            <h2>본문</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis facilis quas illo, expedita fugit deleniti incidunt consectetur voluptatem, quibusdam temporibus nesciunt laborum doloribus, ducimus consequatur dicta reprehenderit quo voluptatum inventore?</p>
        </div>
        <div id="sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias a in, unde quasi porro, iure omnis accusamus autem provident illo tempora eaque ad aliquid explicabo ducimus ullam iste dolore magnam?</li>
            </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius perferendis vel, quis impedit explicabo quidem minus obcaecati quaerat sequi similique quam quisquam incidunt aliquid repellat blanditiis magnam ex exercitationem. Assumenda?</p>
        </footer>
    </div>
</body>

# 3단 레이아웃
<head>
    <title>3단 레이아웃</title>
    <link rel="stylesheet" href="./css/layout.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h2>사이트 제목</h2>
        </header>
        <div id="left-sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </div>
        <div id="contents">
            <h2>본문</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo accusamus libero est, veniam minima quibusdam, molestias esse iste necessitatibus itaque veritatis exercitationem nulla cumque nisi dignissimos assumenda perspiciatis beatae.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo accusamus libero est, veniam minima quibusdam, molestias esse iste necessitatibus itaque veritatis exercitationem nulla cumque nisi dignissimos assumenda perspiciatis beatae.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nemo accusamus libero est, veniam minima quibusdam, molestias esse iste necessitatibus itaque veritatis exercitationem nulla cumque nisi dignissimos assumenda perspiciatis beatae.</p>
        </div>
        <div id="right-sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>저작원 정보</p>
            <p>연락처 등</p>
        </footer>
    </div>
</body>

# 다단레이아웃
<head>
    <title>다단레이아웃</title>
    <style>
        div, h2, p { margin: 0; padding: 0; }
        h2 { padding: 0 0 20px; text-align: center; }
        div.col{
            text-align: justify;
            padding: 20px;
            background-color: gold;
            border: 3px solid red;

            column-count: 3;
            column-gap: 30px;
            column-rule: 3px dashed red;
        }

        .col > h2 { column-span: all; }
    </style>
</head>
<body>
    <div class="col">
        <h2>다단 레이아웃</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque esse assumenda perferendis quos quis illo sapiente sunt fugit? Ratione tenetur tempora beatae nihil doloribus, necessitatibus sint nesciunt obcaecati rerum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque esse assumenda perferendis quos quis illo sapiente sunt fugit? Ratione tenetur tempora beatae nihil doloribus, necessitatibus sint nesciunt obcaecati rerum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque esse assumenda perferendis quos quis illo sapiente sunt fugit? Ratione tenetur tempora beatae nihil doloribus, necessitatibus sint nesciunt obcaecati rerum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eaque esse assumenda perferendis quos quis illo sapiente sunt fugit? Ratione tenetur tempora beatae nihil doloribus, necessitatibus sint nesciunt obcaecati rerum.</p>
    </div>
</body>

Flex 레이아웃

- 수평정렬을 하기 위한 속성
    display: flex

flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성
    nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치
    wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김
    wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김)

flex-direction: 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성
    row: 기본값. 가로로배치
    row-reverse: 가로로 배치(반대)
    column: 세로로 배치
    column-reverse: 세로로 배치(반대)

flex-flow: flex-wrap과 flex-direction을 한거번에 지정할 수 있는 속성
    flex-flow: row nowrap

<head>
    <title>플렉스 레이아웃1</title>
    <style>
        #container {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;
            /* 기본값 nowrap */
            /* flex-wrap: wrap; */  # 한 줄로 정렬 후, 공간이 부족하여 남는 부분은 다음 줄로 넘어감
            /* flex-wrap: wrap-reverse; */  # wrap의 반대

            /* flex-direction: row; */  # 기본값과 출력이 비슷함, row로 정렬
            /* flex-direction: row-reverse; */  # row의 반대
            /* flex-direction: column; */  # 열로 정렬
            /* flex-direction: column-reverse; */  # colunm의 반대
            flex-flow: row-reverse nowrap;
        }

        #container > div {
            width: 400px;
            border: 1px solid black;
            background-color: gold;
        }

        span {
            font-size: 50px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃1</h2>
    <div id="container">
        <div id="box1"><span>1</span></div>
        <div id="box2"><span>2</span></div>
        <div id="box3"><span>3</span></div>
    </div>
</body>

justify-content : 플렉스 요소의 수평방향 정렬방식을 설정
    flex-start: 기본값. 앞쪽에서부터 배치
    flex-end:뒤쪽에서붜 배치
    center: 가운데 배치
    space-between : 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙힘)
    space-around: 요소를 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

align-items: 플렉스 요소의 수직방향 정렬 방식을 설정
    stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
    flex-start: 요소들이 시작점으로 정렬
    flex-end: 요소들이 끝으로 정렬
    center: 요소들이 가운데로 정렬
    baseline: 요소들이 텍스트 베이스라인 기준으로 정렬

align-self: 플렉스 요소에 수직축으로 다른 align 속성값을 설정

order: 플렉스 요소의 순서를 설정

<head>
    <title>플렉스레이아웃2</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }

        .wrapper div{
            width: 50px;
            border: 2px solid black;
            background-color: gold;
        }

        #container {
            display: flex;
            /* justify-content: flex-start; 기본값 */
            /* justify-content: flex-end; */  # 끝방향으로 정렬
            /* justify-content: center; */  # 가운데로 정렬
            /* justify-content: space-between; */  # 시작과 끝을 기준으로 나누어서 정렬
            /* justify-content: space-around; */  # between과 비슷하나, 양쪽 끝에 여백을 만듬

            /* align-items: stretch; 기본값 */
            align-items: flex-start;
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */  # 텍스트의 밑줄라인을 기준으로 정렬

            #box2 { align-self: center;}

            #box1 { order: 4; }
            #box2 { order: 1; }
            #box3 { order: 5; }
            #box4 { order: 2; }
            #box5 { order: 3; }
        }
    </style>
</head>
<body>
    <h2>플렉스레이아웃2</h2>
    <div id="container" class="wrapper">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
        <div id="box4">
            <p style="font-size: 50px;">4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>
</body>

align-content: 플렉스 요소가 설정된 상태에서 요소들이 2줄이상 되었을 때 수직방향 정렬방식을 설정(flex-wrap의 값을 wrap으로 설정해야 함)
    stretch: 기본값. 아이템들이 수직축 방향으로 늘어남
    flex-start: 요소들이 시작점으로 정렬
    flex-end: 요소들이 끝으로 정렬
    center: 요소들이 가운데로 정렬
    space-between : 요소들 사이에 여유 공간을 두고 배치(앞뒤 양쪽에 요소를 붙힘)
    space-around: 요소를 사이에 여유 공간을 두고 배치(앞뒤 약간의 공간을 둠)

<head>
    <title>플렉스 레이아웃3</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }
        .wrapper div {
            width: 150px;
            border: 2px solid black;
            background-color: gold;
        }
        #container {
            display: flex;
            flex-wrap: wrap;
            /* align-content: stretch; */ 기본값
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃3</h2>
    <div id="container" class="wrapper">
        <div>
            <p>1</p>
        </div>
        <div>
            <p>2</p>
        </div>
        <div>
            <p>3</p>
        </div>
        <div>
            <p>4</p>
        </div>
        <div>
            <p>5</p>
        </div>
    </div>
</body>