인라인 스타일로 상세페이지 만들기 기초

변환 결과에서 글자 색을 바꾸거나 여백을 조절하고 싶은데 코드가 낯설어 손을 못 대는 분들이 많습니다. 상세페이지 수정에 필요한 인라인 스타일 문법은 사실 몇 가지 안 됩니다. 이 가이드만 읽어도 대부분의 수정을 직접 할 수 있습니다.

인라인 스타일이란

HTML 태그의 style 속성 안에 꾸밈 규칙을 직접 적는 방식입니다. 판매 채널에는 별도의 CSS 파일을 올릴 수 없기 때문에, 상세페이지의 모든 스타일은 이렇게 태그 안에 넣어야 합니다. 규칙은 속성:값; 형태이고 세미콜론으로 구분해 여러 개를 이어 쓸 수 있습니다.

<p style="color:#e53935; font-size:17px; margin:8px 0;">
  오늘 단 하루, 특가!
</p>

위 코드는 "글자색은 빨강 계열(#e53935), 글자 크기는 17px, 위아래 바깥 여백은 8px"이라는 뜻입니다.

상세페이지에서 자주 쓰는 속성 7가지

• color: 글자 색. #333333 같은 색상 코드를 씁니다.
• font-size: 글자 크기. 모바일 본문은 15px 이상을 권합니다.
• font-weight:bold: 굵은 글씨. 강조 문구에 씁니다.
• margin: 요소 바깥 여백. margin:14px 0;은 위아래 14px, 좌우 0이라는 뜻입니다.
• padding: 요소 안쪽 여백. 배경색이 있는 박스에서 내용과 테두리 사이 간격을 만듭니다.
• text-align:center: 가운데 정렬. 변환 결과의 최상위 컨테이너에 이미 적용되어 있습니다.
• background:#f7f7f7: 배경색. 안내 박스나 인용 박스를 만들 때 씁니다.

수정 요령: 통째로 바꾸지 말고 값만 바꾸세요

변환 결과를 수정할 때는 태그 구조를 건드리지 말고 style 안의 값만 바꾸는 것이 안전합니다. 예를 들어 문단 간격을 넓히고 싶으면 margin:8px 0;의 8을 14로 바꾸면 되고, 강조 문구를 만들고 싶으면 해당 p 태그의 style에 font-weight:bold; color:#e53935;를 추가하면 됩니다. 수정한 뒤에는 변환기 입력창에 다시 붙여넣으면 미리보기로 결과를 확인할 수 있습니다.

흔한 실수 세 가지

첫째, 따옴표 짝이 안 맞는 경우입니다. style="..."의 큰따옴표를 지우거나 하나만 남기면 그 지점부터 페이지가 통째로 깨집니다. 둘째, 세미콜론 누락입니다. color:#333 font-size:15px처럼 이어 붙이면 두 규칙 모두 무시될 수 있습니다. 셋째, 태그를 닫지 않는 경우입니다. <p>를 열었으면 </p>로 닫아야 합니다. 수정 후 미리보기에서 레이아웃이 갑자기 무너졌다면 대부분 이 세 가지 중 하나입니다.

더 배우고 싶다면

레이아웃 차원의 원칙(폭, 이미지, 정렬)은 모바일 레이아웃 기본기에서 다룹니다. 변환기가 어떤 태그를 남기고 지우는지 궁금하다면 HTML 정리 원리를 참고하세요. 직접 수정하다 도구가 처리해주면 좋겠다 싶은 패턴을 발견하면 문의로 알려주세요. 다음 기능에 반영됩니다.