CSS 박스 모델

FE_Log

JunO3O

홈

방명록

전체글

검색

분류 전체보기 (50)

태그 목록

배경 속성 html 글자태그 반응 선택자 글자 속성 요소 배치 자손 선택자 공간 분할 CSS 단위 one true 레이아웃 중앙 레이아웃 그레이디언트 글자 생략 속성 선택자 the web developer bootcamp 입력 양식 수평 레이아웃 display 속성 박스 속성 태그 선택자 유동 속성 위치 속성 상태 선택자 구조 선택자 목록태그 Udemy vscode 후손 선택자 아이디 선택자 css

즐겨찾기

CSS 박스 모델

CSS 박스 모델

2023. 3. 21. 03:12ㆍ비공개

박스 모델

: 박스 모델은 아래와 같이 영역으로 구분됩니다.

가로, 세로 - width, height

: 박스 모델의 content 영역은 가로(width)와 세로(height)를 통해 크기를 정합니다.

: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

: 크롬의 개발자 도구를 통해 클릭한 content의 영역 크기를 보면 567 x 57 이라는 것을 알 수 있습니다.

: width 와 height 에 CSS 를 적용하면 박스의 크기가 바뀌게 됩니다.

div {
    width : 200px; /* width 는 가로 크기 */
    height : 200px; /* height 는 세로 크기 */
}

테두리 - border

: border는 박스의 테두리 스타일을 지정할 때 사용합니다.

: https://developer.mozilla.org/ko/docs/Web/CSS/border

ㅁ border-width

: border-width 는 테두리의 두께를 바꿀 때 사용합니다.

ㅁ border-color

: border-color 은 테두리의 색상을 바꿀 때 사용합니다.

ㅁ border-style

: border-style 은 테두리의 모양을 절취선, 점선, 실선 등 여러 모양으로 바꿀 때 사용합니다.

: 가장 많이 사용하는 스타일은 solid이며, 실선을 의미합니다.

/* 테두리의 굵기를 지정할 때 */
border-width : ___;
/* 테두리의 색상을 지정할 때 */
border-color : ___;
/* 테두리의 모양을 지정할 때 */
border-style : ___;
/* 스타일을 2개 적용하고 싶은 경우 */
border-style : _1_ _2_;   /* 위아래는 1이 적용되고, 왼쪽오른쪽에는 2가 적용됩니다. */

ex)

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/box_width_height.css">
</head>
<body>
    <div id="one">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
    <div id="two">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
    <div id="three">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
</body>
</html>

div {
    width : 200px; /* width 는 가로 크기 */
    height : 200px; /* height 는 세로 크기 */
}

#one {
    background-color: #a2d2ff;
    border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid;
}

#two {
    background-color: #ffc8dd;
    border-width: 10px;
    border-color : #d5bdaf;
    border-style : solid;
}

#three {
    background-color: #cdb4db;
    border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid;
}

=> div 의 가로, 세로를 200px, 200px로 지정했었는데 테두리의 크기를 지정함으로써 가로, 세로에 20px씩(위, 아래, 왼쪽, 오른쪽 10px씩) 추가됩니다. 때문에 이 요소의 크기는 220x220이 됩니다.

ㅁ border 만 사용하여 두께, 스타일, 색상 정하기

: border-width, border-style, border-color 을 따로 작성하지 않고, border 만을 사용하여 두께, 스타일, 색상을 지정할 수 있습니다.

border : 두께, 스타일, 색상;
ex) 
border : 10px solid blue;   /* 10px 두께의 파란색(blud) 실선(solid)으로 스타일합니다. */

ex)

div {
    width : 200px; /* width 는 가로 크기 */
    height : 200px; /* height 는 세로 크기 */
}

#one {
    background-color: #a2d2ff;        /* 기존의 CSS 3줄을 주석처리하고 */
    /* border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid; */
    border : 10px solid  #f5ebe0;     /* border 만을 사용하여 똑같은 스타일을 적용할 수 있습니다. */
}

#two {
    background-color: #ffc8dd;
    /* border-width: 10px;
    border-color : #d5bdaf;
    border-style : solid; */
    border : 10px solid #d5bdaf;
}

#three {
    background-color: #cdb4db;
    /* border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid; */
    border : 10px solid #f5ebe0;
}

테두리 둥글게 하기 - border-radius

: border-radius는 각진 모서리를 둥글게 만들 수 있습니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

border-radius : __%;
ex)
border-radius : 25%;   
ex) 원으로 만드는 방법
border-radius : 50%;   /* 50%를 적용하면 원이 됩니다. */

