[CSS 속성] 단위, 배경, 박스모델

[CSS 속성] 단위, 배경, 박스모델
/category/%EA%B3%B5%EB%B6%80/HTML%EA%B3%BC%20CSS

2022. 12. 21. 13:43

단위

CSS 속성과 값을 사용할 때 값과 함께 많이 사용되는 것 중 하나가 단위이다.

여러 가지의 단위가 있고 각각의 동작 방식이 다르기 때문에 특징을 제대로 알지 못하면 개발할 때 어려움을 겪을 수 있다.

절대 길이

절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 영향을 받지 않는다.

px(1px = 1/96th of 1 inch)

절대 길이이지만 장치의 해상도에 따라 상대적이다.

상대 단위이지만 화면에서 고정된 크기를 갖고 있기 때문에 절대 길이라고 이해하면 된다.

여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조라서 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있다.

pt(1pt = 1/72 of 1inch)

컴퓨터가 없던 시절부터 있었던 단위이다.

인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위이다.

웹 화면에 인쇄용 문서를 위한 스타일을 적용할 때 유용하게 사용할 수 있다.

그러나 사용하는 기기의 해상도에 따라 차이가 있어 웹 개발 시 권장하는 단위가 아니다.

예를 들어 Windows에서는 9pt = 12px, Mac에서는 9pt = 9px로 보이게 된다.

상대 길이

상대 길이는 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변한다.

부모의 값에 대해 백분율로 환산한 크기를 갖게 된다.

font-size를 기준으로 환산한다(선언한 해당 폰트의 대문자 M의 너비를 기준으로 함). 소수점 3자리까지 표현 가능하다.

1em은 현재 지정된 폰트 크기와 같고

2em은 현재 폰트 크기의 두 배, 즉 200%를 의미한다.

root의 font-size를 기준으로 환산한다.

viewport의 width값을 기준으로 1%의 값으로 계산된다.

예제를 통해서 확인해보자.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>단위</title>
        <link rel="stylesheet" href="css/단위.css">
    </head>
    <body>
        <div>
            <p class="px">단위 16px로 선언된 텍스트입니다.</p>
            <p class="pt">단위 12pt로 선언된 텍스트입니다.</p>
            <p class="percent">단위 100%로 선언된 텍스트입니다.</p>
            <p class="em">단위 1em로 선언된 텍스트입니다.</p>
        </div>
    </body>
</html>

/*단위.css파일*/
div { font-size: 16px; }
.px { font-size: 16px; }
.pt { font-size: 12pt; }
.percent { font-size: 100%; }
.em { font-size: 1em; }

percent 클래스 속성을 가진 p 태그를 살펴보면, 이 태그는 div 요소의 font-size 속성을 상속받아 16px로 표시된 것을 볼 수 있다.

100%라는 뜻은 상속받은 폰트 크기의 1배 값을 나타내는 뜻이다.

여기서 200%로 수정하게 되면

/*단위.css파일*/
div { font-size: 16px; }
.px { font-size: 16px; }
.pt { font-size: 12pt; }
.percent { font-size: 200%; }
.em { font-size: 1em; }

div 요소의 폰트 크기 16px의 2배인 32px로 수정되어 있는 것을 확인할 수 있다.

이번엔 em 클래스의 font-size를 2em으로 수정해보자.

/*단위.css파일*/
div { font-size: 16px; }
.px { font-size: 16px; }
.pt { font-size: 12pt; }
.percent { font-size: 200%; }
.em { font-size: 2em; }

2em도 마찬가지로 32px을 나타내는 것을 확인할 수 있다.

배경

색상

여러 속성에서 색상 값을 적용할 때 사용하는 속성은 color이다.

color 속성은 값으로 색상 값을 받는다.

색상 값은 다양한 형태로 적용할 수 있으며 값의 형태에 따라 선언하는 방식이 조금 다르다.

다양한 색상 값의 적용법에 대해 알아보자.

컬러 키워드

css 자체에서 사용 가능한 문자 식별자이다.

red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있다.

(transparent는 투명을 나타내는 키워드)

16진법

6자리의 16진수로 표현.

각각 두 자리 씩 R, G, B를 표현한다.

각 자리의 알파벳은 대소문자를 구분하지 않는다.

