4일차 : Figma 김데레사 강사님(html, css)

사전 과제

이건 점수에 반영하지 않는다.

배운 것들을 이용해서 얼마나 UI를 만들 수 있을지 스스로 점검합니다.

1:1 피드백이 올 때 질문을 주면 피드백도 줄 것.

안내

영상으로 찍어놨다. 영상 틀어주겠다.

frontend-2nd

create a new repository

Taejoon(영어이름)

네카라쿠배 2기 과제 저장소

Private

Add a README file 체크해야 main으로 설정된다. 체크

-> 만들기

노트북 클론작업

clone - 복사 - VSCode 구동 - 터미널

git clone {복사}

cd Taejoon

code . : 새로운 비쥬얼 스튜디오 열리면서 내가복제한 것이 열린다. (안열리면 파일 오픈 - 클론한 저장소 열기해도 된다.)

------------------------여기까지 과제 저장소에 비공개 생성하는 방법---------------------------

FIGMA

시안 파일을 제공해 줬다. 현업에서는 포토샵을 사용하는 사례가 많은 편. UI제작에 적합하지 않다.

adobe xd, figma 등이 있으나 브라우저로 접근 가능한 figma로 우린 한다.

figma에 제공하는 시안을 편집이 가능한 것으로 가져오기 위해서 영상을 추가로 보여준다.

상단 드랍박스 눌러서 듀플리케이트 > copy부분에 내 이름을 넣는다.

figma 버전관리 가능하다. 이 상태로 히스토리를 등록해놔야 나중에 되돌릴 수 있다.

버전관리 하는 방법

1. 이름 우측

2. show version history > +버튼 > Add to version history

3. 되돌아가는 시점들을 등록해놓고 사용하자.

버전을 되돌리려면 우측 점 세개 눌러서 restore 누른다.

작업하는 방법

1. 내보내는 방법(export)

이미지 클릭하고 우측하단에 export

이름은 걸맞는 이름으로 변경해라

2. UI

더블클릭하면 선택된다.

width, height값 확인, 색상 확인, 선 색상, 글자 크기

inspect에서도 확인가능하다.

맥의 경우 alt누르고 다음 칸으로 마우스 옮기면 간격 사이즈 나온다.

전체적인 설명

pages가 5개로 나누어져 있을 것.

- cover

- 부품(components)

- 컴포넌트 좌측위에 있는 별표 4개는 원본 컴포넌트란 뜻이다.

유튜브 채널

youtube.com/user/seulbinim

figma 다룰 수 있는 방법 이 링크도 디스코드에 줄 것.

반응형으로 구현해도 좋다.

javascript 이용해도 된다. 하지만 css로도 가능하다. class에 따라 다르게 해서.

README.md

HTML은 어떻게했는지 CSS는 어떻게 했는지 summary 작성해라.

질문사항도 여기다가 적어라.

클론한 폴더 내에 별도의 폴더, 파일을 만든다.

- css

style.css

- images

index.html

README.md(이미 있을 것)

+ index파일 가이드

이 상태로 시작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
</body>
</html>

+ 웹 표준, 웹 접근성을 고려해라

+ 커밋

1. git status로 일단 확인

2. git add. 스테이지로 보낸다.

3. git stats 또 확인 (초록색으로 두개 새로운 파일 생성됬다고 보여줌)

4. git commit -m "사전과제 기본 구조 작성"

5. git log --oneline (로그를 확인할 수 있다. origin/main, origin/head 까지 온라인에 있다는 소리다. head->main은 로컬이란 의미)

6. git push origin -u main

사전과제는 중간 중간 유의미한 단계에서 여러번 push를 해라.

그래야 수정할 때 더 편하게 가능하다.

+ 중요

컨테이너에서 수정하는 것이 아니라

컴포넌트에서 수정해야 한다.

컴포넌트에서 작업한 것을 컨테이너에서 가져다 쓰는 것이기 때문

다른데에서 수정해도 원본이 바뀌지는 않는다. 인스턴스이기 때문

~7/23까지 기한

저작자표시

'Developer Camp[Fastcampus NKLCB] 2021.07 > 2021.07~ FastCampus 네카라쿠배2기' 카테고리의 다른 글

4일차 : CSS Flex (0)	2021.07.15
4일차 : CSS Animation (0)	2021.07.15
4일차 : CSS 배경 (0)	2021.07.15
3일차 : Git에 대해서 (0)	2021.07.15
2일차 : CSS float과 clear (0)	2021.07.13

설계자에서 개발자가 되는 과정

4일차 : Figma 김데레사 강사님(html, css)

사전 과제