img를 이미지 태그로 넣을 것인가, background로 넣을 것인가?
이미지의 교체 가능성이 조금이라도 있다면 <img>로 넣어준다.
object-fit: contain;
이미지와 비디오를 넣을 때, 비율을 조절하기 위한 것.
img태그의 크기를 조절하고, 비율을 넣을 때 background 느낌으로 조절할 수 있게끔 도와주는 것.
vw
viewport-width를 때려주면 반응형 웹에 적용하기 좋다. 모바일 형태로 조절해도 자유롭게 사이즈를 조절하는 것이 가능하다.
padding-top: 40%;
패딩탑에 %를 붙이는 것.
aspect-ratio: 1 / 1; (정방형 설정)
aspect-ratio: 16 / 9; (16:9 비율 설정)
이미지를 background-image마냥 만들기 (absolute)
header-title을 하나 absolute를 해서 위로 띄우고 배치하기.
-> 정답 1번. 이유는 확장성을 고려했기 때문이다.
header-cover에 position: absolute를 지정하면 부모요소가 아닌, 뷰포트 (전체창)로 바뀐다.
실무에서 일을 하고 있는 분들도, 하고 있는 일을 말로 설명하라고 하면 어려워 한다. 내가 명확하게 그 개념을 알고 있다고 이야기하려면 말로 할 수 있어야 한다.
z-index: -1; 로 header-cover를 가장 뒤로 보낸다.
+예전에 부모에 z-index: 1 자식에 z-index: -1 을 넣었던 이유는 부모에 넣어줌으로써 기준점을 정해준다.
flex는 전혀 인라인과 관계가 없다.
폰트의 미세조정
line-height: 1;
이렇게 줘도 디테일하게 맞추기 어려울 수 있기 때문에
margin-botoom: -0.14em; 추가.
하지만, 이런 미세조정은 애초에 font가 정해지고 진행될 필요가 있다.
CSS variable
일정부분 이하로 작아지면 색이 바뀜
외국은 웹사이트를 제작할 때, 모바일 이용자가 더 많으면 모바일 중심으로 제작하기도 하더라.
반응형 웹에서 이미지가 계속 커지는걸 막기 위해서 max-width를 설정해준다.
l_row
l_col
flex-basis에 +알파하는 것이 flex-grow
flex-box의 한계를 배웠다. 이게 반응형에서 한계가 있음.
식판의 힘.
공통분모를 뽑아내서 반복작업을 줄이기. => 디자인 시스템 구축에 관한 이야기