6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약해서 사용할 수 있다.

(ex. #ffaabb -> #fab)

rgb()

rgb 값은 rgb(R, G, B)의 형태로 각 변수 값의 강도를 정의한다.

0~255의 정수로 된 값을 지정할 수 있으며, 0 -> 255는 검정 -> 흰색으로 값의 변화를 나타낸다.

rgba()

rgb값에서 a(투명도)가 추가된 형태이다.

a 값은 0~1 사이의 값을 지정할 수 있으며 0 -> 1은 투명 -> 불투명으로 값의 변화를 나타낸다.

만약 a값이 입력되지 않으면 동작하지 않는다.

예제를 통해 직접 눈으로 확인해보자.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>색상</title>
        <link rel="stylesheet" href="css/색상.css">
    </head>
    <body>
        <h1>Colors can be set using hexadecimal value</h1>

        <div style="background-color:#ff0000"></div>
        <div style="background-color:#00ff00"></div>
        <div style="background-color:#0000ff"></div>

        <h1 style="color:#ff0000">Heading</h1>
        <h1 style="color:#00ff00">Heading</h1>
        <h1 style="color:#0000ff">Heading</h1>>
    </body>
</html>

/*색상.css파일*/
div { height: 50px; width:100%; }

위 코드에서 #ff0000, #00ff00, #0000ff는 #f00, #0f0, #00f로 바꾸어도 동일하게 동작한다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>색상</title>
        <link rel="stylesheet" href="css/색상.css">
    </head>
    <body>
        <h1>Colors can be set using RGB values</h1>
        
        <div style="background-color:rgb(255,0,0)"></div>
        <div style="background-color:rgb(0,255,0)"></div>
        <div style="background-color:rgb(0,0,255)"></div>

        <h1 style="color:rgb(255,0,0)">Heading</h1>
        <h1 style="color:rgb(0,255,0)">Heading</h1>
        <h1 style="color:rgb(0,0,255)">Heading</h1>
    </body>
</html>

/*색상.css파일*/
div { height: 50px; width:100%; }

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>색상</title>
        <link rel="stylesheet" href="css/색상.css">
    </head>
    <body>
        <div style="background-color:rgba(255,0,0,0.5)"></div>
        <div style="background-color:rgba(0,255,0,0.5)"></div>
        <div style="background-color:rgba(0,0,255,0.5)"></div>

        <h1 style="color:rgba(255,0,0,0.5)">Heading</h1>
        <h1 style="color:rgba(0,255,0,0.5)">Heading</h1>
        <h1 style="color:rgba(0,0,255,0.5)">Heading</h1>
    </body>
</html>

/*색상.css파일*/
div { height: 50px; width:100%; }

background

background-color

기본값은 transparent.

배경의 색상을 지정하는 속성이다.

색상을 지정하는 방식은 위에서 설명한 방법들과 동일하다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배경</title>
        <link href="css/배경.css" rel="stylesheet">
    </head>
    <body>
        <div>
            배경에 대해 알아보자 배경에 대해 알아보자
        </div>
        <span>
            배경에 대해 알아보자
        </span>
    </body>
</html>

/*배경.css 파일*/
div {
	background-color: yellow;
}

span { background-color: pink; }

div와 span의 차이가 배경색을 칠하면서 확실하게 보인다.

background-image

기본값은 none이다.

배경으로 사용할 이미지의 경로를 지정하는 속성이다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배경</title>
        <link href="css/배경.css" rel="stylesheet">
    </head>
    <body>
        <div>
            배경에 대해 알아보자 배경에 대해 알아보자
        </div>
        <span>
            배경에 대해 알아보자
        </span>
    </body>
</html>

/*배경.css 파일*/
div { 
    height: 500px;
    background-color: yellow;
    background-image: url(./나비.png);
}
span { background-color: pink; }

나비 이미지의 배경이 투명이라 background-color(노란색 배경)이 비쳐보인다.

background-repeat

기본값은 repeat이다.

이미지의 반복 여부와 방향을 나타내는 속성이다.

기본값이 repeat이기 때문에 위 브라우저 화면에서 나비 이미지가 반복되는 것을 볼 수 있다.

w3schools, background-repeat property values

background-repeat의 값으로 올 수 있는 것들을 w3schools에서 확인해보았다.

사이트에서 Demo 버튼을 누르면 어떻게 동작하는지 확인할 수 있다.

repeat의 경우 x, y축으로 모두 반복한다.

background-image의 예제에서 height 값을 500보다 큰 값으로 주면 y축으로도 나비 이미지가 반복되는 것을 확인할 수 있다.

repeat-x는 x축 방향으로만 이미지를 반복하게 한다.

<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배경</title>
        <link href="css/배경.css" rel="stylesheet">
    </head>
    <body>
        <div>
            배경에 대해 알아보자 배경에 대해 알아보자
        </div>
        <span>
            배경에 대해 알아보자
        </span>
    </body>
</html>

/*배경.css 파일*/
div { 
    height: 1500px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: repeat-x;
}
span { background-color: pink; }

repeat-y는 y축 방향으로만 이미지를 반복하게 한다.

/*배경.css파일*/
/*html 파일은 위 예제와 같음*/
div { 
    height: 1500px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: repeat-y;
}
span { background-color: pink; }

no-repeat는 이미지를 반복하지 않게 한다.

/*배경.css 파일*/
/*html 파일은 위 예제와 같음*/
div { 
    height: 1500px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: no-repeat;
}
span { background-color: pink; }

background-position

기본값은 0%, 0%이다.

요소에서 배경 이미지의 위치를 지정하는 속성이다.

x축, y축으로부터의 위치를 지정할 수 있으며, 값의 선언 순서는 x축, y축으로부터의 간격이다.

만약 한쪽만 지정되면 나머지는 자동으로 center값이 적용된다.

w3schools background-position property values

이번에도 w3schools에서 background-position의 값으로 올 수 있는 것들을 확인해봤다.

left, center, right, top, bottom의 위치는 위 이미지처럼 이해하면 된다.

%로 입력할 때에도 동일하게 이해하면 된다.

px로도 입력할 수 있는데, 이때는 이미지의 좌측 상단끝점이 기준이 되는 것에 주의하자.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배경</title>
        <link href="css/배경.css" rel="stylesheet">
    </head>
    <body>
        <div>
            배경에 대해 알아보자 배경에 대해 알아보자
        </div>
        <span>
            배경에 대해 알아보자
        </span>
    </body>
</html>

/*배경.css 파일*/
div { 
    height: 1500px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: no-repeat;
    background-position: center top; 
}
span { background-color: pink; }

background-position의 값을 center top으로 줘서 나비 이미지가 x축으로는 중간, y축으로는 가장 위에 위치하는 것을 확인할 수 있다.

background-attachment

기본값은 scroll이다.

화면 스크롤에 따른 배경 이미지의 움직임 여부를 지정하는 속성이다.

w3schools background-attachment property values

w3schools에서 background-attachment의 속성값들을 확인할 수 있다.

scroll의 경우 배경 이미지가 요소 자체를 기준으로 고정되어 있고, 화면을 스크롤하면 내용과 함께 스크롤되지 않는다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>배경</title>
        <link href="css/배경.css" rel="stylesheet">
    </head>
    <body>
        <div>
            배경에 대해 알아보자 배경에 대해 알아보자
        </div>
        <span>
            배경에 대해 알아보자
        </span>
    </body>
</html>

/*배경.css 파일*/
div { 
    height: 1000px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: scroll; 
}
span { background-color: pink; }

fixed는 배경 이미지가 뷰포트를 기준으로 고정되어 있으며 스크롤에 영향을 받지 않는다.

/*배경.css 파일*/
/*html 파일은 위 예제와 동일*/
div { 
    height: 1000px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed; 
}
span { background-color: pink; }

local은 요소의 내용을 기준으로 고정되어 있으며 내용과 함께 스크롤된다.

스크롤이 두개 있고, 첫번째 스크롤에 이미지가 있다고 상상해보자.

첫번째 스크롤에 이미지의 background-attachment 값을 local로 두면

첫번째 스크롤을 내릴 때 이미지도 같이 스크롤된다.

만약 scroll로 둔다면 첫번째 스크롤을 내려도 이미지는 같이 내려가지 않는다.

아래 링크 참조

https://www.codingfactory.net/10576

CSS / background-attachment / 배경 이미지의 스크롤 여부를 정하는 속성

개요 background-attachment로 배경 이미지의 스크롤 여부를 정합니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-attachment: scroll | fixed | local | initial | inherit scroll : 선택한 요

www.codingfactory.net

위에서 background에 관련된 속성들은 축약해서 표현 가능하다.

div { 
    height: 1000px;
    background-color: yellow;
    background-image: url(./나비.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed; 
}
span { background-color: pink; }

/*축약 버전*/
div { 
    height: 1000px;
    background: yellow url(./나비.png) no-repeat center top fixed; 
}
span { background-color: pink; }

background-attachment 속성은 브라우저 성능에 영향을 미치기 때문에 잘 사용하지는 않는다.

박스 모델

HTML의 모든 요소는 사각형의 박스 형태로 만들어진다.

박스는 총 4가지의 세분된 영역으로 구성되어있으며 영역마다 다양한 스타일을 적용할 수 있다.

이 4가지 영역을 통틀어서 박스모델이라고 한다.

박스 모델은 content, padding, border, margin으로 구성되어 있다.

content 영역은 실제 내용을 포함하는 영역이다. 크기는 내용의 너비 및 높이를 나타낸다.

border 영역은 content 영역을 감싸는 테두리 선이다.

padding 영역은 content와 border 사이의 여백이다. content 영역이 배경, 색 또는 이미지를 가지고 있을 때 패딩 영역까지 영향을 미친다.

margin 영역은 border 바깥쪽의 영역이다. border 영역을 다른 요소와 구분하기 위해 쓰이는 빈 영역이다. 주변 요소와의 간격을 margin을 이용해 지정할 수 있다.

border

border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용한다.

테두리의 굵기, 모양, 색상을 지정할 수 있는 속성들이 있으며, 축약해서 적용할 수 있다.

border-width

기본값은 medium이다.

선의 굵기를 지정하는 속성이다.

border-width: [top] [right] [bottom] [left];

border-top-width, border-bottom-width, border-right-width, border-left-width를 이용해서 상하좌우 선의 굵기를 다르게 표현할 수 있다.

속성값을 medium, thin, thick처럼 숫자를 지정하지 않아도 키워드로 지정할 수 있고

px단위로 입력해서 테두리의 굵기를 지정할수도 있다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>border</title>
        <link href="css/border.css" rel="stylesheet">
    </head>
    <body>
        <span>
            border 예제입니다.
        </span>
    </body>
</html>

/*border.css 파일*/
span { border-width: 10px; border-style: solid; border-color: black; }

border-style

기본값은 none이다.

선의 모양을 지정하는 속성이다.

border-style: [top] [right] [bottom] [left];

border-top-style, border-bottom-style, border-right-style, border-left-style을 이용해서 상하좌우 선의 모양을 다르게 표현할 수 있다.

solid 값이 가장 많이 쓰이며 테두리를 실선으로 표현한다.

double은 테두리를 이중 실선으로 표현한다.

dotted는 테두리를 점으로 표현한다.

/*border.css 파일*/
/*html 파일은 위 예제와 동일*/
span { border-width: 5px; border-style: dashed; border-color: black; }

border-color

기본값은 currentColor이다.

선의 색상을 지정하는 속성이다.

border-color: [top] [right] [bottom] [left];

border-top-color, border-bottom-color, border-left-color, border-right-color를 이용해서 상하좌우 선의 색상을 다르게 표현할 수 있다.

/*border.css 파일*/
/*html 파일은 위 예제와 같음*/
span { border-width: 5px; border-style: dashed; border-color: aquamarine; }

border도 공백으로 속성들을 축약해서 표현할 수 있다.

border: [-width] [-style] [-color]

span { border-width: 5px; border-style: dashed; border-color: aquamarine; }

span { border: 5px dashed aquamarine; }

padding

기본값은 0이다.

px단위로 고정된 크기를 지정할수 있고 %로 요소의 width에 상대적인 크기를 지정할 수도 있다.

padding-top, padding-right, padding-bottom, padding-left로 상, 우, 하, 좌의 여백을 각각 지정할 수 있다.

기본적으로 padding의 4가지 속성을 아래와 같이 축약해서 사용할 수 있다.

앞서 나온 border와 뒤에서 나올 margin모두 해당한다.

padding: [-top] [-right] [-bottom] [-left]

속성의 순서는 고정되어 있으며, top을 시작으로 시계방향 순서이다.

축약형을 사용할 때 4개의 속성값을 모두 적어야 하는 것은 아니다.

border의 경우 축약형을 사용할 때 정의되지 않은 속성은 기본값으로 설정되는 반면

padding은 조금 다르게 동작한다.

상하, 좌우 영역이 같은 값일 때 하나로 합쳐서(하나를 생략해서) 적용할 수 있다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>padding</title>
        <link href="css/padding.css" rel="stylesheet">
    </head>
    <body>
        <span>
            padding 예제입니다.
        </span>
    </body>
</html>

/*padding.css 파일*/
span {
    border: 5px solid black;
    padding: 0 5px 10px 15px;
}

0px은 px을 생략해서 표기할 수 있다(CSS에서 0은 단위를 따로 적지 않는다).

개발자 화면에서 확인해보면 시계방향으로 0 5 10 15 px이 padding에 적용된 것을 볼 수 있다.

/*padding.css 파일*/
/*html 파일은 위 예제와 동일*/
span {
    border: 5px solid black;
    padding: 0 5px;
}

0 5px로 입력하면 상하가 0px, 좌우가 5px로 적용된 것을 확인할 수 있다.

margin

margin은 padding과 사용하는 방식이 매우 유사하지만 조금 다른 점이 있다.

margin: [-top] [-right] [-bottom] [-left]

속성값도 문법도 padding과 거의 똑같은데 margin은 padding과 다르게 auto라는 값을 가질 수 있다.

auto는 기본적으로 브라우저에 의해 계산되는데, 대부분의 경우 0(기본값)또는 요소의 width를 제외한 브라우저의 남은 부분의 길이로 계산된다.

그렇기 때문에 margin의 left, right값을 auto로 두면 해당 요소가 수평 중앙 정렬된다.

이때 반드시 요소의 width값이 정의되어 있어야 한다.

<!--margin을 설정하지 않은 html파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div>
            margin에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    width: 300px;
    border: 7px solid black;
}

위 예제는 margin을 설정하지 않고 실행한 브라우저 화면을 보여준다.

이번에는 margin-left만 auto로 설정해본다.

/*margin.css 파일*/
/*html 파일은 위 예제와 같음*/
div {
    width: 300px;
    border: 7px solid black;
    margin-left: auto;
}

요소가 브라우저의 오른쪽에 정렬된 것을 볼 수 있다.

브라우저가 계산하여 요소의 width를 제외하고 브라우저에서 사용할 수 있는 공간을 margin-left를 설정했다.

margin의 left와 right를 둘 다 auto로 둔 결과도 확인해보자.

/*margin.css 파일*/
/*html 파일은 위 예제와 같음*/
div {
    width: 300px;
    border: 7px solid black;
    margin-left: auto;
    margin-right: auto;
}

브라우저 화면(margin-left: auto, margin-right: auto)

이번에는 요소가 수평 중앙 정렬된 것을 볼 수 있다.

705.2의 절반 값인 352.6 값을 각각 margin의 왼쪽, 오른쪽이 갖고 있는 것을 개발자 화면에서도 볼 수 있다.

margin을 모두 auto로 두면 어떻게 될까?

/*margin.css 파일*/
/*html 파일은 위 예제와 같음*/
div {
    width: 300px;
    border: 7px solid black;
    margin: auto;
}

왼쪽과 오른쪽을 auto로 두었을 때와 차이가 없다.

개발자 화면에서도 차이가 없다.

margin을 auto로 두었을 때 상하의 경우 수직 중앙 정렬이 되지 않으며, 기본적인 플로우를 벗어나는 상황에 대해 적용된다.

기초 과정을 밟고 있는 우리들은 margin의 왼쪽, 오른쪽에 auto값을 두면 수평 중앙 정렬이 된다는 것만 잘 기억해두자.

div { margin: 0 auto; }

실제로 이런 식의 margin 설정이 많이 쓰인다고 한다.

그리고 margin은 특이한 성질이 하나 있는데, margin collapse(마진 병합)이 그것이다.

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 말한다.

마진 병합은 다음 세 가지 경우에 발생한다.

1. 두 요소가 상하로 인접한 경우 : 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합이 일어난다.

2. 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소

2-1. 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합이 일어난다.

2-2. 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합이 일어난다.

3. 내용이 없는 빈 요소의 경우 : 해당 요소의 상단 마진과 하단 마진의 병합이 일어난다.

마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다.

마진 병합은 마진이 반드시 맞닿아야 하기 때문에 2, 3번째의 경우 보더 및 패딩이 없어야 한다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div>
            margin에 대해 알아보자
        </div>

        <div>
            margin collapse에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    width: 300px;
    border: 7px solid black;
    margin: 0 auto;
}

