본문 바로가기
웹개발 수업/CSS

[Day +54 / CSS]CSS 기초(10. 레이아웃 스타일(배치) , 11. 레이아웃 스타일(flex), 12. 레이아웃 스타일(grid))

Chole Woo 2021. 9. 7. 23:24
210907 화

 

10) 레이아웃 스타일(배치)

<!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>10_레이아웃 스타일(배치)</title>
    <style>
        .inline-block {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

        #first {
            position: static;
            top: 20px;
            left: 20px;
        }

        #second {
            position: relative;
            top: 20px;
        }

        #third {
            position: relative;
            bottom: 20px;
            right: 20px;
        }

        .positioning {
            border: 1px solid black;
        }

        /*absolute : 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치되므로 second를 감싸고 있는 outer div에
        position 속성이 되어 있어야 함*/


        .outer {
            position: relative;
        }

        .first {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }

        .second {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .third {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        .fixed-area {
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            left: 500px;
            top: 200px;
        }

        .vis-test {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .vis-test1 {
            background: red;
        }

        .vis-test2 {
            background: yellow;
            /* visibility: hidden; */
            display: none;
        }

        .vis-test3 {
            background: green;
        }

        /* 부모 요소 relative로 지정 */
        .wrap {
            position: relative;
        }

        /* 각 div에 border와 크기 지정 */
        .z-test {
            width: 150px;
            height: 100px;
            border: 1px solid black;
            position: absolute;
        }

        .z-test1 {
            background: yellowgreen;
            top: 100px;
            left: 100px;
            z-index: 1000;
        }

        .z-test2 {
            background: wheat;
            top: 50px;
            left: 50px;
            z-index: 100;
        }

        .z-test3 {
            background: turquoise;
            z-index: 10;
        }

        .float-test {
            border: 1px solid black;
            width: 100px;
            height: 50px;
            float: left;
            float: right;
        }
    </style>
</head>
<body>
    <h1>배치 관련 스타일</h1>
    <p>
        -position 속성<br>
        -static : 일반적인 문서 흐름에 따라 배치(기본 값).
        top, right, bottom, left, z-index 등의 속성이 아무런 영향도 주지 못함.
        -relative : 일반적인 문서 흐름 따라 배치.
        자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용함<br>
        다른 요소에는 영향을 주지 않아 공간 차지는 static일 때와 같음<br>
        -absolute : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.<br>
        가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치되며
        top, right, bottom, left가 위치 결정<br>
        -fixed : 일반적인 문서 흐름에서 제외되며 공간도 차지하지 않음.
        해당 요소가 모든 페이지의 같은 위치에 출력
    </p>

<h3>static과 realative</h3>
    <div class="inline-block" id="first"></div>
    <div class="inline-block" id="second"></div>
    <div class="inline-block" id="third"></div>

<h3>absolute</h3>
    <div class="outer">
        <div class="positioning first"></div>
        <div class="positioning second"></div>
        <div class="positioning third"></div>
    </div>

 <h3>fixed</h3>
    <div class="positioning fixed-area"></div>

    <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>

    <hr>

 <h3>visibility</h3>
    <p>
        페이지에 특정 속성을 보이거나 보이지 않게 하는 속성<br>
        display : none 속성은 페이지 공간도 차지하지 않고,
        visibility : hidden 속성은 페이지 공간은 차지한다.
    </p>

    <div class="vis-test vis-test1"></div>
    <div class="vis-test vis-test2"></div>
    <div class="vis-test vis-test3"></div>

    <hr>

 <h3>z-index</h3>
    <p>페이지 안의 요소들을 순서대로 위로 쌓는 속성이다</p>
    <div class="wrap">
        <div class="z-test z-test1">요소1</div>
        <div class="z-test z-test2">요소2</div>
        <div class="z-test z-test3">요소3</div>
    </div>

    <br><br><br><br><br><br><br><br><br><br>
    <hr>

    <h3>float</h3>
    <p>페이지 내의 요소의 위치를 왼쪽이나 오른쪽으로 지정하는 속성</p>
    <div class="float1">
        <div class="float-test float-test1">1번</div>
        <div class="float-test float-test2">2번</div>
        <div class="float-test float-test3">3번</div>
        <div class="float-test float-test4">4번</div>
        <div class="float-test float-test5">5번</div>
    </div>


</body>

</html>

 

11) 레이아웃 스타일(flex)

<!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>11_레이아웃 스타일(flex)</title>
    <style>
        /* 모든 div 적용 */
        .item {
            background: lightgray;
            color: white;
            margin: 10px;
            padding: 10px;
        }

        .container {
            /* 부모 요소 flex 추가 시 수평 정렬 */
            display: flex;

            /* flex-direction : 배치 방향 */
            /* 오른쪽에서 왼쪽으로 */
            flex-direction: row-reverse;
            /* 위에서 아래로 */
            flex-direction: column;
            /* 아래에서 위로 */
            flex-direction: column-reverse;
            /* 왼쪽에서 오른쪽(기본값) */
            flex-direction: row;

            /* flex-wrap : 줄바꿈 */
            /* 줄바꿈 하지 않음(기본값) */
            flex-wrap: nowrap;
            /* 줄바꿈 여러 줄의 경우 아래에서 위로 */
            flex-wrap: wrap-reverse;
            /* 줄바꿈 여러 줄의 경우 위에서 아래로 */
            flex-wrap: wrap;

            /* justify-content : 수평 방향 맞춤 */
            /* 오른쪽 맞춤 */
            justify-content: flex-end;
            /* 가운데 맞춤 */
            justify-content: center;
            /* 양쪽 끝에 붙이고 균등하게 맞춤 */
            justify-content: space-between;
            /* 균등하게 맞춤 */
            justify-content: space-around;
            /* 왼쪽 맞춤 (기본값) */
            justify-content: flex-start;

            /* bh는 뷰 포트의 높이 기준 단위 */
            height: 100vh;


            /* align-center : 수직 방향 맞춤 */

            /* 부모 요소의 높이 or 콘텐츠 많은 자식 요소 높이 맞춤 */
            align-items: stretch;
            /* 부모 요소 윗 부분 배치 */
            align-items: flex-start;
            /* 부모 요소 아랫 부분 배치 */
            align-items: flex-end;
            /* 베이스 라인 배치 */
            align-items: baseline;
            /* 중앙 배치 */
            align-items: center;

            /* align-content : 여러 줄이 될 경우 맞춤 */
            /* 부모 요소 높이에 맞게 자식 요소 늘려서 배치 */
            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>
    <h1>Flexbox로 수평 정렬</h1>
    <p>
        Flexible Box Layout Module의 의미로
        이전에는 float 속성을 사용해 레이아웃을 만들었다면
        최근은 Flexbox를 많이 사용함
    </p>
    <div class="container">
        <div class="item">div 1</div>
        <div class="item">div 2</div>
        <div class="item">div 3</div>
        <div class="item">div 4</div>
        <div class="item">div 5</div>
        <div class="item">div 6</div>
        <div class="item">div 7</div>
        <div class="item">div 8</div>
    </div>
</body>

</html>

(1) flexd direction : 배치 방향

1> 오른쪽에서 왼쪽으로

    flex-direction: row-reverse;

2> 위에서 아래로
    flex-direction: column;

 


3> 아래에서 위로 
     flex-direction: column-reverse;


4> 왼쪽에서 오른쪽(기본값) */
     flex-direction: row;



(2) flex-wrap : 줄바꿈
1> 줄바꿈 하지 않음(기본값)
     flex-wrap: nowrap;

=>위와 동일

 

2> 줄바꿈 여러 줄의 경우 아래에서 위로 
    flex-wrap: wrap-reverse;

=>위와 동일

 

3> 줄바꿈 여러 줄의 경우 위에서 아래로 
     flex-wrap: wrap;

=> 위와 동일

(3) justify-content : 수평 방향 맞춤
1> 오른쪽 맞춤
     justify-content: flex-end;


2> 가운데 맞춤
     justify-content: center;


3> 양쪽 끝에 붙이고 균등하게 맞춤

     justify-content: space-between;


4> 균등하게 맞춤
     justify-content: space-around;


5> 왼쪽 맞춤 (기본값) */
     justify-content: flex-start;



6> bh는 뷰 포트의 높이 기준 단위
    height: 100vh;

12) 레이아웃 스타일(grid)

<!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>12_레이아웃 스타일(grid)</title>
    <style>
        .item {
            background: lightgray;
            color: white;
            padding: 10px;
        }

        .container {
            /* 부모 요소에 설정  */
            display: grid;

            /* grid-template-columns : 그리드 아이템 너비 
            한 열에 그리드 아이템을 여러 개 둘 경우 띄어쓰기로 구분
            필요한 그리드 아이템 수 만큼 너비 지정
            */
            grid-template-columns: 200px 200px 200px;
            grid-template-columns: 100px 200px auto;
            /* CSS 그리드에서 사용하는 fr(fraction) 단위 사용 */
            grid-template-columns: 1fr 1fr 1fr;
            /* 반복 되는 패턴이 있다면 repeat 사용 */
            grid-template-columns: repeat(3, 1fr);

            /* gap : 그리드 아이템 사이의 여백 */
            row-gap: 20px;
            column-gap: 10px;
            gap: 20px 10px;
            gap: 20px;

            /* grid-template-rows : 그리드 아이템 높이
            여러 줄을 만들 경우 띄어쓰기 구분 */
            grid-template-rows: 200px 200px 200px;
            /* row 개수를 미리 알 수 없을 때는 */
            grid-auto-rows: 200px;
        }

        .container .item:nth-child(1) {
            /* 컬럼 시작/끝 설정 */
            grid-column-start: 1;
            grid-column-end: 3;
            /* 컬럼 시작/끝 설정 한번에 */
            grid-column: 1/4;
            grid-column: 1 span 2;
            /* 로우 시작/끝 설정 */
            grid-row-start: 1;
            grid-row-end: 4;
            /* 로우 시작/끝 설정 한번에 */
            grid-row: 1/ 3;
            grid-row: 1/ span 2;
            /* 로우 시작/컬럼 시작/로우 끝/컬럼 끝 */
            grid-area: 1/2/3/3;

        }
    </style>
</head>
<body>
    <h1>grid로 타일 형태 정렬</h1>
    <p>
        grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있음
    </p>
    <div class="container">
        <div class="item">div 1</div>
        <div class="item">div 2</div>
        <div class="item">div 3</div>
        <div class="item">div 4</div>
        <div class="item">div 5</div>
        <div class="item">div 6</div>
        <div class="item">div 7</div>
        <div class="item">div 8</div>
        <div class="item">div 9</div>
    </div>
</body>

</html>

(1) align-center : 수직 방향 맞춤 */

 

1> 부모 요소의 높이 or 콘텐츠 많은 자식 요소 높이 맞춤 */

align-items: stretch;

2> 부모 요소 윗 부분 배치

align-items: flex-start;

3> 부모 요소 아랫 부분 배치 

align-items: flex-end;

4> 베이스 라인 배치

 align-items: baseline;

5> 중앙 배치

align-items: center;

(2) align-content : 여러 줄이 될 경우 맞춤 

1> 부모 요소 높이에 맞게 자식 요소 늘려서 배치 

align-content: stretch;

3> 부모 요소의 윗 부분 맞춤

align-content: flex-start;

4> 부모 요소의 아랫 부분 맞춤

align-content: flex-end;

5> 중앙 배치

align-content: center;

6> 위 아래 끝에 붙이고 균등하게 맞춤 

 align-content: space-between;

7> 위 아래 여백 포함 균등하게 맞춤

align-content: space-around;

 

<시맨틱 태그>

: 페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분 페이지 구조를 쉽게 파악 가능하고 좀 더 정확한 정보를 검색 가능

<header>, <nav>, <section>, <article>, <aside>, <footer> 등

 

저작자표시 비영리 변경금지 (새창열림)

'웹개발 수업 > CSS' 카테고리의 다른 글

[Day +54 / CSS 과제]레이아웃 스타일 실습2  (0) 2021.09.07
[Day +54 / CSS]CSS 기초(13. 풀스크린 실습, 14. 컬럼 나누기 실습1)  (0) 2021.09.07
[Day +53 / CSS 과제]텍스트 스타일 실습, 레이아웃 스타일 실습  (0) 2021.09.06
[Day +53 / CSS]CSS 기초(7. 테두리 스타일, 8. 레이아웃 스타일(인라인 블럭), 9. 레이아웃 스타일(여백))  (0) 2021.09.06
[Day +53 / CSS]CSS 기초(5. 텍스트 스타일, 6. 배경 스타일)  (0) 2021.09.06

'웹개발 수업/CSS' Related Articles

티스토리툴바