본문 바로가기
Learning/HTML&JavaScript

CSS 레이아웃

cozy coding 2020. 7. 21. 16:08

  • CSS 포지셔닝: CSS를 웹 문서 요소를 적절히 배치하는 것

  • box-sizing: 박스 모델 너비 값의 기준을 정함

    • content-box: width 속성 값을 콘텐츠 영역 너비 값으로 사용

    • border-box: width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

 

 

<!DOCTYPE html>



<html lang="ko">

<head>

  <meta charset="utf-8">

  <title>box-sizing</title>

  <style>

    .box1{

      box-sizing: content-box;

      width: 300px;

      height: 150px;

      margin: 10px;

      padding: 30px;

      border: 2px solid red;

    }

    .box2{

      box-sizing: border-box;

      width: 300px;

      height: 150px;

      margin: 10px;

      padding: 30px;

      border: 2px solid red;

    }

  </style>

</head>

<body>

  <div class="box1"> box-sizing = "content-box" </div>

  <div class="box2"> box-sizing = "border-box"</div>

</body>

</html>

 

 

 

 

 

 

  • float: 컨텐츠들을 띄어서 정렬

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>박스모델</title>

    <style>

        .box1{

            padding: 20px;

            margin-right: 10px;

            background: yellow;

            float: left;

        }

        .box2{

            padding: 20px;

            margin-right: 10px;

            background: blue;

            float: left;

        }

        .box3{

            padding: 20px;

            margin-right: 10px;

            background: green;

            float: left;

        }

        .box4{

            padding: 20px;

            margin-right: 10px;

            background: pink;

            float: right;

        }

    </style>

</head>

<body>

    <div class="box1">박스1</div>

    <div class="box2">박스2</div>

    <div class="box3">박스3</div>

    <div class="box4">박스4</div>

</body>

</html>

 

 

 

 

 

  • clear: float 속성 해제

 

 

 

.box4{

            padding: 20px;

            margin-right: 10px;

            background: pink;

            clear: both;

        }

 

 

 

 

 

 

<!DOCTYPE html>



<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>2단 레이아웃</title>

    <style>

        div{

            border: 1px solid #ccc;

        }

        #container{

            width: 960px;

            padding: 20px;

            margin: 0 auto;

        }

        #header{

            padding: 20px;

            margin-bottom: 20px;

        }

        #content{

            width: 620px;

            padding: 20px;

            float: left;

            margin-bottom: 20px;

        }

        #aside{

            width: 220px;

            padding: 20px;

            float: right;

            background-color: #eee;

            margin-bottom: 20px;

        }

        #footer{

            padding: 20px;

            clear: both;

        }

    </style>

</head>

<body>

    <div id="container">

        <div id="header">

            <h1>사이트 제목</h1>

        </div>

        <div id="aside">

            <h2>사이드 바</h2>

            <p>모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.</p>

        </div>

        <div id="content">

            <h2>본문</h2>

            <p>재산권의 행사는 공공복리에 적합하도록 하여야 한다. 정부는 회계연도마다 예산안을 편성하여 회계연도 개시 90일전까지 국회에 제출하고, 국회는 회계연도 개시 30일전까지 이를 의결하여야 한다.

            <br><br>대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 언론·출판에 대한 허가나 검열과 집회·결사에 대한 허가는 인정되지 아니한다.</p>

        </div>

        <div id="footer">

            <h2>푸터</h2>

            <p>이 헌법시행 당시의 법령과 조약은 이 헌법에 위배되지 아니하는 한 그 효력을 지속한다.</p>

        </div>

    </div>

</body>

</html>

 

 

 

 

  • CSS 포지셔닝

    • static: 문서의 흐름에 맞춤

    • relative: 첫번째 요소 기준 자연스럽게 배치

    • absoulte: 원하는 위치에 배치. 부모 요소 중 postion:relative인 요소로 위치.

    • fixed: 원하는 위치에 배치. 브라우저 창 기준

  • visibility

    • visible: 화면에 표시

    • hidden: 화면에 요소 감춤. 크기는 유지

    • collapse: 서로 겹치도록 조절

  • z-index: 요소 쌓는 순서 정함

 

<!doctype html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>CSS 포지셔닝</title>

    <style>

        #wrap{

            position: relative;

            width: 300px;

            height: 300px;

            border: 1px solid gray;

        }

        .box{

            position: absolute;

            width: 50px;

            height: 50px;

            background: blue;

        }

        #crd1{

            top: 0; left:0;

        }

        #crd2{

            top: 0; right: 0;

        }

        #crd3{

            bottom: 0; right: 0;

        }

        #crd4{

            bottom: 0; left:0;

        }

        #crd5{

            top: 100px; left: 100px;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <div class="box" id="crd1"></div>

        <div class="box" id="crd2"></div>

        <div class="box" id="crd3"></div>

        <div class="box" id="crd4"></div>

        <div class="box" id="crd5"></div>

    </div>

</body>

</html>

 

 

 

 

 

<!doctype html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>visibility 속성</title>

        <style>

            img{

                margin: 10px;

                padding: 5px;

                border: 1px solid black;

            }

            .invisible{

                visibility: hidden;

            }

        </style>

    </head>

    <body>

            <img src="images/pic1.jpg">

            <img src="images/pic2.jpg" class="invisible">

            <img src="images/pic3.jpg">

    </body>

</html>

 

 

 

 

