국비37

냐아암·2023년 6월 9일

CSS Content border clear float html layout margin padding position

국비

목록 보기

49/114

레이아웃

구성 요소를 제한된 공간에 효율적으로 배치하는 것

📍 배치 방법 : display 속성

block : 화면을 수직 분할(행을 나눔)
+ width / height 속성 사용 가능
inline : 화면을 수평 분할(하나의 행에 컬럼을 나눔 == 글자)
+ width / height 속성 사용 불가
inline-block : inline의 수평 분할 + block의 크기 조정
none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태
flex : 요소에 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 형식

📍 요소 4가지 영역

1. content 영역
- 요소의 내용이 작성되어 지는 영역
(시작태그와 종료태그 사이에 작성되는 내용)

padding 영역
- content 영역과 border 영역 사이
border 영역
- 요소의 테두리가 지정되는 영역
- content보다 바깥쪽에서 content를 감싸고 있음
margin 영역
- 다른 요소와의 간격을 나타내는 영역

padding, border, margin은 방향에 따라 크기 지정 가능
ooo-top
ooo-bottom
ooo-left
ooo-right
padding, margin, border-width -> 상우하좌(시계방향)
margin-auto: 좌우 요소 간의 간격을 자동으로 지정하여 가운데 정렬
box-sizing

📍 요소 정렬 스타일

float : 요소를 띄어서 좌/우로 정렬하는 속성
clear : float로 인해 띄어져 있는 상태를 해제하는 속성
(float 사용 시 겹침 문제 발생하는데 이를 해결할 수 있음)

📍 배치 관련 스타일

position은 요소의 위치를 지정하는 속성

position : relative; (상대적인)
지정된 요소 내부에 다른 요소가
상대적인 위치를 지정할 수 있도록
기준이 되게 만드는 속성
position : absolute; (절대적인)
기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함

position : fixed; (고정된)
항상 고정된 위치에 요소 배치 (화면이 움직이든 말든 항상 같은 위치)

07_레이아웃 스타일1

<!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>07_레이아웃스타일1</title>

    <link rel="stylesheet" href="css/layout1.css">

</head>
<body>

    <h1>레이아웃(Layout)</h1>
    <pre>
        사전적 의미: 배치, 정리
        기술적 의미: 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미
    </pre>

    <hr>

    <h1>화면 배치 방법(형식) : display 속성</h1>

    <pre>
        요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

        - block : 화면을 수직 분할(행을 나눔)
                + width / height 속성 사용 가능

        - inline : 화면을 수평 분할(하나의 행에 컬럼을 나눔 == 글자)
                + width / height 속성 사용 불가

        - inline-block : inline의 수평 분할 + block의 크기 조정

        - none : 화면에 요소가 표시되지는 않으나 존재는 하고 있는 상태

        - flex : 요소에 정렬되는 방향, 요소 간의 간격을 유연하게 처리하는 형식
    </pre>
    
    <h3>block 형식의 요소(div)를 inline으로 변경</h3>

    <div class="block area1 inline">1번 영역</div>
    <div class="block area2 inline">2번 영역</div>
    <div class="block area3 inline">3번 영역</div>
    <div class="block area4 inline">4번 영역</div>
    <div class="block area5 inline">5번 영역</div>

    <h3>inline 형식의 요소(span)를 block으로 변경</h3>

    <span class="area1 block">1번 영역</span>
    <span class="area2 block">2번 영역</span>
    <span class="area3 block">3번 영역</span>
    <span class="area4 block">4번 영역</span>
    <span class="area5 block">5번 영역</span>

    <h3>inline-block 확인하기</h3>
    <!-- div.area$.block.inline-block{$번 영역}*5 -->
    <div class="area1 block inline-block">1번 영역</div>
    <div class="area2 block inline-block">2번 영역</div>
    <div class="area3 block inline-block">3번 영역</div>
    <div class="area4 block inline-block">4번 영역</div>
    <div class="area5 block inline-block">5번 영역</div>

    <hr>

    <h1>화면 (영역) 분할</h1>

    <h3>상하 2분할</h3>
    <pre>
        [준비물]
        - 감싸는 영역 요소
        - 내부에 영역을 분할할 요소 
        - display : block 
        - 크기 단위(고정(px), 가변(%))
    </pre>

    <!-- 감싸는 영역 요소 -->
    <div id="container-1">
        <!-- 내부에 영역을 분할할 요소 -->
        <div class="div-1"></div>
        <div class="div-1"></div>

    </div>

    <hr>

    <h3>상하 3분할</h3>
    <pre>
        - 감싸는 영역(부모) 요소 id: container-2
        - 화면 분할 요소 class : div-2
        - 분할 비율 -> 20:30:50
        - 배경색 자유롭게
    </pre>
    
    <div id="container-2">
        <div class="div-2"></div>
        <div class="div-2"></div>
        <div class="div-2"></div>


    </div>

    <hr>

    <h3>좌우 2분할</h3>

    <pre>
        [준비물]
        - 감싸는 영역 요소
        - 내부에 영역을 분할할 요소 
        - 크기 단위(고정(px), 가변(%))
        - display : inline-block(약간 문제점이 있을 순 있다.)
    </pre>

    <!-- 감싸는 영역 요소 -->
    <div id="container-3">
        <!-- 내부의 두 요소 사이에 enter == 한 칸 띄어쓰기 -->
        <div class="div-3"></div><div class="div-3"></div>
    </div>

    <hr>

    <h3>display : none</h3>
    <pre>
        요소는 존재하지만 화면에는 보이지 않는다.
        (투명 X)

        -> visibility : hidden;(투명 O)
    </pre>

    <div class="div-4">test</div>

    <div class="div-4" id="test4">css가 적용될 요소</div>
    
    <div class="div-4">test</div>