ex)

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/box_width_height.css">
</head>
<body>
    <div id="one">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
    <div id="two">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
    <div id="three">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel nobis pariatur fugiat sunt facilis ratione ut
        consequatur delectus officiis, sint maiores, at inventore animi exercitationem vitae corporis soluta voluptatem
        in?
    </div>
</body>
</html>

div {
    width : 200px; /* width 는 가로 크기 */
    height : 200px; /* height 는 세로 크기 */
}

#one {
    background-color: #a2d2ff;
    /* border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid; */
    border : 10px solid  #f5ebe0;
    border-radius: 10%;                  /* 10% 적용 */
}

#two {
    background-color: #ffc8dd;
    /* border-width: 10px;
    border-color : #d5bdaf;
    border-style : solid; */
    border : 10px solid #d5bdaf;
    border-radius: 30%;                  /* 30% 적용 */
}

#three {
    background-color: #cdb4db;
    /* border-width: 10px;
    border-color : #f5ebe0;
    border-style : solid; */
    border : 10px solid #f5ebe0;
    border-radius: 50%;                  /* 50% 적용*/
}

패딩 padding

: 패딩(padding)이란 콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간을 패딩이라고 합니다.

: 상단 패딩, 하단 패딩, 좌측 패딩, 우측 패딩이 있으며, 한번에 작성할 수도 있습니다.

: 텍스트 크기는 그대로 두고 영역만 크게 만들고 싶다면 padding을 사용하면 됩니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/padding

content(파란색)와 border(노란색) 사이에 있는 초록색 영역이 padding 영역입니다.

/* 똑같은 padding 크기 사용법 */
padding : ___;

/* 두 개의 다른 padding 크기 사용법 */
padding : __상단하단크기__ __좌우크기__; 

/* 세 개의 다른 padding 크기 사용법 */ 
padding : __상단크기__ __좌우크기__ __하단크기__;

/* 네 개의 다른 padding 크기 사용법 */
padding : __상단크기__ __우측크기__ __하단크기__ __좌측크기__;

ex)

/* 상단에 200px, 우측에 150px, 하단에 150px, 좌측에 50px padding을 적용합니다. */
padding : 200px 150px 100px 50px;

4개의 padding 값을 따로 지정할 때 순서는 시계 방향으로 지정합니다.

여백 margin

: margin 은 여백의 크기를 지정할 때 사용합니다.

: 여백이란 한 요소와 다른 요소의 각 테두리 사이의 간격을 말합니다.

: <body> 태그에는 기본적으로 margin이 있는데 보통 페이지를 만들 때 margin : 0; 을 입력하여 여백을 지우고 만듭니다.

: https://developer.mozilla.org/en-US/docs/Web/CSS/margin

/* 상하좌우 모두 같은 값으로 margin 설정 */
margin : ___;

/* 위치를 지정하여 margin 설정 */
margin-top : ___;
margin-bottom : ___;
margin-left : ___;
margin-right : ___;

TIP) margin : ___px 뒤에 auto를 붙이면 요소가 컨테이너 중앙에 위치하게 됩니다.

선택자 {
	margin : ___px auto;
}
ex) 
h1 {
	margin : 10px auto;
}

margin / padding 차이

: margin은 요소와 요소 사이의 공간을 말하고, padding은 콘텐츠와 테두리 사이의 간격을 말합니다.

디스플레이 속성 display

ㅁ block vs inline

: 블록(block)은 한 줄을 다 차지하는 특성을 가지고 있어 요소를 다음 줄로 밀어내는 특성을 가지고 있습니다.

: 인라인(inline)은 한 줄을 다 차지하지는 않는 특성을 가지고 있어 다음 요소가 같은 줄에 들어올 수 있으면 다른 요소나 내용을 다른 줄로 밀어내지 않습니다.

: 블록에는 width 값이 적용되는 반면, inline은 content에 맞춰 박스 길이가 맞춰지는 등 블록과 인라인에 따라 적용되는 박스 속성이 다릅니다.

/* 인라인(inline)은 한 줄에 나란히 요소를 배치합니다. */
display : inline;

/* 블록(block)은 한 줄아 하나의 요소만 배치하고, 다음 요소는 아래 줄에 배치합니다. */
display : block;

ex)

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/display.css">
</head>

