CSS(2) - width, height, margin, padding

css를 잘하기 위해서는 속성과 속성값들을 많이, 그리고 정확히 아는 것이 중요하다.

이번 포스팅에서는 css의 속성들에 대해 살펴보자.

<목차>

CSS의 width와 height
CSS의 margin
CSS의 padding
padding과 margin의 차이점 정리

설명을 진행하기에 앞서 아래와 같이 작성된 html 파일과 css 파일이 존재한다고 하자.

해당 코드의 실행 결과를 참조하여 css의 속성들에 대해 알아보도록 하겠다.

<!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 href=".\index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="header">1</div>
    <div id="visual">2</div>
    <div id="content">3</div>
</body>
</html>

/* CSS style sheet */

/*
    width height
    
    margin 과 padding
*/


#header{
    background:red;
    height:60px;
}


#visual{
    background: blue;
    height:250px;
    margin-bottom: 50px;
    margin-top: 50px;
}


#content{
    background: yellow;
    height:150px;
    margin: 15px 0 15px 0;

    /*
    12시 3시 6시 9시
    위 오른쪽 아래 왼쪽
    */
}

<width 와 height>

width와 height를 이용해서 해당 영역의 넓이와 높이를 조절할 수 있다

ex) width: 50px; (영역의 넓이를 50px로) height: 100px; (영역의 높이를 100px로)

여기서 하나 짚고 넘어가야할 사실이 있다. 바로 블록(block)속성과 width의 개념적 차이이다. html에서 <div>엘리먼트를 작성하였다고 하자. <div>는 기본적으로 블록 속성을 가지고 있기 때문에 웹페이지 상에서 한 줄 전체를 차지한다. 하지만 css를 활용해 해당 영역의 넒이, 즉 width를 조절하였다고 해서 <div>엘리먼트가 차지하는 공간이 width만큼 되는 것은 아니다.

<!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 href=".\css\practice.css" type="text/css" rel="stylesheet">    
</head>
<body>
    <div style="width: 300px; height: 200px; background: green;" id="bottom">안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요</div>
</body>
</html>

위의 코드를 실행하여 웹페이지 상에 나타난 결과를 보면 <div>엘리먼트가 차지하는 영역은 블록 속성에 의해 여전히 한줄 전체인 것을 확인할 수 있다. width: 300px; height: 200px;를 사용하여 넓이와 높이를 조절해 준 결과 컨텐츠(글씨)가 표시되는 영역이 300x200 사이즈로 변했을 뿐이다. 다시말해 블록(block) 속성과 넓이(width)는 별개의 문제이다. width: 300px;의 사이즈를 가질 뿐 해당 <div>가 한줄 전체를 차지한다는 사실에는 변함이 없다.

<margin>

엘리먼트와 엘리먼트 간에는 기본적으로 딱 붙어 있는 속성이 있다. 즉, 그들 사이에 빈 공간이 존재하지 않는다는 것이다. margin의 역할은 이러한 엘리먼트들 간의 간격을 띄울 수 있게 해준다. 엘리먼트들 간에 간격을 주고 싶을 때 margin을 사용하면 되는 것이다.

위에 간격부여 : margin-top: 15px;
아래에 간격부여 : margin-bottom: 15px;
왼쪽에 간격부여 : margin-left: 15px;
오른쪽에 간격부여 : margin-right: 15px;

이러한 margin을 함축적으로 사용할 수도 있는데 아래와 같이 쓸 수 있다.

margin: 15px 0 15px 0; 순서는 시계방향으로 12시, 3시, 6시, 9시 방향
margin: 15px 0; 위,아래를 하나로 묶고 오른쪽,왼쪽을 하나로 묶어서 사용
margin: 15px; 네방향 모두 15px
+) margin: 0 auto; 를 이용하여 가운데 정렬을 할 수 있다 (응용)

코드 실행 결과 나타난 웹페이지의 모습을 보면 설정한 margin 값 이외에 표시된 부분처럼 화면의 가장자리에 빈 공간이 있는 것을 볼 수 있다. 이러한 빈 공간을 없애는 것 역시 margin을 활용하여 가능하다.

css 파일을 아래와 같이 수정해보자

/* CSS style sheet */

/*
    * 선택자 : 모든 엘리먼트들을 뜻한다
	
    width height
    
    margin 과 padding
*/

*{
    font-size:12px;
    margin:0;

    /*
    모든 4방향의 margin을 0px로 바꾸겠다는 뜻
    */

}

#header{
    background:red;
    height:60px;
}


#visual{
    background: blue;
    height:250px;
    margin-bottom: 50px;
    margin-top: 50px;
}


#content{
    background: yellow;
    height:150px;
    margin: 15px 0 15px 0;

    /*
    12시 3시 6시 9시
    위 오른쪽 아래 왼쪽
    */
}

추가된 것은 *{ } 부분이다. 여기서 * 선택자에 대해 하나 더 알고 넘어가자. * 선택자는 모든 엘리먼트를 뜻하는 선택자이다. 따라서 *{ font-size: 12px; margin: 0; } 코드에 의해 모든 엘리먼트의 폰트 사이즈가 12px이 되고 모든 가장자리가 빈 공간 없이(margin 값이 0) 채워짐을 알 수 있다.

