[1227 테킷] 특강, 그리드

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

 

 

@media ( min-width: 960px ) {

* {

box-shadow: inset 0 0 20px red;

}

}

일정부분 이하로 작아지면 색이 바뀜

 

외국은 웹사이트를 제작할 때, 모바일 이용자가 더 많으면 모바일 중심으로 제작하기도 하더라.

반응형 웹에서 이미지가 계속 커지는걸 막기 위해서 max-width를 설정해준다. 

 

l_row

l_col

<ul class="l_row">

<li class="l_col">

<div class="card">

A

</div>

</li>

 

flex-basis에 +알파하는 것이 flex-grow

flex-box의 한계를 배웠다. 이게 반응형에서 한계가 있음. 

 

식판의 힘.

공통분모를 뽑아내서 반복작업을 줄이기. => 디자인 시스템 구축에 관한 이야기