[2022.11.04.금] CSS 박스모델, 포지션

수업내용/Web

[2022.11.04.금] CSS 박스모델, 포지션

주니어주니 2022. 11. 4. 19:19

1. CSS 박스모델

모든 HTML 엘리먼트(태그) 박스처럼 다루어진다.
화면 디자인, 화면의 레이아웃을 구성할 때 HTML 엘리먼트(태그)를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다.
박스모델의 구성
- HTML의 모든 엘리먼트(태그)는 margin, border, padding, content로 구성된다.
- margin : 테두리(border)의 바깥여백, 다른 엘리먼트와의 경계 (다른 엘리먼트와의 간격)
- border : 엘리먼트의 테두리, padding과 contents를 감싸고 있다.
- padding : 테두리(border)와 contents 사이의 여백, contents를 감싸고 있다. (콘텐츠와 테두리의 간격)
- contents : 박스모델이 가지는 실제 내용(텍스트 혹은 이미지)
너비
- Content의 너비 : width
- Element의 너비 : margin-left + border-left + padding-left + content + padding-right + border-right + margin-right
박스모델에서 엘리먼트의 실제 너비와 높이
- box-sizing: content-box (box-sizing이 content-box인 경우)
  - 박스의 사이즈에 Border와 Padding의 사이즈가 제외된다.
  - css에서 정의한 width가 contents의 너비로 정의 된다.
```
  디폴트너비 = leftmargin + leftborder + leftpadding  + content(width) + rightpadding + rightborder + rightmargin
```
- box-sizing: border-box (box-sizing이 border-box인 경우)
  - 박스의 사이즈에 Border와 Padding이 포함된다.
  - css에서 정의한 width가 border와 padding, content의 너비를 합한 것으로 정의된다.
```
  너비 = leftmargin + width + rightmargin
```

* 박스모델

<!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>Document</title>
    <style>
        span, div{
            border: 1px solid black;
        }
        #box-1{
            margin-left: 20px;
        }
        #box-2{
            margin-right: 50px;
        }
        #box-4{
            margin-left: -30px;
        }
        #box-5{
            border-top: 5px solid red;
            padding-top : 20px;
        }
        #box-6{
            padding-bottom : 20px;
        }
    </style>
</head>
<body>
    <h1>박스모델</h1>

    <!-- 
        박스모델의 프로퍼티값 설정하기
            - top, right, bottom, left를 각각 지정하기 
                { padding-top: 10px; padding-right: 40px; padding-bottom: 80px; padding-left: 120px; }
            - top, right, bottom, left의 값을 전부 같은 값으로 지정하기
                { padding: 40px; }
            - top과 bottom이 같은 값, right와 left를 같은 값으로 지정하기 (앞이 top과 bottom, 뒤가 right와 left)
                { padding: 40px 80px; }       
            - top, right, bottom, left를 각각 다른 값으로 지정하기 (top -> right -> bottom -> left 순)
                { padding: 10px 20px 40px 80px; } 
     -->

    <div style="border: 1px solid red;">
        <span id="box-1">콘텐츠1</span>
        <span id="box-2">콘텐츠2</span>
        <span id="box-3">콘텐츠3</span>
        <span id="box-4">콘텐츠4</span>
    </div>
    <div style="border: 1px solid red; padding: 10px">
        <div id="box-5">콘텐츠5</div>
        <div id="box-6">콘텐츠6</div>
    </div>
    <div>
        <div style="padding: 20px; margin-top: 5px;">The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        </div>
        <div style="padding: 20px 50px; margin-top: 5px;">The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        </div>
        <div style="padding: 10px 40px 80px 120px; margin-top: 5px;">The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
            The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        </div>
    </div>
</body>
</html>

2. CSS 포지션

포지션 속성은 엘리먼트의 위치를 결정하는 CSS 속성이다.

2-1. 포지션 속성의 종류

static
- position 속성을 정의하지 않았을 때 기본값으로 설정되어 있는 값
- 왼쪽에서 오른쪽으로, 위에서 아래로 엘리먼트가 배치되는 것
relative
- static이었을 때의 위치를 기준으로 top, right, bottom, left 방향으로 지정된 픽셀만큼 엘리먼트의 위치를 이동시킬 수 있다.
absolute
- 부모엘리먼트의 position 설정이 relative,fixed, absoute로 설정되어 있을 때 (부모엘리먼트가 static 속성이 아닌 경우) 부모를 기준으로 엘리먼트의 위치를 이동시킨다.
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>Document</title>
    <style>
        div.box {
            box-sizing: border-box;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        #box-1 {
            background-color: lightpink;
            z-index: 1;                 /*z축은 x축과 y축과 90도를 이루면서 위로 나가는 입체적 위치 -> 숫자가 높으면 위로 올라감*/
        }
        #box-2 {
            position: relative;         /*원래 있어야 하는 곳으로 부터 계산*/
            left: 70px;
            top: -50px;                 /*위에서 아래로 쌓이기 때문에 위로 올라가려면 반대방향*/
            background-color: lightblue;
            z-index: -1;                
        }
        #box-3 {
            position: relative;
            left: 200px;
            background-color: lightgoldenrodyellow;
        }
        .container {
            box-sizing: border-box;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            width: 300px;
            height: 200px;
        }
        #container-1 {
            position: absolute;         /*원점으로부터 계산*/
            left: 400px;
            top: 200px;
            background-color: lightgreen;
        }
        #container-2 {
            position: relative;         
            left: 300px;
            background-color: lightcoral;
        }
        #box-4, #box-5, #box-6 {
            position: absolute;         /*자기 부모가 relative, absolute이면 부모를 기준으로 움직임*/
            left: 75px;
            top: 50px;
            z-index: 1;
        }
        #box-7 {
            position: fixed;
            top: 20px;
            right: 20px;
        }
        
    </style>