이전 코드에서 새로운 div 요소를 하나 추가했다.

여기에서 상, 하단 margin 값을 50px로 수정해보자.

/*margin.css파일*/
/*html파일은 위 예제와 같음*/
div {
    width: 300px;
    border: 7px solid black;
    margin: 50px auto;
}

상, 하로 50px 만큼 마진이 생겼다.

개발자 화면에서 두 요소를 선택해 확인해 보면

위 요소의 하단 마진과 아래 요소의 상단 마진이 겹친 것을 볼 수 있다.

마진 병합을 더 정확하게 보기 위해 위 요소의 하단 마진을 100px로 수정해보자.

<!--위 요소 하단 마진 추가 html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div style="margin-bottom: 100px;">
            margin에 대해 알아보자
        </div>

        <div>
            margin collapse에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    width: 300px;
    border: 7px solid black;
    margin: 50px auto;
}

아래 요소의 상단 마진이 50px이 마진 병합이 일어나 위 요소의 하단 마진에 포함된 것을 볼 수 있다.

margin과 padding 비교

	+	-	auto	단위
margin	O	O	O	px, %
padding	O	X	X	px, %

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div>
            margin에 대해 알아보자
        </div>

        <div>
            margin에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    width: 300px;
    border: 7px solid black;
    margin: 50px auto;
}

