[220511 / Day 7] 재플린(Zeplin)을 활용한 페이지 제작 1

실무에선 디자인 파일 자체를 주지 않고 피그마나 psd 파일로 줌

 

1. 재플린

무료는 하나밖에 못 만듦

포토샵으로 만들 때 아트보드 체크할 것

포토샵 상단에 익스텐션-재플린 : 패널 뜰 것, 익스포트 셀렉트(레이아웃 눌러야함) 누르면 해당 목록 뜸, 익스포트 누르면 재플린으로 뜸 재플린에 읽어 들어옴

사진 눌러보면 사이즈나 css, html 코드, 컬러코드 다 뜸 html 코드 뜨더라도 맞는 태그는 각 알아서 해야 함

공유하기 하려면 밖에 나가서 쉐어버튼 누르거나 멤버스에서 이메일 눌러가지고 6명까지 공유

variable name format 은 네이밍하는 법, 각 회사의 네이밍 가이드 있음, 아이디는 카멜 클래스는 케밥 많이 씀

디폴트 벨류 값 해제하기, 체크하면 디폴트 값까지 다 적혀 있어 코드가 너무 길어짐

에셋, 이미지로 다운로드 받으려면 포토샵에서 에셋으로 되어 있어야 함

목록 연거 확인하려면 포토샵에서 레이아웃 복사하고 목록 연 걸로 다시 재플린에 보내야 함

 

2. 01.html 파일 : 재플린으로 웹페이지 만들기

- 섹션에 헤더 태그 없이 하면 유효성 검사에서 경고 뜰 것, 화면 상에서 안 보이고 싶으면 히든

- 헤더: 플롯 레프트(랭귀지), 포지션(로고), 플롯 라이트(회원가입)

- 헤더에 로고는 h1으로 마크업 하는 게 좋음

- 헤더, 푸터 먼저 만들고 본문 : 어느 페이지든 상단의 헤더와 하단의 푸터는 동일하게 나옴 그래서 매번 다른 페이지에 헤더, 푸터를 만들 수 없으니까 템플릿으로 만들고 가운데를 채우는 식으로

- 목록은 접근성 좋으려면 묶어서 해야 하는데 묶어서 하면 복잡하고 양이 많아지면 어려워서 따로

- 다음으로 넘어가는 동작은 버튼 많이 씀

- css 파일에서 @import url(reset.css); 이렇게 하면 리셋 불러오기

- @import 는 마지막에 세미콜론(;) 안 하면 인식 못함

- .이너 기준으로 .로고에 포지션 앱솔루트

- 플롯을 플롯으로 대응한다 : 플롯한 상위요소의 하위요소에도 플롯을 주면 높이값이 자동으로 잡힘

- .topmenu-area{float: right; padding-top: 8px;} : 패딩 줘도 되는데 백그라운드 색깔이 있으면 패딩값까지 색이 잡히기 때문에 색깔이 있으면 마진으로 해야 함

- height: 27px; line-height: 27px; : 왜 두개를 잡는 건지? 안 잡아도 된다고 함 라인하이트만 줘도 됨

- 부모요소에 사이즈, 웨이트 적으면 자식요소에 상속, 하지만 컬러는 겹쳐

- 재플린에서 글자에 여백이 안 잡혀 있다고 해도 여유롭게 잡기

- 아이콘 최소 사이즈 48, 48 하지만 컴퓨터에는 더 작아도 상관없음

- font-weight: 700; : 폰트 가져올 때 700 볼드 가져와서 700 이라고만 해도 볼드 나옴

- 패딩은 내 요소, 내 여백이라고 인식하고 마진은 밖의 여백이라고 생각. 그래서 앵커에 패딩을 주면 커서 반응하고 마진은 커서 반응 안함

- text-indent: 20px; : 안쪽에 뭐 넣으려면 줄여쓰기 (예: 목록 앞에 리스트 스타일)

- background-color: transparent 은 투명하게

 

※ placeholder(이메일을 입력하세요) : 컬러 바꾸는 법

 

※ vender prefix !다시!

.footer-top .mail-box input[type='email']::placeholder{color: #fff;}

.footer-top .mail-box input[type='email']-ms-input::placeholder{color: #fff;} => 벤더프리픽스

 

 

3.  재플린으로 웹페이지 만드는 순서

html로 자리잡고(로고는 글자로 대체 후 css 백그라운드 처리) – 헤더 감싸는 위치 잡아주고 – 플롯 처리로 이너 위치 잡아주고 -

!다시!

text-transform: uppercase; → 글자 모두 대문자로