</body>
</html>

layout1.css

.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}

.block{
    border: 1px solid black;
    width: 150px;
    height: 150px;
    color: white;

    display: block; /* 요소 형식을 block으로 변경 */
}

.inline{
    display: inline; /* 요소 형식을 inline으로 변경 */
}

.inline-block{
    display: inline-block;
    /* 요소 형식을 inline-block으려 변경 */
}

/* 감싸는 영역 요소 */
#container-1{
    border: 3px solid black;
    width: 300px;
    height: 500px;
}

/* 내부에 영역을 분할할 요소 */
.div-1{

    /* 고정 크기 단위
       -> 감싸는 영역의 크기가 변하면 다시 계산(번거로움)
    */

    /* width: 300px;
    height: 250px; */

    /* 가변 크기 단위(%)
       -> 화면이나 감싸는 영역의 크기에 비례해서 크기가 자동 계산
     */

     width: 100%; /* 323px * 100 % / 100 = 323px */
     height: 50%; /* 472px * 50 % / 100 = 236px */

}

/* 위쪽 분할 요소 */
#container-1 > .div-1:first-of-type{
    background-color: red;
    height: 30%;
}
/* 아래쪽 분할 요소 */
#container-1 > .div-1:last-of-type{
    background-color: blue;
    height: 70%;
}

#container-2{
    border: 2px solid black;
    width: 300px;
    height: 400px;
}

/* block 형식의 요소는 
   별도의 width가 지정되지 않으면 항상 100% */
/* .div-2{
    width: 100%;
} */

#container-2 > .div-2:nth-child(1) {
    background-color: aquamarine;
    height: 20%
}
#container-2 > .div-2:nth-child(2) {
    background-color: blue;
    height: 30%;
}
#container-2 > .div-2:nth-child(3) {
    background-color: plum;
    height: 50%;
}

/* 좌우 2분할 */
#container-3{
    border: 5px solid red;
    width: 400px;
    height: 200px;
}

.div-3{ /* 내부 */
    width: 50%;
    height: 100%;

    display: inline-block;
}

