현대적인 CSS는 강력한 기능과 뛰어난 성능으로 웹 개발을 재정의했습니다. CSS는 웹 페이지를 매우 대화형이고 매력적으로 만드는 뛰어난 옵션을 제공하는 만능 도구입니다. 디자인의 유연성, 빠른 맞춤 설정, 뛰어난 스타일링 옵션, 고급 사용자 인터페이스(UI) 등 CSS는 모든 웹 개발 및 스타일링 요구 사항에 맞는 엔드투엔드 솔루션을 제공합니다. 무엇보다도 CSS와 HTML을 사용하면 단 몇 줄의 코드만 작성하여 애니메이션과 효과를 추가할 수 있으며, 이는 JavaScript를 사용했다면 까다로웠을 작업입니다.
이 가이드에서는 Chrome에서 CSS로 패럴랙스 스크롤 효과를 만드는 단계를 안내해 드리겠습니다.
사전 요구 사항
이 튜토리얼을 따라 하려면 HTML과 CSS에 대한 기본적인 이해가 있어야 합니다.
1단계: 새 프로젝트 생성
명령줄 인터페이스를 사용하여 새 프로젝트 폴더와 파일을 만드는 것부터 시작해 보겠습니다. 터미널을 열고 다음 명령을 입력하여 새 프로젝트 폴더를 생성합니다.
|
1 |
mkdir css-parallax |
다음 cd 명령을 사용하여 디렉터리를 css-parallax 폴더로 변경합니다:
|
1 |
cd css-parallax |
다음으로, 다음 폴더에 HTML 파일을 생성합니다: css-parallax 폴더에 모든 HTML 코드를 넣을 것입니다. 파일 이름을 index.html로 지정하고 nano 명령어를 사용하여 여십시오:
|
1 |
nano index.html |
이제 index.html 파일이 준비되었으므로, 다음 단계로 넘어가 소개용 HTML 코드를 추가하여 웹페이지 구조를 잡아보겠습니다.
2단계: 기본 HTML 구조
이 단계에서는 HTML 코드를 추가하여 웹 페이지를 디자인할 것입니다. 다음 코드 줄을 index.html 파일에 추가합니다:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>패럴랙스 스크롤 효과 with CSS</title> </head> <body></body> </html> |
웹 페이지의 기본 구조를 설정한 후, 배경 이미지용 두 개와 정적 단색 배경용 한 개 등 세 개의 섹션 클래스를 만듭니다. 다음으로, 다음의 코드 줄을 <body> 태그에 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> ... <main class="wrapper"> <section class="section parallax bg1"> <h1>이전 패럴랙스 스크롤링 효과</h1> </section> <section class="section static"> <h1>환영합니다 에 패럴랙스 스크롤링</h1> </section> <section class="section parallax bg2"> <h1>이후 패럴랙스 스크롤링 효과</h1> </section> </main> ... </body> |
다음 태그 안에 HTML 코드를 삽입하면 <body> 태그는 기본 설정을 완료합니다: html.파일. 다음 단계에서는 CSS를 소개하고 각각에 대한 스타일 옵션을 정의하겠습니다.
3단계: CSS 소개
CSS 파일을 추가하고 패럴랙스 효과를 만들어 웹사이트 스타일을 지정해 보겠습니다. 먼저, css-parallax 폴더에 패럴랙스 스크롤 효과를 만드는 데 필요한 모든 CSS 코드를 넣을 것입니다. 그 후, styles.css 파일을 귀하의 css-parallax 폴더에 nano 명령어를 사용하여 삽입합니다:
|
1 |
nano styles.css |
우리는 .wrapper 클래스부터 웹페이지 스타일을 지정할 것입니다. .wrapper 클래스는 전체 페이지의 원근감(perspective) 및 스크롤 속성을 설정합니다. wrapper 클래스로 시작하여 높이, overflow, 원근감을 지정합니다. 패럴랙스 스크롤 효과가 작동하려면 wrapper의 높이를 고정값으로 설정해야 합니다. 이 가이드에서는 100vh을 사용하여 화면 뷰포트의 전체 높이를 가져오도록 설정했습니다. 프로젝트 요구 사항에 따라 vh 값을 프로젝트 요구 사항에 맞게 수정할 수 있습니다. 다음으로, overflow-x 속성을 hidden으로 설정하여 화면 가로 스크롤바를 비활성화합니다. 또한, perspective 속성 값을 3px. 다음 코드 줄을 다음에 추가해 보겠습니다. styles.css 파일 클래스:
|
1 2 3 4 5 6 |
.wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 2px; } |
4단계: .section 클래스에 스타일 추가
wrapper 클래스 옆에, 다음 클래스에 스타일을 추가합니다. .section 클래스. .section 클래스는 메인 섹션의 크기, 디스플레이 및 텍스트 속성을 정의합니다. 위치를 relative로 설정하여 자식 요소 .parallax::after와 부모 요소 .section의 상대적 위치를 정렬합니다. 다음을 유지합니다. view-height(vh) 로 100 설정하여 화면 뷰포트의 전체 높이를 가져옵니다. 필요에 따라 다른 매개변수를 추가, 수정 및 스타일링하세요.
귀하의 styles.css 파일에서 wrapper 클래스 옆에 다음 코드를 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper { height: 100vh; overflow-x: hidden; perspective: 3px; } .section { position: relative; height: 100vh; transform-style: preserve-3D; 디스플레이: 플렉스; 정렬-항목: 가운데; 정렬-콘텐츠: 가운데; 색상: 빨간색; 텍스트-그림자: 0 0 5px #000; } |
다음으로, 패럴랙스 효과를 만들고 실제로 적용하기 위해 가상 요소를 추가하고 스타일을 지정하겠습니다.
5단계: .parallax 클래스에 스타일 추가
이 단계에서는 .parallax에 가상 요소를 추가합니다. 이 가상 요소는 해당 요소의 마지막 자식이 되며, ::after 가상 요소를 패럴랙스 효과를 시작하는 배경 이미지에 적용합니다. 코드의 전반부에서는 가상 요소의 기본 표시 사양과 위치를 설정합니다. 후반부에서는 translateZ() CSS 함수를 사용하여 transform 속성을 추가하고, 이 값을 (-1px). 또한 수직 쌓임을 제어하기 위해 z-index를 추가합니다.
다음 코드를 .section 클래스 아래에 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
... .섹션 { 위치: 상대; 높이: 100vh; 변형-스타일: 보존-3D; 표시: 플렉스; 정렬-항목: 가운데; 정렬-콘텐츠: 가운데; 색상: 흰색; 텍스트-그림자: 0 0 5px #000; } .패럴랙스::이후 { 콘텐츠: " "; 위치: 절대; 위: 0; 오른쪽: 0; 아래: 0; 왼쪽: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } ... |
6단계: 각 섹션의 이미지 및 배경 추가
마지막 CSS 속성을 정적 섹션의 배경 이미지와 배경 색상에 추가해 보겠습니다. 먼저 에 단색 배경 색상을 추가하는 것부터 시작합니다..static 섹션의 배경 색상을 aqua로 설정하고, 다음 코드를 .parallax::after 클래스 뒤에 추가합니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
... .parallax::after { content: " "; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-attachment: fixed; transform: translateZ(-1px) scale(2.0); background-size: 100%; z-index: -1; } .static { background: aqua; } ... |
The .static 클래스는 이미지가 없는 정적 섹션에 배경을 추가합니다. .parallax가 적용된 다른 두 섹션 클래스는 배경 이미지를 보관하기 위한 고유한 클래스를 가집니다. 배경 이미지의 URL을 .bg1 및 .bg2 클래스에 각각 추가합니다.
이 튜토리얼에서는 다음에서 제공하는 무작위 이미지를 사용합니다: Unsplash. 다음과 같은 다른 웹사이트의 이미지를 사용할 수도 있습니다: Pixapay, Placekitten, 그리고 Pexels 등이 있으며, 원하는 대로 맞춤 설정할 수 있습니다. 다음 코드를 .static 클래스에 추가하세요:
|
1 2 3 4 5 6 7 8 9 10 |
... .static { background: aqua; } .bg1::after { background-image: url('https://images.unsplash.com/photo-1496543622559-12e927bdd81b'); } .bg2::after { background-image: url('https://images.unsplash.com/photo-1516422641841-cd9803ab02c6'); ... |
7단계: CSS와 HTML 연결하기
이제 패럴랙스 스크롤 효과를 위한 모든 코드를 추가했으니, styles.css 파일을 index.html:
|
1 2 3 4 5 6 7 8 9 10 |
... <head> <meta charset="UTF-8" /> <^> <link rel="stylesheet" href="styles.css" /> <^> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>패럴랙스 스크롤 효과 사용한 CSS</title> </head> ... |
열기 index.html에서 생성한 Step 2 파일을 Chrome 브라우저에서 엽니다:
결론
이 튜토리얼에서는 기본적인 설정을 사용하여 작동하는 웹페이지를 구축하는 단계를 살펴보았습니다. 실험해 볼 수 있는 다른 흥미로운 옵션과 맞춤 설정 옵션이 많이 있습니다. 그림자 효과를 추가하거나, 이미지 스크롤을 수정하는 등 다양한 조정을 시도하여 더욱 재미있고 흥미롭게 학습해 보세요.
웹 개발 주제를 더 깊이 있게 다루려면 다음에서 제공하는 리소스를 확인해 보세요: 저희 블로그:
즐거운 컴퓨팅 되세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.