지난시간에 이어 CSS 속성에 대해 더 알아보자!
넘침제어
넘침제어는 말 그대로, 요소가 크기 이상으로 넘쳤을 때, 넘쳐진 부분의 보여짐을 어떻게 제어할 것인가를 말한다
넘침제어의 속성값은 다음과 같다
- visible: 기본으로 갖는 값으로 넘친 내용을 그대로 보여준다
- hidden: 넘친 내용을 잘라낸다
- auto: 넘친 경우에만 잘라내고 스크롤바를 생성하여 넘친 부분을 보여준다
- 개별 속성: overflow-x/ overflow-y
넘쳐서 보여지는 부분을 x축 혹은 y축 방향으로 제어해서 보여줄 수 있다
출력 특성(display)
요소가 화면에 출력되는 즉, 보여지는 특성을 말한다
display가 가지는 속성값은 다음과 같다
- bolck: 상자 요소
- Inline: 글자 요소
- Inline-block: 글자 + 상자 요소
- flex: 플렉스 박스
- grid: 그리드 (2차원 레이아웃)
- none: 화면에서 사라짐
.
.
.
display의 가장 큰 특징은 근본의 특성을 다른 것으로 바꿀 수 있다는 것이다
예를 들어 span은 inline속성이기 때문에 가로·세로 값을 가질 수 없다 하지만 span에 display: block을 부여하면 block 요소처럼 가로·세로 값을 가질 수 있는 구조로 바뀐다
글자
font-family
글꼴을 지정한다
font-family: 글꼴1, "글꼴2", ..., 글꼴계열;- 글꼴계열은 필수 작성 값이다
- 띄어쓰기 등 특수문자가 포함된 글꼴 이름은 큰 따옴표로 묶어야 한다
- 필수 값 제외 첫 번째부터 글꼴 후보를 적용하고 적용 가능한 글꼴이 있다면 해당 글꼴로 지정한다. 하지만 후보중에서 가능한 글꼴이 없다면 필수 값(글꼴계열)으로 지정한다.
text-decoration
문자의 장식(선)을 부여한다
- underline: 밑줄
- overline: 윗줄
- line-through: 중앙 선
- none: 선 없음
a 태그의 경우 기본적으로 밑줄이 들어가있기 때문에 이를 없애고 싶다면 none 속성을 사용하면 된다
배경
background-repeat
배경에 이미지를 첨부하면 이미지가 반복적으로 나오는 것을 확인할 수 있다 이를 제어하기 위해서 background-repeat을 사용한다
- repeat: 이미지를 수직, 수평으로 반복
- ⭐no-repeat: 반복 없음
- repeat-x: 수평 반복
- repeat-y: 수직 반복
background-position
요소의 배경 이미지 위치를 제어한다
- top/ bottom/ left/ right/ center(방향1, 방향2)로 지정 가능하다
- 단위로 지정하면 x축, y축으로 지정된다
ex) 100px 30px
background-size
요소의 배경 이미지 크기를 제어한다
- auto: 기본값으로 이미지의 실제 크기를 나타낸다
- cover: 비율을 유지하며 요소의 더 넓은 너비에 배경 이미지를 맞춘다
- contain: 비율을 유지하며 요소의 더 짧은 너비에 배경 이미지를 맞춘다
- 단위: px, em, rem ...
다시말해, 요소의 가로·세로 너비 중 더 길거나, 더 짧은 것에 배경 이미지를 맞춘다는 것이다
background-attachment
요소의 배경 이미지 스크롤 특성을 제어한다
- scroll: 이미지가 요소를 따라 함께 스크롤된다
- fixed: 이미지가 고정되어 스크롤되지 않는다
배치
💡어떠한 요소를 배치할 때는 항상 기준을 잡고 나서 위치를 배치해야 한다
position
요소의 위치 지정 기준을 말한다
- static: 기준 없음(기본값)
- relative: 요소 자신을 기준으로 한다
- absolute: 위치상 부모 요소를 기준으로 한다
- fixed: 뷰포트(브라우저)를 기준으로 한다
- top/ bottom/ left/ right : 요소의 각 방향별 거리를 지정한다
- z-index: 요소의 쌓임 정도를 지정한다
요소 쌓임 순서(Stack order)
어떤 요소가 사용자와 더 가깝에 있는지(위에 쌓이는지) 결정하는 순서가 정해져있다
- 요소에 position 속성의 값이 있는 경우 더 위에 쌓인다 (static 제외)
- 1번 조건이 동일한 경우, z-index 속성의 숫자 값이 높을수록 더 위에 쌓인다
- 1번과 2번 모두 동일한 경우, HTML의 다음 구조일 수록, 더 나중에 작성된 경우일수록 더 위에 쌓인다
+) position 속성의 값으로 absolute나 fixed가 지정된 요소는 display 속성이 block 으로 변경된다
플렉스(정렬) Container
display에 flex값이 부여된 속성은 Container라고 부르고 그 자식 요소들은 Items라고 부른다
display
Flex Container의 화면 출력 특성을 제어한다
- flex: 블록 요소와 같이 Flex Container를 정의한다
- inline-flex: 인라인 요소와 같이 Flex Container를 정의한다
- display: flex; 의 경우 Container는 수직으로 쌓인다
- display: inline-flex; 의 경우 Container는 수평으로 쌓인다
flex-direction
요소의 주 축을 설정한다(수평 정렬 or 수직 정렬)
- row: 기본값으로, 행 축이며 좌⇒우 로 움직인다
- row-reverse: 행 축으로 우⇒좌 로 움직인다
- column: 열 축으로 위⇒아래 로 움직인다
- column-reverse: 열 축으로 아래⇒위로 움직인다
flex-wrap
Flex Items 줄 바꿈 여부를 지정한다
- nowrap: 기본값으로 줄 바꿈 없이 한 줄로만 요소들을 정렬한다
- wrap: 여러 줄로 줄 바꿈한다
플렉스(정렬)Items
flex-grow
Flex Item의 증가 너비 비율을 지정한다
- 0: 0은 기본값으로 증가 비율이 없다
- 숫자: 증가 비율을 숫자로 지정한다
flex-shrink
Flex Item의 감소 너비 비율을 지정한다
- 1: 기본값이며 Flex Container 너비에 따라 감소 비율을 적용한다
- 숫자: 감소 비율을 숫자로 지정한다
- flex-shrink:0 ⇒ 감소 너비를 사용하지 않는다
전환 transition
요소의 전환효과를 지정하는 단축 속성이다
transition: 속성명 지속시간 타이밍함수 대기시간;지속시간은 필수 포함 속성이다
transition-property
전환 효과를 사용할 속성 이름을 지정한다
- all: 모든 속성에 적용
- 속성 이름: 전환 효과를 사용할 속성 이름 명시
transition-duration
전환 효과의 지속 시간을 지정한다
transition-timing-fuction
전환 효과의 타이밍 함수를 지정한다
transition-delay
전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정한다
변환 transform
요소의 변환 효과를 지정한다
2D 변환 함수
- translate(x,y) / translate(x)/ translate(y) : x축 혹은 y축으로 이동
- scale(x,y) : x축, y축으로 크기 변경
+) 1보다 작은 값을 부여하면 요소의 크기가 줄어든다 - rotate(deg) : 회전 (각도)
- skewX(x) / skewY(y) : x축 혹은 y축으로 기울임
3D 변환 함수
- perspective(n) : 원근법 거리를 지정
perspective 제외 나머지 함수들은 2D 변환 함수와 거의 동일하다
perspective 속성과 함수 차이
perspective 함수
- 적용 대상: 관찰 대상
- 얼마만큼의 거리에서 원근법으로 볼 것이냐를 결정
transform: perspective(600px)perspective 속성
- 적용 대상: 관찰 대상의 부모
- 하위 요소를 관찰하는 원근 거리를 지정
perspective: 600px;