이 상태에서 아래 요소의 상단 마진을 음수 값으로 수정해보자.

<!--아래 요소 상단 마진을 음수로 수정한 html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div>
            margin에 대해 알아보자
        </div>

        <div style="margin-top: -80px;">
            margin에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    width: 300px;
    border: 7px solid black;
    margin: 50px auto;
}

아래 요소의 상단 마진이 음수가 되면서 위 요소와 겹쳐버리는 것을 볼 수 있다.

그리고 padding과 margin은 px말고도 %를 단위로 사용할 수 있는데, 이 때는 %의 기준에 대해 잘 알고 사용해야 한다.

%는 요소의 크기를 기준으로 상대적인 값을 결정짓게 된다.

얼핏 생각하면, 상하는 height 값에 대해 좌우는 width 값에 대해 크기가 계산될 것 같지만 그렇지 않다.

%는 상하좌우의 방향에 관계없이 모두 요소의 width 값을 기준으로 값이 결정된다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>margin</title>
        <link href="css/margin.css" rel="stylesheet">
    </head>
    <body>
        <div>
            margin에 대해 알아보자
        </div>
    </body>
</html>

/*margin.css 파일*/
div {
    border: 7px solid black;
    padding-left: 50%;
}

padding-left의 값을 50%로 수정해보자.