#container-3 > .div-3:first-child{
    background-color: pink;
}
#container-3 > .div-3:last-child{
    background-color: steelblue;
}

/* display : none; / visibility : hidden */
.div-4{
    border: 3px solid black;
    height: 100px;

}

#test4{
    background-color: deeppink;

    /* 요소가 투명한 색으로 변했다. */
    /* visibility: hidden; */

    /* 요소는 존재하지만 화면에 보이지 않음(영역도 차지하지 않는다.) */
    /* display: none; */
}

08_레이아웃 스타일2

<!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>08_레이아웃스타일2</title>

    <link rel="stylesheet" href="css/layout2.css">

</head>
<body>

    <h1>요소의 영역(여백) 관련 속성</h1>
    <pre>
        HTML 요소는 총 4가지 영역으로 구성되어 있다.

        1. content 영역
           - 요소의 내용이 작성되어 지는 영역
           (시작태그와 종료태그 사이에 작성되는 내용)

        2. padding 영역
           - content 영역과 border 영역 사이 

        3. border 영역
           - 요소의 테두리가 지정되는 영역
           - content보다 바깥쪽에서 content를 감싸고 있음

        4. margin 영역
           - 다른 요소와의 간격을 나타내는 영역
    </pre>
    
    <h3>기준</h3>
    <div class="box">내용입니다.</div>
    
    <hr>
    
    <h3>content 영역</h3>
    <div class="box content">내용입니다.</div>
    <hr>
    
    <h3>border 영역</h3>
    <div class="box border">내용입니다.</div>
    <hr>
    
    <h3>padding 영역</h3>
    <div class="box content border padding">내용입니다.</div>
    <hr>
    
    <h3>margin 영역</h3>
    <div class="box content border padding margin">내용입니다.</div>
    <div class="box content border padding margin" id="m1">내용입니다.</div>
    <hr>

    <hr>

    <h2>padding, border, margin의 방향성</h2>

    <pre>
        padding, border, margin은 방향에 따라 크기를 지정할 수 있다.

        ooo-top 
        ooo-bottom 
        ooo-left 
        ooo-right 

        (ooo에는 padding, border, margin 선택해서 작성)

    </pre>

    <h3>padding 테스트</h3>
    <div class="box padding-test">내용입니다.</div>
    <hr>

    <h3>border 테스트</h3>
    <div class="box border-test">내용입니다.</div>
    <hr>

    <h3>margin 테스트</h3>
    <div class="box margin-test">내용입니다.</div>
    <hr>

    <h3>margin : auto; 테스트</h3>

    <div style="width: 500px; height: 300px; border: 2px solid black;">
        <div class="box margin-auto"></div>
    </div>

    <hr><hr>
    <h2>box-sizing 속성</h2>

    <pre>
        요소의 영역 중 실제로 화면상에 보여지는 부분인 
        content, padding, border는 각각 크기를 지정할 수 있음
        -> 이때, 각각의 크기를 따로 지정하다 보니 
           전체적인 크기를 한 눈에 파악하고 설정하기 힘들다. 
    </pre>

    <div class="box" id="box-sizing">내용입니다.</div>



</body>
</html>

layout2.css

.box{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

/* content 영역 */
.content{
    width: 150px;
    height: 150px;
    /* width/heihgt 속성은
        기본적으로 content 영역의 크기를 지정하는 속성
    /* border 영역 */
}
.border{
    border: 10px solid red;
    /* 10px 실선 빨간 테두리 */
}

/* pedding 영역 */
.padding{
    padding : 30px;
    /* 내용과 테두리 사이 간격을 상하좌우 30px씩 벌림 */
}

/* margin 영역 */
.margin{
    margin : 50px;
    /* 타 요소와의 간격을 상하좌우 50px씩 벌렸다. */
}

/* 서로 다른 요소의 margin이 겹칠 경우
   더 큰 margin을 가진 요소의 값을 따른다. */
#m1{
    margin: 100px;
}

/* ************************************************************** */

/* 방향성 */

