</ 3주차 복습 및 정리>

css 속성

문자

• color: 글자의 색상
• text-align: 문자의 정렬 방식
  • left
  • right
  • center
  • justify
• text-decoration: 문자의 장식(선)
  • 기본: none(장식 없음)
  • underline
  • overline(윗줄)- 잘 사용하지않음.
  • line-through(중앙 선)
• text-indent: 문자 첫 줄의 들여쓰기
  • 기본: 0
  • 단위: px, em, rem 등
  • 음수를 사용할 수도 있음.

배경

• background-color: 요소의 배경 색상
  • 기본: transparent(투명)
  • 다양한 색상을 지정 가능함.
• background-image: 요소의 배경 이미지 삽입
  • 기본: none
  • url("경로"): 이미지 경로
• background-repeat: 요소의 배경 이미지 반복
  • 기본: repeat(이미지를 수직, 수평으로 반복)
  • repeat-x: 이미지를 수평으로 반복하는 것.
  • repeat-y: 이미지를 수직으로 반복하는 것.
  • no-repeat: 반복하지 않는 것.
• background-position: 요소의 배경 이미지 위치
  • 방향: top, bottom, left, right, center
  • 단위: px, em, rem 등
• background-size: 요소의 배경 이미지 크기
  • 기본: auto(이미지의 실제 크기)
  • 단위: px, rem, em 등
  • cover: 비율을 유지하면서 요소의 넓은 너비에 맞추는거
  • contain: 비율을 유지하면서 요소의 짧은 너비에 맞추는거
• background-attachment: 요소의 배경 이미지 스크롤 특성
  • scroll: 이미지가 요소를 따라서 같이 스크롤이 되는 것.
  • fixed: 이미지가 뷰포트에 고정, 스크롤은 되지않음.

배치

• position: 요소의 위치 지정 기준
  • 기본: static(기준이 없는것)
  • relative: 자신을 기준으로 움직이는 것. -> 자기사진 자리에서 옮기는 경우는 거의 없음.
  • absolute: 부모 요소를 기준으로 움직이는 것.
  • fixed: 뷰포트를 기준으로 움직이는 것.
  • positiion에 속성들은 모두 음수를 사용할 수 있다.
  • 옮겨져 있는 요소를 허상이며 눈에 보이지는 않지만 원래 자리에 있음.
• top, bottom, left, right: 요소의 방향별 거리를 지정
  • 기본: auto
  • 단위: px, em, rem 등
• 요소의 쌓임 순서(stack order): 어떤 요소가 더 위에 쌓이는지를 결정
  1. 요소에 position이 있는 경우(staticd은 제외됨)
  2. 만약 1번 조건이 같은 경우는 z-index 속성의 숫자 값이 높을수록 위쪽에 쌓임.
  3. 1,2번 조건이 같은 경우는 HTML의 다음 구조일수록 위쪽에 쌓임.
• z-index: 요소의 쌓임 정도를 지정하는 것.
  • 기본: auto(부모 요소와 동일하게 쌓임)
  • 숫자가 높을수록 위에 쌓임.
  • 숫자값이 커지지않도록 주의해야함.(나중에 수정하기가 힘들어짐.)
• 요소의 display가 변경된다.
  • position 속성의 값으로 absolute, fixed가 지정되면, display의 속성이 block으로 변경된다.

flex(정렬)

• display: flex container 화면에서 출력의 특성
  • flex: 블록 요소와 같이 flex container 정의
  • inline-flex: 인라인 요소와 같이 flex container 정의
• flex-direction: 주 축을 설정하는 것.
  • row: 행축이 좌 -> 우
  • row-reverse: 행축이 우-> 좌
  • column: 열축이 위 -> 아래
  • column: 열축이 아래 -> 위
• flex-wrap: flex items 줄 바꿈 여부
  • 기본: nowrap(줄 바꿈 없음)
  • wrap: 여러줄로 묶음
• justify-content: 주 축의 정렬 방법
  • flex-start: flex items를 시작점으로 정렬
  • flex-end: flex items를 끝점으로 정렬
  • center: flex items를 가운데 정렬
  • space-between: 각 flex item 사이를 균등하게 정렬
  • space-around: 각 flex item의 여백을 균등하게 정렬
