Tip&Tech/이렇게 만들었어요

패턴을 넣을 때 고민해 봐야 할 점

내.맘.대.로 2023. 2. 15. 10:41

초보 편집자는 단순하지 않은 것을 단순하게 생각할 때가 있습니다.

예를 들면 이런 스타일이요.

제목 위/아래로 이렇게 패턴처럼 보이는 선이 들어가 있습니다.

이 선은 어떻게 넣을까요?

가로로 긴 이미지를 width : 100%;로 넣으면 되지 않아?

이렇게 생각하는 분들이 많을거예요.

가로 폭에 맞춰 넣어도 문제는 없습니다.

그런데 가로 폭에 맞추면, 태블릿에서 가로보기를 하는 독자는 어떻게 보일까요?

잘못된 것은 없지만, 뭔가 아쉽지 않으세요?

 

 

그럼 아래 스타일은 어떤가요?

가로보기를 해도 일정 크기를 유지합니다.

 

스마트폰 처럼 화면 폭이 좁을 때는 화면 폭에 맞춰 100%을 유지하지만,

화면이 일정 크기 이상 늘어나면 더 이상 늘어나지 않도록 스타일을 잡았습니다.

이렇게 하면 PC/태블릿/스마트폰 어떤 기기로 봐도 더 깔끔해 보이지요.

이미지나 다른 패턴을 넣을 때도 무조건 100%로 하거나 고정 크기로 넣기 보다는

작은 화면과 큰 화면 모두 '잘 보이도록' 고민을 해야합니다.

반응형