.padding-test{
    /* padding-top : 20px;
    padding-bottom : 50px;
    padding-left : 30px;
    padding-right : 30px; */

    /* padding 속성 : 
       작성법에 따라서 padding 특정 방향에 크기를 지정할 수 있음
    */

    /* 값 1개 : 상하좌우 */
   /*  padding: 30px; */

   /* 값 2개 : 상하, 좌우 */
   /* padding : 50px 100px; */

   /* 값 3개 : 상, 좌우, 하 (위->아래 차례대로) */
    padding : 10px 50px 100px;

    /* 값 4개 : 상 우 하 좌 (상 기준 시계방향) */
    padding : 10px 20px 30px 40px;
    
}


.margin-test{
    /* margin-top: 30px;
    margin-bottom: 50px;
    margin-left: 100px;
    margin-right: 200px; */

    /* margin 속성 사용법은 padding과 동일 */
    margin : 30px 200px 50px 100px;
}

/* border(속성이 조금 다름) */
.border-test{
    /* border 속성은 상하 좌우 방향을 별도 지정할 수 없음 */

    /* border : 1px 2px 3px 4px solid red; (오류 코드)*/

    border : 4px solid red;


    /* 스타일 */
    /* 너비 | 스타일 */
    /* 스타일 | 색 */
    /* 너비 | 스타일 | 색 */

    /* 네 방향을 따로 지정하고 싶으면 border- 방향으로 별도 지정 */
    border-top : 1px solid black;
    border-bottom: 5px dashed magenta; /* dashed: 절취선 */
    border-left: 10px dotted blue; /* dotted: 점선 */
    border-right: 7px double orange;

    /* border의 크기(두께)만을 설정하는 경우
       상하좌우를 한 번에 처리할 수 있음
    */

    /* 1개: 상하좌우 */
    /* 2개: 상하, 좌우 */
    /* 3개: 상, 좌우, 하 (위->아래) */
    /* 4개: 상, 우, 하, 좌 (상 기준 시계방향) */
    border-width: 20px 4px 5px 1px;

}

/* margin: auto 테스트 */
.margin-auto{

    /* 부모-자식 관계의 요소라도
       서로 다른 요소이기 때문에
       margin 지정 시 간격을 두게 된다. */

       
       /* margin-top:100px; */
       margin-left: 200px;
       
       /* 좌우 요소 간의 간격을 자동으로 지정하여 가운데 정렬 */
       margin : auto;
       /* 갑자기 margin-top이 무시됐다.
       -> margin 속성 자체가 상하좌우를 동시에 지정하는 속성이라
       상(top)부분에도 auto가 지정되어 이전 100px 내용을 덮어쓰기 함
       
       해결방법: margin-top을 auto 밑에 작성하여 auto를 덮어씌움
       */
       margin-top:100px;
}

/* box-sizing */

#box-sizing{
    /* 테두리 10px, 패딩 20px, 내용 나머지
       전체 요소 크기가 가로/세로 300px인 정사각형 만들기 */
       padding: 20px;
       border: 10px solid black;

       /* padding, border 크기를 감안하여 계산해야 함 
          --> 해결법 : box-sizing*/
   /*  width: 240px;
    height: 240px; */

    width: 300px;
    height: 300px;
    /* width / height는 기본적으로 content 영역에 대한 크기를 지정 */
    /* 이를 변경하는 방법이 box-sizing */
    box-sizing: border-box;
    /* border-box
        - width / height 속성 지정 시
          content + padding + border의 크기를 합산한 결과가
          지정한 속성값과 같게 자동으로 비율 계산하여 적용

        content-box(기본값)
        -width/height 속성 지정 시 content 영역만 적용
    
    */
}

09_레이아웃 스타일3

<!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>09_레이아웃스타일3</title>

    <link rel="stylesheet" href="css/layout3.css">
