[멋재이사자처럼] 프론트엔드 스쿨 7기 - 12일차 기록 및 복습

---

목차

1. CSS 애니메이션

2. 햄버거 버튼 만들기

3. Video & Audio

4. SVG & Canvas

5. Form

6. Select

---

1. CSS 애니메이션

1-1. 기본 개념 

- JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다.

- 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 keyframes로 이루어진다.

- transition VS animation : transition 의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실핼할 수 있다.

- @keyframes : 두개 이상의 애니메이션 중간 상태를 지정합니다. (0% > 100% 또는 from > to)

 

1-2. 라이캣 애니메이션 만들기

라이캣 움직이기

1-3. animation 속성

- 첫번째 줄 : animation 의 단축속성

- 나머지는 첫줄과 같은 의미의 속성들이다.

- animation-name 이름. 특수문자는 언더바, 하이픈만 허용됨.
                             잘못된 이름: 숫자로 시작되거나 대문자, 불허용 특수자 포함

- animation-duration 간격

- animation-iteration-count 반복 횟수

- animation-timing-function 애니메이션 시간 함수

- animation-delay 지연

animation: move-licat 0.5s infinite steps(6);
animation-name: move-licat;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: steps(6);

1-4. animation-direction

- 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정한다.

- normal : 기본값, 정방향으로 재생

- alternate: 정방향, 역방향 반복 (가장 많이 사용하는 속성)

- reverse: 역방향 재생

- alternate-reverse: 역방향, 정방향 반복

 

1-5. animation-fill-mode

- 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정

- normal : 기본값. 스타일 적용 없음 (<-> backwards)

- backwards : 첫번째 정의된 애니메이션 값으로 시작. 요소의 기존 스타일로 돌아감.

- forwards : 요소의 기존 스타일로 시작. 애니메이션 마지막 속성값 유지

- both: 첫번째 정의된 애니메이션 값으로 시작. 마지막 값 유지

 

1-6. animation-play-state

- 애니메이션 재생 여부 설정

- paused 정지

- running 재생

 

Codepen 의 다양한 Animation Reference 참조하면 좋다.

https://codepen.io/gayane-gasparyan/pen/jOmaBQK

Magic Card

https://medium.com/frontend-canteen/fantastic-css-border-animation-b02e06828beb

Fantastic CSS border animation

1-7. animaton 단축속성

- (animation-name) (animation-duration) (animamtion-timing-function) (animation-delay) (animation-iteration-count) (animation-direction) (animation-fill-mode) (animation-play-state)

2. 햄버거 (더보기) 버튼 만들기

2-1. 햄버거 메뉴 버튼, 캐밥 버튼 : UI/UX 용어

2-2. 실무에서 자주 사용되는 UI/UX 용어 : 커뮤니케이션에 도움이 된다.

https://ahnsisters.tistory.com/22

[UIUX] 실무에서 자주 사용되는 UI 용어(2)

2-3. 햄버거 (더보기) 버튼 만들기

- 마우스 hover 와 active 시 형태가 바뀌며 움직임

햄버거 버튼 만들기

See the Pen Untitled by redcontroller (@redcontroller) on CodePen.

 

2-4. 캐릭터 그리기 과제

- 나만의 캐릭터를 만들어서 제출하자 ( ~ 7/24(월) 18:00)

- 예시) licat 캐릭터 애니메이션

See the Pen animation-licat by redcontroller (@redcontroller) on CodePen.

 

3. Video & audio

3-1. video

- 과거에는 동영상을 플래시 플레이를 기반으로 개발하였다.

- 현재는 <video> 태그를 사용하여 동영상을 재생하게 되었다.

- 웹에서 영상을 볼 수 있게 되면서 유튜브, 넷플릭스와 같은 미디어 플랫폼의 시대로 발전했다.

 

3-2. video 태그 속성

- auto play 동영상자동 재생

- controls 재생, 정지 등 메뉴 노출

- loop 동영상 반복 재생

- poster 동영상 재생 전에 보여 줄 이미지

- preload 페이지를 열 때 무엇으로 로드할지 결정

- src 동여상 주소

- type 동영상 타입

- <track> : <video> 와 <audio> 태그 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터(텍스트 트랙)을 보여주고자 할 떄 사용한다. kind, srclang, label

 

3-3. audio

- 공식적으로 지원하는 표준 오디오 파일: mp3, wav, ogg

- <audio> 태그의 속성

- src 파일의 경로

- controls 기본적인 동작을 조절하는 패널

- autoplay 자동 재생 여부

- loop 반복 재생 여부

- preload 파일의 내용을 모두 불렁ㄹ지 여부 명시

- autoplay 자동재생 주의상 : 오디오/비디오를 자동 재생하는 것은 사용자에게 좋은 경험이 아닐 수도 있으니 가능한 지양하는게 좋다.

