안녕하세요 테크라소스입니다.
웹플로우에서 요소들은 화면 가로 크기에 맞게 설정하는 방법을 알려드릴게요.
결과부터 살펴보면, 아래 규칙에 따라 움직입니다.
- 브라우저 가로 길이를 줄이거나 늘려도, 텍스트 포함 모든 요소들이 하나로 묶여 움직입니다. 모든 화면에서 같은 디자인을 보여줍니다.
- 그렇다고 평생 커지진 않습니다. 4K, 와이드 모니터처럼 가로 길이가 긴 모니터에서는 부담스러우니까요. 적당한 선까지만 커지게 한계를 정할 수 있습니다.
장점은 모든 모니터에서 일관된 디자인을 보여줄 수 있고, 관리 또한 매우 쉽습니다.
순서는 다음과 같습니다.
- Body 태그 폰트 사이즈 설정
- 본문 텍스트 설정
- 다른 요소 설정
- 최대치 설정
1. Body 태그 폰트 사이즈 설정
우측 상단 Style selector 클릭 → Body(All Pages) 클릭
Size는 1VW, Height 1.5로 설정
*여기서 Height는 단위 중 -를 선택해주세요.
2. 본문 텍스트 설정
추가하고 싶은 텍스트를 컨테이너 안에 넣어줍니다.
중요: 원하는 크기를 EM 단위로 설정해줍니다.
여기서 잠깐, 왜 rem을 안쓰고 em을 쓰나요?
rem은 <html>의 영향을 받고, em은 부모 태그의 영향을 받습니다.
웹플로우에서 <html> 폰트 크기를 설정하기 귀찮습니다.
그래서 가장 상위 요소인 <body>를 1vw로 설정 후, 나머지 요소들은 상속받아 사용하는 겁니다.
직접 개발하면 <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으로 설정하면 모든 화면에서 일관된 디자인을 보여줄 수 있습니다. 도움 되셨길 바랍니다.