BELOWZERO

flex box는 container에 적용 시킬 수 있는 속성이 존재하고 각 item에 적용 시킬 수 있는 속성이 존재함. display: 화면에 아이템을 어떤 모양으로 배치할 것인지 지정 flex-direction(default: row): - 아이템을 어느 방향으로 배치할 것인지 지정 flex-wrap: nowrap -화면을 축소시킬 때 아이템을 다음줄에 배치시킬 것인지를 지정 flex-flow: 위 2개를 합한 거임. justify-content (default: flex-start): 중심축을 기준으로 아이템을 어떻게 배치할 지 정하는 것. align-items: 중심축과 반대되는 축을 정렬 align-content: align-items와 비슷하지만 nowrap인 경우 의미가 없음. justif..

웹사이트를 만들 때 가장 중요한 것은? 우리가 잘 정의한 박스를 원하는 위치에 원하는 사이즈로 배치하는 것이 가장 중요함. display, position을 알아야 함. block level(ex. div) vs inline level(ex. span) display속성 inline: 물건 lnline-block:상자인데 한 줄에 여러 개가 진열 block: 상자인데 한 줄에 하나씩 position속성 static: 기본 값. html에 정의된 순서대로 자연스럽게 보여지는 것을 의미함. 보통 body안에 태그들이 작성되기 때문에 화면 좌측 상단부터 채워짐. relative: left, top등의 값을 지정해주었다면 그 값에 맞게 위치를 변경시킬 수 있음.(나를 기준으로 움직임) absolute: 자신의 ..

css 선택자 연습할 수 있는 사이트: https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 위 사이트에서 언급된 선택자와 이를 이용하는 방법을 정리. 나중에 새로 알게 된 것이 있다면 추가로 정리하자. Type Selector A ID Selector #A Descendant Selector A B A>B와 차이점 ​ A B 는 여기서 C안에 있는 B도 선택하지만 A > B 는 A바로 아래에 있는 자식 B만 선택함. Combine the Descendant & ID Selectors A#B Class Selector .A Combine the Class ..