https://developer.mozilla.org/ko/docs/Web/Media/Autoplay_guide

미디어 및 Web Audio API 자동 재생 가이드 - 웹 미디어 기술 | MDN

3-4. iframe

- inline frame 의 약자

- 현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩하는 기능을 제공한다.

- 악용하는 사례가 있어 소스 페이지에서 연결을 거부하기도 함 (가짜 네이버 페이지 악용사례)

- Youtube 영상 퍼오기에 활용할 수 있음

- <> 모양의 동영상 퍼가기 

4.SVG & Canvas

4-1. SVG

- 확장 가능한 벡터 그래팩(Scaleable Vector Graphics) 으로 XML 기반의 2차원 그래픽

- HTML 태그의 집합으로 이루어져 있다.

- CSS와 JavaScript 로 컨트롤이 가능하다.

- 장점: 확대해도 깨지지 않는다. 이미지 크기를 키워도 용량이 늘어나지 않는다.

- 단점: 코드로 이루어져있다보니, 복잡한 임지의 경우 파일사이즈(용량)가 커진다.

- 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다.

- <img> 태그, Background 속성, <svg> 태그를 인라인까지 총 3가지 형태로 사용할 수 있다.

- SVG 데이터를 다룰줄 알면 실무에 도움이 많이 된다.

 

4-2. Canvas

- JavaScript 와 HTML 요소를 통해 그래픽을 그린다

- 픽셀기반의 비트맵 방식

- 그래픽이 주작업인 게임에 적합

- 배우는데 1달이 걸린다고 한다. 예제를 눈으로 보고만 넘어간다.

- 이호준 대표님 강의도 있다고 함

 

5. form

5-1. form 태그

- 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

- form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그이다.
  별도 제출할 필요가 없다면 form 태그를 사용하지 않아도 된다.

 

5-2. Post

- 양식을 제출할 때 사용할 HTTP 메서드

- post : 양식 데이터를 요청 본문으로 전송. 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음. post 방식의 http 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송. 데이터의 길이 제한이 없고, get 방식보다 보안성이 높음.

- post enctype 속성 기본값은 application/x-www-form-rulencoded 이지만 파일을 전송할 필요가 있을 때는 
   multipart/form-data 로 변경해야한다. (<input type="file"> 이 존재하는 경우)

 

5-3. Get

- get: 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송. get방식의 http 요청은 브라우저에 의해 캐시되어 저장. 보통 쿼리 문자열에 포함되어 전송며 길이의 제한이 있다. (OS, Browser 마다 다름). 보안에 취약점이 존재하므로 중요한 데이터는 POST 방식을 사용하여 요청.

- name/value : 이름/값(name/value)의 짝으로 양식과 함께 전송

- get vs post

	Post	Get
전송	양식 데이터를 요청 본문으로 전송	https//example.com/?name=홍길동&age=20
캐시	X	O
길이제한	X	O
보안	GET 방식보다 높다	취약

- action 속성 : 양식 데이터를 처리할 프로그래밍의 URI 를 적어준다.

                       데이터를 어디로 보낼것인지 지정한다. 반드시 유요한 URL 이어야 한다.

                       이 속성을 지정하지 않으면 데이터는 form 이 있는 페이지의 URL 로 보낸다.

- autocomplete 속성 :  (on/off) 입력요소가 자동완성된 값을 기본값으로 가질 것인지 여부

 

5-4. input

- type : 양식 컨트롤의 유형 button, text, email, file ...

input 유형	설명	input 유형	설명
button	버튼, 기본행동 없음. Value로 버튼 텍스트 표시	month	연과 월 입력
text	텍스트 입력	time	시간 입력
email	이메일 입력	file	파일 업로드
tel	전화번호 입력	color	색 선택
password	비밀번호 입력(값이 가려짐)	number	숫자 입력
url	웹페이지 주소 입력	range	슬라이드 바 형태
checkbox	단일 값을 선택하거나 선택 해제	search	검색 문자열 입력 (삭제 아이콘 포함)
radio	선택 항목중 하나만 선택	reset	form 내용을 기본값으로 초기화
date	날짜 입력(년,월,일) - 시간 없음	submit	양식 전송
datetime-local	날짜와 시간을 지정	hidden	보이지 않지만 값은 서버로 전송하는 컨트롤

- name : 양식 컨트롤의 이름

- value : 양식 컨트롤의 값

- autocomplete : on/off 자동완성 기능

- placeholder : 양식 컨트롤이 비어있을 때 나타나는 내용 (입력에 대한 힌트 제공)

- required : 양식 전송을 위해 필수로 입력해야하는 값 (안넣으면 경고 문구가 뜸)

- disabled : 비활성화

- readonly: 수정불가 (읽기전용)