</head>
<body>
    <h1>엘리먼트의 위치 결정하기</h1>

    <h2>relative로 엘리먼트의 위치 변경하기</h2>
    <p>relative는 그 엘리먼트가 원래 있어야하는 위치를 기준으로 이동시킨다.</p>
    <div id="box-1" class="box">박스1</div>
    <div id="box-2" class="box">박스2</div>
    <div id="box-3" class="box">박스3</div>

    <h3>absolute로 엘리먼트의 위치 변경하기</h3>
    <div id="container-1" class="container">
        <div id="box-4" class="box">box4</div>
    </div>
    <div id="container-2" class="container">
        <div id="box-5" class="box">box5</div>
    </div>
    <div id="box-6" class="box">box6</div>

    <h3>fixed로 엘리먼트의 위치 고정시키기</h3>
    <div id="box-7" class="box">box7</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">
    <title>Document</title>
    <style>
        #side-menu {
            border: 1px solid #ddd;
            background-color: black;
            font-weight: bold;
            color: white;
            width: 170px;
            margin-left: -150px;
        }
        #side-menu:hover{
            margin-left: -10px;
        }
        #side-menu ul {
            list-style: none;
        }
        #side-menu li {
            margin-bottom: 15px;
        }
        #center-content {
            width: 900px;
            margin: 20px auto;      /*위아래 마진을 설정, 좌우는 자동*/
        }
        #boxmodel-1 {
            box-sizing: content-box;
            width: 300px;           /*콘텐츠의 너비만 300 (실제 너비는 + padding, border, margin의 너비까지 더해야 함)*/
            padding: 25px;
            border: 10px solid black;
            margin: 20px;
        }
        #boxmodel-2 {
            box-sizing: border-box;
            width: 300px;           /*border + padding + content가 300이 되도록  */
            padding: 25px;
            border: 10px solid black;
            margin: 20px;
        }
        
    </style>
</head>
<body>
    <h1>마진의 활용</h1>

    <h2>margin-left를 조정해서 사이드메뉴 만들기</h2>
    <div id="side-menu">
        <ul>
            <li>홈</li>
            <li>국내도서</li>
            <li>외국도서</li>
            <li>전자책</li>
            <li>CD/음반</li>
            <li>공연/티켓</li>
            <li>영화예매</li>
            <li>중고거래</li>
        </ul>
    </div>

    <div id="center-content">
        <h3>margin을 조정해서 콘텐츠를 화면 중앙에 위치시키기</h3>
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
    </div>

    <div>
        <h3>box-sizing으로 박스모델 크기 정의하기</h3>
        <div id="boxmodel-1">content-box</div>
        <div id="boxmodel-2">border-box</div>
    </div>
</body>
</html>

2-2. CSS Layout

float 속성
- 부모엘리먼트 내의 특정 엘리먼트를 왼쪽 혹은 오른쪽으로 떠 있게 하는 것이다.
  - 엘리먼트가 floating되면 다른 엘리먼트는 floating된 엘리먼트 아래로 들어오게 된다.
  - floating된 엘리먼트 아래로 들어온 엘리먼트의 켄텐츠는 floating된 엘리먼트를 피해서 화면에 표시된다.
overflow 속성
- floating된 엘리먼트의 높이가, 원래 그 엘리먼트 포함하고 있던 부모 엘리먼트의 높이보다 크면, 부모엘리먼트 밖으로 벗어나게 된다.
- 부모 엘리먼트에 overflow:auto속성을 추가하면, 부모엘리먼트 밖으로 벗어나는 문제를 해결할 수 있다.
clear 속성
- 특정 엘리먼트의 옆쪽에 floating된 엘리먼트가 위치하지 못하게 하는 것이다.

* 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">
    <title>Document</title>
    <style>
        div{
            box-sizing: border-box;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
        }
        #wrapper {
            width: 1000px;
            margin: 10px auto;
            overflow: hidden;
        }
        .section {
            float: left;        /*띄워놓은 애들끼리는 겹칠 수 없기 때문에 float를 이용해서 단 나누기가 가능*/
            width: 305px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="section">
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
        </div>
        <div class="section">
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.
        </div>
        <div class="section">
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.  
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.  
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.  
            e커머스발(發) 리셀(되팔기) 시장 활성화로 과거에 없었던 새로운 ‘알바(아르바이트)’도 등장했다. 매장 문이 열리자마자 인기 제품을 구입하기 위해 달려가는 이른바 ‘오픈런’을 위해 리셀러들이 고용하는 알바다. 이들은 줄서기를 담당하는 ‘줄서기 알바’, 명품 업체들이 정해둔 구매 가능 요건을 충족하는 ‘구매대행 알바’ 등으로 세분됐다.  
        </div>
    </div>
</body>
</html>

* float 사용 2

<!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>Document</title>
    <style>
        img{float: left; margin: 20px; border: 1px solid blue;}
        div{border: 1px solid red;}
    </style>
</head>
<body>
    <div>
        <img src="resources/images/notebook-1.jpg">
        <img src="resources/images/notebook-1.jpg">
        <p>
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
        </p>
    </div>
</body>
</html>

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