이 때 %는 부모 요소인 body의 width를 기준으로 길이를 계산하게 된다.

이번에는 상단 padding에 10%의 값을 넣어보자.

/*margin.css 파일*/
/*html 파일은 위 예제와 같음*/
div {
    border: 7px solid black;
    padding-left: 50%;
    padding-top: 10%;
}

상, 하의 %값은 width를 기준으로 하기 때문에 브라우저 크기를 줄이면 상단 padding도 줄어드는 것을 볼 수 있다.

width

width 속성은 요소의 가로 크기를 정의하는데 사용한다.

정확히는 content 영역의 너비를 지정하는 것을 의미한다.

크기를 지정한다는 것은 같지만, 요소의 종류나 특징에 따라 다르게 동작하기도 한다.

width는 값으로 auto, length, %를 사용할 수 있다.

기본값은 auto로 되어있다.

auto로 값을 지정하면 브라우저가 자동으로 계산해서 값을 적용한다.

length로 값을 지정할 때에는 px, ex, em 등을 사용하면 된다.

%는 부모 요소의 width에 상대적인 크기를 지정한다.

width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정 값 지정하여 사용하면,

그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받는다(content, padding, border).

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>width</title>
        <link href="css/width.css" rel="stylesheet">
    </head>
    <body>
        <div class="parent">
            <div class="child">
                width를 알아보자.
            </div>
        </div>
    </body>
