0. 색상
- 글자 색상으로는 color속성 사용(값 : HEX(GBG로 표현된 값)이나 주요색상이름).
ex)
.red {
color: #ff0000;
}.box {
color : #155724; /* 글자색상 */
background-color : #d4edda; /* 배경색상 */
border-color: #c3e6cd; /* 테두리 색상*/
}1. 글꼴의 단위
1.1. 절대단위 (px, pt 등)
1.2. 상대단위 (%, em, rem, ch, vw, wh 등)
1.1.1 px(픽셀)
-
출력용에 용이하다.
-
화면크기가 절대적인경우(화면의 크기가 변하지 않는 경우)에 사용해야 단점들이 발생하지 않는다.
(단점, css로 글꼴크기가 고정되므로 글씨크기를 사용자가 임의로 크게 설정해도 크기가 커지지 않을 수 있고, 개발자가 강조하려는 제목이 다른 텍스트보다 작게 보이는 결과를 초래하기도 한다.) -
모바일기기는 적합하지 않다.
(고해상도, 작은화면은 기본적으로 1px이 모니커의 1개 점보다 업스케일되어 출력되지 때문에 뚜렷하게 출력이 불가할 수 있다)
1.2.1.rem
-
기본적으로 사용 가능.
-
root의 글자크기 = 브라우저의 글자크기 1rem이기 때문에 확대와 축소가 가능(두배 확대은2rem, 작게 0.8em등으로 조정)
-
사용자가 설정한 기본글꼴크기로 사용하기에 접근성이 유리
(em은 부모 element(속성)에 따라 상대적으로 크기가 변경되므로 계산이 어렵다는 단점이 있음)
2. 반응형 웹(responsive web)에서 기준점을 만들 때
-
반응형 웹이란?
디바이스의 너비에 따라 유동적인 레이아웃이 적용되는 웹싸이트.
ex) 데스크탑 -> 스마트폰 -> 태블릿으로 볼때마다 웹싸이트의 너비는 변해야한다. -
디바이스 크기별로 CSS다르게 적용해서 만들어야 한다.(보통 px기준으로 정한다.)
3. 화면 너비 및 높이에 따른 상대적인 크기가 중요한 이유
- 웹싸이트의 보여지는 영역 Viewport.
- vw(view width), vh(view height) 사용
ex) 화면을 가득 채우며 딱 떨어지는 사이트는 100vw, 100vh로 구현한것임
4. 기타 스타일링
- 폰트 굵기 : font-weight
- 밑줄, 가로줄 : text-decoration
- 자간(글자간의 간격) : letter-spacing
- 행간(행간의 간격) : line-height
5. 정렬
-
가로 정렬은 text-align 사용.
유효한 값 : left, right, center, justify(양쪽 정렬) -
세로 정렬은 부모 엘리먼트가 display: table-cell일 경우에 vertical-align 사용가능.
세로 정렬은 박스의 높이가 글자 높이보다 큰 경우에 발생하는데 나중에 박스모델 및 레이아웃 게시물에서 자세히 다르겠음
