웹플로우 반응형 크기 조정 설정 방법

안녕하세요 테크라소스입니다.

웹플로우를 통해 반응형 텍스트를 설정하는 방법을 알려드릴게요.

결과부터 살펴보면, 아래 규칙에 따라 움직입니다.

  1. 뷰포트를 축소하거나 확대해도, 모든 요소들이 하나로 묶인 것처럼 움직입니다.
  2. 텍스트도 마찬가지입니다. 모든 구간에서 문장과 디자인이 일관성 있게 유지됩니다.
  3. 4K, 와이드 모니터 등에서 너무 커지면 부담스러우니 어느 정도까지는만 커지게 한계선을 설정할 수 있습니다.

장점은 모든 모니터에서 일관된 디자인을 보여줄 수 있고, 관리 또한 매우 쉽습니다.

순서는 다음과 같습니다.

  1. Body 태그 폰트 사이즈 설정
  2. 본문 텍스트 설정
  3. 다른 요소 설정
  4. 최대치 설정

1. Body 태그 폰트 사이즈 설정

우측 상단 Style selector 클릭 → Body(All Pages) 클릭

Size는 1VW, Height 1.5로 설정

*여기서 Height는 단위 중 -를 선택해주세요.

2. 본문 텍스트 설정

추가하고 싶은 텍스트를 컨테이너 안에 넣어줍니다.

중요: 원하는 크기를 EM 단위로 설정해줍니다.

여기서 잠깐, 왜 rem을 안쓰고 em을 쓰나요?

웹플로우라서 그렇습니다. 웹플로우에서는 <html> 스타일을 설정하고 수정하는 것이 귀찮습니다.

직접 개발하면 <html>에 1vw, 본문 텍스트에 rem을 쓰는 것이 더 관리하기 편합니다.

3. 다른 요소 설정

박스를 하나 만들어주겠습니다.

위 Heading과 같은 컨테이너에 Div Block 블록 하나 추가요~

중요: Width: 30EM, Height: 30EM 설정

박스가 잘 보이게 색상도 아무 색상이나 칠해줍니다.

그럼 이렇게 보여야 합니다.

4. 최대치 설정

텍스트와 박스를 담고 있는 컨테이너에 max width를 1500px로 설정해줍니다.

HTML 코드를 임베드 하여 아래 코드를 넣어줍니다.

<style>
@media only screen and (min-width: 1200px) {
body {font-size: 12px;}
}
</style>

화면의 가로 길이 1200px 이상일 때, body의 폰트 크기를 12px로 고정해달라는 뜻입니다.

컨테이너의 너비를 변경하고 싶다면, 이에 맞춰 코드의 숫자도 변경해주세요.
예를 들어 컨테이너의 max-width를 1400px로 설정했다면, 위 코드의 1200px 부분을 1400px로, 12px 부분을 14px로 바꿔주면 됩니다.

그렇다면 잘 작동하는지 확인해볼까요?

성공입니다!

눈치 채셨겠지만, 텍스트나 상자 뿐만 아니라 이미지, 레이아웃 등 모든 요소를 em으로 설정하면 모든 화면에서 일관된 디자인을 보여줄 수 있습니다. 도움 되셨길 바랍니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다