[210804] css로 흐르는 텍스트 효과, 화면비에 따라 가변적인 박스 만들기

흐르는 텍스트 효과 만들기 (Scrolling Text)

HTML에 <marquee>라는 태그가 있었다. 그런데 지금은 웹표준에서 삭제되어 더이상 사용을 권하지 않는다고 한다.

자세한 내용을 알고 싶다면 MDN 웹사이트를 확인해보자.

 

대신 CSS를 사용해서 <marquee> 태그를 쓴 것과 똑같이 흐르는 텍스트 효과를 줄 수 있다!

 

See the Pen Marquee using CSS3 keyframe animation by James Barnett (@jamesbarnett) on CodePen.

지금 만들고 있는 포트폴리오에 이 효과를 사용했는데 내 경우에는 반응형으로 만들어주기 위해서 약간의 수정을 했다.

.marquee {
  overflow: hidden;
  position: relative;
  height: 4vw;
  background-color: #0056a8;
}

.marquee div {
  display: block;
  width: 200%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  animation: marquee 10s linear infinite;
}

.marquee span {
  float: left;
  width: 50%;
  font-size: 4vw;
}

핵심은 .marquee의 height와 .marquee span의 font-size를 같은 단위로 맞춰주는 것! 그래야 영역이 부족해서 글씨가 두 줄, 세 줄로 깨질 위험이 사라진다.

 

추가로 .marquee div에 overflow:hidden이 있기 때문에 height: 100%를 써줘야 .marquee span의 크기에 딱맞는 가변적인 영역을 만들어 줄 수 있다.

화면비에 따라 가변적인 박스 만들기 (Aspect Ratio Box)

포트폴리오 사이트에 유튜브 영상을 퍼왔는데 이 동영상의 크기를 반응형으로 만들고 싶었다. 그리고 padding-bottom 을 사용해서 내가 원하는 효과를 줄 수 있다는 것을 알게 되었다.

미리보기

HTML

<div>
  <iframe src="영상 주소">유튜브 영상</iframe>
</div>

CSS

div {
  padding-bottom: 56.25%;
  position: relative;
}

div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

먼저 부모 요소인 div에 position: relative, 자식 요소인 div iframe에 position: absolute으로 위치를 맞추고 width: 100%; height: 100% 를 쓰면 내가 원하는 위치에, 원하는 크기로 반응형 박스를 만들 수 있다.

 

그리고 부모 요소 div에 padding-bottom: 56.25%를 주면 끝!

 

padding 값은 유튜브 동영상 비율을 계산한 값이다. (16 : 9 = 100 : 56.25%)

만약 다른 비율을 주고 싶다면 웹계산기를 사용하면 된다.

Ratio Calculator

 

이 내용을 더 자세히 알고 싶다면 아래 사이트를 방문해 보자.

https://hasudoki.tistory.com/entry/CSS-%EB%B0%98%EC%9D%91%ED%98%95-169-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B2%95

CSS - 반응형 16:9 비율 유지하는 법

https://css-tricks.com/aspect-ratio-boxes/

Aspect Ratio Boxes