[React] CSS를 이용해 화면을 이쁘게 꾸며보자

정수완·2024년 5월 2일

CSS React

React

목록 보기

8/8

팀 프로젝트나 개인 프로젝트를 진행하다 보면 문득문득 CSS가 마음에 들지 않아 싹 갈아 엎어버리고 싶은 경우가 많았습니다.

그럴때마다 CSS로는 어디까지 할 수 있지? 라는 의문과 함께 이것도 되나? 저것도 되나? 등 생각을 해보는데 오늘은 제가 생각했던 것들이 구현가능한지 한번 직접 작성해 보려 합니다.

1. 글자에 이미지 넣기

저는 대학시절 PPT 를 제작할 일이 많아 PPT를 이용하여 발표를 진행할 때 다양한 것들을 시도해 봅니다.
그중에서 글자에 이미지를 넣어 장면 전환을 실시하거나 대표 이미지로 설정하는 등을 많이 했습니다.

요거를

요렇게 만들어 보겠습니다.

codepen에 결과를 작성하다보니 글자 사이즈를 줄였는데 실제 font-size 는 25rem 으로 설정하였습니다.

생각보다 쉬웠습니다.

메인 CSS 는 다음과 같습니다.

.seoul {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: url(https://i.namu.wiki/i/vzQIsovYmymvt84FWS9hhAS3Qva_O31fczg3ErMrSQrSgnJ9h3oQDf3kVo5M6aD1Q05-etvQRlqc3dnurUczXw.webp);
  background-size: cover;
}

백그라운드 클립 속성을 이용하여 줍니다.

HTML 요소는 박스 단위로 이루어져 있는데

margin > border > padding > content 순서로 이루어져 있습니다.

background-clip 속성은 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성입니다.

기본값으로는 border-box 에 적용되는데 이 적용 범위를 text로 바꿔주는 것 입니다.

구글 크롬의 경우 -webkit을 지원하기 때문에 -webkit 을 이용하여 text 속성에 배경 이미지를 적용하고 글자 색상을 transparent로 적용하여 글자 배경에 이미지가 보이게끔 가능한 것입니다.

위 예시를 통해 살펴보시면 쉽게 이해가 가능할 것 같습니다.

2. 요소 기울이기

CSS를 작성하다 보면 정적인 CSS에 재미가 없을 때가 있습니다.

그럴때마다 요소가 기울여져서 나오면 재밌을것 같다고 생각한 적이 있습니다.

이런 느낌으로 앞서 작성한 SEOUL 글자를 기울여보죠

transform 속성을 이용하여 글자를 기울이거나 요소 자체를 기울일 수 있는데 이를 활용해 보겠습니다.

transform 속성에는 다양한 값들이 존재하는데 크게

translate(이동), scale(확장), rotate(회전), skew(왜곡)

가 있습니다.

한번 마우스 호버이벤트로 넣어서 작성해 보겠습니다.

1. translate (이동)

translate 는 X, Y 축에대한 값을 가집니다.
translateX, translateY 를 이용하여 해당 축에대한 값만 따로 지정할 수도 있습니다.
만약 값을 하나만 작성한다면 X축에대한 값을 가지게 되고
앞에 0을 넣고 뒤에 값을 작성하면 Y값으로 지정할 수도 있습니다.
또 오른쪽 혹은 아래로 가는 것은 양수 값, 왼쪽 혹은 위로 가는 값은 음수 값을 가집니다.
이동시 %, px, vw, vh, rem 등등 다양한 방법으로 이동이 가능합니다.

2. scale (확장)

translate와 마찬가지로 X, Y 축에대한 값을 가집니다.
여기서는 기존 사이즈의 몇 배로 확장할지 물어보게 됩니다.
값을 하나만 작성했다면 전체적으로 가로 세로 모두 적용입니다.
값을 2, 1.5 로 작성한다면 가로로 2개 세로로 1.5배 확장한다는 의미입니다.

3. rotate (회전)

해당 숫자만큼 회전한다는 의미 입니다.
각도를 나타내는 단위는 deg로 표시합니다.
양수로 작성하면 시계방향으로 회전하고, 음수로 작성하면 반시계 방향으로 회전합니다.

4. skew (왜곡)

해당 요소 역시 X, Y 축 값에대한 값을 가지게 됩니다.
단위는 각도를 나타내는 deg를 사용하여 정해진 각도만큼 글자를 비틀수 있습니다.
여기서도 값을 하나만 작성하면 X 축에대한 값을 가지게 됩니다.
양의 정수 30deg로 작성하였으니 시계방향으로 30도 비틀어진 모양으로 나타납니다.

여기에 keyframe 을 적용하여 애니메이션 효과처럼 사용할 수도 있겠네용

가령 페이지 접속시 스크롤을 움직이면 글자가 회전한다거나 하는 등으로 사용 가능할 것 같습니다.

정수완

@swan

이전 포스트