[08주_2024_12_11] 웹퍼블리싱 3일차

2024년 12월 11일 ( Wednesday )
───────────⚪──────
◄◄⠀▐▐⠀►► 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀───○ 🔊

[개인]
🩶 웹퍼블리싱 실시간 강의듣기
🩶 웹퍼블리싱 과제하기
🩶 TIL 작성 및 제출하기
[팀플]
🩶 저녁 팀 스크럼(회고)

 

---

🤤오늘 진행한 부분

flex

Flexbox는 1차원 레이아웃 시스템으로, 요소를 한 방향(가로 또는 세로)으로 배치하고 정렬을 간단하게 수행하다.
주로 요소 간의 비율 조정이나 공간 분배에 사용한다.

• flex-direction: 배치 방향을 결정
  • row (기본값): 왼쪽 → 오른쪽
  • row-reverse: 오른쪽 → 왼쪽, 순서를 뒤집음
  • column: 위 → 아래
  • column-reverse: 아래 → 위, 순서를 뒤집음

*열은 세로 행은 가로
Column= 기둥 = 세로 = 열 !
row=행

• justify-content: 주 축(main axis) 방향 정렬
  • flex-start (기본값): 왼쪽 정렬.
  • flex-end: 오른쪽 정렬.
  • center: 가운데 정렬.
  • space-between: 양 끝을 맞추고 요소 간 간격 균등.
  • space-around: 요소 간 간격 균등 + 바깥 간격 포함.
  • space-evenly: 요소 간 간격을 완전히 균등하게 분배.
• align-items: 교차 축(cross axis) 방향 정렬
  • 예: stretch, center, flex-start, flex-end, baseline

트랜지션 (Transitions)

트랜지션은 요소의 상태 변화가 발생할 때 부드러운 전환 효과를 적용한다.
예를 들어, 버튼에 마우스를 올리면 색상이 점진적으로 변하는 것을 트랜지션이라고 한다.

스타일 변경의 트리거(Trigger)가 필요하다. 즉, 스타일 속성 값이 변경되어야 transition이 작동한다.

• transition 속성: 어떤 속성에, 얼마나 오랜 시간 동안, 어떤 방식으로 전환 효과를 줄 것인지 정의
• 트리거
  • 의사클래스: :hover, :focus, :active
  • JavaScript 이벤트 (클래스 추가/제거 등)
  • 미디어 쿼리 조건 변경
• background-color: 배경색 변화
  • 1s: 변화가 1초 동안 진행
• ease-in-out: 천천히 시작하고 끝남
  • 1s: 1초 후에 시작
• 두 transition 속성값을 콤마(,)로 연결
• <property> (필수)
  • 트랜지션을 적용할 CSS 속성
  • ex.  color, background-color, transform, all(모든 속성)
• <duration> (필수)
  • 상태 변화가 지속되는 시간
  • 단위: s(초) 또는 ms(밀리초)
  • ex.  0.5s(0.5초), 300ms(300밀리초)
• <timing-function> (선택)
  • 상태 변화 속도의 패턴을 결정
  • 기본값: ease
  • 주요 값
    • ease: 시작과 끝이 부드럽고 중간은 빠름
    • linear: 일정한 속도로 진행
    • ease-in: 천천히 시작해서 빠르게 끝남
    • ease-out: 빠르게 시작해서 천천히 끝남
    • ease-in-out: 천천히 시작하고 끝남
    • cubic-bezier(n, n, n, n): 커스텀 속도 곡선
  • <delay> (선택)
    • 트랜지션이 시작되기 전의 대기 시간.
    • 단위: s(초) 또는 ms(밀리초)
    • 기본값: 0s
    • ex.  1s(1초), 500ms(0.5초)
  • 함수
    • scale(x, y): 요소의 크기를 확대하거나 축소 (x:너비, y:높이)➜기본값 1(변경없음)
    • translate(x, y): 요소를 X축, Y축으로 이동(x:가로, y:세로)➜단위:px, %, em 등
    • rotate(angle): 요소를 중심축을 기준으로 회전 ➜단위: deg(도), turn(회전 수)
    • skew(x-angle, y-angle): 요소를 X축 또는 Y축 방향으로 기울임 ➜단위: deg

애니메이션