</html>

/*width.css 파일*/
.parent {
    border: 10px solid blue;
}

.child {
    border: 10px solid red;
}

위 코드에는 width 값을 지정하지 않았기 때문에 auto로 지정되어 있다.

브라우저 화면의 크기를 줄였을 때 요소의 크기도 같이 조정되는 것을 확인할 수 있다.

이번엔 child의 width를 300px로 고정해보자.

/*width.css파일*/
/*html파일은 위 예제와 같음*/
.parent {
    border: 10px solid blue;
}

.child {
    width: 300px;
    border: 10px solid red;
}

child에 width 300px을 적용했는데 브라우저 화면에서는 320px로 보인다.

위에서 width에 auto가 아닌 특정 값을 지정하면 margin 영역을 제외한 모든 영역에 영향을 받는다는 것을 말했었다.

우리는 border의 상하좌우 크기를 10px로 지정했다.

그래서 child의 width가 (content의 width + border의 크기)가 되어 320px이 된 것이다.

padding을 추가해서 같은 동작을 하는지 알아보자.

/*width.css 파일*/
/*html 파일은 위 예제와 같음*/
.parent {
    border: 10px solid blue;
}

.child {
    width: 300px;
    border: 10px solid red;
    padding: 5px;
}

padding을 5px 추가한 상태의 브라우저 화면과 개발자 도구 화면이다.