• align-content: 교차 축의 여러 줄 정렬 방법
  • 기본: stretch(시작점으로 정렬)
  • flex-start: 시작점으로 정렬
  • flex-end: 끝점으로 정렬
  • center: 가운데 정렬
  • space-between: 사이를 균등하게 정렬
  • space-around: 여백을 균등하게 정렬
  • item들이 2줄이상이어야하면 flex-wrap이 있어야하며 여백이 있어야지 사용가능함.(활용성이 없어 거의 사용하지 않음)
• align-items: 교차 축의 한 줄 정렬 방법
  • 기본: stretch(교차 죽으로 늘림)
  • flex-start: 각 줄의 시작점으로 정렬
  • flex-end: 각 줄의 끝점으로 정렬
  • center: 각 줄의 가운데 정렬
  • baseline: 각 줄의 문자 기준선에 정렬
• order: flex item의 순서
  • 기본: 0
  • 숫자: 숫자가 작을수록 먼저임.
• flex-grow: flex-item의 증가 너비 비율
  • 기본: 0
  • 숫자: 증가 비율
• flex-shrink: flex-item의 감소 너비 비율
  • 기본: 1(flex container에 너비에 따라 감소 비율을 적용함)
  • 숫자: 감소 비율
• flex-basis: flex-item의 공간을 배분하기 전 기본 너비
  • 기본: auto(content의 너비)
  • 단위: px, rem, em 등

전환

• transition: 전환(시작과 끝) 효과를 지정하는 단축 속성

  transition: 속성명 지속시간(단축형으로 작성할때 필수임!) 타이밍함수 대기시간;

• transition-property: 전화 효과를 사용할 속성 이름을 지정하는 것
  • 기본: all(모든 속성에 적용됨)
  • 속성이름: 전환 효과를 사용할 속성 이름을 명시
• transition-duration: 전환 효과의 지속시간을 지정하는 것
  • 기본: 0s
  • 시간: 지속시간을 지정(0.1s 같은 경우는 앞에 0없이 .1s 적어도 무방함)
• transition-timing-function: 전환 효과의 타이밍함수를 지정하는 것
  • ease: 느리게-빠르게-느리게
  • linear: 일정하게
  • ease-in: 느리게-빠르게
  • ease-out: 빠르게-느리게
  • ease-in-out: 느리게-빠르게-느리게
• transition-delay: 전화 효과가 몇 초 뒤에 시작할지 지정하는 것
  • 기본: 0s
  • 시간: 대기시간을 지정

변환

• transform: 요소의 변환 효과

  transform: 변환함수1 변환함수2 변환함수3...;
  transform: 원근법 이동 크기 회전 기울임;

• 2D 변환 함수
  • translate(x, y), translateX(x), translateY(y): 이동
  • scale(x, y): 크기
  • rotate(degree): 회전
  • skewX(x), skewY(y): 기울임
• 3D 변환 함수
  • rotateX(x), rotateY(y): 회전(2d 변환 함수랑은 다르다)
  • perspective(n): 원근법(거리)
    • 그냥 perspective는 부모요소에 줘야하며, perspective함수는 변화요소 자체에 주면서 항상 목록 제일 앞쪽에 작성해줘야한다.
      
• backface-visibility: 3d 변환으로 회전된 요소의 뒷면 숨김 여부를 나타냄
  • 기본: visible(뒷변 보임)
  • hidden: 뒷면을 숨김

---

</ 3주차를 마치며>

국비지원교육에서 배우지 못했던 새로운 css 지식들을 알 수 있어서 너무 좋았고 다시 한번 개념정리를 할 수 있는 뜻깊은 시간이었다. 또한 지금까지 배운 개념들을 통해 오버워치 캐릭터들을 이용한 실습을 했는데 어떻게 활용을 해야하는지를 알 수 있어서 좋았다. 4주차를 들어가기 전, 실습코드들은 다시 한번 복습해봐야겠다.