가장 큰 덩어리부터 작은 덩어리로 들어가면서 레이아웃을 파악한다.
레이아웃에 따른 html markup을 진행하며 시멘틱에 따라 클래스 이름까지 작성
레이아웃만 담당하는 태그의 class 이름에 l_를 붙여서 사용할 수 있다.
레이아웃 관련 마크업 태그에는 유동적인 부분을 넣어서는 안된다.
pixel perfection
line-height
initial value : normal(font family에 따라 다름)
value가 1인 경우 폰트 사이즈와 line-height를 동일하게 가져가게 된다.
이 경우에도 상하단에 공간이 남게되는데 그 부분은 글자의 크기에 비례하게 사이즈가 조절되지만 통제가 불가능하다.
em은 font-size의 배수이다.
backdrop-filter: blur(Xpx);
- 블러처리
background property
unset?
ua reset은 항상 검사 기능을 통해 확인하면서 작성하는 것이 좋다
align-items
- axios 기준으로 정렬
flex-basis와 flex-grow를 이용해서 서로 다른 크기의 두 컨텐츠가 들어있는 flexbox를 동일한 크기로 만들어 줄 수 있다.
width: fit-content;
heading tag안에는 markup의 권장에 따라 text만 오는 것이 좋다.
가상 요소(elements)
가상요소는 본 태그의 자식 요소로 들어가는 것이다.
내부의 컨텐츠 이전에 들어가면 ::before, 이후에 들어가면 ::after을 적용한다.
inline elements로 생성이 되는 것이다.
마크업이 깔끔하게 용도에 맞게 마크업과 css를 사용 가능하게 해준다.
가상 클래스(class)
direction property
@media query
- selector specificity에 의존한다.
- 쿼리문 내부에서 사용한 선택자의 명시도에 따라서 우선 순위가 결정된다.
flexbox
- order
flex-basis로 flex items의 기본 너비를 설정해둘 수 있다. 그 상태에서 flex-grow를 설정하면 설정값만큼 남은 여백을 받아 한 블록 전체를 차지하게 된다. 그런데 flex items의 개수가 늘어나서 container의 크기보다 많아지게 되면 기본 설정되어 있던 basis값은 무시되면서 container의 크기를 넘지않게 items의 너비가 줄어들면서 가로로 계속 정렬되며 배치된다. 이것은 기본적으로 flex-shrink: 1;로 기본값이 설정이 되어있기 때문이다. 이때 container에 flex-wrap: wrap;을 부여하면 현재 items의 컨텐츠 크기 값을 유지하며 다음 줄로 줄바꿈이 된다. 이때 wrap property가 올바르게 작동하게 하기 위해서는 basis의 값을 0이나 auto가 아니라 특정 수치로 잡아주어야 올바르게 작동한다.
margin은 여백이라고 생각하기 마련인데 정확히는 차지하는 공간을 뜻한다. 실제 시각적으로 표현되는 컨텐츠의 크기는 유지되지만 해당 요소가 차지하는 공간이 별도로 있다고 생각을 해야한다.예를 들어 margin-top: 100px;라는 속성이 주어진다면 컨텐츠 상단에 100px의 공간을 더 차지한다고 생각하면 쉽다.