<padding>

padding은 주로 영역 안에 있는 요소의 컨텐츠의 위치를 바꾸고 싶을 때 많이 사용한다. padding 값을 주어 영역 안에서 컨텐츠의 위치를 기준 방향으로부터 늘려주는 속성이라고 보면 된다. 관련 코드를 보고 padding에 대해 좀 더 이해해보도록 하자. 앞서 사용한 html 코드를 그대로 사용하고 다음과 같은 css 파일이 존재한다고 하자.

/* CSS style sheet */


*{
    font-size:12px;
    margin:0;
}

#header{
    background:red;
    height:120px;
    font-size: 18px;
    color:#fff;
}


#visual{
    background: blue;
    height:450px;
    margin-bottom: 50px;
    margin-top: 50px;
}


#content{
    background: yellow;
    height:300px;
    margin: 15px 0 15px 0;
}

위의 css 파일에서 #header{ } 부분의 css 속성값들로 인해 웹페이지 상에 다음과 같은 결과물이 출력된다.

<div id="header">1</div>엘리먼트의 영역에 해당하는 내용들이 왼쪽 상단 끝에서부터 시작되는 것을 확인할 수 있다. 또한 빨간 영역의 높이(height)가 120px임을 확인할 수 있다. 여기서 해당 영역의 내용인 1이라는 숫자를 조금 띄어서 쓰고 싶을 때 padding을 사용해 볼 수 있다.

#header{ } 부분을 다음과 같이 수정해 보자.

#header{
    background:red;
    height:120px;
    font-size: 18px;
    color:#fff;
    padding: 15px;
}

padding: 15px;를 추가하면 다음과 같은 웹페이지가 출력된다.

padding을 넣는 순간, 빨간 영역의 높이(height)가 150px로 늘어난 것을 확인할 수 있다. (기존 높이 120px + 위,아래 padding 15px씩 추가) padding을 사용하면 이렇게 사이즈를 늘림으로써 컨텐츠의 위치를 바꾼 느낌을 줄 수 있다. 다시말해 padding은 기준 방향으로부터 컨텐츠를 떨어뜨려주는 역할을 수행한다. (padding: 15px;으로 인해 모든 방향으로 15px씩 사이즈가 늘어났다.)

margin과 마찬가지 방법으로 padding-top, padding-bottom, padding-left, padding-right 형태로 사용하며 각각 위, 아래, 왼쪽, 오른쪽으로부터 얼만큼씩 떨어뜨리고 싶은지를 속성값으로 집어넣어주면 된다.

더 나아가 padding과 항상 같이 사용되는 짝꿍같은 css 속성이 있다. 이는 바로 box-sizing: border-box; 이다.

#header{ } 부분에 해당 속성을 추가하여 보도록 하자.

#header{
    background:red;
    height:120px;
    font-size: 18px;
    color:#fff;
    padding: 15px;
    box-sizing: border-box;
}

출력된 웹페이지에서 볼 수 있듯이 box-sizing: border-box;는 padding을 넣어서 늘린만큼 기본 사이즈를 줄여주는 역할을 한다. 원래 높이(height) 120px에서 padding으로 인해 위,아래 15px씩 늘어나게 되었는데, 기본사이즈를 90px로 바꿈으로써 우리가 원하는 사이즈만큼 딱 알맞게 보여줄 수 있게 처리를 해주는 것이다.

<padding과 margin의 차이점>

앞서 살펴본 padding과 margin에 대해 그림을 살펴보면서 조금 더 자세히 알아보자.

위의 그림에서 볼 수 있듯이 border를 기준으로 영역의 내부와 외부가 경계지어 지는 것을 알 수 있다. 이때 margin은 영역의 내부에서 적용되는 여백이 아닌 컨텐츠 밖에서의 여백의 크기를 설정해 주는 속성이다.

반면 padding: 15px;을 적용한 결과를 살펴보면 영역 내부에서 컨텐츠가 입력되는 부분이 여백을 가지게 된 것을 확인할 수 있다.

정리하면, border를 기준으로 영역의 내부와 외부의 경계를 구분짓고 영역 외부의 여백은 margin을 이용해서, 영역 내부에서 컨텐츠의 여백은 padding을 이용해서 조절한다는 사실을 알 수 있다.

'CSS' 카테고리의 다른 글

CSS skills(2) - 속성 선택자 , display:none; , input[id=" "]:checked{ } , 인접 접근자 + , :nth-child (0)	2021.12.27
CSS skills(1) - display, float, position (0)	2021.12.22
CSS 문법 (0)	2021.12.21
CSS (1) - CSS 적용 방법 (0)	2021.12.21
CSS란? (0)	2021.12.21

<목차>

<width 와 height>

<margin>

<padding>

<padding과 margin의 차이점>

'CSS' 카테고리의 다른 글

티스토리툴바