글자와 관련된 속성
font-family- 글꼴 종류를 지정.font-size- 글자 크기를 지정.font-style- 글자를 이탤릭체로 표시할지 지정.font-weight- 글자의 굵기를 지정.
텍스트 스타일 속성
color- 글자색을 지정.text-decoration- 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정.text-transform- 텍스트 전체, 또는 첫 글자를 대문자로 표시.text-shadow- 텍스트에 그림자를 추가.letter-spacing- 글자 사이의 간격을 지정.word-spacing- 단어 사이의 간격을 지정.text-align- 텍스트 정렬 방법을 지정.line-height- 줄 간격을 조절.
웹에서 색상을 지정하는 방법
16진수- 빨강, 초록, 파랑 각각 두 자리씩 총 여섯 자리의 16진수로 색상을 표현.rgb,rgba- R, G, B 각각 빨강, 초록, 파랑의 양을 0~255 사이의 숫자로 표현. a는 불투명도를 함께 표현한다.hsl,hsla- H, S, L 각각 색상, 채도, 명도의 값으로 색상을 표현. a에는 불투명도를 함께 표현한다.색상 이름- red, white, black과 같은 색상 이름을 사용한다.
박스 모델 속성
width- 박스 모델의 너비를 지정.height- 박스 모델의 높이를 지정.box-sizing- 박스 모델의 크기를 계산하는 기준을 지정.box-shadow- 박스 모델에 그림자 효과를 추가.
테두리 속성
border-style- 상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정.border-위치-style- '위치'자리에 top,right,bottom,lefr 중에서 선택해서 특정 위치의 테두리 스타일만 지정.border-width- 상하좌우 4개 방향 테두리 두께를 한꺼번에 지정.border-위치-width- '위치'자리에 선택해서 특정 위치의 테두리 두께만 지정.border-color- 상하좌우 4개 방향 테두리 색상을 한꺼번에 지정.border-위치-color- '위치'자리에 선택해서 특정 위치의 테두리 색상만 지정.border-radius- 상하좌우 4개 방향 꼭짓점을 한꺼번에 둥글게 만든다.border-위치-radius- '위치'자리에 선택해서 특정 꼭짓점만 둥글게 처리한다.
여백 속성
margin- 상하좌우 4개 방향의 마진을 한꺼번에 지정.margin-위치- '위치'자리에 선택해서 특정 위치의 마진만 지정.padding- 상하좌우 4개 방향의 패딩을 한꺼번에 지정.padding-위치- '위치'자리에 선택해서 특정 위치의 패딩만 지정.
레이아웃 속성
display- 화면에서 요소의 배치 방법을 지정. 자주 사용하는 주요 속성으로는 block, inline, inline-block, none 등이 있다.float- 웹 요소를 왼쪽이나 오른쪽으로 배치. float를 적용한 요소는 clear 속성으로 해제하지 않으면 뒤에 오는 요소도 계속 왼쪽이나 오른쪽으로 연결해서 배치된다.
위치 지정 속성
left, right, top, bottom- 기준 위치와 요소 사이에 상하좌우 얼마나 떨어져 있는지 지정.position- 웹 요소의 위치를 지정. 속성값으로 static, relative, absolute, fixed가 있다.
배경 이미지 관련 속성
background-color- 배경색을 지정.background-clip- 배경색이나 이미지를 어디까지 적용할지 지정.background-image- 배경 이미지를 지정.background-repeat- 배경 이미지의 반복 방법을 지정.background-position- 배경 이미지의 위치를 지정.background-origin- 배경 이미지를 배치할 기준을 지정.background-attachment- 배경 이미지를 문서에 고정.background- 하나의 속성으로 배경 스타일을 한꺼번에 지정.background-size- 배경 이미지의 크기를 조절.
선형 그라데이션 관련 속성
방향- 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. 사용할 수 있는 예약어는 left와 right, top과 bottom이 있다.각도- 그라데이션이 끝나는 각도를 지정한다. 값은 deg로 표기.색상 중지점- 쉼표로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정.
원형 그라데션 관련 속성
- 모양
ellipse- 타원형의 그라데이션을 나타내며 기본값.
circle- 원형의 그라데이션을 나타낸다. - 크기
closet-side- 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 측면에 닿게 한다.
closet-corner- 그라데이션 가장자리가 그라데이션 중심에서 가장 가까운 꼭짓점에 닿게 한다.
farthest-side- 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 측면에 닿게 한다.
farthest-corner- 그라데이션 가장자리가 그라데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿게 한다. 위치- at을 앞에 붙인 후 키워드나 백분율을 사용.색상 중지점- 쉼표로 색상을 구분하며, 색상만 지정하거나 색상과 중지점의 위치를 함께 지정.
Life is all about timing.