CSS Basic Syntax

HTML이 웹페이지에서 레이아웃과 큰 골격을 담당한다면 CSS는 꾸며주는 역할을 담당한다. 그래서 HTML 자체는 마크업시 문서의 개념으로 바라봐야한다고 배웠다. 그리고 CSS를 통해서는 꾸미는 작업을 해준다. 

Selector { property1: value; property2: value; }

CSS는 기본적으로 위와 같은 문법을 사용한다. 선택자가 있고 중괄호 안에 프로퍼티와 키는 : 형식으로 마치 딕셔너리 형식으로 또는 JS에서 말하는 객체 리터럴 방식으로 작성한다. 

1. 선택자 (Selector)

선택자를 이용해서는 html에 있는 요소르 선택한다. property와 value는 그 요소에 대한 세부적인 설정이라고 이해하면된다. 아래의 예제를 보면 총 세가지 종류의 property를 사용한 것을 알 수 있다. color는 색이고 font-size는 폰트의크기, weight는 색감을 말한다.

div {
	color: red;
	font-size: 20px;
	font-weight: bold;
}

전체 선택자 (Universal Selector)

*이 표시로 전체를 선택할 수 있는 선택자이다. 다음과 같이 쓸 수 있다. 

* { box-sizing: border-box; }

전체 요소들에 대해서 box-size 계산 방식을 통일화 하기 위해서 다음과 같은 방법을 쓰기도 한다.

태그 선택자 (Type Selector)

태그를 선택하는 선택자이다. div, a, img, span, table등

tag { background-color : #fff; }

속성 선택자 (Attribute Selector)

[attr] 속성 attr을 포함한 요소를 선택

[attribute name] { property: value; }

 ATTR=VALUE

속성을 포함하며 속성 값이 value인 요소 선택 

[attributename=attribute-value] { property: value; }

ATTR^=VALUE

특정한 부분 속성값으로 들어가 있는 요소들을 선택할 수 있다.

[class^="btn-"] {
	property: value;
}

인접 형제 선택자 (Adjacent Sibling Combinator)

인접해 있는 형제 HTML요소를 선택한다. 

.orange + li {
	color: red;
}

일반 형제 선택자

.orange ~ li {
	color: red;
}

.orange클래스 요소 다음에 오는 일반 요소들에 대해서 모두 color: red 속성과 값을 적용해준다.

2. 프로퍼티 (Property)

프로퍼티는 속성을 말한다. 따라서 여러가지가 있고 이러한 프로퍼티들을 하나하나 다 외우는 것도 사실 상 불가능에 가깝다. 또한 그 프로퍼티들이 가지는 값들도 여러개가 있고 형식이 있는 경우도 있기 때문에 외우는 것을 권장하지 않는다. 단지 많이 사용해보면서 자주 사용하는 것들은 저절로 익숙해지고 외워지는게 좋고 그때그때 mdn을 참고하는 것도 방법이다. 

프로퍼티에 대해서 알아놓으면 좋은 것은 상속이되는 속성도 있다는 것이다. 가장 간단한 예시가 color이다. color는 상속이 되는 프로퍼티다. font-family또한 그렇다. 보통 상속이 되는 것은 글씨체에 관련한 것이 많다. 

3. 값 (Value)

값은 그 프로퍼티에 해당하는 값을 말한다. 프로퍼티에 따라서 값이 숫자일 수도 있고 텍스트 일수도 있고 또 여러개의 값을 줄 수도 있다. 값에서 알아야할 것은 css에서 쓰는 단위에 대한 것이다. CSS에서 쓰는 단위는 기본적으로 px, %, em, rem이 있다.

px 는 절대값이고 픽셀(화소) 단위이다. 1px은 화소 1개의 크기를 의미한다. 디바이스별로 픽셀의 크기는 제각각이기 때문에 브라우저는 1px을 1/96 인치의 절대 단위로 인식한다고 한다. 출처 - poiemweb.com

%는 백분률 단위의 상대 단위이다. 상대적 사이즈를 설정한다.

em 배수 단위로 상대 단위이다. 요소에 지정된 사이즈에 상대적인 사이즈를 설정한다. 예를 들면 1em은 요소에 지정된 사이즈와 같고 2em은 요소에 지정된 사이즈의 2배이다. 그러므로 1.2em은 1.2배인 셈이다. 유지보수 관점에서 em을 사용하는 것이 좋다. 부모요소가 font-size:30px이면 자식에 font-size: 1.5em해주면 45px이 되는 것이다.

rem rem단위는 root em이라는 말 그대로 최상위 요소의 font-size에 대한 em 단위이다. 최상위인 html요소에 font-size가 20px로 지정되어 있으면 하위 그 어떤 요소에서 1.5rem을 사용할 경우 30px이 되는 것이다.

유지 보수 관점에서는 font-size는 이러한 em, rem 단위를 써주는 것이 좋다.

Viewport 단위

• vh viewport 높이의 1/100 즉 1%
• vw viewport 너비의 1/100 1%
• vmin viewport 너비의 높이 중 작은 쪽의 1/100
• vmax viewport 너비 또는 높이 중 큰 쪽의 1/100

이상으로 CSS에서 가장 기본적으로 알아야할 것을 알아보았다.