해당 글의 내용은 poiemaweb 을 읽고 요약하여 재정리한 내용입니다.
이번에는 CSS3 lesson 3~5의 내용인 CSS 프로퍼티 값의 단위와 Box model 그리고 display, visibility, opacity 프로퍼티에 대해 알아보겠습니다.
3. CSS 프로퍼티 값의 단위
CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정합니다.
키워드
각 프로퍼티에 따라 사용할 수 있는 키워드가 존재합니다.
예를 들어 display 프로퍼티의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none 가 있습니다.
크기 단위
대표적인 크기 단위는 절대값인 px, 상대값인 em, % 입니다.
대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100% 입니다.
프로퍼티 값이 0인 경우에는 단위를 생략할 수 있습니다.
px
px는 픽셀(화소) 단위 입니다. 1px = 화소 1개 크기를 의미
픽셀은 디바이스 해상도에 따라 상대적인 크기를 가지며, 대부분의 브라우저는 1px을 1/96 인치의 절대단위로 인식합니다.
주로 요소의 크기나 이미지의 크기 지정에 사용됩니다.
%
%는 백분률 단위의 상대 단위입니다.
상속된 사이즈나 디폴트 사이즈에 상대적인 사이즈를 설정합니다.
font-size: 120% → 16px * 1.2 = 19.2px
em
em은 배수 단위로 상대 단위입니다.
% 와 마찬가지로 지정된 사이즈에 상대적인 사이즈를 설정합니다.
1em = 지정된 사이즈, 2em = 지정된 사이즈 * 2배 라고 할 수 있습니다.
폰트 사이즈 설정, 컨텐츠를 포함하는 컨테이너 크기 설정에 사용하면 편리합니다.
중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의해야 합니다.
<head>
<style>
body {
font-size: 14px;
}
div {
font-size: 1.2em; /* 14px * 1.2 = 16.8px */
padding: 2em; /* 16.8px * 2 = 33.6px */
}
</style>
</head>
<body>
<div>
Font size: 1.2em ⇒ 14px * 1.2 = 16.8px
<div>
Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px
<div>
Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px
</div>
</div>
</div>
</body>
rem
rem은 최상위 요소(html)의 사이즈를 기준으로 삼고 있습니다. (root em)
컨텐츠의 크기에 따라 가변적으로 대응해야 하는 wrapper요소 (container) 등에 적합합니다.
font-size 미지정 시에는 16px가 적용됩니다.
Viewport 단위(vh, vw, vmin, vmax)
Viewport *단위는 상대적인 단위로 *viewport를 기준으로 한 상대적 사이즈를 의미합니다.
vw: viewport 너비의 1/100
vh: viewport 높이의 1/100
vmin: viewport 너비나 높이 중 작은 쪽의 1/100
vmax: viewport 너비나 높이 중 큰 쪽의 1/100
색상 표현 단위
색상을 지정하기 위해 키워드를 사용할 수 있으나 표현할 수 있는 색상의 수는 제한됩니다.
키워드 리스트는 W3C css3-color를 참고하기 바랍니다.
이외에도 HEX 코드(#000000), RGB(rgb(255, 255, 0)), RGBA(rgba(255, 255, 0, 1)), HSL, HSLA가 있습니다.
4. Box Model
모든 HTML 요소는 Box 형태의 영역을 가지고 있으며, 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성됩니다.
Content: 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역 (width, height 프로퍼티 적용)
Padding: 테두리(Border) 안쪽 요소의 내부 여백 영역으로 기본색은 투명, 요소에 적용된 배경의 색상 or 이미지는 패딩 영역까지 적용됨
Border: 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미
Margin: 테두리 바깥쪽 요소의 외부 여백 영역으로 기본색은 투명, 배경색 지정 X
width / height 프로퍼티
width와 height 프로퍼티는 요소의 너비와 높이를 지정하기 위해 사용되며, 콘텐츠 영역을 대상으로 합니다.
width와 height로 지정한 콘텐츠 영역 < 실제 콘텐츠면 콘텐츠 영역을 넘치게 된다는 것에 유의해야 합니다.
overflow: hidden; 을 지정하면 넘친 콘텐츠를 숨길 수 있습니다.
초기값은 auto로 브라우저가 상황에 따라 값을 계산합니다.
margin / padding 프로퍼티
margin / padding 프로퍼티는 content의 4개 방향(top, right, left, bottom)에 대하여 지정 가능합니다.
4개의 값 : 위쪽 → 오른쪽 → 아래쪽 → 왼쪽 순서
3개의 값 : 위쪽 → 왼쪽, 오른쪽(동일) → 아래쪽 순서
2개의 값 : 위쪽, 아래쪽(동일) → 왼쪽, 오른쪽(동일) 순서
1개의 값 : 모든 방향에 동일한 값 적용
margin 프로퍼티에 auto 키워드를 설정하면 해당 요소를 브라우저 중앙에 위치 시킬 수 있습니다.
max-width 프로퍼티는 요소 너비의 최대값을, min-width 프로퍼티는 요소 너비의 최소값을 지정합니다.
border 프로퍼티
border-style
border-style 프로퍼티는 테두리 선의 스타일을 지정합니다.
dotted, dashed, solid, double, groove 등이 있습니다.
프로퍼티 값의 갯수에 따라 4개 방향(top, right, left, bottom)에 대해 지정이 가능합니다.
border-width
border-width 프로퍼티는 테두리의 두께를 지정합니다.
마찬가지로 값의 갯수에 따라 4개 방향에 대해 지정이 가능합니다.
하지만 border-style 과 함께 사용하지 않으면 적용되지 않습니다.
border-color
border-color 프로퍼티는 테두리의 색상을 지정합니다.
마찬가지로 값의 갯수에 따라 4개 방향에 대해 지정이 가능합니다.
border-color 또한 border-style 과 함께 사용하지 않으면 적용되지 않습니다.
border-radius
border-radius 프로퍼티는 테두리 모서리를 둥글게 표현하도록 지정합니다.
프로퍼티 값은 길이를 나타내는 단위(px, em 등)와 %를 사용합니다.
각각의 모서리에 개별적으로 지정할 수도 있고, 4개의 모서리를 short-hand로 한번에 지정할 수도 있다
2개의 반지름을 지정하여 타원형 둥근 모서리도 설정할 수 있습니다.
border
border 프로퍼티는 border-width, border-style, border-color를 한 번에 설정하기 위한 shorthand 프로퍼티입니다.
p {
/* border-width border-style border-color */
border: 5px solid red;
}
box-sizing 프로퍼티
width, height 프로퍼티의 대상 영역을 변경할 수 있습니다.
content-box: width, height 프로퍼티 값은 content 영역을 의미 (기본값)
border-box: width, height 프로퍼티 값은 content, padding, border가 포함된 값을 의미
box-sizing 프로퍼티는 상속되지 X → box-sizing 프로퍼티를 사용하도록 초기화하려면 아래와 같이 정의합니다.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
5. display, visibility, opacity 프로퍼티
display 프로퍼티
layout 정의에 자주 사용되는 중요한 프로퍼티며, 상속되지 않습니다.
block, inline, inline-block, none이 있습니다.
block 레벨 요소
항상 새로운 라인에서 시작하며, 화면 크기 전체의 가로폭 차지합니다. (width: 100%)
width, height, margin, padding 프로퍼티 지정이 가능합니다.
block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있습니다.
예시로는 div, h1 ~ h6, p, ol, ul, li, hr, table, form 이 있습니다.
inline 레벨 요소
새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있습니다.
즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치합니다.
content의 너비만큼 가로폭을 차지하며 width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없습니다.
상, 하 여백은 line-height로 지정한다.
inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정됩니다.
inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없고, 일반적으로 block 레벨 요소에 포함되어 사용됩니다.
예시로는 span, a, strong, img, br, input, select, textarea, button 이 있습니다.
inline-block 레벨 요소
block과 inline 레벨 요소의 특징을 모두 갖습니다.
한 줄에 표현되면서 width, height, margin, padding 프로퍼티를 모두 지정할 수 있습니다.
상, 하 여백을 margin과 line-height 2가지 모두를 통해 지정할 수 있습니다.
content의 너비만큼 가로폭을 차지합니다.
inline-block 레벨 요소 역시 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정됩니다.
font-size: 0; 으로 공백을 회피할 수 있습니다.
visibility 프로퍼티
요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의합니다. (렌더링 여부)
visible: 요소를 보이게 함(기본값)
hidden: 요소를 보이지 않게 함→
display: none;은 공간까지 사라지게 하지만 이와 달리 해당 요소의 공간은 사라지지 않고 남아있음
collapse:<table>의 행이나 열을 보이지 않게 함
none: collapse와 동일하지만 크롬에서는hidden과 동일하게 동작
opacity 프로퍼티
요소의 투명도를 정의합니다.
0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미합니다.
여기까지 CSS 프로퍼티 값의 단위, Box model, display, visibility, opacity 프로퍼티 에 대해서 정리해봤습니다.
다음 게시물은 백그라운드와 폰트와 텍스트에 대해 알아보겠습니다.