</head>
<body>
    <h1>요소 정렬 스타일(float / clear)</h1>

    <pre>
        float(뜨다, 띄우다, 뜨는 물건) : 요소를 띄어서 좌/우로 정렬하는 속성

        clear : float로 인해 띄어져 있는 상태를 해제하는 속성
               (float 사용 시 겹침 문제 발생하는데 이를 해결할 수 있음)
    </pre>

    <h3>기본형태</h3>
    <div class="test">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>Hello</div>
        <div>world</div>
        <div>5</div>
    </div>

    <h3>float : left;</h3>
    <div class="test">
        <div class="float-left">1</div>
        <div class="float-left">2</div>
        <div class="float-left">3</div>
        <div class="float-left">4</div>

        <div>Hello</div>
        <div class="clear">World</div>

        <div class="float-left">5</div>
        <div class="float-left">6</div>

        <div class="clear">지금은 두 시 이십 분</div>
    </div>


    <h3>float:right</h3>

    <div class="test">
        <div class="float-right">1</div>
        <div class="float-right">2</div>
        <div class="float-right">3</div>
        <div class="float-right">4</div>
        <div class="clear">Hello</div>
        <div>World</div>
        <div>5</div>
    </div>

    <hr><hr>

    <h2>float를 활용한 좌우 2분할</h2>

    <div class="container">
        <div class="div-1 bg-1"></div>
        <div class="div-1 bg-3"></div>
    </div>

    <hr>

    <h2>float를 이용한 4분할</h2>

    <div class="container">
        <!-- 1행 -->
        <div class="row-2">
            <div class="div-1 bg-2"></div> <!-- 1열 -->
            <div class="div-1 bg-4"></div> <!-- 2열 -->
        </div>
        <!-- 2행 -->
        <div class="row-2">
            <div class="div-1 bg-3"></div> <!-- 1열 -->
            <div class="div-1 bg-1"></div> <!-- 2열 -->
        </div>
    </div>

    <hr>
    <div class="container-3">
        <div class="row-2 div-1">
            <div class="row-2 bg-1"></div>
            <div class="row-2 bg-4"></div>
        </div>

        <div class="row-2 bg-6"></div>

        <div class="row-2 bg-3"></div>
    </div>


    <!-- 쌤 코드 -->
    <br><br>
    <div class="container-3">
        <!-- 1행 -->
        <div class="row-2">
            <div class="div-1">
                <div class="row-2 bg-1"></div>
                <div class="row-2 bg-4"></div>
            </div> <!-- 1열 -->
            <div class="div-1 bg-6"></div> <!-- 2열 -->
        </div>

        <!-- 2행 -->
        <div class="row-2 bg-3"></div>
    </div>
    
</body>
</html>

layout3.css

div{
    border: 1px solid black;
    box-sizing: border-box;
}

.test{
    width: 300px;
    height: 200px;
    background-color: #eee;
}

.float-left{
    width: 50px;
    height: 50px;
    background-color: pink;

    /* 요소를 왼쪽으로 흐름을 주어 왼쪽 정렬 */
    float:left;
    /* 띄워지면서 한 줄을 다 차지하려고 하던
       block 형식의 오른쪽 margine이 사라짐
       -> 오른쪽에 다른 요소가 붙게 됨(한 줄로 요소가 배치됨) */
}

.float-right{
    width: 50px;
    height: 50px;
    background-color: cornflowerblue;
    float:right;



    /* 오른쪽으로 먼저 작성된 요소가 
       차곡차곡 쌓이기 때문에
       출력되는 순서가 반대로 보임 */
}

.clear{
    background-color: red;
    color: white;

    /* 현재 요소부터 겹쳐지는 float 상태를 해제 

        * clear의 방향성
        - float는 left/right 나눠져 있는데
          지정된 float 흐름과 같은 방향을 해제해야
          겹침 문제가 해결됨
    
    */
    /* clear : left; */

    /* float : left, right 를 모두 해제 */
    clear : both
    
}

/* 좌우 2분할 */
.container{
    width: 400px;
    height: 200px;
}

