제3편: HTML 태그의 마법 - 꺽쇠 하나로 세상 바꾸기 (태그 기본 구조, 필수 태그 2가지, 사용 ,연습)

목차



지난 2편에서 메모장을 이용해 첫 웹페이지를 만들어보셨나요? 태그 안에 글을 썼을 때 화면에 나타나는 것을 보며 코딩의 첫걸음을 떼셨을 겁니다. 오늘은 그 마법의 열쇠인 '태그(Tag)'가 구체적으로 어떤 구조로 되어 있고, 웹 브라우저에게 어떤 명령을 내리는지 핵심만 짚어보겠습니다.

태그의 기본 구조: 시작과 끝의 약속

HTML에서 가장 중요한 규칙은 '열면 반드시 닫아야 한다'는 것입니다. 태그는 보통 한 쌍으로 움직이며, 이는 마치 편지를 보낼 때 봉투를 열고 다시 닫는 과정과 같습니다.

1. 여는 태그: <태그이름> 컴퓨터에게 "이제부터 이 기능을 시작해!"라고 알리는 신호입니다. 예로 은 '제목'이라는 기능을 시작하겠다는 뜻입니다.

2. 닫는 태그: </태그이름> 컴퓨터에게 "여기서 이 기능은 끝났어!"라고 알려줍니다. 닫는 태그는 이름 앞에 반드시 슬래시(/)가 들어갑니다. 예로 은 제목의 끝을 의미합니다.

이 사이에 들어가는 내용이 바로 웹 브라우저에 표시될 실제 정보입니다. 즉, <태그>내용</태그>의 형태가 가장 기본입니다. 만약 닫는 태그를 깜빡하면 어떻게 될까요? 웹 브라우저는 어디가 끝인지 몰라서, 그다음 글자까지 모두 같은 속성을 적용해버립니다. 초보 시절 가장 흔히 겪는 '글자 깨짐' 현상의 90%는 이 닫는 태그를 빠뜨려서 발생합니다.

자주 쓰는 필수 태그 2가지

초보자가 처음 웹사이트를 만들 때 이것만 알면 80%는 해결됩니다.

글의 중요도를 결정하는 것이 가장 크고 중요한 제목이며, 숫자가 커질수록 글자 크기는 작아집니다. 한 페이지에 은 주제를 나타내는 딱 하나만 쓰는 것이 검색 엔진 최적화(SEO)에 매우 유리합니다.

'Paragraph'의 약자로, 글을 하나의 단락으로 묶어줍니다. 태그를 쓰면 자동으로 앞뒤로 약간의 여백이 생겨서 글이 읽기 편해집니다.

1. 줄바꿈 태그: <br>(Line Break)

글을 쓰다가 다음 줄로 넘기고 싶을 때, 우리는 보통 엔터(Enter) 키를 누르죠? 하지만 HTML은 우리가 메모장에서 엔터를 아무리 많이 쳐도, 웹 브라우저 화면에서는 이를 전부 무시하고 한 줄로 길게 이어버립니다.
이때 컴퓨터에게 "여기서 무조건 다음 줄로 넘어가!"라고 명령하는 것이 바로 <br>입니다.

• 사용법: <br>

• 중요 포인트: 이 태그는 짝꿍(닫는 태그)이 필요 없습니다. 내용물을 감싸는 게 아니라, 그 자리에 '줄바꿈'이라는 기능을 쏙 끼워 넣는 것이기 때문입니다.

• 활용 예시: 시를 쓰거나, 주소를 적을 때처럼 줄이 딱딱 끊겨야 하는 곳에 사용합니다.

서울시 강남구<br>
역삼동 123번지

2. 강조 태그: <strong> (Strong)

글을 쓰다 보면 특정 단어를 눈에 띄게 하고 싶죠? 그럴 때 사용하는 태그입니다.

• 사용법: <strong>강조할 내용</strong>

• 의미: 단순히 글자만 굵게 만드는 것이 아니라, "이 부분은 다른 글자보다 더 중요해!"라는 정보를 검색 엔진(구글 등)에게 전달하는 역할을 합니다.

• 참고: 예전에는 <b> 태그를 많이 썼지만, <b>는 '그냥 굵게'라는 시각적 의미만 있습니다. 반면 <strong>은 '강조(중요함)'라는 의미가 담겨 있어서, 구글 정보성 블로그라면 <strong>을 사용하는 것이 훨씬 유리합니다.

둘을 함께 사용해보자

우리가 블로그에 맛집 정보를 올린다고 가정해볼게요. 아래 코드를 보시면 왜 이 태그들을 쓰는지 확실히 아실 겁니다.

<p>
오늘 점심 메뉴는 <strong>제육볶음</strong>입니다!<br>
정말 맛있으니 꼭 드셔보세요.
</p>

직접 해보는 태그 연습: 메모장을 켜세요

지난번에 만든 index.html 파일을 메모장으로 다시 열어보세요. 아래 코드를 수정해서 저장한 뒤, 브라우저에서 어떻게 바뀌는지 확인해보세요.

브라우저에서 확인해보면 '정말 재미있다!' 부분이 굵게 변했고, '열심히 공부하자'가 줄바꿈되어 나타나는 것을 볼 수 있습니다. 이렇게 태그 하나씩을 바꿔가며 결과가 어떻게 달라지는지 확인하는 것이 코딩 공부의 핵심입니다.

초보자를 위한 주의사항

• 꺽쇠(< >)는 꼭 영어 키보드 상태에서 입력하세요. 한글 모드에서 입력하면 모양이 미묘하게 다르거나 오류가 날 수 있습니다.

• 태그 이름은 반드시 영어 소문자로 쓰는 것이 약속입니다. 대문자로 써도 작동은 하지만, 나중에 복잡한 코드를 짤 때 문제가 될 수 있습니다.

• 태그 안에 태그를 넣을 때는 '순서'가 중요합니다. 제목처럼 안쪽 태그를 먼저 닫고 바깥쪽 태그를 닫아야 합니다.

코딩은 눈으로 읽는 것이 아니라 직접 손으로 타이핑할 때 비로소 내 것이 됩니다. 태그를 입력할 때마다 "아, 이건 컴퓨터에게 이렇게 말하는 거구나"라고 속으로 중얼거리며 연습해보세요.

[핵심 요약]

• HTML 태그는 <시작>과 </끝>이 한 쌍이며, 이 약속을 지키는 것이 코딩의 시작입니다.

• 태그는 항상 영어 소문자로 작성하고, 안쪽 태그부터 순서대로 닫는 습관을 들이는 것이 좋습니다.

[다음 편 예고]
 4편에서는 웹사이트의 시각적 요소인 '이미지를 넣는 법'과 정보를 연결하는 '링크 태그'에 대해 알아보겠습니다.

 오늘 배운 태그들 중에서, 본인의 블로그에 가장 먼저 써보고 싶은 기능은 무엇인가요? 굵은 글씨인가요, 아니면 제목 태그인가요?