프론트엔드 개발 취업 아카데미 [5차]

<!-- 스벅 홈페이지 클론 코딩 중입니다.(이거 길게 안 끌었으면 좋겠다) -->

 

8시에 기상하여 30분 전 학원에 도착했다. 경건한 마음으로 수업을 들었다. 점심은 빽다방에서 사온 빵2개. 초코소라빵, 치아바타. 초코소라빵은 초코크림이 정말 많이 들어있었는데 대체 어떻게 먹어야 하는건지.. 손에 다 묻고 옷에도 묻혀버렸다. 초코소라빵은 집에서 먹는 것으로 하자. 커피는 마시지 않았다. 바보 같은 선택이었다. 커피는 빨간 포션이라고. 먹지 않으면 죽는거야.

 

---

 

[수업 5차 필기]

 

- 헤더에 들어가는 플로팅 팝업 위치 잡을 때!

#top-ad {position: absolute; right: -150px; top: calc(100% + 30px);}

(탑 높이에서 30px 떨어지게 위치함. 헤더의 높이가 바뀌어도 수정할 필요 없다ㅏ)

 

- 컨텐츠영역은 (특히 header) 딱 떨어지는 숫자로 사이즈 잡자.

 

- 반응형 페이지를 만들 때 모든 섹션마다 공통으로 max-width 스타일을 준 클래스를 중간에 감싼다.

 

- 백그라운드 size . cover, contain의 차이를 잘 알아두자!

 

- 백그라운드 중첩 사용. (여러개의 백그라운드 이미지를 겹쳐서 사용하는 방법)

#main-product > section.hawaii

{background-image: url('../img/main-product-bg-04.png'), url('../img/main-product-bg-03.jpg') ; background-position: left center, center center; background-size: auto, cover; background-repeat: no-repeat, no-repeat;}

hawaii라는 섹션 백그라운드에 이미지 2개를 중첩해서 사용했다. 이미지 url은 background-image속성을 사용해 두 번 반복 작성. 포지션, 사이즈, 리핏 속성도 두 번씩 각각 작성해주면 된다. (처음 배운거!) 

 

- reset.css 의 img태그에 max-width:100%; 스타일을 주자. 반응형 필수 작성!

 

- 컴포넌트란 재사용이 가능한 각각의 독립된 모듈!을 말한다.

 

- 양쪽에 서로 다른 백그라운드 색상을 브라우저 끝까지 채워야 할 때 aftet, before 선택자를 사용한다.

#main-promotion::before {content: ''; position: absolute; left: 0; top: 0; width: 50%; height: 60px; background-color: #333;}

#main-promotion::after {content: ''; position: absolute; right: 0; top: 0; width: 50%; height: 60px; background-color: #fff;}

- <i></i> 아이콘 수직 가운데 정렬하는 방법! line-height를 사용하는 것보다

i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

 

로 스타일을 주도록 한다.

 

- 반응형 사이트에서 가로사이즈에 calc 사용하기. 수직으로 위치를 잡아야 하는 경우에도 calc를 사용할 수 있다.

 

- white-space: nowrap;

줄바꿈 방지 스타일! 

 

- white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

 

긴 내용의 텍스트를 한 줄로 노출해야 할 때, 줄바꿈을 방지해야 할 때, 가로폭을 넘어가는 텍스트가 생길 때 사용하는 스타일!

 

- 아이콘, 이미지 등의 사이즈는 짝수로 맞추자. 위치를 이동할 때(transform 등) 소수점이 되면 아이콘, 이미지가 흐려지거나 깨질 수 있다.

 

- li:not(.play) > a {border-color: #4f7161;}

 

not 셀렉터! li에 클래스 play가 붙지 않은 a태그에 스타일을 준 경우.

 

- 디자인상에서 글자를 저 멀리 보내서 안 보이게 하는 방법! text-indent 사용하기! (ir 기법으로 간단하게 해결)

 

- 모듈화를 시키는 것! 패턴이 있으면 하나로 모아 사용하기. 백번 작성할 것을 한 번의 작성으로 해결하는 것. 반복작업을 해결해준다. 어느 수준까지 모듈화를 시킬 것인지가 중요하다. 너무 묶어놓고 사용하면 의존성 관리 문제가 생긴다. 특히 다른 사람이 작업해 둔 경우 유지보수하는것이 어렵다. 오히려 두 번 작성하고 사용하는게 나은 경우도 있다.  

---

빨리 자바스크립트 파트로 넘어가고 싶다..!!