child의 width가 (content의 width + padding의 크기 + border의 크기)가 되어 330px이 된 것을 볼 수 있다.

또한, width는 %를 이용해서도 크기를 지정할 수 있는데

%는 부모 요소의 width를 기준으로 하여 계산된다.

이때 부모 요소의 width는 border와 padding을 제외한 content 영역의 width만을 기준으로 한다.

/*width.css 파일*/
/*html 파일은 위 예제와 같음*/
.parent {
    border: 10px solid blue;
}

.child {
    width: 50%;
    border: 10px solid red;
}

child의 width를 50%로 지정했다.

parent의 width를 보면 1269.6인 것을 알 수 있는데 border의 크기를 제외하여 1249.6이라고 생각해야 한다.

여기에 2를 나눈 값(50%)이 child의 width인 634.8이다. 이 값에 child의 border의 크기를 더하면 644.8이 된다.

height

height는 width와 거의 동일하게 사용할 수 있다.

%가 약간 다른데 width는 부모 요소를 %의 기준으로 한 반면

height는 containing block의 크기를 기준으로 한다.

containing block은 부모를 의미한다고 생각하자.

예제를 통해 직접 확인해보자.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>height</title>
        <link href="css/height.css" rel="stylesheet">
    </head>
    <body>
        <div class="parent">
            <div class="child">
                height를 알아보자.
            </div>
        </div>
    </body>
</html>

/*height.css 파일*/
.parent {
    height: 100px;
    border: 10px solid blue;
}

.child {
    height: 50%;
    border: 10px solid red;
}

%값을 사용하려면 parent의 고정된 height 값이 필요하다.

예제에서는 parent의 height를 100px로 고정했고 child의 height값을 50%로 지정했다.

child의 content 영역에서의 height가 50px로 지정된 것을 확인할 수 있다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

'공부 > HTML과 CSS' 카테고리의 다른 글

[CSS 속성] 텍스트 (0)	2022.12.27
[CSS 속성] 폰트 (1)	2022.12.23
[CSS 속성] (0)	2022.12.16
[CSS 이해하기] 캐스케이딩(cascading) (0)	2022.12.15
[CSS 이해하기] 상속 (0)	2022.12.15

김철용 기록소

CATEGORIES