TIL5(CSS)-veamcamp특강

CSS는 디테일이 아니라, 큼지막한 전체 구조를 보는것이 중요하다!
css 책 추천 : css설계가이드
CSS는 스마트한 노가다다!

상속 : 원래 상속이 지원되는 속성은 초기화 해줄때 Inherit 키워드 즐겨쓰장 상속이 지원안되면 Initial 하는것

block level element 가운데정렬 :

width: 800px;
margin: 100px auto;

type selector는 css에서 초기화 해줄 때에만 사용하자!

Q. width 100% auto 같은것 ?
A. 본질적으로 다르다!


width auto가 좋은것!!!
다 포함해서 계산하니까!

inline elements vs block-level elements

inline elements는 width height 개념이 존재하지않는다.

-정리-
1. 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지않기
2. 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 주고 이미지를 넣거나,width, height 등
3. 기본(레이아웃 관련)스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다.
기본 margin / padding/width
4. 요리 재료(요소, type selector) 손질부터 먼저 해주자(상단에 grouping).
초기화를 통해 가장 담백한 상태로 만들기 ~ inherit, initial(IE박멸), margin 0 padding 0
5. 그때부터 왠만하면 class를 사용하여 섬세한 작업 시작!

margin collapsing!
->https://www.youtube.com/watch?v=c19Mjg-ivxc

오늘의 명언!
어제의 나보다 한 발자국 더. 이건 장기 레이스. 행복을 위해 오늘도 한 걸음!

오늘의 생각!
사실, 어제부터 구현과제를 하느라 과제에 집중하지 못하였다. 회사 구현과제는 리액트로 웹페이지를 구현하는것이였는데, 리액트도 해보았으니 몇번 하다보면 될줄알았다... 하지만 구현과제를 할수록 기본의 부족함을 크게 느꼈고, html 마크업부터 제대로 수업진도에 맞춰 따라가야겠다는 생각이들었다.
TIL3,4의 과제인 html마크업 및 퍼블리싱을 주말 내내 해봐야겠다.
멋쟁이사자처럼 프론트엔드스쿨에 지원했던 초심이 '현재에 집중하여 기본기를 제대로 닦자'를 잘 이뤄나가야겠다!
오늘에 집중하기..!!!!
주말에 과제 다 끝내기..!!