Study Output for Myself/CSS (4) 썸네일형 리스트형 [CSS]flexbox ✅justify-content flexbox안에 있는 요소들이 x축으로 어떻게 놓여질 것인지 결정하는 property. 만약 flex-direction이 row라면 y축을 기준으로 움직인다. ✅align-itmes y축을 기준으로 요소들이 어디에 놓을지 결정. 마찬가지로 direction이 row일때는 x축을 기준으로 한다. 요소들은 화면의 정가운데 놓고 싶다면 align-itmes와 justify-content 둘다 center로 값을 주면 된다. ✅wrap 부모요소의 너비보다 요소들의 너비의 합이 더 클 때(부모요소의 너비를 넘어갈 때) 요소를 어떻게 display할 지 결정함. wrap은 다음 줄로 넘어가게 하고 nowrap은 자식요소들의 너비를 줄여서 부모요소의 너비에 맞춘다. ✅flex-shri.. [CSS]너비와 높이지정단위 vmin / vmax v는 viewport의 약자로 눈에 보이는 컨텐츠가 담긴 화면의 크기를 말한다. ✅vw (viewport width) 화면의 가로(너비)를 100vw라고 하고 90vw라고하면 화면의 너비의 90%만 차지하는 크기가 된다. css의 %(percentage)와 다른 점은 percentage는 부모요소에 대한 상대크기를 나타낸다면 vw는 화면크기에 대한 상대크기를 나타낸다. ✅vh (viewport height) 화면의 세로(높이)를 100vh라고 하면 45vh는 화면의 높이의 45%를 차지하는 크기가 된다. ✅vmax (viewport max) 화면의 너비가 100px이고 높이가 200px이라고 하자. vmax는 더 큰 수를 따라간다. 그래서 100vmax는 200이 되고 10vamx는 20이 된다. ✅vm.. [CSS]Pseudo-classes(가상선택자) Pseudo-element(가상요소) ✅:focus input, a, button, lable, select 등의 요소에 쓸 수 있는 가상선택자. click하면 적용된다. focus가 안되는 요소에 focus를 적용하려면 property로 tabindex="-1"을 넣어준다. value에는 항상 -1을 넣을 것을 권장함. ✅:hover 마우스를 올리면 작동 ✅:active 마우스를 클릭한 상태에서 작동 ✅::before ✅::after content가 들어가야지만 작동한다. inline요소로 가로세로를 지정해주고 싶다면 display:block으로 설정해줘야 함. [CSS] rem VS em VS pix ✅pixel은 고정적인 단위로 interactive한 웹을 원한다면 쓰지 않는다. 초기 웹의 pixel은 16pixel로 설정되어 있다. ✅rem의 R은 root로 html을 root로 보고 html의 기본 사이즈인 16pixel을 비교군으로 한다. ✅em은 부모태그의 사이즈를 기준으로 늘어나고 줄어든다. 부모의 부모가 16px, 부모가 2em, 내가 2em을 했다면 16*2*2인 64px을 갖게 된다. 이전 1 다음