애니메이션은 CSS에서 요소를 움직이거나 상태를 지속적으로 변화시키는 기법으로,  Keyframe을 사용하여 여러 단계의 동작을 구현한다. 예를 들면 로딩 스피너, 텍스트 슬라이딩 효과가 있다. 트랜지션가 다른 점은 트랜지션은 시작과 끝만 정의하지만, 애니메이션은 중간단계도 정의할 수 있다.

• <name> (필수): 애니메이션 이름
  • @keyframes: 애니매이션의 단계 정의➡️ CSS 애니메이션의 중간 단계
• animation 속성: 애니메이션 이름, 지속 시간, 반복 횟수 등을 설정

• • <duration> (필수)
    • 애니메이션이 진행되는 시간을 설정
    • 단위: s(초), ms(밀리초)
    • ex. 1s(1초), 500ms(0.5초)
  • <timing-function> (선택)
    • 애니메이션 속도 곡선을 설정
    • 기본값: ease
    • 주요 값
      • linear: 일정한 속도로 진행
      • ease: 시작과 끝이 부드럽고 중간은 빠름
      • ease-in: 천천히 시작해서 빠르게 끝남
      • ease-out: 빠르게 시작해서 천천히 끝남
      • ease-in-out: 천천히 시작하고 끝남
      • cubic-bezier(n, n, n, n): 커스텀 속도 곡선
  • <delay> (선택)
    • 애니메이션이 시작되기 전의 대기 시간
    • 단위: s(초), ms(밀리초)
    • 기본값: 0s
    • ex. 1s(1초), 500ms(0.5초).
  • <iteration-count> (선택)
    • 애니메이션 반복 횟수
    • 기본값: 1.
    • 주요 값
      • 숫자: 반복 횟수 (ex. 2 → 2번 반복)
      • infinite: 무한 반복
  • <direction> (선택)
    • 애니메이션 재생 방향
    • 기본값: normal
    • 주요 값
      • normal: 처음부터 끝까지 정방향
      • reverse: 끝에서 처음으로 역방향
      • alternate: 정방향 → 역방향 반복
      • alternate-reverse: 역방향 → 정방향 반복
  • <fill-mode> (선택)
    • 애니메이션이 실행 전후 상태를 정의
    • 기본값: none
    • 주요 값
      • none: 실행 전후에 아무 효과 없음
      • forwards: 실행 후 마지막 상태 유지
      • backwards: 실행 전 첫 상태 유지
      • both: 실행 전 첫 상태 + 실행 후 마지막 상태 유지
  • <play-state> (선택)
    • 애니메이션 재생 상태.
    • 기본값: running
    • 주요 값
      • running: 애니메이션 실행
      • paused: 애니메이션 중지
  • bounce: @keyframes에서 정의된 애니메이션 이름
    • 2s: 애니메이션이 2초 동안 진행
  • ease-in-out: 천천히 시작하고 끝남
    • 1s: 1초 후에 시작
  • infinite: 무한 반복
  • alternate: 정방향 → 역방향 반복
  • both: 실행 전 첫 상태와 실행 후 마지막 상태 유지
• 구성요소
  • <name> (필수)
    • 애니메이션의 이름으로, animation-name 속성에서 참
  • <percentage> (필수)
    • 애니메이션 진행 단계(퍼센트)로, 0%는 시작 상태, 100%는 종료 상태를 나타냄
    • 필요에 따라 0~100% 사이에 중간 단계를 추가할 수 있음
    • 특수 키워드 from(0%)와 to(100%)도 사용 가능
  • <property>: <value>
    • 애니메이션 동안 변경될 CSS 속성과 값
    • ex. transform, background-color, opacity, width, 등

반응형 디자인

반응형 디자인은 화면 크기에 따라 웹사이트의 모양과 크기가 바뀌는 디자인을 말한다.

모든 기기에서 보기 좋게 만드는 것이 반응형 디자인의 목적이다.

 

---

😆새로 알게 된 사실!

• 나나이트는 1.5배가 없음
• container가 피그마에서 autolayout 개념
• html을 사이트말고도 할 수 있음

 

---

💭내일 계획

 🤍 데일리 회고

 🤍 강의듣기

 🤍 TIL 작성 및 제출하기

 🤍 저녁 회고