CSS2 [CSS] box-sizing 사용법 알아보기 - 띵코딩 on Code box-sizing이란? box-sizing은 요소의 너비와 높이를 어떻게 계산할 것인지 지정하는 속성이다. 우리는 보통 요소의 크기를 정하고, 안쪽 여백이나 테두리를 넣게되면 크기 + (여백or테두리)만큼의 크기를 얻게된다. 하지만 부모 컨테이너 내에서 자식 컨테이너가 (여백or테두리)를 갖게되면 문제가 될 수 있다. 자식 컨테이너가 부모 컨테이너보다 크기가 커져 틀에 벗어나거나 겹치는 상황이 나올 수 있기 때문이다. box-sizing속성을 이용하면 이러한 여백or테두리의 크기를 고려하여 원하는 크기를 얻을 수 있다. box-sizing의 주요 속성 content-box box-sizing: content-box; content-box는 가장 기본이 되는 박스 크기 결정 방법이다. 위에 예시는 자식.. 2023. 9. 15. [CSS] flex 사용법 알아보기 - 띵코딩 on Code flex란? flex는 display 속성 중 하나로 Flexible Box Layout란 뜻으로 컨테이너 박스 내에서 아이템들을 유연하게 배치 가능하게 해주는 레이아웃 속성이다. 화면의 크기에 상관없이 요소의 크기와 위치, 정렬 등을 설정해주기 때문에 반응형 레이아웃에서도 유용하게 쓰인다. flex의 전용 요소들 flex-direction : 컨테이너 내의 아이템을 배치할 때 사용할 주축을 지정합니다. flex-direction: row; // 가로축을 주축으로 왼쪽부터 시작하여 정렬된다. flex-direction: row-reverse; // 가로축을 주축으로 오른쪽부터 시작하여 정렬된다. flex-direction: column; //세로축을 주축으로 위에서부터 시작하여 정렬된다. flex-dir.. 2023. 9. 11. 이전 1 다음
