[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 19 ~ 20 [5주차]

❤️Liked 느낀 점

8월 둘째 주부터 배운 Flex, Grid의 개념은 CSS 속성 중에서 복잡하고 어려웠지만

이번에 배운 Animation, Forms 속성은 여태 배운 CSS 속성들 중에서 제일 재미있게 배웠던 속성 중 하나였고,

개념이 크게 어려운 부분이 없었어서 수업을 편하게 들을 수 있었습니다.

✏️Learned 공부한 내용

@keyframes

CSS animation에서 요소의 중간 상태를 정의하는 규칙입니다.

animation의 시작부터 끝까지의의 변화를 단계별로 제어할 수 있습니다.

기본 구문

@keyframes 애니메이션이름 {
  키프레임 선택자 {
    속성: 값;
  }
}

설정 방법

• 퍼센트(%) 사용

@keyframes slide {
  0% { left: 0; }
  50% { left: 50%; }
  100% { left: 100%; }
}

• from, to 키워드 사용

@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

animation 속성과의 연결

정의한 @keyframes를 요소에 적용하려면 animation-name 속성을 사용합니다.

브라우저 호환성

일부 구형 브라우저에서는 접두사가 필요할 수 있습니다

@-webkit-keyframes grow { /* ... */ }
@-moz-keyframes grow { /* ... */ }
@keyframes grow { /* ... */ }

animation

미리 작성된 @keyframes를 이용합니다.

속성

• animation-name
  • 적용할 애니메이션의 이름을 지정합니다
• animation-duration
  • 애니메이션이 완료되는 시간(지속시간)을 설정합니다
• animation-timing-function
  • 애니메이션의 속도 변화를 제어하여 키프레임 사이의 중간값을 어떻게 계산할지를 지정하는 속성입니다.
  • 애니메이션 속도의 가속, 감속 및 큐빅 베지어 곡선을 통해 속도를 설정할 수 있습니다.
  • CSS Easing 에서 다양한 효과를 확인할 수 있습니다
  • 속성 값

속성값	설명
linear	처음 속도와 마지막 속도가 일정합니다.
ease	애니메이션이 천천히 시작해서 빠르게 진행되고 다시 느려집니다
ease-in	애니메이션이 천천히 시작하고 이후에 가속됩니다
ease-out	애니메이션이 빠르게 시작하고 이후에 감속됩니다
ease-in-out	애니메이션이 천천히 시작해서 가속되다가 다시 천천히 느려집니다
step-start	애니메이션이 첫 프레임에서 바로 끝 상대로 이동합니다
step-end	애니메이션이 마지막 순간에 상태가 변경됩니다
steps(int, start|end)	애니메이션을 특정한 단계로 나눠서 실행합니다
cubic-bezier(n,n,n,n)	사용자 정의 큐빅 배지어 곡선을 사용해 애니메이션의 속도를 정의합니다
inherit	애니메이션 움직임을 상위 요소한테 상속받습니다.

 

• animation-delay
  • 애니메이션이 시작되기 전에 대기하는 시간을 설정합니다
• animation-iteration-count
  • 애니메이션이 몇 번 반복될지(반복횟수)를 설정합니다
  • 속성 값

속성 값	설명
number	애니메이션이 반복되는 횟수이며 음수 값은 유효하지 않습니다(기본값 : 1)
infinite	애니메이션이 계속 반복됩니다.
inherit	애니메이션 속성을 상속받습니다.

 

• animation-direction
  • 애니메이션이 재생될 방향을 설정합니다
  • 속성 값

속성 값	설명
normal	애니메이션이 매 사이클마다 정방향으로 재생되며, 시작 상태로 돌아가 다시 시작됩니다.
reverse	애니메이션이 매 사이클마다 역방향으로 재생되며, 종료 상태에서 시작하여 반대로 실행됩니다.
alternate	애니메이션이 매 사이클마다 방향을 바꿔 재생되는데 첫 번째 반복은 정방향으로, 다음 반복은 역방향으로 진행됩니다.
alternate-reverse	애니메이션이 매 사이클마다 방향을 바꿔 재생되며, 첫 번째 반복은 역방향으로 시작되다가 이후 반복에서는 순방향으로 진행됩니다.
inherit	애니메이션 움직임을 상위 요소한테 상속받습니다

 

• animation-fill-mode
  • 애니메이션이 끝나거나 시작하기 전에 요소가 어떻게 보일지 설정합니다.

속성 값	설명
none	애니메이션이 시작되기 전과 종료 후, 요소는 원래의 스타일로 돌아갑니다.
forwards	애니메이션이 끝난 후 마지막 키프레임의 스타일을 유지합니다.
backwards	애니메이션이 시작되기 전에 첫 번째 키프레임의 스타일을 즉시 적용합니다.
both	애니메이션이 시작되기 전 첫 번째 키프레임의 스타일을 유지하고, 종료 후에는 마지막 키프레임의 스타일을 유지합니다.
inherit	애니메이션의 상태를 상위 요소한테 상속받습니다.

 

• animation-play-state
  • 애니메이션의 재생 또는 일시 정지를 설정합니다

속성 값	설명
keyframe name	움직임을 표현한 Keyframes의 이름을 설정합니다.
none	애니메이션 움직임을 적용하지 않습니다.
inherit	애니메이션 속성을 상속받습니다.

 

animation이 지원되는 속성

transform: 요소의 크기, 위치, 회전 등을 변경할 수 있습니다.
opacity: 투명도를 조절합니다.
color: 텍스트 색상을 변경합니다.
background-color: 배경색을 변경합니다.
width와 height: 요소의 크기를 변경합니다.
margin과 padding: 여백을 조절합니다.
top, right, bottom, left: 위치를 변경합니다.
font-size: 글자 크기를 변경합니다.

transition

css 속성 값의 변화가 부드럽게 이뤄지도록 애니메이션 효과를 적용합니다.

문법

.box {
  transition: property duration timing-function delay;
}
.box {
  /* 보통 이렇게 단축 속성의 형태로 많이 쓰입니다. */
  transition: all .4s;
}

• property: 애니메이션 효과를 적용할 CSS 속성입니다
• duration: 전환이 완료되는 시간입니다
• timing-function: 애니메이션의 시간 흐름을 제어하는 함수입니다
• delay: 애니메이션이 시작되기 전의 대기 시간입니다

속성

속성 값	설명
transition-property	애니메이션 효과를 적용할 CSS 속성을 지정합니다
transition-duration	전환이 완료되는 시간입니다
transition-timing-function	애니메이션의 시간 흐름을 조절하는 함수입니다
transition-delay	애니메이션 시작 전의 대기 시간입니

transform

• 요소의 크기(scale), 위치(translate), 회전(rotate), 기울기(skew)를 변경할 수 있습니다.
• 시각적 변화만 제공하며, 레이아웃에는 직접적인 영향을 주지 않습니다 (기존 공간 유지)

주요 변환 함수

• scale: 요소의 크기를 조정합니다.
• translate: 요소의 위치를 이동시킵니다.
• rotate: 요소를 회전시킵니다.
• skew: 요소를 기울입니다.

문법

• 예)

