로드맵을 따라서 CSS를 다시 배워볼려고 한다. 하지만 웬만한건 이미 다 알고 있기 때문에 하나부터 열까지 다시 배울려면 시간이 너무 오래 걸리고 비효율적이기 때문에 CSS를 쓰면서 잘 이해가 안되거나, 유용하지만 잘 쓰지 않거나, 별로 중요하지 않게 생각했던 CSS의 역사, 문법 등을 적어볼거다.
CSS란?
CSS는 Cascading Style Sheets의 약자이다.
(CSS중 C의 약자인 Cascading는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문이다. 다만 예외로 마진, 패딩, 보더 등의 박스모델 관련 속성은 상속되지 않는다.)
CSS의 탄생 비밀
CSS의 탄생 비밀을 알려면 과거로 가야된다.
과거에는 HTML에 디자인적 요소를 포함하여 작성하는 것이 일반적이었고 한다. 온갖 레이아웃, 디자인 정보를 HTML에 안에 욱여넣다 보니 HTML 본연의 목적이 사라진 것이다. 이에 따라 W3C에서는 "디자인적 요소를 HTML과 완전히 분리시켜 구조화된 HTML을 만들어보자!" 라는 목적으로 CSS를 발표했다.
CSS 문법
CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킨다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러싼다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결한다.
이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마친다.
CSS 선택자
CSS에서는 스타일을 적용할 요소를 가리켜야 한다. 선택자의 종류는 다양하다. 전체 선택자, 클래스 선택자, 자손 선택자, 속성 선택자 등등 많은 선택자가 있지만, 그중 많이 쓰이는 선택자는
- 전체 선택자
* {
background-color: red;
} // 모든 요소 선택- 태그 선택자
div {
background-color: red;
} // 해당 태그의 요소 선택- 아이디 선택자
#id {
background-color: red;
} // 해당 아이디 선택- 클래스 선택자
.class {
background-color: red;
} // 해당 클래스 선택- 후손 선택자
(선택자1) (선택자2) {
background-color: red;
} // 선택자1의 모든 하위 요소 중 선택자2를 선택가 있다. 만약 섬세한 스타일이 필요한 경우에라면 [] 기호를 사용하는 속성 선택자를 사용할 수 도 있다.
- 속성 선택자
button[type="reset"] {
background: yellow;
}크기 단위
CSS에서 사용하는 크기의 단위에는 %, em, px, cm, mm, inch 등이 있다.
그 중에서도 가장 많이 쓰이는 크기 단위는 아마 px, %, em일 것이다.
px은 절대값이고 em, %는 상대값이다.
대부분 브라우저의 폰트 사이즈 기본값은 16px, 1em, 100%이다. 프로퍼티 값이 0인 경우, 단위를 생략할 수 있다.
px
px은 픽셀(화소) 단위이다. px 단위는 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋다. 이미지의 크기 단위가 px이기 때문이다.
%
%는 백분률 단위의 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다.
CSS body { font-size: 14px; } div { font-size: 120%; /* 14px * 1.2 = 16.8px */ } HTML <div>Font size: 14px * 120% → 16.8px</div>
em
em은 배수단위로 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다. 예를 들어 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다.
폰트 사이즈 설정이나 콘텐츠를 포함하는 컨테이너의 크기 설정에 사용하면 상대적인 설정이 가능하여 편리하다.
CSS body { font-size: 14px; } div { font-size: 1.2em; /* 14px * 1.2 = 16.8px */ } HTML <div>Font size: 14px * 14px * 1.2 → 16.8px</div>
중첩된 자식 요소에 em을 지정하면 모든 자식 요소의 사이즈에 영향을 미치기 때문에 주의하여야 한다
CSS body { font-size: 14px; } div { font-size: 1.2em; /* 14px * 1.2 = 16.8px */ } HTML <div class='box1'> Font size: 1.2em ⇒ 14px * 1.2 = 16.8px <div class='box2'> Font size: 1.2em ⇒ 16.8px * 1.2 = 20.16px <div class='box3'> Font size: 1.2em ⇒ 20.16px * 1.2 = 24.192px </div> </div> </div>
의도되지 않은 상황이라면 무척 난감한 상황일 수 있다. 즉, 상대 단위인 em의 기준이 상속의 영향으로 바뀔 수 있기 때문이다.
rem
em의 기준은 상속의 영향으로 바뀔 수 있다. 즉, 상황에 따라 1.2em은 각기 다른 값을 가질 수 있다.
rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.
CSS body { font-size: 14px; } div { font-size: 1.2rem; /* 14px * 1.2 = 16.8px */ } HTML <div class='box1'> Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px <div class='box2'> Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px <div class='box3'> Font size: 1.2rem ⇒ 14px * 1.2 = 16.8px </div> </div> </div>
Viewport 단위(vh, vw, vmin, vmax)
반응형 웹디자인은 화면의 크기에 동적으로 대응하기 위해 % 단위를 자주 사용한다. 하지만 % 단위는 em과 같이 상속에 의해 부모 요소에 상대적 영향을 받는다.
Viewport 단위는 상대적인 단위로 viewport를 기준으로 한 상대적 사이즈를 의미한다.
- vw
viewport 너비의 1/100 - vh
viewport 높이의 1/100 - vmin
viewport 너비 또는 높이 중 작은 쪽의 1/100 - vmax
viewport 너비 또는 높이 중 큰 쪽의 1/100
예를 들어 viewport 너비가 1000px, 높이가 600px인 경우,
- 1vw : viewport 너비 1000px의 1% = 10px
- 1vh : viewport 높이 600px의 1% = 6px
- vmin : viewport 높이 600px의 1% = 6px
- vmax : viewport 너비 1000px의 1% = 10px
가 된다.
box modal
모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 부른다.
박스 모델은 HTML 요소를 패딩, 테두리, 마진, 그리고 내용으로 구분한다.
-
Content : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
-
padding : 내용과 테두리 사이의 간격
-
border : 내용과 패딩 주변을 감싸는 테두리
-
margin : 테두리와 이웃하는 요소 사이의 간격
box-sizing
box-sizing이란 박스의 크기를 어떤 것을 기준으로 정할지 정하는 속성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 500px;
height: 100px;
padding: 10px;
border: 10px solid black;
margin: 10px;
background-color: blueviolet;
font-size: 24px;
font-weight: bold;
}
.border-box {
box-sizing: border-box;
}
.content-box {
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="content-box">content Box</div>
<div class="border-box">border Box</div>
</body>
</html>
코드와 사진을 봐보자
분명둘다 똑같은 width, height 값인데 결과를 보면 박스 사이즈가 다른걸 볼 수 있다.
이유는 바로 box-sizing 속성 때문이다.
(참고로 box-sizing의 기본 값은 content-box 이다.)
box-sizing: content-box
만약 box-sizing: content-box; 를 주게 되면
예를 들어 사진처럼 박스 너비가 500px 이라면 콘텐츠(content) 영역이 500px의 너비를 가지게 되고 패딩(padding)과 테두리(border)는 더해진다.
다시말해 width 500px + padding left + right 20px + boreder left + right 20px = 540px 즉, 콘텐츠 박스의 너비는 540px이 되는거다.
box-sizing: border-box;
그리고 또 다른 속성인 box-sizing: border-box;를 주게 되면
너비 500px에서 패딩(padding)과 테두리(border)는 콘텐츠(content) 영역에 맞게 줄어들어 총 너비 500px을 유지한다.
다시말해 padding left, right 20px + border left, right 20px + width 460px = 500px 즉, 콘텐츠 박스의 너비는 딱 500px이 되는거다.
따라서, box-sizing: border-box; 라는 속성을 사용하여 테두리(border) 까지를 실제 박스의 폭으로 설정하면 패딩(padding)과 테두리(border)에 따라 늘어나는 영역을 고려하지 않고 CSS를 작성할 수 있다는 장점이 있다.
다음 글에서는 레이아웃에 관련된 Float, display, Flex Box, z-index 등을 적어보겠다.
참고 사이트
