📖Today I Learned

✅CSS 순서 가이드

1. 전체적인 큰 틀의 덩어리를 먼저 나누기 (컨텐츠부터 서둘러 넣지 않기!)
2. 영역을 확인하고 구분하기 위해 시각적으로 힌트를 주기 위한 background-color를 넣거나 img를 넣어보기
3. 안에 내용을 넣기 전에 공간 마련을 위한 기본(레이아웃 관련 auto 등등) 스타일 먼저 설정하기 (기본 margin/padding)
4. 요리 재료(요소, 타입셀렉터 이용)손질부터 먼저 해주기 (초기화(기본 스타일 박멸)를 통해 담백한 상태로 만들기! inherit, initial(IE x), unset, margin 0, paddding 0) -> 초기화 코드는 맨 위에 정렬
5. 왠만하면 class(이름표 달기)를 이용하여 섬세한 작업을 한다!
   -> !타입셀렉터는 위험 (초기화 해줄 때만 사용하자)

inherit: 부모 요소에 따라 바뀔래!
상속 여부는 mdn에서 확인하기
ex) background-color의 mdn에서 확인하는 형식 정의

원래 상속이 지원되는 속성은 초기화 해줄 때 inherit 즐겨쓰장
상속이 지원 안되면 initial 하는거임!
무조건 초기값 (기본값으로 하겠다) -> text-decoration: inherit;

✔ 기본 스타일 보는 법

/* 사용자 에이전트 시스템을 없앤다 */
body {
    margin: 0;
    /* 초기값을 명시적으로 적어줌
     margin: initial; = margin:0; 
     initial은 브라우저 호환성 문제 있으므로 -> margin:0 을 많이 사용 */
}

/* div=선택자(selector) */
div {
    background-color: orange;
    /* property        value값*/
    
    width: 400px;
    /* 부모 너비 기준으로 가득 참 
    width: initial; = width:auto; (부모 요소 기준)
	width: 100%; != width:auto;(부모 크기 안에서 적용됨)*/
    
    height: 400px;
    /* 자식 기준으로 가득참 
    height: auto; 콘텐츠 크기만큼 (자식 요소 기준)*/
    
    margin: 20px;
    padding: 100px;
    border: 20px solid red;
}

⭐박스 모델 5가지
width height margin padding border

[참고]
background-color의 initial value: transparent

margin: auto; -> 남는 공간을 자동으로 여백으로 취하겠다.
margin: 0 auto; -> 가운데 정렬 (단축속성 - margin:상하 좌우;)

box-sizing: content-box; (기본 세팅)
box-sizing: border-box; -> width, height값을 그대로 적용

text-align: center; vs margin: 0;

✅ inline elements vs block-level elements

✔ inline elements

• width, height개념이 없다. 좌우margin은 적용가능, padding적용가능
• 이미지 밑에도 하단 공간이 존재
• display: block -> 블럭으로 변신
• display: inline-block; -인라인요소 가져옴 ,
  vertical-align: baseline; -텍스트의 베이스라인
• <h1>으로 감싸도 그게 블럭요소가 아니라 안에 텍스트는 인라인

✔ block-level elements

• 한 줄을 다 샀다! (사용 가능한 땅이 한 줄)
• 가로 가운데 정렬만 된다. (세로 가운데 정렬은 안 된다.)
• block레벨 엘리먼트의 상하단 margin은 통으로 같은 값으로 margin 상쇄
  -> block과 block끼리만 겹친다 -> 자연스러운 스펙의 일부다.
  부모 자식 간에도 margin 상쇄(큰 쪽으로 상쇄 된다.)
  
  

[참고]
✔.icon:hover
-> pseudo class(가상 클래스)

✔ .wow.wow vs .wow .wow
wow를 두번 불러서 더 강조 vs .wow .wow는 wow 하위의 wow를 뜻

✔ descendant selector : 하위(후손)선택자

• .header h1 -> 좀 더 구체적으로 작성하여 안정성 확보
• .a .b - descendant 후손 모두
• .a > .b - child 직계자식

초기화는 기본적으로 덩어리마다 css시작하기전에 하기!
초기화(css reset 검색) 분석 공부

같은 속성은 아래쪽에 쓰이면 우선순위가 높다.

구체적인 셀렉터일수록 가치판단을 하여 우선순위 결정
아이디 선택자 > 클래스 선택자 > 태그 선택자
시각적인 디자인을 위해 아이디를 쓰는것은 비추

브라우저에 표현되는 모든 것들을 관심있게 봐야한다.
어떠한 결론이 나타나는지

생활에 가까운 컨텐츠 만들어보기

질문을 상대방이 어떻게 알아듣게 쉽게 할까 고민하는 것도 공부다.

cascade 계단식 폭포식 , 우선순위가 낮은 것부터 높은것까지 하나하나 반영하여 쌓아올린다.
-> Cascading Style Sheet

2022.04.01