멋쟁이사자처럼 프론트엔드스쿨 TIL (0401)📖

initial & inherit

initial

• 초기의;
• 속성당 기본으로 지정되어 있는 값.
• 초기값에 관심 가지기!
• margin: initial; 쓰지 말고 0으로 쓰자.(IE 지원 X)

inherit

• 상속;
• 부모 요소에게 지정된 속송 중 몇 가지는 자식 요소로 값이 전달.
• 원래 상속이 지원되는 속성은 초기화 해줄 때 inherit 키워드 즐겨쓰자
  상속이 지원안되면 initial 하는 것.

width & height

width

부모 기준

height

자식 기준

type selector

• 타입 셀렉터는 CSS 초기화 해줄 때만 사용하기
• 타입 셀렉터를 사용하면 매우 위험(행복하지 않음..)

width: auto; & width: 100%;

width: auto

• 좀 더 유연함
• 부모기준으로 가득차는데 margin border pading을 포함하여 가득차는 것.

width: 100%;

• 퍼센트의 부모의 기준으로 값을 구함.

margin

• block level element 상하단 margin은 겹치도록 설계됨.
• 부모와 자식간에도 마진이 겹칠 수 있음. (둘다 block element 일 때)
• 위에 컨텐츠가 있으면 떨어짐. padding, border 등

해결 방법

• 부모 요소에 padding 1px; or border: 1px 을 주면 margin 부분을 8 모양으로 만들 수 있음.
  위의 방법은 눈에 보이기 때문에 overflow: hidden;(IE 고려)
  display:flow-root;(밝은 미래, IE가 없어야만...)

초심자 CSS 순서 가이드

1. 전체적인 덩어리를 먼저 나누기.
2. 구분을 위해 각각 시각적인 힌트 주기.
   (ex. 백그라운드 컬러를 주고 이미지를 넣는 등)
3. 기본스타일(레이아웃 관련)을 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련.
   기본 margin/padding
4. 요리 재료 손질(요소, 타입 셀렉터 이용)부터 먼저!
   초기화를 통해 가장 담백한 상태로 만들기.
   inherit, margin 0 padding 0
5. 되도록 class를 사용하여 섬세한 작업 시작!

• header, footer 우선! contents부분은 너무 내용이 많아요!

오늘 실습한 내용

간단한 프로필 만들어 보기

challenge01

마치며

오늘 특강 너무너무 재미있고 유익했다. html과 마찬가지로 CSS도 어느정도 알고 있다고 생각했는데 강의를 들을수록 모르는 부분이 나오는것 같다. 부족한 부분 채워갈 수 있도록 노력해야지!

📚 과제

• challenge02 & 03도 마저 마무리 하기.

오늘 특강해주신 이종찬 강사님 정말 행복 전도사... 그리고 CSS에 진심이신 분!