[카테캠] FE week 4

werthers·2023년 5월 9일

카테캠

카카오테크캠퍼스

목록 보기

5/16

CSS 속성
- opacity : 투명도 지정
- 글꼴
  - font-size : 글자 크기
  - font-weight : 글자 두께 (가중치)
  - font-style : 글자 기울기
  - line-height : 한 줄의 높이
  - font-family : 글꼴을 여러 개로 후보 지정 (글꼴 계열 설정 필수)
- 문자
  - color : 글자의 색상
  - text-align : 문자의 정렬 방식
  - text-decoration : 문자의 장식 (밑줄, 중앙선 등)
  - text-indent : 첫 줄의 들여쓰기 기능 (음수 가능)
- 배경
  - background-color : 요소의 배경 색상
  - background-image : 요소의 이미지 삽입 url("경로") 가 값
  - background-repeat : 요소의 배경 이미지 반복 제어
  - background-position : 요소의 배경 이미지 위치 (단위, 방향)
  - background-size : 요소의 배경 이미지 크기
  - background-attachment : 요소의 배경 이미지 스크롤 특성
- 배치
  - position : 요소의 위치 지정 기준
    - position: relative 요소 자신을 기준
    - position: absolute 위치 상 부모 요소를 기준(display: block)
    - position: fixed 뷰포트를 기준 (display: block)
  - 요소 쌓임 순서 : 어떤 요소가 사용자와 더 가깝게 있는지 결정
    - 요소에 position 속성 값이 있을 경우 위에 쌓인다.
    - 위 조건이 같은 요소들일 경우 z-index 속성의 숫자가 높으면 위에 쌓임.
    - 위 조건이 같은 요소들은 HTML의 다음 구조일수록 위에 쌓임.
- 플렉스 (정렬)
  - display: flex → 수평 정렬 (Flex Container 정의)
  - display: inline-flex → inline-flex container 정의
  - flex-direction 주 축 설정
    - row 행 축 ( 좌 → 우)
    - row-reverse 행 축 (우 → 좌)
  - flex-wrap : Flex Items 묶음 여부
    - nowrap 묶음 없음
    - wrap 묶음
  - align-items : 교차 축의 한 줄 정렬
    - stretch 교차 축으로 늘림
    - flex-start , end , center
- 전환
  - transition : 속성명 지속시간 타이밍함수 대기시간;
- 변환
  - transform :
  - 2D 변환 함수 translate translateX translateY scale rotate
  - 3D 변환함수 rotateX rotateY perspective
  - perspecitve 속성 : 하위 요소 관찰하는 원근 거리 지정
  - backface-visibility : 뒷면 숨김 여부

Challenging (학습하며 어려웠던 점)

변환과 전환에 대해 제대로 학습해본 적이 없어 어려웠다.

스타벅스와 오버워치 예제를 보니 사용할 요소가 충분히 익혀두는 것이 좋겠다고 생각했다.

2D 변환(Transformations)

이동(translate)

요소를 수평 또는 수직으로 이동시킨다.

이동 거리는 x축 또는 y축의 값으로 지정할 수 있으며, 각 축의 이동 거리를 동시에 지정할 수도 있다.


transform: translateX(50px);
transform: translateY(50px);
transform: translate(50px, 50px);

회전(rotate)

요소를 지정한 각도만큼 회전시킨다.

각도의 단위는 도(deg)이며, 양수와 음수를 사용하여 시계 방향 또는 반시계 방향으로 회전시킬 수 있다.

transform: scale(1.5);
transform: scale(0.5);
transform: scale(2, 0.5);

확대/축소(scale)

요소를 지정한 배율만큼 확대 또는 축소시킨다.

값이 1보다 작을 경우 축소되고, 1보다 클 경우 확대된다.

transform: scale(1.5);
transform: scale(0.5);
transform: scale(2, 0.5);

비틀기(skew)

요소를 지정한 각도만큼 비틀어서 변형시킨다.

값이 양수이면 시계 방향으로, 음수이면 반시계 방향으로 비틀어진다.

transform: skewX(45deg);
transform: skewY(-30deg);
transform: skew(45deg, -30deg);

3D 변환(Transformations)

회전(rotateX, rotateY)

요소를 x축 또는 y축을 기준으로 회전한다.

rotateX는 x축을 기준으로 회전하며, rotateY는 y축을 기준으로 회전한다.

transform: rotateX(30deg); 
transform: rotateY(60deg);

**원근(perspective)**

3D 요소를 2D 평면 상에 그릴 때 원근 효과를 부여한다.

perspective는 transform의 함수로 사용될 수 있고 속성으로 사용될 수도 있다.

차이는 원근 효과가 적용되는 대상이 다르다는 점이다.

부모 요소에 perspective 속성을 지정하는 방법
```
.parent {
  perspective: 500px;
}

.child {
  transform: rotateX(30deg);
}
```
- perspective 속성을 부모 요소에 지정하면, 자식 요소들에게 원근 효과가 적용된다.
- 자식 요소에는 transform 속성을 사용하여 3D 변환 효과를 주는 것이 좋다.
속성으로 사용할 경우
```
.parent {
}

.child {
  transform: perspective(500px) rotateX(30deg);
}
```
- transform 속성의 perspective 함수를 사용하면, 해당 요소와 그 자식 요소들에게만 원근 효과를 주게 된다. 이 방법에서는 부모 요소에 perspective 속성을 따로 지정하지 않아도 된다.
- 자식 요소들에게는 영향을 미치지 않는다.
- 속성으로 지정하는 것을 추천한다.