CSS 속성(Properties)
요소의 가로/세로 너비
div {
width: 100px;
height: 100px;
}
요소가 커질 수 있는 최대 가로/세로 너비
요소가 작아질 수 있는 최소 가로/세로 너비
px
픽셀
%
상대적 백분율
em
요소의 글꼴 크기
rem
루트 요소(html)의 글꼴 크기
vw, vh
뷰포트 가로/세로 너비의 백분율
요소의 외부 여백(공간)을 지정하는 단축 속성
음수 값도 가능하다
기본 값
0
단축 속성
한번에 제어해준다
top, right, bottom, left
;top, bottom
right, left
;top
right, left
bottom
;top
right
bottom
left
;방향
margin-'방향'
margin-top, margin-bottom, margin-right, margin-left
음수 값
값만큼 겹쳐지게 된다.
요소의 내부 여백을 지정하는 단축 속성
내부 여백이기 때문에 요소의 크기가 커진다.
기본 값
0
단축 속성
한번에 제어해준다
top, right, bottom, left
;top, bottom
right, left
;top
right, left
bottom
;top
right
bottom
left
;방향
padding-'방향'
padding-top, padding-bottom, padding-right, padding-left
요소의 테두리 선을 지정하는 단축 속성
요소의 크기가 늘어난다.
border: 선-두께 선-종류 선-색상;
border-width
border-style
border-color
색을 사용하는 모든 속성에 적용 가능한 색상 표현
색상 이름
브라우저에서 제공하는 색상 이름
ex) red, tomato, royalblue
Hex 색상코드
16진수 색상
ex) #000, #FFFFF
RGB
빛의 삼원색
ex) rgb(255, 255, 255)
RGBA
빛의 삼원색 + 투명도
ex) rgba(0, 0, 0, 0.5)
요소의 모서리를 둥글게 깍음
border-radius: value;
요소의 크기 계산 기준을 지정
content-box
요소의 내용으로 크기 계산
border-box
요소의 내용 + padding + border로 크기 계산
padding이나 border로 요소가 커지는 속성을 사용할 시 크기를 다시 계산해야하는 경우를 방지하기 위한 속성
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
visible(기본)
넘치는 내용을 그대로 보여준다.
hidden
넘치는 부분 잘라낸다.
scroll
스크롤로 넘치는 내용을 볼 수 있게 한다.
auto
넘친 부분만 스크롤로 넘치는 내용을 볼 수 있게 한다.
내용이 넘쳤을 때, 보여짐을 제어하는 개별 속성도 있다.
요소의 화면 출력(보여줌) 특성
block
상자 요소
inline
글자 요소
inline-block
글자+상자 요소
flex
1차원 레이아웃
grid
2차원 레이아웃
none
보여짐 특성 없음, 화면에서 사라짐
기타
table, table-row, table-cell 등
요소의 투명도 (0~1)
글꼴
font-size
글자의 크기
font-weight
글자의 두께
100~900의 100단위의 숫자 9개
font-style
글자의 기울기
line-height
한 줄의 높이, 행간과 유사하다
font-family
글꼴 지정
font-family: 글꼴1, "글꼴2", ...글꼴계열;
글꼴의 후보를 보고 사용할 수 있는 것을 사용한다.
color
글자의 색상
text-align
문자의 정렬 방식
text-decoration
문자의 장식(선)
text-indent
문자 첫 줄의 들여/내어쓰기
background-color
배경의 색상 지정
background-image
배경에 이미지 지정
backgound-image: url("경로");
background-size
배경의 이미지의 크기를 지정
요소의 크기 보다 이미지의 크기가 작으면 반복 출력되는 것이 기본
backgound-repeat
backgound-position
요소의 배경 이미지 위치
background-attachment
요소의 배경 이미지 스크롤 특성