<body>
    <h1> display 연습 1 - 블록 </h1>          <!-- h1은 블록 입니다.-->
    <h1> display 연습 2 - 블록 </h1>
    <h1> display 연습 3 - 블록 </h1>
    <h1> display 연습 4 - 블록 </h1>
    <h1> display 연습 5 - 블록 </h1>

    <span> display 연습 1 - 인라인</span>      <!-- span은 인라인 입니다. -->
    <span> display 연습 2 - 인라인</span>
    <span> display 연습 3 - 인라인</span>
    <span> display 연습 4 - 인라인</span>
    <span> display 연습 5 - 인라인</span>
</body>

</html>

h1 {
    background-color: #e7c6ff;
    border : 1px solid black;
}

span { 
    background-color: #bbd0ff;
    border : 1px solid black;
}

ㅁ display 적용

: h1은 블록이지만 display를 통해 인라인으로 바꿀 수 있으며, span은 인라인이지만 display를 통해 블록으로 바꿀 수 있습니다.

h1 {
    background-color: #e7c6ff;
    border : 1px solid black;
    display : inline;             /* display : inline; 를 통해 블록을 인라인으로 바꿀 수 있습니다.*/
}

span { 
    background-color: #bbd0ff;
    border : 1px solid black;   
    display : block;              /* display : block; 를 통해 인라인을 블록으로 바꿀 수 있습니다. */
}

한줄에 하나씩 차지하던 블록이 display : inline를 만나 한줄에 여러 개씩 나열됐고, 한줄에 여러 개씩 나열되던 인라인이 display : inline를 만나 한줄에 하나씩 차지하게 됩니다.

ㅁ inline-block

: inline-block은 inline 특성과 block 특성을 가진 요소를 만드는 방법으로, 한줄에 나열되는 inline의 특성과 block에 적용되는 박스 모델을 가집니다.

/* 인라인-블록(inline-block)은 한 줄에 배치하는 인라인의 특성과 block에 적용되는 박스 모델 특성을 가지고 있습니다. */
display : inline-block;

ex)

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/display.css">
</head>
<body>
    <div> inline-block </div>
    <div> inline-block </div>
    <div> inline-block </div>
    <h1> display 연습 1 - 블록 </h1>
    <h1> display 연습 2 - 블록 </h1>
    <h1> display 연습 3 - 블록 </h1>
    <h1> display 연습 4 - 블록 </h1>
    <h1> display 연습 5 - 블록 </h1>
    <br>
    <br>
    <span> display 연습 1 - 인라인</span>
    <span> display 연습 2 - 인라인</span>
    <span> display 연습 3 - 인라인</span>
    <span> display 연습 4 - 인라인</span>
    <span> display 연습 5 - 인라인</span>
</body>
</html>

div {
    height : 200px;
    width : 200px;
    background-color : #f2cc8f; 
    border : 1px solid #81b29a;
    display : inline-block;
    margin : 50px;
}

ㅁ display : none;

: display : none 은 요소 자체를 삭제하는 것은 아니지만 웹 페이지 상에서 요소를 보이지 않게 숨길 때 사용합니다.

선택자 {
	display : none;
}

ex)

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/display.css">
</head>
<body>
    <div> inline-block </div>
    <div> inline-block </div>
    <div> inline-block </div>
    <h1> display 연습 1 - 블록 </h1>
    <h1> display 연습 2 - 블록 </h1>
    <h1> display 연습 3 - 블록 </h1>
    <h1> display 연습 4 - 블록 </h1>
    <h1> display 연습 5 - 블록 </h1>
    <br>
    <br>
    <span> display 연습 1 - 인라인</span>
    <span> display 연습 2 - 인라인</span>
    <span> display 연습 3 - 인라인</span>
    <span> display 연습 4 - 인라인</span>
    <span> display 연습 5 - 인라인</span>
    <br>
    <h2> display : none 은 요소를 숨길 때 사용합니다. </h2>
</body>
</body>
</html>

h1 {
    background-color: #e7c6ff;
    border : 1px solid black;
    display : inline;             
}

span { 
    background-color: #bbd0ff;
    border : 1px solid black;   
    display : block;             
}

div {
    height : 200px;
    width : 200px;
    background-color : #f2cc8f; 
    border : 1px solid #81b29a;
    display : inline-block;
    margin : 50px;
}

h2 {
    display : none;           /* none 키워드를 입력하여 웹 페이지에서 보이지 않도록 합니다. */
    
}

코드에 <h2> display : none 은 요소를 숨길 때 사용합니다. </h2> 라고 작성되어 있지만 display : none 으로 인해 웹 페이지에는 보이지 않습니다.

CSS 단위

: CSS 의 단위에는 상대적인(relative) 단위와 절대적인(absolute) 단위가 있습니다.

