상세페이지 HTML 정렬

<img>가 인라인 요소라서 그렇습니다. 글자처럼 취급되기 때문에 감싸는 곳에 가운데 정렬이 없으면 왼쪽에 붙습니다. 이 도구는 이미지 자체에 display:block과 좌우 margin auto를 넣어 해결합니다. 감싸는 div에 text-align:center를 주는 방법도 있지만, 쇼핑몰 편집기가 바깥 태그를 지워 버리는 일이 흔해서 이미지에 직접 넣는 편이 안전합니다.

크기 지정이 없으면 원본 픽셀 크기 그대로 나오기 때문입니다. 860px짜리 이미지는 375px 휴대폰 화면을 넘어갑니다. width:100%와 max-width를 함께 넣으면 좁은 화면에서는 줄어들고 넓은 화면에서는 원본보다 커지지 않습니다. height:auto가 있어야 비율이 유지됩니다.

<img> 태그 사이의 줄바꿈과 공백이 글자 사이 공백처럼 취급되어 생기는 틈입니다. <br>을 넣으면 그 위에 또 줄바꿈이 얹혀 더 벌어집니다. display:block으로 바꾸면 이 틈이 사라지고, 간격이 필요하면 설정에서 원하는 px만큼 정확히 넣을 수 있습니다.

사진 자체를 HTML에 담지는 않습니다. 이미지를 파일 안에 직접 넣는 방법(data: 주소)이 있긴 하지만 쇼핑몰 상세페이지 편집기 대부분이 이 형식을 거부하고 용량도 감당이 안 됩니다. 그래서 이 도구는 호스팅에 사진을 올린 뒤 그 폴더 주소를 넣으면 파일 이름과 합쳐 태그를 만들어 줍니다. 사진에서는 이름과 크기만 읽고 파일은 어디로도 보내지 않습니다.

파일 이름을 그냥 글자로 정렬하면 10이 2보다 앞에 옵니다. 이 도구는 숫자 부분을 숫자로 비교해 001, 002, ... 010, 011 순서로 정리합니다. 순서를 직접 정하고 싶으면 HTML 붙여넣기 방식을 쓰세요. 넣은 순서를 그대로 지킵니다.

쇼핑몰마다 권장하는 폭이 달라 값으로 고를 수 있게 두었습니다. 판매하는 곳의 안내를 확인하고 그 값을 쓰세요. 확실하지 않으면 이미지 원본 가로 폭과 같게 두는 것이 가장 안전합니다. 원본보다 크게 잡으면 늘어나면서 흐려집니다.

가지 않습니다. 태그를 다시 만드는 일이 전부 브라우저 안에서 이루어집니다. 미리보기는 입력한 주소의 이미지를 브라우저가 직접 불러와 그리는 것이라, 그 이미지가 올라가 있는 곳으로는 요청이 갑니다. 그 외에 어디로도 내용을 보내지 않습니다.