이종찬님 특강 - 행복한 CSS냐 망한 CSS냐.

css는 복잡하다.

진입장벽이 쉬울 뿐, 간단한 홈페지이 하나를 만들 때에도 이걸 건들면 저게 삐걱, 저걸 건들면 이게 삐걱.. #망한다

하지만 기초를 탄탄하게, 또 꾸준히 수련을 통해서 #행복한 CSS를 만들어 줄 수 있다.

 

---

css 순서 가이드 

 

1. 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지말자. 
2. 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 줌으로서 이 요소가 어떤 공간을 차지하고 있는지 쉽게 확인가능하거나, 이미지가 들어갈 곳에는 가상의 이미지를 미리 넣어줄 수도 있다. 
3. 기본 레이아웃 관련 스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding / width을 설정해주고, height 는 왠만하면 오토로 두는게 행복한 상황이다. (안쪽 컨텐츠들의 height를 사용하자.)
4. 요리재료(요소, 타입셀렉터) 손질부터 먼저 해주자. (상단에 따로 그룹핑하기) 초기화를 통해 가장 담백한 상태로 만들기 ~ inherit, initial(을 쓰면 좋지만 IE를 지원하지 않아 실무적으로 사실 쓰기가 힘들다. IE박멸), 보통 margin값 0, padding값 0을 준다. 

* {
margin 0;
padding 0;
box-sizing: border-box;
}

내가 보려고 남겨놓는 강사님의 마진병합 설명. 

설명 너무 잘하시고 나긋나긋하게 도른자 느낌이셔서 너무 즐겁고 행복하게 특강 잘 마쳤다.

CSS계에서 정말 유명하신 분이시라고 한다. 왜인지 알 거 같음! 

 

 

아래는 주셨던 팁들 공유

 

• 기본적으로 Inspector항상 켜놓고 작업하자.
• type 셀렉터는 위험하다. 전체 적용일 때 빼고는 왠만하면 사용하지마라!
• .section h2 와 같은 구체적인 selector를 사용하라
• li는 그걸 담고있는 ul에 class를 넣어 한셋트로 관리하는게 좋다.