상대적인 단위 : em, rem, vh, vw, % 등 
/* %의 경우, 페이지 너비의 몇 %만큼 박스 크기로 지정하는 등으로 사용할 수 있습니다. */
vs
절대적인 단위 : px, pt, cm, in, mm
/* 절대적인 단위는 페이지의 크기가 변하다더라도 박스의 크기나 글자의 크기 등을 고정적인 크기로 가져갈 수 있습니다. %*/

ex) 상대적인 단위 %

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/css_unit.css">
</head>

<body>
    <h1> CSS 단위 </h1>
    <section>
        <div> </div>
    </section>
</body>

</html>

section {
    background-color: #8a817c;
    width : 500px;
    height: 500px;
}

div { 
    background-color: #bcb8b1;
    width : 50%;
    height : 50%;

}

ㅁ em vs rem

: em은 부모 값에 따라 바뀐다는 특징이 있습니다. (ex - 글자 크기를 2em으로 설정하면 부모 요소보다 2배 큰 크기가 됩니다.)

: em은 부모 항목의 크기를 기반으로 하기 때문에 목록을 중첩시킬수록 단계별로 커지거나 작아진다는 단점이 있습니다.

: rem은 글꼴 크기를 부모 요소의 크기에 따라 바꾸지 않고, 루트 HTML 요소의 글씨 크기에 따라 바꾼다는 점에서 em과 다릅니다. (즉, 문서 전체의 글꼴 크기에 따라 바뀝니다.)

: 루트 HTML 요소의 글씨 크기는 HTML 문서 맨 위의 <html lang="en"> 부분에서 설정되는 글자 크기를 말합니다.

ex) 상대적인 크기 em

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/css_unit.css">
</head>

<body>
    <h1> CSS 단위 </h1>
    <article>
        article의 글자 크기는 15px로 적용되어 있습니다.
        <h2> em은 부모의 글자 크기에 따라 값이 바뀌는 특성을 가지고 있으므로 2em이라고 하면 부모(article)의 글자 크기(15px) x 2 를 하여 30px이라는 값을 가집니다.</h2>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit iusto, modi repudiandae labore totam pariatur
            quis assumenda itaque maxime ratione in. Labore adipisci error dicta saepe commodi voluptatibus dolor
            molestias?
            Ipsa molestias odio qui impedit voluptatem laborum, repellat beatae, eius facere libero excepturi atque
            maiores suscipit nisi animi modi sint ducimus similique dolorum repudiandae neque magni quidem consectetur!
            Libero, atque.</p>
    </article>
    <section>
        <div> </div>
    </section>
</body>

</html>

section {
    background-color: #8a817c;
    width : 500px;
    height: 500px;
}

div { 
    background-color: #bcb8b1;
    width : 50%;
    height : 50%;

}

article {
    font-size: 15px;
}

h2 { 
    font-size: 2em;
}

p {
    font-size: 0.5em;
}

ex) 상대적인 크기 rem

<!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>Document</title>
    <link rel="stylesheet" href="/Bootcamp/CSS/css_unit.css">
</head>
<body>
    <article id="rem">
        rem은 HTML 문서의 기본 크기에 따라 크기가 바뀝니다. 기본 글씨 크기
        <h2> rem은 HTML 문서의 기본 글자 크기에 따라 크기가 바뀌므로 HTML 문서의 기본 글자 크기가 10px이면 2rem은 20px이 됩니다.</h2>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit iusto, modi repudiandae labore totam pariatur
            quis assumenda itaque maxime ratione in. Labore adipisci error dicta saepe commodi voluptatibus dolor
            molestias?
            Ipsa molestias odio qui impedit voluptatem laborum, repellat beatae, eius facere libero excepturi atque
            maiores suscipit nisi animi modi sint ducimus similique dolorum repudiandae neque magni quidem consectetur!
            Libero, atque.</p>
    </article>
</body>
</html>

html {
	font-size : 15px;
}

#rem {
    font-size : 1rem;
}

#rem h2 {
    font-size: 2rem;
}

#rem p {
    font-size: 3rem;
}

ㅁ HTML 기본 글자 크기 지정하기

: rem이 참고할 HTML 기본 글자 크기는 CSS를 통해 변경할 수 있습니다.

html {
	font-size : 10px;
}

'비공개' 카테고리의 다른 글

유용한 CSS 속성들 (0)	2023.03.21
CSS 선택자 (1)	2023.03.21
CSS : 기초 (1)	2023.03.21
HTML : 폼, 테이블 (0)	2023.03.21
HTML : 시맨틱(Semantics) (0)	2023.03.21

'비공개' 카테고리의 다른 글

관련글

티스토리툴바