CSS 중요도
css는 만드는 과정이 중요하다. 큰 덩어리 먼저 파악하는것이 중요하고 보통 한 덩어리 먼저 시작하는데 wrap 클래스로 감싸고 시작하는것이 좋다.
type selecter를 사용하여 컨트롤 하는것은 매우 위험한 일로 다른 대체 수단이 없는지 꼭 확인이 필요하다.
property 요소, 속성 값과 value 값이 있다.
:;{} 같은 요소도 있다.
div에 width 값이 정해지지 않았을때 부모 요소의 너비를 기준으로 가득차게 된다. 나라나 문화에 따라 width를 줄였을 때 왼쪽 기준인지 오른쪽 기준인지 확인해야하며 css를 보는 관점이 매우 중요하다.
브라우저에 표현되는 모든 것들에 관심을 가져야 한다.
검사를 하게되면 사용자 에이전트 스타일 시트를 파악할 수 있으며 브라우저마다 기본 시트 값이 차이 난다.
inital = 초기 값
모든 css 요소의 inital 값이 있으며 각각 다르기 때문에 확인 하는것이 필요하다
<책 추천>
inital value 값의 의미를 잘 알고 있으면 해석하기가 쉽다.
height 오토는 부모가 아닌 자식 기준으로 높이가 자동 조절 된다.
css 박스 모델이라고 불리는 5가지 요소가 있는데
width
height
margin
padding
border
5가지 값이 있다.
div는 block level elements 라는 특성을 갖고 있으며 한 줄만 갖기 때문에 공간이 남더라도 소속의 공간이기 때문에 쓸 수 없다. 한줄을 전부 렌트 했다고 생각하면 쉽다.
작업 순서가 제일 중요!!
상속이 되는 요소들도 있다
width 100% vs auto 차이점은?
2em은 2배를 뜻하고 기본 text px 값은 16
inherit
상속이 지원되는 속성은 초기화 해줄때 inherit 키워드를 즐겨 쓰자. 상속지 지원 안되면 initial
descendant selector 하위 선택자
combinator 결합자
block 레벨 요소를 inline 요소로 바꾸면 텍스트의 크기 만큼 자동으로 측정 됨
text-alinge: center; 로 인해 h1과 p가 가운데로 정렬 되었구나 라는 말은 틀렸다. 블럭 레벨은 움직인 적이 없고 안의 text만 움직였기 때문이다.
저기 보이는 부분은 마진, 패딩 전부 아니고 그냥 HTML 요소에서 스페이스바로 넘긴 부분이다.
여기서 블럭은 padding 이나 마진이 있어도 text 베이스 라인 기준으로 배치되어 있음을 확인할 수 있다.
.icon:hover < pseudo class 가상 클래스
마진 상쇄, margin collapsing 이란?
블럭 레벨 끼리만 일어나고 인라인 요소는 겹치지 않는다.
자연스러운 스팩의 일부이다.
뼈대를 잡고 마진을 검사하고 초기화 해주는 것 부터가 CSS의 기초 시작이다.
css 초기화 문서를 바로 실무에 사용하기 쉽다고 생각하지만 공부하기에는 사용을 비추하며 초기화 문서를 분석하는 일은 아주 추천할만 하다.
컴포넌트 모듈화도 중요하다
초심자일수록 지키면 좋은 css 순서 가이드
- 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지 말아요~
- 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드 칼라를 주고 이미지를 넣는 등 현재 위치를 확인하며 작업해야 한다.
- 기본 스타일만 먼저 작성해본다. 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 마진과 패팅
- 요리 손질부터 해주자. 초기화를 통해 가장 담백한 상태로 만들어 보자. ~inherit, initial, margin 0 padding 0
- 그때부터 왠만하면 class를 사용하여 섬세한 작업을 시작하자
클래스를 하나 더 부착하는것을 다중 클래스 기법이라고 한다.
셀렉터가 구체적일수록 브라우저가 가치 판단을 더 잘 하게 된다. 하단에 있다고 중요한게 아니라 구체성을 점수로 표현하고 있다.
css는 우선순위가 낮은것 부터 높은것 순으로 차례로 모이는 개념으로 합리적 공존이 일어난다.
이미지를 처리하는 방식에는 이미지 스프라이트 기법이 있다.
css를 세팅할때 또한 확장성을 생각하여 컴포넌트화 하는것이 중요하다.
안의 내용물을 바꾸거나 다 빼도 패딩이나 레이아웃은 변하지 않도록 하는것이 중요하다.
여백 정리하고 타입 셀렉터 초기화 하고 넘어가기
