Flex와 Grid는 모두 CSS를 사용하여 레이아웃을 구성하는 데 사용되는 도구다. 그러나 각각의 방식은 다른 목적이 있다. Flex Flex는 1차원적인 레이아웃을 다루는 데 주로 사용된다. 주축과 교차축이 있으며, 이를 이용하여 요소들을 배치할 수 있다. 주로 하나의 컨테이너 안의 요소들을 배치하고 정렬하는데 사용된다. 작은 규모의 레이아웃에 적합하다. ex ) display : flex / flex-dirextion / justify-content / align-items / align-self Grid CSS Grid는 2차원 레이아웃을 다루는데 주로 사용된다. 행과 열의 그리드로 구성되며, 각 셀에 요소들을 배치 할 수 있다. Grid는 복잡한 레이아웃을 만들고 정렬하는데 유용하다. 여러 행과..

Margin과 Padding 차이 다음에 보이는 사진은 HTML박스 모델이다. 간단히 설명하면 다음과 같이 설명할 수 있다 Margin : Object 와 화면과의 여백(외부 여백) Padding : Object 내의 내부 여백 각각에 대한 특징들을 살펴보자. Margin 외부 공간 제어 : 마진은 요소의 외부 공간을 제어하는데 사용된다. 즉 요소와 주변 요소 간의 간격을 조절한다. 음수 값 허용 : 마진은 음수 값을 가질 수도 있으며, 이는 요소를 주변 요소에 더 가깝게 위치시킨다. Padding 내부 공간 제어 : 패딩은 요소의 내부 공간을 제어하는데 사용된다. 요소의 내부 여백을 조절하여 내용과 테두리 사이의 간격을 조절한다. 요소 크기에 영향 : 패딩은 요소의 크기에 영향을 미치므로 내용 영역을 ..