🌱 → 🌳

Container container 속성값들 display flex-direction flex-wrap flex-flow justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 center: 요소들을 컨테이너의 가운데로 정렬 space-between: 요소들 사이에 동일한 간격을 둠 space-around: 요소들 주위에 동일한 간격을 둠 align-items align-content Item item 속성 값들 order: item 순서 flex-grow : 고유한 사이즈 유지(0), 박스에 맞도록 변경(1) flex-shrink: container size 작아질 때 어떻게 작아질지 설정 flex-basis: item이..

CSS 레이아웃 정리 display, position 완성 Display block인 div를 inline-block으로 inline인 span을 block으로 display해줄 수 있다. Position position: static; //CSS default 값 position: relative; //원래 위치에서 옮겨감 position: absolute; //내 item이 담겨있는 박스안에서 위치 변경 position: fixed; //박스를 완전히 벗어나 윈도우(페이지)안에서 위치변경 position: sticky; //원래 자리에 있되, 스크롤을 올리거나 내려도 그 자리 유지 absolute를 쓰면 가까운 위치에 있는상자(부모)에서 배치되고 맞기는 하지만 그경우는 부모속성에 relateve를 주..

HTML 1. 뭐든지 나누어 보자 : 박스화해서 (header, nav, footer, aside,,) https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure 2. 어떤 것을 배우든 큰 그림을 먼저 보자 tag는 크게 2가지로 나눌 수 있음 : Box, item [Box] Header section Footer article Nav div Aside span Main form [Item] 사용자에게 보여지는 tag a, button, input, label, img, video, audio, map, canvas, table Block vs inline Content + ta..