💻 CMG Digital 클론코딩
- 사이트명: CMG Digital
- 제작기간: 22.08.15 ~ 22.08.17 (3일 소요)
- 사용언어: html, css, js
- 분류: 반응형
🔍 Main Point
- 반응형을 위한 GSAP의 matchMedia와 saveStyle
- GSAP 숫자 카운트
- 마우스를 따라 움직이는 효과
- CSS order 속성으로 레이아웃 재조정
- 마우스 드래그시 배경 및 글자색 변경
- 스크롤 기능을 살리면서 스크롤바 없애기(css)
- 특정 요소 위치로 이동 jQuery / JavaScript (2가지 방법)
- CSS clamp()
1. 반응형을 위한 GSAP의 matchMedia와 saveStyle
-
pc와 모바일에서 각각 다른 애니메이션 효과를 사용하거나 또는 모바일에서는 애니메이션 효과를 사용하고 싶지 않을 경우 matchMedia()를 사용해서 해결 할 수 있다.
-
또한 페이지가 로드되고 해당 요소의 css를 저장하는 기능을 하는 saveStyles()도 필요하다. gsap 애니메이션 효과는 인라인 스타일로 삽입되기 때문에 css 파일보다 우선적용 된다. 따라서 화면이 리사이즈 될 경우 방금 실행된 애니메이션 때문에 요소의 기존 css가 깨질 수 있어 saveStyle로 인라인 스타일을 지워야 망가지지 않는다.
👉 작성방법
- js
ScrollTrigger.saveStyles('.sc-intro .floating-txt');
ScrollTrigger.matchMedia({
"(min-width: 1024px)": function(){
gsap.fromTo('.sc-intro .floating-txt', {
opacity: 0
}, {
scrollTrigger: {
trigger: '.sc-intro',
start: 'top 50%',
end: 'top 25%',
scrub: true,
// markers: true,
},
opacity: 1
});
}
});2. GSAP 숫자 카운트
- 해당 요소에 스크롤시 숫자 카운트 및 숫자 초기화 방법
👉 작성방법
- html
<div class="container">
<div id="number">0</div>
</div>- css
.container {
margin-top: 1000px;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#number {
font-size: 200px;
font-weight: 700;
color: #000;
}- js
gsap.registerPlugin(ScrollTrigger);
var startCount = {var: 0};
gsap.to(startCount, {
var: 500,
duration: 3,
onUpdate: changeNumber,
scrollTrigger: {
trigger: '#number',
toggleActions: 'restart none reverse none'
//play pause resume reset
},
})
function changeNumber() {
number.innerHTML = (startCount.var).toFixed();
}💡 실제 화면 보기
3. 마우스를 따라 움직이는 효과
-
뒤에서 JS로 커서의 top, left 값을 조절해야 하기 때문에 position 속성 정의는 필수이다
-
커스텀 커서가 실제 커서 위치의 중심에 딱 들어맞도록 transform: translate(-50%, -50%) 속성을 넣어준다.
-
커스텀 커서가 실제 커서의 위치에 딱 붙어 움직이게 하기 위해서 window에 mousemove 이벤트 추가하고 마우스가 움직일 때마다 실제 커서의 좌표값(pageX, pageY)을 커스텀 커서의 left, top 속성에 넣어준다. (position 속성을 정의한 이유)
-
좌우 스크롤이 생기는 경우는 드물기 때문에 pageX 값은 그대로 적용이 가능하지만, 상하 스크롤이 생기는 페이지의 경우, Y좌표값만 적용시 스크롤다운 했을 때 커서가 위로 밀리는 현상이 발생하므로 scroll된 값도 함께 고려해주어야 실제 커서와 동일한 위치에 커스텀 커서를 위치시킬 수 있다.
pageX, pageY
-
event.pageX, event.pageY는 스크롤을 포함한 전체 문서를 기준으로 마우스 커서의 좌표 값을 가져온다.
-
브라우저의 크기가 달라도 전체 문서를 기준으로 하기 때문에 마우스의 좌표값은 유지된다.
pageX - 브라우저 전체 페이지에서 x좌표 반환
pageY - 브라우저 전체 페이지에서 y좌표 반환
ClientX, ClientY
-
event.clientX와 event.clientY는 현재 브라우저를 기준으로 마우스 커서의 위치 값을 가져오며 브라우저의 크기와 보는 위치에 따라서 x와 y좌표의 위치가 달라진다.
-
클라이언트 영역(현재 보여지는 브라우저 화면 기준)을 기준으로 가로, 세로 좌표를 제공
clientX - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 X위치를 반환
clientY - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 Y위치를 반환
👉 작성방법
- html
<div class="cursor"></div>- css
.cursor {
position: absolute;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: orange;
z-index: 100;
}- js
const mouseCursor = document.querySelector('.cursor');
window.addEventListener('mousemove', function(e){
mouseCursor.style.left = e.clientX + 'px';
mouseCursor.style.top = e.clientY + 'px';
});4. CSS order 속성으로 레이아웃 재조정
-
flex가 적용된 컨테이너 안에 있는 item들은 html에 입력된 순서대로 배치가된다. 소스코드를 건드리지 않고 css만으로 출력 순서를 변경하고 싶을 경우 order 속성을 사용할 수 있다.
-
order 속성은 flex item의 순서를 정할 수 있으며 기본값은 0이다. 숫자가 작을 수록 먼저온다. 만약 값이 같을 경우 입력한 순서대로 출력된다.
-
order속성의 값으로 음수도 가능하며 이것은 특정 아이템을 앞으로 옮기고 싶을 때 유용하다.
-
부모에 flex가 적용되지 않을 경우에는 사용할 수 없으며 order 속성의 값은 부모가 아닌 그 안에 있는 각각의 items들에게 부여해야 한다.
👉 작성방법
- html
<div class="container">
<div class="item item1">1번</div>
<div class="item item2">2번</div>
<div class="item item3">3번</div>
</div>- css
.container {
display: flex; /*order 속성 사용시 부모에 flex 적용 필수 */
flex-direction: column; /*item 세로로 출력*/
width: 500px;
margin: 50px auto;
background: royalblue;
}
.item {
color: #fff;
font-size: 25px;
text-align: center;
padding: 30px 0;
}📌 order 속성 적용 전 출력 화면
- css
/* 숫자가 작을수록 위에 배치됨 */
.item.item1 {
order: 3;
}
.item.item2 {
order: 1;
}
.item.item3 {
order: 2;
}
📌 order 속성 적용 후 출력 화면
💡 실제 화면 보기
5. 마우스 드래그시 배경 및 글자색 변경
-
css에는 다양한 선택자가 존재하며 그 중에는 가상 요소 선택자 (Pseudo-Elements)도 있다. 가상요소 선택자 ::selection는 마우스로 드래그 한 영역의 스타일을 변경할 수 있다.
-
웹 사이트에 테마 컬러가 있을 경우 드래그 선택시 테마 컬러로 선택되도록 배경색을 지정해서 사이트의 통일감을 높일 수 있다.
👉 작성방법
- css
::selection {
background-color: black;
color: yellow;
}
::-moz-selection {
/* 파이어폭스 */
background-color: black;
color: yellow;
}📌 선택영역 스타일 변경 전
📌 선택영역 스타일 변경 후
6. 스크롤 기능을 살리면서 스크롤바 없애기(css)
-
아래 설명은 스크롤 자체의 기능은 살리면서 스크롤바만 없애는 코드이며 웹 브라우저 별로 각기 다른 코드가 필요하다.
-
요소의 높이가 한정되어 있지 않으면 스크롤 기능이 들어가지 않기 때문에 높이 값을 지정해줘야 정상적으로 적용된다.
👉 작성방법
1. 스크롤바 넣기
- html
<div class="content-box">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>- css
.content-box {
width: 200px;
height: 200px; /*높이가 한정되어 있어야 스크롤 기능 가능*/
border: 5px solid #000;
border-radius: 5px;
padding: 8px;
box-sizing: border-box;
background: #eee;
overflow-y: scroll; /* y축 스크롤바 생성 */
}📌 스크롤바 기능만 넣은 출력 화면
2. 스크롤 기능만 남기고 스크롤바 없애기
- css
.content-box {
overflow-y: scroll; /* y축 스크롤바 생성 */
-ms-overflow-style: none; /* 인터넷 익스플로러 */
scrollbar-width: none; /* 파이어폭스 */
}
.content-box::-webkit-scrollbar {
display: none; /* 크롬, 사파리, 오페라, 엣지 */
}💡 실제 화면 보기
7. 특정 요소 위치로 이동 jQuery / JavaScript (2가지 방법)
- 버튼을 클릭했을 때 원하는 요소의 위치로 이동하기 위해 JavaScript와 jQuery 두 가지 방법으로 모두 구현할 수 있다.
👉 작성방법
- jQuery
$('.btn').click(function () {
const scrollTop = $('.section').offset().top;
$('html, body').animate({scrollTop: scrollTop}, 500);
});- JavaScript
const btn = document.querySelector('.btn');
const section = document.querySelector('.section');
btn.addEventListener('click', function() {
section.scrollIntoView({behavior: 'smooth'});
});8. CSS clamp()
- CSS clamp는 clamp(최솟값, 선호값, 최대값)형식으로 작성된다.
- clamp() 함수를 사용하면 글자 크기의 상하한선을 정할 수 있어서 좀 더 안전하게 반응형 글꼴을 구현할 수 있다.
구문
clamp(min, prefered, max)
- prefered 값은 기본 사용 값이며 "선호하는 값"이라고도 불린다.
- 부모 요소를 기준으로 하는 상대 크기, 또는 상대 단위 값을 사용한다. 따라서 px와 같은 절대 단위를 사용하면 clamp() 함수의 기능을 할 수 없다.
- 상대 크기로 가변이지만 min 값보다는 작아질 수 없고, max 값보다는 커질 수 없다.
#예시
.title {
font-size: clamp(1rem, 2.5vw, 2rem);
}- 해당 요소는 2.5vw의 글꼴 크기를 가지며 최소 1rem, 그리고 최대 2rem 크기까지 커질 수 있다.
- 브라우저 너비가 1000px일 경우 글자 크기는 25px이 되고, 보통 데스크톱 브라우저의 기본 글자 크기가 16px이므로 최소 16px에서 최대 32px까지 커질 수 있다.
- 반대로 브라우저 너비가 640px보다 작아지면 글자 크기가 1rem으로 고정되고, 브라우저 너비가 1280px보다 커지면 글자 크기가 2rem으로 고정된다.
- 그 사이 구간에서는 브라우저 너비가 변하는 만큼 선형으로 글자 크기도 함께 바뀐다.