<!doctype html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>z-index 속성</title>

        <style>

            div#wrapper {

                position: relative;

            }

            .box {

                position:absolute;

                width:100px;

                height:100px;

                border:1px solid black;

                font-size:26px;

            }

            #b1 {               

                left:50px;

                top:50px;

                background:#ff0000; 

                z-index: 1; 

            }

            #b2 {               

                left:110px;

                top:70px;

                background:#ffd800;

                z-index: 3;

            }

            #b3 {

                left:70px;

                top:110px;

                background:#0094ff;     

                z-index: 1;

            }

        </style>

    </head>

    <body>

        <div id="wrapper">

            <div id="b1" class="box">1</div>

            <div id="b2" class="box">2</div>

            <div id="b3" class="box">3</div>

        </div>

    </body>

</html>

 

 

 

 

 

  • column-width: 단의 너비를 고정, 화면 분할. 다단 편집.

  • break-before, break-after: 특정 요소의 앞이나 뒤에 다단 위치  (인쇄)

 

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="utf-8">

    <title>HTML5 레이아웃</title>

    <style>

        body{

            font-family: "맑은 고딕", "고딕", "굴림";

        }

        .multi{

            -webkit-column-count: 120px;

            -moz-column-count: 120px;

            column-count: 3;

            column-gap: 20px;

            column-rule: 2px dotted yellow;

        }

    </style>

</head>

<body>

    <header>

        <h2>건강에 좋은 식품 - Super Food</h2>

    </header>

    <div class="multi">

        <p><b>코코넛 오일 </b>: 남미 파나마에서는.</p>

        <p><b>블루베리 </b>: 블루베리는 .</p>

        <p><b>아몬드 </b>: 혈관질환에 </p>

    </div>

</body>

</html>

 

 

 

 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>HTML5 레이아웃</title>

    <style>

            body{

                font-family:"맑은 고딕", "고딕", "굴림";

            }

            section {                           

                padding:20px;

                width:600px;

                margin:20px auto;

                border:1px solid #ccc;

                border-radius:10px;

            }

            .multi {

                -webkit-column-count: 3;

                -moz-column-count: 3;

                column-count: 3;

                -webkit-column-rule: 2px dotted #000;

                -moz-column-rule: 2px dotted #000;

                column-rule: 2px dotted #000;

                text-align: justify;

            }

            

            .no-col{

                background:#f0f0f0;

                margin:10px 3px;

                padding:20px;

                border-radius:5px;

                column-span: all;

    

            }

        </style>

    </head>

    <body>

        <section>

            <h2>건강에 좋은 식품 - Super Food</h2>

            <div class="multi">

                <h3>코코넛 오일</h3>

                <p>남 정도이다.</p>            

                <h3>아보카도</h3>

                <p>나무에서</p>

                <h3>케일</h3>

                <p>케일은</p>

                <h3>블루베리</h3>

                <p>블루베리는</p>

                <div class="no-col">

                    <h3>아몬드</h3>

                    <p>혈관질환에 </p>

                </div>

            </div>

        </section>

    </body>

</html>

 

 

 

 

 

 

  • caption-side: 캡션은 기본으로 표 위쪽에 표시. 이 속성을 이용해 아래쪽에도 표시가능

  • border: 표의 바깥 테두리와 셀 테두리 모두 지정

  • border-collapse: 표 테두리와 셀 테두리를 합칠 것인지 설정

 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>표 스타일</title>

    <style>

        body{

            font-family: "맑은 고딕", "고딕", "굴림";

            font-size: 20px;

        }

        .table1{

            border: 1px solid black;

            border-collapse: collapse;

        }

        .table1 td{

            border: 1px dotted black;

            padding: 10px;

            text-align: center;

        }

    </style>

    </head>

    <body>      

        <table class="table1">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

            </tr>       

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

            </tr>       

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

            </tr>       

        </table>

    </body>

</html>

 

 

 

 

 

 

<!DOCTYPE html>

<html lang="ko">

    <head>

        <meta charset="utf-8">

        <title>표 스타일</title>

        <style>

            body{

                font-family:"맑은 고딕", "고딕", "굴림";

            }

            .schedule{

                border-collapse: separate;

                margin: 20px;

            }

            td{

                border: 1px solid black;

                padding: 10px;

                text-align: center;

            }

            #tb2 td{

                empty-cells: hide;

            }

        </style>

    </head>

    <body>      

        <table class="schedule" id="tb1">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

                <td>TV 중계</td>

            </tr>       

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

                <td></td>

            </tr>       

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

                <td></td>

            </tr>                   

        </table>



        <table class="schedule" id="tb2">

            <caption>프로축구 경기 일정</caption>

            <tr>

                <td>울산</td>

                <td>울산 vs 인천</td>

                <td>TV 중계</td>

            </tr>

            <tr>

                <td>부산</td>

                <td>부산 vs 대전</td>

                <td></td>

            </tr>

            <tr>

                <td>서울</td>

                <td>서울 vs 강원</td>

                <td></td>

            </tr>

        </table>

    </body>

</html>

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'Learning > HTML&JavaScript' 카테고리의 다른 글

HTML 멀티미디어  (0) 2020.07.24
HTML5 시멘틱 태그  (0) 2020.07.24
CSS와 박스 모델  (0) 2020.07.21
스타일과 스타일시트 글꼴  (0) 2020.07.17
<datalist>가 있는 신청서 폼  (0) 2020.07.17

'Learning/HTML&JavaScript' Related Articles

티스토리툴바