개발자첫걸음

※CSS(Cascading Style Sheet)는 HTML 문서의 스타일이나 레이아웃 등 디자인 서식을 작성하는 언어

※공부를 진행하다 보니 CSS의 속성 중 사용빈도, 활용도가 높은 속성들이 정리가 되었습니다.

그래서 이번 시간은 자주 사용되는 속성들을 자세히 파해쳐볼까 하여 준비하였습니다.

이 부분도 내용이 많은 편이기 때문에 파트를 나누어 정리해 보도록 하겠습니다.

(1) 편에선 width와 height, margin과 padding 속성에 대하여 정리해 보았습니다.

목차

1. width와 height

2. margin과 padding

1. width와 height

※width와 height속성은 단어의 뜻처럼 가로, 세로의 길이를 의미합니다. 값의 단위는 % 와 px, vw와 vh가 있습니다. px는 픽셀 값을 말하며 % 는 상위 컨테이너에서 차지하는 비율, vw와 vh는 html, body에 대한 비율을 말합니다.

width, height 속성은 padding, borders, margins 가 포함된 길이가 아닙니다. padding, borders, margins과과 별개의 넓이와 높이 값을 가집니다.

@속성

• auto : 브라우저가 너비와 높이를 계산한다. 기본값이다.
• length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다.
• inherit : 부모 요소로부터 값을 상속받는다.
• VW, VH : html, body의 너비와 높이값에 대한 비율로 적용한다.
• max-width, max-height : 최대로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이하로만 사이즈가 적용됩니다.
• min-width, min-heigth : 최소로 가질 수 있는 너비, 높이 값을 지정합니다. 지정한 값 이상으로만 사이즈가 적용됩니다.

2. margin과 padding

※margin과 padding 속성은 각각 외부여백과 내부여백을 의미합니다. border를 기준으로 보면 border와 content 사이의 여백을 padding, border와 다른 요소와의 여백을 margin이라 합니다.

위의 코드처럼 content자체의 크기는 100*100이지만 1px크기의 border와의 내부여백 10px, border를 기준으로 한 외부여백이 20px로 적용된 것을 확인할 수 있습니다.

margin의 경우 위의 사진처럼 요소가 세로로 배치되어 있을 시 서로의 margin값을 공유하여 하나의 값으로 적용되며 두 요소의 margin값이 다르다면 더 큰 값으로 적용합니다. 

그러나 가로로 배치된 경우에는 요소 각각의 margin값이 적용되어 첫 번째 요소의 값과 두 번째 요소의 값을 합친 크기의 여백이 생기게 됩니다. 이점을 유의하여 배치해야 할 것입니다.

@margin을 이용한 가운데 정렬방법

위 코드처럼 상단, 하단에 대한 값을 주고 우측, 좌측에 대한 값을 auto로 지정하면 좌, 우 여백을 같은 값으로 적용하여 요소가 가운데로 정렬됩니다.

@속성 값 입력 방법

CSS에서 box형태의 속성값들은 거의 상단, 하단, 우측, 좌측의 순서로 값이 입력됩니다.

값이 하나일 때에는 전체 값이 적용되며 두 개일 경우 상단과 하단, 우측과 좌측으로 묶여 적용됩니다.

세 개일 경우는 상단, 우측과 좌측을 묶고 하단으로 적용되어 상단 10px, 우측, 좌측 20px, 하단 30px 값이 적용되는 것을 볼 수 있습니다. margin도 이와 같은 방식으로 적용되며 대부분의 box형태의 속성값들이 이와 같은 방식을 사용합니다.