.circle {
  transform: rotate(45deg) translateX(100px);
}

• 변환 함수는 띄어쓰기로 구분하여 조합 가능합니다.
• 각 변환은 독립적으로 적용되지만, 순서에 따라 최종 효과가 달라집니다.

특징

• 변환 함수는 한 묶음으로 해석됩니다.
  • 여러 변환 함수가 하나의 변환 명령으로 처리됩니다.
• 변환 속성의 작성 순서가 중요합니다.
  • 첫 번째 함수부터 순차적으로 적용됩니다.
• 컨테이닝 블록과 스태킹 컨텍스트 형성
  • transform이 적용된 요소는 position: absolute 또는 fixed 요소의 컨테이닝 블록이 될 수 있습니다.
  • 새로운 스태킹 컨텍스트를 형성하여 z-index의 기준이 됩니다.

<form>

사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송할 수 있는 인터페이스를 제공합니다.

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

동작 방법

1. 폼이 있는 웹 페이지를 방문합니다.
2. 폼 내용을 입력합니다.
3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다
4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다
5. 웹 프로그램은 폼 데이터를 처리합니다
6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다
7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다
8. 브라우저는 받은 html 페이지를 보여줍니다

https://www.nextree.co.kr/p8428/

<input>

사용자가 정보를 입력할 수 있는 부분을 생성합니다

