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

---

목차

1. flex 복습

2. 실습 Card2

3. 버튼

4. 피그마

5. 디자인 요소 살펴보기

6. 벡터와 비트맵

7. 피그마 실습

---

1. flex 복습

flex-grow 는 글자수의 길이에 영향을 미쳐 정확한 비율 맞추기가 어렵다.

이때 부모에 flex-basis:0 을 주면 균등하게 flex-grow 를 줄 수 있다.

2. 실습 Card2

- validator.w3.org 에서 마크업 검사 실행

- button:enable {cursor:pointer} / button:disabled {}

- display: flex 속성이 있을 경우, 너비값 고정없이 유연하게 처리하기 때문에 text-overflow 가 안먹힐 수 있다. (width 고정값을 주던지, 넘치는 요소 컨테이너를 만들어 그곳에서 overflow: hidden 을 추가한다.

- 말 줄임처리에서 text-overflow: ellipsis; 는 직접적으로 텍스트가 넘치는 요소에 넣어줘야한다.

- 말 줄임처리할 Text box 높이 요소 계산식 height = 한 줄 크기 (1em * 1.6) * 총 줄 수

 em 은 폰트 사이즈 (line-height 포함 안함)

3. 버튼

- 사용자가 클릭할 수 있는 요소

- 타입: button type="button", "reset", "submit"

- <a> vs <button> 마우스 우클릭 했을 때 나오는 옵션이 button 은 배경랑 같고, <a> 태그는 새탭에서 링크 열기 등이 나온다. 휠 버튼 또는 Ctrl+클릭 할 시 새창에서 열리는 건 <a> 태그이고 안되는건 <button> 태그

- url 브라우저 창 하단에 노출되는 점이 다름 <a> 는 노출됨

- <a> : 하이퍼링크, 기본 동작이 다른 페이지 혹은 페이지 내의 특정 영역으로 이동. 키보드에서 엔터 동작하나 스페이스는 동작 안함. href 없이 JS 로 동작하게 해서는 안됨

- <button> : 사용자의 동작 실행을 위한 트리거. 기본 동작이 없음. 키보드에서 엔터/스페이스 모두 동작함. JS 로 동작함

- <button> 사용시 주의할 점

(1) 마우스 커서의 모양 변경을 위해서 a 태그를 사용해서는 안됨

(2) button focus 가 예쁘지 않아서 outline 을 숨기면 안됨. focus 도 예쁘게 디자인 할 수 있음.

(3) 누르는 효과를 주기 위해 button 을 사용하면 안됨 (CSS로 스타일링 해줄 수 있음)

(4) li, img, span 등 다른 태그에 JS 기능으로 버튼처럼 만들면 안됨 (각 태그는 각자 역할에 맞게 시멘틱하게 사용)

(5) 접근성 측면에서 button 의 최소 44px * 44px  크기를 권고 한다.

- <input> vs <button>

(1) input 과 기능 상의 차이는 없으나, 사용성에서 자유도가 높은 button 사용을 추천함

(2) input 은 닫는 태그가 없기 때문에 가상 요소 선택자를 쓰지 못하며 태그 사이에 콘텐츠 삽입이 안됨

 

서비스를 개시하기 전에 포커스(focus) 이동이 잘 되어 길을 읽어 버리지 않는지 확인 해야함.

4. 피그마 : 벡터 기반의 웹 협업 툴

- 단축키와 교안 구성

- 인터페이스 설명 (캔버스, 툴바, Layer 패널, Property 패널)

- 피그마 권한 종류 : Owner, Editer, Viewer

- view 모드에서 편집하는 방법

- smaill talk : 커서챗 (/ + 작성)

- heavy talk (c + click), 없애는 방법은 Shift + c

5. 디자인 요소 살펴보기

- 디자이너에게 받은 디자인 요소를 살펴보는 방법

- 에셋 선택 (Ctrl + 좌클릭) 하고 간격 확인하는 방법 (Alt + 좌클릭)

- Export 하는 방법. 파일 전체 Export 하기(Ctrl + Shift + E). 배율/접미사(Suffix)/확장자(.png)

- Properties 로 세부속성으로  확인하기

6. 벡터(Vector)와 비트맵(Bitmap)

- 벡터는 확대하거나 축소해도 해상도에 영향을 끼치지 않으므로 정교한 이미지, 그래픽 표현에는 적합하지 않음 : AI, EPS, SVG : 로고, 아이콘, 일러스트 등

- 정교하고 다양한 색상을 가진 이미지를 만들 수 있다. 이미지가 깨질 수 있으며 대형 출력물 제작 시 용량이 너무 커질 수 있음: JPG, PNG, BMP, GIF : 사진, 이미지, 그래픽 등

7. 피그마 실습

- 뷰어모드에서 편집이 가능한 편집모드 디자인 파일 만들기 (Duplicate)

- 프레임 만들기 페이지 (첫 시작은 좌표 x, y 원점에 맞추기)

- 기본 도형 만들기

(1) 삼각형 시작 보정 (플레이 버튼)

(2) 도형 복사하기 : Ctrl+C/Ctrl+V, Alt+드래그

(3) 다양한 도형 만들어보기

(4) 복사 순차 반복 Alt+드래그 > Ctrl + D

(5) 색 넣기 : 스포이드(i)를 활용해 색 바꾸기

(6) 소울곰 안경 만들기

소울곰 안경 만들기

- 정렬 :

(1) 자(Shift + R) 를 통해서 안내선을 만들어 활용하기.

(2) 정렬 도구를 활용해서 정렬하기

- 텍스트

- 이미지

(1) 파일 붙이기

(2) 플러그인 연결해서 (Find More Flugins - Unsplash) 무료 이미지 연결 하기

(3) 자기소개 카드 만들기

- 레이어와 그룹 : 

(1) 라이켓 얼굴 만들어보며 레이어 이해하기

(2) 그룹/그룹 해제하기 (Ctrl+G/Ctrl+Shift+G)

(3) 소울곰의 옷장 실습

내가 꾸며본 소울곰