소개
이 프로젝트에서는 "Fanciful Valley"의 역사와 "Dream Bay"의 번영을 결합한 창의적인 광고판 디자인을 만드는 방법을 배우게 됩니다. 나무 질감의 배경과 기울어진 상단 간판으로 광고판을 스타일링하여 지나가는 사람들에게 매혹적인 예술적 경험을 선사하는 방법을 배우게 됩니다.
👀 미리보기
🎯 과제
이 프로젝트에서 다음을 배우게 됩니다:
- 광고판 요소의 border radius 와 배경 이미지를 설정하는 방법
- 상단 모서리를 둥글게 하고 상단 간판 요소를 기울이는 방법
🏆 성과
이 프로젝트를 완료하면 다음을 수행할 수 있습니다:
border-radius및transform과 같은 CSS 속성을 사용하여 독특한 디자인 요소를 만들 수 있습니다.- 배경 이미지를 통합하여 웹 디자인의 전반적인 미학을 향상시킬 수 있습니다.
- 디자인 요소를 결합하여 시각적으로 매력적인 레이아웃을 만들 수 있습니다.
프로젝트 구조 설정
시작하려면 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다:
├── css
│ └── style.css
├── images
│ └── woodiness.jpg
└── index.html
그 중:
index.html은 메인 페이지입니다.images는 프로젝트 이미지를 저장하는 폴더입니다.css/style.css는 코드를 추가해야 하는 CSS 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:
광고판 배경 설정
이 단계에서는 광고판 요소의 배경을 설정하고 모서리를 둥글게 만드는 방법을 배우게 됩니다.
css/style.css파일을 엽니다..billboard클래스를 찾습니다.다음 코드를 추가하여 border radius 와 배경 이미지를 설정합니다:
border-radius: 10px; background-image: url(../images/woodiness.jpg);border-radius속성은.billboard요소의 border radius 를 10 픽셀로 설정하여 둥근 모서리를 만듭니다.background-image속성은.billboard요소의 배경 이미지를images폴더에 있는woodiness.jpg로 설정합니다.
상단 간판 기울이기
이 단계에서는 상단 사인 요소의 상단 모서리를 둥글게 하고 기울이는 방법을 배우게 됩니다.
css/style.css파일에서.top-sign클래스를 찾습니다.다음 코드를 추가하여 상단 모서리를 둥글게 하고 요소를 기울입니다:
border-top-left-radius: 15px; border-top-right-radius: 15px; transform: skewX(-20deg);border-top-left-radius및border-top-right-radius속성은.top-sign요소의 왼쪽 상단 및 오른쪽 상단 모서리에 15 픽셀의 반지름을 설정하여 둥근 모서리를 만듭니다.transform: skewX(-20deg)속성은.top-sign요소를 x 축에서 -20 도로 기울입니다.
이 세 단계를 완료하면 광고판은 둥근 나무 질감의 배경을 갖게 되고, 상단 사인은 완성된 효과 이미지와 같이 둥근 상단 모서리로 기울어집니다.
요약
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