• 주요 속성

속성 값	설명
readonly	읽기 전용 필드로 설정되어, 사용자가 값을 수정할 수 없습니다.
placeholder	입력 필드에 힌트 텍스트가 표시되며, 클릭 시 사라집니다.
autofocus	페이지 로드 시 자동으로 특정 입력 필드에 커서가 위치합니다
autocomplete	입력 필드의 자동완성 기능을 설정합니다
max/min	숫자나 날짜 입력 필드의 최대값과 최소값을 지정합니
maxLength	텍스트 필드에서 입력 가능한 최대 문자 수를 지정합니다
step	숫자 필드의 값 간격을 설정합니다 (날짜 및 시간 관련 필드와 숫자, 범위 필드에서 사용 가능).
required	필수 입력 필드를 지정하는데 빈칸 일 경우 제출할 수 없습니다.
type	입력 필드의 형식을 지정합니다.

 

• type 속성 종류

속성 값	설명
text	한 줄짜리 일반 문자 입력 필드
password	비밀번호 입력 필드, 입력 내용이 숨겨짐
button	클릭 이벤트를 처리할 수 있는 버튼
submit	폼 데이터를 서버로 제출하는 버튼
reset	폼의 입력값을 초기화하는 버튼.
radio	단일 선택 컴포넌트, 여러 옵션 중 하나만 선택 가능
checkbox	다중 선택 컴포넌트, 여러 옵션 중 여러 개 선택 가능.
file	파일을 업로드할 수 있는 필드
hidden	사용자에게 보이지 않는 숨은 필드, 서버로 데이터 전송 가능
search	검색 상자, 주로 크롬과 사파리에서 사용
tel	전화번호 입력 필드.
url	URL 주소 입력 필드
email	이메일 주소 입력 필드, 형식 검사를 수행
number	숫자 입력 필드, 화살표로 값 조절 가능
range	숫자 범위 조절 슬라이더
color	색상 선택 필드.
datetime	날짜와 시간을 입력하는 필드 (UTC).
datetime-loca	날짜와 시간을 지역 시간으로 입력.
date	날짜 입력 필드 (연, 월, 일).
month	월과 연 입력 필드
week	주와 연 입력 필드
time	시간 입력 필드 (시, 분, 초).
image	이미지로 된 제출 버튼, 클릭 시 폼 제출.

 

<fieldset>

폼 요소들을 그룹화하여 시각적으로 구분하고 논리적으로 묶는 데 사용됩니다.

<legend>

<fieldset> 내에서 사용되며, 그룹화된 폼 요소들의 제목을 정의하여 의미를 명확히 합니다.

select, option

• <select>: 드롭다운 메뉴를 생성합니다. 드롭다운 리스트에서 사용자가 선택할 수 있는 옵션들을 포함합니다.
• <option>: 드롭다운 메뉴에서 사용 가능한 각 옵션을 정의합니다.
• 속성

속성 값	설명
autofocus	페이지 로드 시 자동으로 드롭다운 리스트에 포커스가 이동합니다
disabled	disabled
form	드롭다운 리스트가 포함될 하나 이상의 <form> 요소를 지정합니다
multiple	사용자가 한 번에 두 개 이상의 옵션을 선택할 수 있게 합니다.
name	드롭다운 리스트의 이름을 설정합니다.
required	폼 제출 전에 사용자가 반드시 값을 선택해야 합니다
size	드롭다운 리스트에서 한 번에 보일 옵션의 개수를 설정합니다

 