.div-1{
    width: 50%;
    height: 100%;
    float: left;
}

.bg-1{background-color: red}
.bg-2{background-color: orange}
.bg-3{background-color: yellow}
.bg-4{background-color: green}
.bg-5{background-color: lightblue}
.bg-6{background-color: navy}
.bg-7{background-color: violet}

/* 4분할 */
.row-2{
    height: 50%;
    /* width: 100%; 기본적으로 100%-> 생략가능*/
}

.container-3{
    width: 400px;
    height: 400px;
}

10_레이아웃 스타일4

<!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_레이아웃스타일4</title>

    <link rel="stylesheet" href="css/layout4.css">
</head>
<body id="body-top">

    <h1>배치 관련 스타일(position)</h1>

    <pre>
        position은 요소의 위치를 지정하는 속성

        position : relative; (상대적인)
        - 지정된 요소 내부에 다른 요소가
          상대적인 위치를 지정할 수 있도록
          기준이 되게 만드는 속성

        * 내부에 작성되는 요소에 위치 지정 시
          top, bottom, left , right 속성을 사용할 수 있음

        position : absolute; (절대적인)
        - 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함

        position : fixed;(고정된)
        - 항상 고정된 위치에 요소 배치 (화면이 움직이든 말든 항상 같은 위치)
    </pre>

    <hr>

    <div class="container-1">
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
    </div>

    <!-- absolute의 특징 중 절대적인 위치에 배치되는 특징은
         body 태그의 자식인 경우에만 가능하다. -->
    <div class="third"></div>

    <hr>

    <h2>요소를 영역 정가운데에 배치하기</h2>
    <div class="container-2">
        <div id="center"></div>
    </div>

    <div class="fixed-area">
        <a href="#body-top">위쪽으로 이동</a>
        <!-- #은 임시값 -->
    </div>
    
</body>
</html>

layout4.css

div{
    border: 1px solid black;
    box-sizing: border-box;
    /* -> width/height 값이 
          content + padding + border 합한 값에 맞게
          알아서 비율 조정
     */
}

.container-1{
    border: 2px dashed red;

    position: relative;
    /* 내부에 작성되는 요소에
       상대적인 위치(top/bottom/left/right)를 지정할 수 있음 */
}

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

.second{
    width: 200px;
    height: 200px;
    background-color: green;

    position: absolute; /* 요소 기존 배치 무시(겹치기) 가능 */
    /* + 상위 요소가 relative -> 내부에 아무 위치 배치 가능 */

    top: 50px; /* 위쪽에서 얼마만큼 떨어지겠다. */
    left: 50px; /* 왼쪽에서 얼마만큼 떨어지겠다. */
}

.third{
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;

    top: 100px;
    left: 100px;
}

/* 정가운데 배치 */
.container-2{
    width: 300px;
    height: 300px;
    position: relative; /* 내부 요소의 상대 위치 지정 */
}

#center{
    width: 50px;
    height: 50px;
    background-color: pink;

    /* relative 내부 요소 중
       position이 absolute(4방향) top/bottom 등을 사용할 수 있다. */
    position: absolute;

    /* 사방으로 요소를 당김 */
    top : 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin : auto;

}

/* fixed */
.fixed-area{
    width: 120px;

    /* align : 맞추다, 정렬하다 */
    text-align: center;

    position: fixed;
    /* fixed 요소는 화면(뷰포트, 브라우저) 기준으로 배치됨
       다른 요소와 겹쳐질 수 있고, 
       별도로 화면을 차지하려 하지 않음 */
    /* 스크롤의 사용유무와 상관없이 고정되어 있음 */
    bottom:50px;
    right: 50px;
}

냐아암

개발 일지

이전 포스트

국비 36

다음 포스트

국비37

국비

07_레이아웃 스타일1

layout1.css

08_레이아웃 스타일2

layout2.css

09_레이아웃 스타일3

layout3.css

10_레이아웃 스타일4

layout4.css

국비 36

국비 38

0개의 댓글