- readonly vs disabled : 둘다 사용자가 입력할 수 없으나, readonly 는 value 값이 있다면 값을 제출

                                         가능하지만 disabled 는 value 값이 있어도 넘길 수 없음.

- input vs 버튼 : 닫는 태그의 유무로 인한 차이로 button 이 다양한 inline 태그들을 넣을 수 있어 자유도가

                           높다. 또한 button 은 가상 선택자(before, after) 사용 가능하다.

- 라디오 버튼 vs 체크 버튼 : 라디오 버튼은 단일 선택. 체크 버튼은 중복 선택이 가능

- 그냥 text 속성으로 값을 받아도 되지 않을까? 모바일에서 type 에 따른 키패드 UI 가 조금씩 다르다.

- text/password/url/search/tel : maxlength/maxlength : 문자수 최대/최소 길이

- file : accept:"type" 허용하는 파일 유형을 지정. multiple 지정할 경우 사용자ㅏ 여러개의 파일을 선택 가능

- number 숫자 max, min, step

 

5-5. label 

- 사용자 인터페이스의 항목을 나타낸다.

- input 과 함께 사용한다. 감싸서 사용할 수 있으나 CSS 적용을 위해서 따로따로 쓴다.

- 주의: label 안에 a 또는 button 과 같은 인터랙티브 요소를 배치하지 말것
           label 안에 제목요소(h1~h6) 를 배치하지 말 것

           form 에 제목이 필요한 경우 fieldset, legend 사용하기

- legend 가 오래된 태그라서 CSS 적용이 안되는 이슈 발생이 있다. (flex 가 안먹힘)

- type="buton"선언과 유효한 value 속성을 가진 input 요소에는 레이블이 필요하지 않다.

 (ex. <input type"button" value="button">)

- label 연결이 잘 되어 있는지 확인할 수 있는 크롬 플러그인 OpenWAX (접근성 검사도 가능)

https://chrome.google.com/webstore/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe/related?hl=ko 

OpenWAX

 

6. select

6-1. select 기본

- 옵션 메뉴를 제공한다.

- multiple : 다중선택

- size: 한번에 노축되는 항목의 수를 조절

- required: 선택 필수

- disabled: 선택 불가

 

6-1. option & optiongroup

- 메뉴의 각 옵션을 정의한다.

- option 닫는 태그 없어도 마크업 오류가 나지 않는다.

- selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러온다.

- option 요소를 optiongroup 요소 안에 배치하면 드롭다운 내에서옵션 그룹을 나눌 수 있다.

 

6-2. select

- select 요소는 CSS를 사용해 스타일을 적용하기 어렵다.
 간단한 border, font, background 등의 일부 스타일은 바꿀 수 있다.
 appearance 속성을 사용하면 기본 브라우저를 통해 설정된 외형을 제거할 수 있다.
 하지만, 브라우저별 해당 내부 구조가 복잡해서 완전히 커스텀 하기 어렵다. 그래서 select 가 아닌 다른 html 요소들과 javaScript 등을 사용해 완전히 별도의 드롭다운 메뉴를 만들어야한다.
  이미 웹 접근성이 고려되어 잘 개발된 select 를 사용하면 가장 좋지만 단점은 못생겼다는 것!

 

6-3. fieldset

- form 관련 요소들을 묶을 때 사용한다. (옛날 태그라 flex 가 안먹힘). disabled 를 사용할 경우 모든 자손 컨트롤을 비활성화 한다.

- legend 그룹의 제목을 제공한다. (옛날 태그라 flex 가 안먹힘)

 

6-4. datalist

- 다른 컨트롤에서 고를 수 있는 가능한 혹은 추천하는 선택지를 나타내는 option 요소를 담을 수 있다.

- input과 select 기능을 합친 개념이다.

- 사용자에게 기본적으로 선택할 수있는 옵션을 제공하고, 옵션값에 원하는 값이 없을 경우 사용자가 다른 값을 입력할 수 있도록 한다.

 

6-5. textarea

- 여러줄의 text 를 입력받을 수 있다.

- cols: 입력창의 너비, 문자의 평균적인 넓이를 기준으로 ㅏㅁ

- rows: 기본적으로 보여줄 입력 줄 수를 의미

- maxlength: 사용자가 입력할 수 있는 문자 최대 길이

- minlength: 사용자가 입력할 문자 최소 길이

- placeholder: 컨트롤에 무엇을 입력해야하는지 알려주는 힌트

- textarea 크기 조절(오른쪽 하단 빗금 모양) 비활성화 CSS

textarea {
  resize: none;
 }

 

 

 

+ ) 과제로 제출한 나의 캐릭터 ZAKU-II : Pure CSS Drawing

See the Pen Untitled by redcontroller (@redcontroller) on CodePen.