<label>

입력 요소에 대한 설명을 제공하고, 레이블을 클릭하면 관련된 입력 요소에 포커스가 이동합니다.

 

• for 속성
  • 레이블을 클릭했을 때 관련된 입력 요소에 포커스가 이동하도록 설정합니다. 이 속성은 레이블과 입력 요소를 연결합니다.
• 내부 포함
  • <label> 태그 내부에 <input> 요소를 포함할 수 있으며, 이 경우 레이블 클릭 시 입력 요소도 함께 활성화됩니다. 특히 라디오 버튼과 체크박스에서 유용합니다.

<button>

클릭 가능한 버튼을 정의합니다

• 속성

속성 값	설명
submit	폼 데이터를 제출합니다. 기본값이며, type 속성을 생략하면 자동으로 설정됩니다.
reset	폼의 입력 값을 초기화합니다
button	기본 동작이 없으며, 자바스크립트 등에서 특정 동작을 정의하기 위해 사용됩니다.

 

<form>의 시맨틱 마크업 핵심 내용

• 그룹화: <fieldset>을 사용하여 관련된 필드들을 논리적으로 그룹화하여 폼의 구조를 명확히 합니다.
• 명확한 레이블: 모든 입력 요소에 대해 <label>을 사용하여 명확한 설명을 제공하고, 사용자가 각 필드의 목적을 이해할 수 있도록 합니다.
• 포커스의 명확성: 사용자가 현재 입력 중인 필드와 입력 가능한 상태를 명확하게 전달합니다.
• 입력 도움말: placeholder, title 속성을 활용하여 추가적인 설명과 도움을 제공합니다.
• 입력 내용 검증: 입력된 내용을 검증하여 사용자가 올바른 데이터를 입력하도록 유도합니다

<form> 요소의 스타일 초기화

폼 요소의 스타일: input, button 등의 폼 요소는 사용자와의 상호작용을 위해 기본적인 스타일과 동작이 정의되어 있습니다.

• 스타일 초기화:
  • all: unset; 속성을 사용하여 요소의 모든 CSS 속성을 초기화할 수 있습니다.
  • 이 방법은 모든 스타일을 초기값 또는 상속으로 되돌리지만, 필수적인 기본 스타일과 기능도 제거될 수 있습니다.
• 주의사항:
  • all: unset;을 적용한 후에는 필수적인 스타일을 다시 정의하여 입력 필드의 기본 기능과 사용자 경험을 유지해야 합니다.

<form> 관련 가상 클래스

가상 클래스	설명
: focus	입력 요소에 포커스가 있을 때 적용되며 사용자 입력 시작을 나타냅니다.
:focus-within	요소 또는 자식 요소 중 하나가 포커스를 받을 때 적용되며 주로 폼 컨테이너에 사용됩니다
:focus-visible	키보드로 포커스를 이동할 때만 스타일이 적용됩니다
:checked	체크박스나 라디오 버튼이 선택된 상태일 때 적용됩니다.
:disabled	비활성화된 폼 요소에 적용됩니다.
:valid	입력 값이 유효성 검사 규칙을 통과했을 때 적용됩니다
:invalid	입력 값이 유효성 검사를 통과하지 못했을 때 적용됩니다.
:required	필수 입력 필드에 적용되며, 빈 필드에서 제출 시 유효성 검사가 진행됩니다.

 

😔Lacked 부족한 점

다음 주면 html css 수업이 끝나는데 많은 것을 배웠지만 모든 내용이 잘 떠오르지는 않아서

계속 복습을 해야할 것 같습니다.

그리고 다다음주부터 자바스크립트를 배우는데 학교 다닐 때 좀 어려워했었어서 걱정이 됩니다 ㅜㅜ

🙏🏻Longed For 앞으로 바라는 점

• 복습 꾸준히하기
• 자바스크립트 예습하기