Education/⛺BootCamp
[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 19 ~ 20 [5주차]
ds-coding
2024. 8. 25. 01:00
❤️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>
사용자가 웹 페이지에서 데이터를 입력하고 서버로 전송할 수 있는 인터페이스를 제공합니다.
동작 방법
- 폼이 있는 웹 페이지를 방문합니다.
- 폼 내용을 입력합니다.
- 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다
- 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다
- 웹 프로그램은 폼 데이터를 처리합니다
- 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다
- 웹 서버는 받은 html 페이지를 브라우저에 보냅니다
- 브라우저는 받은 html 페이지를 보여줍니다
<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 주소 입력 필드 |
| 이메일 주소 입력 필드, 형식 검사를 수행 | |
| 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 앞으로 바라는 점
- 복습 꾸준히하기
- 자바스크립트 예습하기