기본 삼각형 가장 간단한 방법은 border 속성을 이용하여 div의 네 면에 색상을 지정하여 삼각형을 만드는 것입니다. .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; /* 원하는 배경색 지정 */ } 다양한 삼각형 스타일 border 속성을 활용하여 다양한 스타일의 삼각형을 만들 수 있습니다. /* 오른쪽 화살표 */ .arrow-right { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid trans..

박스 모델(Box Model)은 CSS에서 요소의 크기와 레이아웃을 결정하는데 사용되는 개념입니다. HTML 요소들은 모두 사각형 박스 형태로 간주되며, 각각의 박스는 컨텐츠(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성됩니다. 박스 모델을 이해하고 활용하면 요소들을 정확한 위치에 배치하고 간격을 조절하는 등의 레이아웃 작업을 쉽게 할 수 있습니다. 1. 컨텐츠(Content) 컨텐츠 영역은 HTML 요소의 실제 내용을 포함하는 부분입니다. 글자, 이미지, 미디어 등의 콘텐츠가 이 부분에 들어갑니다. 2. 패딩(Padding) 패딩은 컨텐츠 영역과 테두리(border) 사이의 공간을 말합니다. 패딩은 요소의 크기에 영향을 주며, 요소의 크기를 증가시키는 역할..