UserDonghu's Note

flex - container에 사용하는 속성 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법 부모 요소를 flex-container, 자식 요소를 flex-item 이라고 부름 1차원적 레이아웃(x축, y축)을 위해 주로 사용 flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정 row : 기본값. 왼쪽에서 오른쪽 (주축이 행 방향 가로) column : 위에서 아래 방향 (주축이 열 방향 세로) row-reverse : 오른쪽에서 왼쪽 column-reverse : 아래에서 위 justify-content 주축을 기준으로 배열의 위치를 조절하거나 아이템 간격 설정 flex-start : 컨테이너 시작쪽으로 정렬 flex-end : 컨테이너 끝쪽으..

float 한 요소가 보통 흐름에서 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌 우측에 배치되게 함. left : 왼쪽으로 right : 오른쪽으로 none : 기본값 inline, inline-block 요소에 float속성을 주게되면 block으로 계산되어 적용 float 해제하기 clear: both / right / left; container A B C 주의사항 : 자식 요소들이 모드 float 속성을 갖게 되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않음. 해결방법 - 부모에게 높이 값 지정하기 - overflow: hidden; .container{ overflow: hidden; } - 부모의 가상 요소 ::after 사용 .container::after..

display 속성 박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃 설정 주의) CSS 속성으로 시각적인 부분이 바뀔 뿐, 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님 block : 요소 전후에 줄 바꿈을 생성 inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성. inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block 처럼 box-model의 width, height, margin, padding 값을 모두 설정 가능 flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향으로 설정 grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해 설정 none : 접근성 트..