비디오: [CSS 기초이론] - CSS 포지셔닝 – 이것만 기억하면 오케이 (position: relative, absolute) 2025
이 CSS3 응용 프로그램에는 스타일 관점에서 여러 가지 고려 사항이있다. 그러나 가장 중요한 요구 사항은 태그가 정의 된 방식에도 불구하고 사용자가 기대하는 방식으로 그래픽을 표시하는 방법을 제공하는 것입니다. 일반적으로 이러한 구성 요소는 서로 위에 표시됩니다. 필요한 모양을 얻으려면 CSS를 만들어야합니다.
다음 예는 CSS입니다:
h1 {text-align: center;} # 카테고리 {너비: 220 픽셀}. 선택. 사용자가 선택한 {배경: 파랑; 색상: 흰색;}. 선택 사항 {margin: 0; 패딩: 0; 너비: 150px; list-style-type: none;} #DrawingContainer {width: 533px; 높이: 400px; 테두리: 솔리드; 위치: 절대; 왼쪽: 250px; top: 80px;} #Drawing {width: 523px; 높이: 390px; margin: 5px;}
Categories의 너비는 DrawingContainer가 오른쪽으로 나타날 수있는 것과 같습니다. 선택 항목은 범주에 완전히 들어 맞게 설정됩니다. Selections 너비를 설정할 때 jQuery UI가 Accordion 위젯의 일부로 자동으로 제공하는 들여 쓰기를 고려해야합니다.
DrawingContainer 설정에서 가장 중요한 부분은 왼쪽 설정이며, 왼쪽에있는 아코디언 위젯을 수용하도록 구성되어야합니다. Drawing의 크기는 응용 프로그램이 표시 할 이미지의 종횡비를 유지할 수있는 크기입니다.
몇 가지 추가 작업을 통해 여러 크기의 이미지를 공간 내에 쉽게 넣을 수 있습니다. 예제 이미지는 모두 같은 크기입니다.
