HTML 코드는 왜 복잡해 보일까?

처음 배우는 사람의 질문으로 시작하는
워드프레스 Avada 홈페이지 학습 기록

이 글의 출발점은 아주 단순합니다. 홈페이지를 꾸미려고 코드를 열어 보았는데, 영어와 기호가 너무 많아 겁이 나는 것입니다. 그러나 Avada에서 쓰는 HTML은 모든 것을 외울 필요가 없습니다. 필요한 부분을 골라 복사하고, 글자·색·여백만 바꾸는 방식으로도 충분히 좋은 글을 만들 수 있습니다.

답변. HTML은 홈페이지 글의 뼈대입니다. 우리가 한글 문장에서 제목, 본문, 문단을 구분하듯이, HTML도 “이곳은 제목”, “이곳은 문단”, “이곳은 상자”라고 컴퓨터에게 알려 줍니다.

예를 들어 h2는 큰 소제목, p는 보통 문단, div는 여러 내용을 담는 상자 역할을 합니다. 어려운 언어를 새로 배우는 것이 아니라, 글의 자리를 표시하는 작은 이름표이라고 생각하면 됩니다.

꺾쇠 안의 글자는 화면에 보이지 않고, 그 뒤의 한글만 화면에 보입니다.

답변. 인터넷에서 찾은 HTML에는 한 페이지 전체를 만들기 위한 내용이 섞여 있는 경우가 많습니다. 예를 들면 DOCTYPE, html, head, body, style, class 같은 부분입니다. 하지만 Avada 편집기 안에는 이미 홈페이지의 기본 틀이 준비되어 있습니다. 그 안에 다시 전체 틀을 넣으면 오히려 모양이 흐트러질 수 있습니다.

연구원님의 방식: Avada에는 제목·본문·박스처럼 실제로 화면에 필요한 부분만 넣습니다. 그래서 앞으로 드리는 코드는 div, h1, h2, h3, p 중심의 짧은 코드가 됩니다. 복사해서 붙인 뒤, 문장만 바꾸어도 같은 품격의 글이 이어집니다.

답변. 인라인 스타일은 색상, 글자 크기, 여백을 그 자리에서 바로 지정하는 방법입니다. 연구원님처럼 한 편의 글을 완성해 복사·붙여넣기 하는 경우에 특히 편합니다.

예를 들어 font-size: 19px는 본문 글자 크기, padding: 20px는 상자 안쪽 여백, border-radius: 10px는 상자의 둥근 모서리를 뜻합니다. 코드를 모두 외울 필요는 없습니다. 이미 만들어 둔 기준 코드에서 필요한 숫자만 바꾸면 됩니다.

답변. 긴 글에서 소제목은 내용의 갈림길입니다. 소제목 바로 위에 여백이 충분해야 독자가 다음 주제로 넘어왔다는 것을 쉽게 알아봅니다. 반대로 아래 여백은 너무 넓지 않게 두어, 제목과 첫 문장이 한 묶음으로 읽히게 합니다.

연구원님의 Avada HTML 기준: 모든 h2 소제목은 위 여백 70px, 아래 여백 24px으로 통일합니다.

좋은 홈페이지 코드는 ‘많은 코드’가 아니라 ‘다시 쓸 수 있는 기준 코드’입니다.

이 연재에서는 어려운 기능을 한꺼번에 늘어놓지 않습니다. 연구원님의 홈페이지에서 실제로 반복해서 쓸 제목, 본문, 박스, 이미지 자리, 웹폰트 코드만 차례대로 다룹니다.

① HTML은 홈페이지 글의 뼈대입니다.

② Avada에서는 한 페이지 전체 코드가 아니라 필요한 부분만 붙여넣습니다.

③ 연구원님의 기준은 간결한 인라인 스타일, 본문 19px, 최대폭 1100px의 넓은 1단 글입니다.

④ 모든 h2 소제목은 위 70px, 아래 24px 여백으로 통일합니다.

PART 02. 카테고리와 제목 바는 왜 같은 형식으로 통일할까?

복잡한 코드 하나를 단순한 Avada용 제목 바로 바꾸는 실제 방법을 살펴봅니다.