이미지 안내 초안_나래

웹사이트 디자인 할 때의 섹션별 이미지 규격 알아보기

식스샵은 반응형 웹으로 이미지를 넣었을 때 자동으로 노출되는 모니터 크기에 맞추어 이미지가 노출됩니다.

노출 시 실제로 이미지의 크기가 조정되는 게 아닌, 이미지의 틀이 표시되는 부분이 조정되기에 이미지의 실제 사이즈보다 어떤 비율로 만드셨는지가 노출 시 더 중요합니다.

다만 섹션 별로 브라우저(모니터)의 비율에 따라 이미지가 가려져 보일 수 있기 때문에 각각의 권장 사이즈를 추천드립니다. 자세한 설명은 아래 내용을 참고해주세요.

식스샵 기본 이미지 권장 설정

메인 배너 섹션은 높이 고정, 비율 고정 두 가지의 종류가 있으며, 종류에 따라 이미지의 노출되는 부분이 많이 바뀌게 됩니다.

이미지가 표시되는 모니터의 세로가 기준이 되며, 해당 높이 어디까지 표시하는 지를 설정값의 기준으로 잡습니다. 확대가 되더라도 깨지지 않도록 가로 2000px ~ 2500px을 권장드리며, 스타일 편집 높이 설정 값을 따라가기에 세로 규격은 없습니다.

(여기 gif 넣기)

브라우저 별 비율에 따라 노출되는 부분이 다르므로, 이미지가 원하는 모습과 다르게 보일 수 있습니다.

높이별 이미지 넣

높이 고정은 모바일용 높이도 따로 설정 가능합니다.

노출하는 이미지의 가로와 세로를 기준으로 잡습니다. 모니터의 비율을 따지지 않고 설정한 이미지의 가로:세로의 비율대로만 노출합니다. 따라서 설정하신 비율대로 이미지가 작업되어야만 잘리지 않고 제대로 표시됩니다.

비율 고정은 제목, 설명, 버튼을 사용할 수 없으며, 모바일용 비율 설정을 따로 할 수 없습니다.

비율별 이미

Last updated 3 years ago