8. box-sizing(크기 계산)
요소의 크기 계산 기준을 지정한다.
- content-box(기본값) : 요소의 내용(content)으로 크기를 계산한다.
- border-box : 요소의 내용 + padding + border으로 계산한다.
(내가 정한 가로, 세로 값을 유지한 상태로 내부에 padding과 border값이 계산되서 들어간다)
9. overflow(넘침제어)
요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축속성이다.
- visible : 넘친 내용을 그대로 보여준다.
- hidden : 넘친 내용을 잘라낸다.
- auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바를 생성한다.
- scroll : 넘친 내용을 잘라내고, 스크롤바를 생성한다.
(스크롤바가 가로,세로 모두 생겨 넘치지 않는 방향이 있더라도 스크롤바가 생기는 단점이 있다)
10. 출력특성(display)
요소의 화면 출력 특성을 다룬다.
- 각 요소에 이미 지정되어 있는 값
- block : 상자(레이아웃)요소
- inline : 글자 요소
- inline-block : 글자 + 상자 요소(기본적으로는 글자요소지만 상자요소의 특징을 가지고 있다)
- 따로 지정해서 사용하는 값
- flex : 플렉스 박스(1차원 레이아웃 - x,y축중 하나의 축만을 정렬가능하다)
- grid : 그리드(2차원 레이아웃 - x,y축 모두 사용한다)
- none : 보여짐 특성 없음, 화면에서 사라짐
- 기타 : table, table-row, table-cell 등…
11. 투명도(opacity)
요소의 투명도를 조절한다.
- 1 (기본값): 불투명
- 0 ~ 1 : 0 부터 1사이의 소수점 숫자
12. 글꼴
(1) font-style
글자의 기울기를 결정한다.
- normal(기본값) : 기울기 없음
- italic : 이텔릭체
- oblique : 기울어진 글자
(2) font-weight
글자의 두께(가중치)를 결정한다.
- normal(400, 기본값) : 기본두께
- bold(700) : 두껍게
- bolder : 상위요소보다 더 두껍게
- lighter : 상위 요소보다 더 얇게
- 100 ~ 900 : 100단위의 숫자 9개, normal과 bold 이외의 두께
(3) font-size
글자의 크기를 지정한다.
- 16px : 기본 크기
- 단위 : px, em, rem 등의 단위로 지정한다.
- % : 부모 요소의 폰트 크기에 대한 비율
- smaller : 상위요소보다 작은 크기
(4) line-height
한 줄의 높이, 행간과 유사
- normal(기본값) : 브라우저의 기본 정의를 사용한다.
- 숫자 : 요소의 글꼴 크기의 배수로 지정한다.
(예를들어 1.4로 지정할경우 현재 글꼴크기(16px 즉 기본값일 경우) 16px * 1.4 의 줄높이를 갖게 된다, %로 지정할경우에도 똑같이 적용된다) - 단위 : px, em, rem 등의 단위로 지정한다.
(숫자가 아닌 단위로 지정할경우 배수가 적용되지 않는다)
(5) font-family
글꼴(서체)을 지정한다.
font-family : 글꼴1, “글꼴2”, …, 글꼴계열;- 여러개의 글꼴 ‘후보’들을 작성할 수 있다. 순서대로 브라우저에서 글꼴적용여부를 확인하고 사용하지 못하는 글꼴후보일 경우 다음으로 넘어간다.
- 글꼴계열은 필수로 작성해야 한다.
- 띄어쓰기등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다.
- 모든 글꼴 후보가 적용이 안될경우 작성한 글꼴계열중 아무 글꼴을 사용하게 된다.
참고) 글꼴계열
- serif : 바탕체계열
- sans-serif : 고딕체 계열
- monospace : 고정너비(가로폭이 등등) 글꼴 계열
(예를들어 ‘W’와 ‘I’의 너비를 같게 한다) - cursive : 필기체 계열
- fantasy : 장식 글꼴 계열
13. 문자
(1) color
글자의 색상을 지정한다.
- rgb(0, 0, 0) (기본값): 검정색
- 색상 : 기타 지정 가능한 색상
(2) text-align
문자의 정렬방식을 지정한다.
- left (기본값) : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 가운데 정렬
- justify : 양쪽 정렬
(3) text-decoration
문자의 장식(선)을 지정한다.
- none (기본값) : 장식없음
- underline : 밑줄
(a태그에는 기본적으로 underline 속성값이 들어가 있어 None값을 줘 밑줄을 없앨 수 있다) - overline : 윗줄
- line-through : 중앙 선
(4) text-indent
문자 첫 줄의 들여쓰기를 지정한다.
음수를 사용할 수 있으며 음수를 사용할경우 내어쓰기(outdent)가 지정된다.
- 0 (기본값) : 들여쓰기 없음
- 단위 : px, em, rem 등의 단위로 지정한다.
14. 배경
div {
background-color: orange;
background-image: url("이미지경로");
background-repeat: no-repeat;
background-position: center;
background-size: 100px;
background-attachment: fixed;
}(1) background-color
요소의 배경 색상을 지정한다.
- transparent (기본값) : 투명함
- 색상 : 지정 가능한 색상
(2) background-image
요소의 배경 이미지를 삽입한다.
- none (기본값) : 이미지 없음
- url(”경로”) : 이미지 경로를 지정한다.
(3) background-repeat
요소의 배경 이미지의 반복여부를 지정한다.
- repeat (기본값) : 이미지를 수직, 수평 반복한다.
- repeat-x : 이미지를 수평 반복한다.
- repeat-y : 이미지를 수직 반복한다.
- no-repeat : 반복 없음.
(4) background-position
요소의 배경 이미지 위치를 지정한다.
- 0% 0% (기본값) : 0% ~ 100% 사이 값
- 방향 : top, bottom, left, right, center 방향
- 단위 : px, em, rem 등 단위로 지정한다.
(웹에서는 x축(왼쪽에서 오른쪽),y축(위쪽에서 아래쪽)으로 적용이 된다. 예를들어 background-position : 100px 300px; 를 지정할경우 왼쪽에서 100px만큼, 위쪽에서 30px 만큼 떨어진 위치에 적용이 된다)
(5) background-size
요소의 배경 이미지의 크기를 지정한다.
- auto (기본값) : 이미지의 실제 크기를 지정한다.
- 단위 : px, em, rem 등 단위로 지정한다.
- cover : 비율을 유지, 요소의 더 넓은 너비에 맞춘다.
- contain : 비율을 유지, 요소의 더 짧은 너비에 맞춘다.
(6) background-attachment
요소의 배경 이미지 스크롤 특성
- scroll (기본값) : 이미지가 요소를 따라서 같이 스크롤
- fixed : 이미지가 뷰포트에 고정, 스크롤 X
- local : 요소 내 스크롤 시 이미지가 같이 스크롤
