[HTML+CSS] 코코아톡 클론 코딩 #2 Practice

수업

https://academy.nomadcoders.co/courses/enrolled/203015

코코아톡 프런트엔드 클론 코딩

 

TIP

자동완성

• html:5 를 입력하면 html 구조가 자동 완성 된다.
• .status-bar 입력시 <div class="status-bar"></div>가 자동 완성 된다.
• .status-bar*2 입력시 <div class="status-bar"></div> 2개가 자동 완성 된다.
• span.status-bar__clock 입력시 <span class="status-bar__clock"></span>이 자동 완성 된다.
• li.nav__list-item*4>a.nav__list-link
  
  • 안에 a 태그가 있는 nav__list-item 클래스를 4개 만들겠다.

 

아이콘 받기

• https://fontawesome.com/icons?d=gallery 에서 icon을 무료로 받을 수 있다.

Font Awesome

• fontawesome에서 1번 아이콘을 불러왔으면 i.fas.fa-wifi를 입력 시 자동 완성 된다.
• <i class="far fa-comment fa-2x"></i> 는 아이콘 크기를 2배 키워준다.

 

그 외 규칙

• __는 child를, -는 단어를 이어주는 역할을 한다.
• 폴더명, 파일명은 소문자로 저장한다.
• <div>는 박스 단위, <span>은 줄(inline) 단위
• 글로벌 클래스 : g-avatar 등으로 정의한다.

초기화

• https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

• 또는 normalize : https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

 

 

목록 만들기

• 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록입니다.
  순서 있는 목록은 ol로, 목록의 내용은 li로 만듭니다.
• 순서 없는 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙습니다.
  순서 없는 목록은 ul로, 목록의 내용은 li로 만듭니다.
• 정의 목록(Definition List)은 용어와 그 뜻을 나열할 때 사용합니다.
  정의 목록은 dl로, 용어는 dt로, 그 뜻은 dd로 만듭니다.
• 출처 : https://www.codingfactory.net/10225

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

 

원하는 패턴 찾기

• https://www.toptal.com/designers/subtlepatterns/

Subtle Patterns

 

• 그라디언트: https://uigradients.com

uiGradients - Beautiful colored gradients

 

 

코드

https://github.com/grace-kimm/kakao-clone

grace-kimm/kakao-clone