티스토리 뷰

@Develop/web

CSS 속성공부 #2 / 박스에 대해 알아보자

조준점 2018. 7. 28. 21:08

20180728_CSS_00

CSS 속성공부 #2 / 박스에 대해 알아보자 / AimHo

이번에는 웹 페이지의 레이아웃을 구성할 때 가장 중요한 박스에 대해 공부하려 한다. 박스는 아래 이미지에 표시된 속성을 모두 합쳐 박스 속성이라 이야기한다.

20180728_CSS_01

이미지출처: 한빛미디어

width, height 속성

여기서 글자를 글자라고 생각하면 된다. width와 height는 글자를 감싸는 영역의 크기를 지정한다. 단어 해석만 해봐도 어떤 속성인지 쉽게 알 수 있을것이다.

margin, padding 속성

margin과 padding는 웹 페이지에서 여백을 만들때 많이 사용한다.

박스속성을 설명한 이미지를 다시 확인해보자. margin, padding의 차이가 보이는가?? 두 속성 모두 여백을 만드는 속성이지만, 테두리를 만드는 border를 기준으로 margin은 외부, padding은 내부에 여백을 생성한다.

그래서 margin은 다른 태그와의 간격을 조율하고, padding은 테두리와 글자 사이의 간격을 조율한다. 예제코드를 통해 자세히 살펴보도록 하자.

박스속성

박스속성

레이아웃을 구성할 때는 모든 박스 속성들을 고려해야 한다. width와 height 속성은 글자가 들어가는 영역의 너비와 높이를 지정한다. margin과 border, padding은 상,하,좌,우 모두 위치한다. 따라서 태그 전체의 크기는 아래와 같은 공식으로 나타낼 수 있다.

전체너비 = width + 2 * (margin + border, padding)

전체높이 = height + 2 * (margin + border, padding)

레이아웃을 구성할 때 위 공식을 이용하면 좋을 것이다.

margin과 padding을 구성할 때 총 3가지 방법으로 코드를 작성할 수 있다. 각자 편한 방식으로 코드를 작성하면 된다.

1. margin: 0 30px 0 30px;

margin: 상 우 하 좌 -> 4방향을 다른 값으로 적용.

2. margin: 0 30px;

margin: 상하 좌우 -> 상하, 좌우의 값 동일하게 적용.

3. margin-top: 0px; / margin-bottom: 0px; / margin-left: 30px; / margin-right: 30px;

-> 상 / 하 / 좌 / 우 개별 값으로 적용.

border 속성

border는 추가적으로 여러 속성들을 가지고 있다. 앞서 작성한 예제코드의 border 부분을 살펴보자. 코드를 보면 border를 생성하는데 3가지 속성(20px, solid, black)을 입력했다.

border:20px solid black;

테두리(border)를 넣을 때는 두께, 형태, 색상에 해당하는 border-width, border-style, border-color 속성을 모두 입력해야 한다. 그리고 border 속성도 margin, padding 처럼 상,하,좌,우 값을 각각 적용할 수도 있다.

추가적으로 border-radius라는 추가 속성이 있다. 이 속성을 사용하면 테두리가 둥근 사각형 or 원을 만들 수 있다. 이는 CSS3에서 추가된 속성으로 해당 속성이 없을 때는 별도의 이미지를 만들어 사용했다고 한다.

border-radius 또한 border, margin, padding 처럼 상,하,좌,우 값을 각각 적용할 수도 있다.