[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 1주차 (2): CSS

CSS

 

1) Position

• relative: 기준이 자기 자신. 자신의 자리는 남아 있음 = 문서의 흐름을 해치지 않음
• absolute: 부모 요소를 기준으로 한다. 보통 relative가 부모로 온다.
• fixed: 뷰포트(브라우저)를 기준으로 배치
• static: default  값. static은 이동 불가 = top, bottom, left, right 속성의 영향을 받지 않는다.

👻 position의 속성 값으로 absolute, fixed가 지정된 요소는 display 속성이 block으로 변경된다.

 

2) 요소 쌓임의 순서 (Stack order): 어떤 요소가 사용자와 더 가깝게 있는지(위에 있는지) 결정

• z-index: position 과 같이 서야한다.

3) 배경

💫그라데이션

• background: linear-gradient()
  • 색상1 | 색상2: 상하로 색 2개 지정
  • 방향 | 색상1 | 색상2: 예. 90deg, blue, red
  • 방향 | 색상1 | 색상1의 비중 | 색상2: 색상1의 비중을 %로 지정
  • 방향 | 색상1 | 색상2 | 색상3

💫배경 이미지

• background-image: url("");
  • background-repeat: 반복 여부  

    background-repeat: repeat;
    background-repeat: repeat-y;
    background-repeat: repeat-x;
    background-repeat: no-repeat;

• background-position: 이미지 위치

background-position: top left;
background-position: center;
background-position: top center;
background-position: 100px;
background-position: 100px 10px;  /*x축 y축 순서*/

• background-size: 이미지 크기 

 background-size: auto;
 /* size를 하나만 쓰면 가로너비 설정되고, 세로는 비율에 맞춰서 자동설정됨 */
background-size: 100px 200px; /*x축 y축 순서*/
background-size: 100px;
background-size: contain;
background-size: cover;

• background-attachment: 배경 이미지 스크롤 특성  

 background-attachment: scroll;
 background-attachment: fixed;

 

4) Flex

💫flex-direction: 주축(main axis)의 정렬 방향 설정

• row (default): 좌 -> 우
• row-reverse: 우 -> 좌
• column: 위 -> 아래
• column-reverse: 아래 -> 위

💫flex-wrap: 줄 바꿈 설정

• nowrap (default)
• wrap

💫justify-content: 주축의 정렬 방법

👻 flex-direction이 row일 때는 주축이 가로 > 수평 정렬
👻 flex-direction이 column일 때는 주축이 세로 > 수직 정렬

• flex-start (default): 아이템을 start 지점을 기준으로 나열
• flex-end: 끝으로 나열
• center: 중앙 정렬
• space-between: 처음과 마지막 아이템들을 container 맨 끝에 붙이고, 나머지 공간을 공평하게 나눔
• space-evenly: 아이템들의 모든 여백을 공평하게 갖도록 함
• space-around: 양 끝 영역의 단위가 1이라면, 나머지 영역의 단위는 2이다.

🥲 익숙해 지는데 시간이 걸릴 것 같은 부분이다...🥲

✏️참고: 1분 코딩

이번에야말로 CSS Flex를 익혀보자

💫align-items: 교차 축(cross axis)의 한 줄 정렬 방법

• stretch (default): container의 교차축 방향으로 길이를 늘린다.
• flex-start: 시작점으로 정렬
• flex-end: 끝점으로 정렬
• center: 중앙 정렬

💫align-content: 교차 축의 여러 줄 정렬 방법

👻 (조건) flex-wrap이 wrap상태일 때(2줄 이상일 때) 유효한 속성

 

✏️참고: 🐸개구리 게임

Flexbox Froggy

 

5) transform

💫skew: 기울이기 함수

• skew(x_deg, y_deg)
• skewX(x_deg)
• skewY(y_deg)

💫scale: 크기 조절 함수 

• scale(num, num)
• scaleX(배수)
• scaleY(배수)

💫translate: 이동 함수

• translateX()
• translateY()
• translate(num, num)

💫rotate: 회전 함수   

• rotate(deg)

transform: perspective(200px) rotateX(45deg); /*3D 함수*/
transform: perspective(400px) rotateY(180deg);

👻perspective: 하위 요소를 관찰하는 원근 거리를 지정

단축속성
transform: perspective() translate() scale() rotate() skew(); 순서

💫backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김 여부   

• backface-visibility: visible;
• backface-visibility: hidden;

6) transition

👻transition: property duration timing-function delay

👻transition: 속성명 지속시간 타이밍함수 대기시간

transition은 hover같은 action보다는 원 class에 걸어주는 것이 좋다

visibility, display 같은 속성값들이 중간값들을 가지지 않는 경우는 transition이 적용되지 않음

💫transition-property: 전환 효과를 사용할 속성 이름을 지정

💫transition-duration: 전환 효과의 지속 시간 (0s = 전환 효과 없음)

💫transition-timing-function: 전환 효과의 타이밍(easing) 함수를 지정

• ease (default): 느리게 - 빠르게 - 느리게
• linear: 일정하게
• ease-in: 느리게 - 빠르게
• ease-out: 빠르게 - 느리게
• ease-in-out: 느리게 - 빠르게 - 느리게

💫transition-delay: 전환 효과가 몇 초 뒤에 시작할지 대기 시간을 지정 (0s = 대기 시간 없음)

 

👻transition vs animation

• transition
  • 자연스러운 변경을 위해 설정
  • hover, onclick 등 이벤트(동작)가 발생 되었을 때
• animation
  • 중간 step들을 지정하여 보다 세밀한 스타일 전환 가능
  • @keyframe로 이루어짐

 

7) animation

💫@keyframes

• from ~ to
• 0% ~ 100%

👻단축속성 순서 (name과 duration은 필수 속성)
👻animation: name duration timing-function delay iteration-count direction

• animation-name: @keyframes로 만들어진 애니메이션의 이름
• animation-duration: 한 사이클의 애니메이션이 어떤 시간 간격으로 진행될지 설정 (단위: s)
• animation-timing-function: 중간 상태의 전환을 어떤 시간 간격으로 진행할지 설정 (default: ease)
  • linear, ease, ease-in, ease-in-out, ease-out
• animation-delay: 애니메이션 시작을 지연시킬 수 있는 속성 (default: 0s)
• animation-iteration-count: 애니메이션이 반복되는 횟수 (default: 1)
• animation-direction: 이니메이션이 반복될 때 진행방향 설정 (default: normal)
  • normal, reverse, alternate, alternate-reverse

✏️참고: CSS Easing Animation Tool

 

🥲css가 끝나긴 했는데... 따라가는데 급급해서 이해도 제대로 다 못했다.. 그래도 정리하면서 도움이 많이 되긴 했는데 적용은 또... 😶🙄