실무 필수! HTML 태그 핵심만 쏙쏙! 웹 퍼블리싱 첫걸음
HTML 태그 완전 정복! (중학생 눈높이 설명)
이번 영상에서는 HTML 3장의 3.1절부터 3.5절까지, 텍스트를 다루는 다양한 태그들을 쉽고 재미있게 알아볼 거야. HTML을 배운다는 건 결국 웹페이지에 보이는 모든 것들을 어떤 '태그'로 만들어야 하는지, 그리고 그 태그들이 어떤 '의미'와 '역할'을 하는지 배우는 과정이라고 생각하면 돼.
HTML에는 150개가 넘는 태그가 있고, 각 태그마다 사용할 수 있는 속성도 정말 많아. 이걸 다 외우려고 하면 너무 어렵고 불필요하겠지? 그래서 이 영상에서는 실무에서 자주 쓰이는 태그들만 골라서, 꼭 필요한 속성 위주로 알려줄 거야. 책에 나오지 않는 태그도 있겠지만, 여기서 배운 것만 잘 알아도 웹 개발하는 데 전혀 문제없으니 걱정 말고 따라와!
1. 제목은 내가 책임진다! <h1> ~ <h6> 태그
웹페이지에서 가장 중요한 건 뭘까? 바로 제목이지! <h1>부터 <h6>까지 6개의 태그가 있는데, 숫자가 작을수록 더 중요하고 큰 제목을 나타내.
<h1>: 가장 중요하고 큰 제목 (페이지 전체를 대표하는 제목)<h2>:<h1>보다 덜 중요한 제목- ...
<h6>: 가장 덜 중요하고 작은 제목
왜 중요하냐면? 검색 엔진이 이 제목들을 보고 페이지 내용을 파악하거든. 그래서 검색 결과 상위에 노출되려면 제목을 잘 짓는 게 중요해.
꿀팁! <h1> 태그는 하나의 HTML 파일 안에서 딱 한 번만 사용하는 게 좋아. 페이지 전체를 대표하는 가장 중요한 제목이니까!
2. 문단의 기본은 나야 나! <p> 태그
글을 쓸 때 문단 나누는 것처럼, 웹페이지에서도 문단을 나타낼 때 <p> 태그를 써. 이건 정말 기본적인 태그라서 웹페이지에서 보이는 일반적인 텍스트는 거의 다 <p> 태그로 만들어진다고 보면 돼. <p> 태그는 '블록 요소'라서 항상 줄바꿈이 돼서 표시돼.
3. 줄바꿈이 필요할 땐? <br> 태그
엔터 키를 눌러도 웹페이지에서는 줄바꿈이 안 되는 거 알지? 줄바꿈을 하고 싶을 때는 <br> 태그를 사용해야 해. 이건 내용이 없는 '빈 태그'인데, 딱 줄바꿈만 해주는 역할을 해.
4. 다른 사람의 말을 빌려올 때! <blockquote> 태그
다른 사람의 말이나 글을 인용해서 보여주고 싶을 때 <blockquote> 태그를 써. 마치 책에서 인용구를 표시하는 것처럼 말이야.
추가 기능! cite라는 속성을 사용하면, 어디서 인용한 내용인지 출처 URL을 적어줄 수도 있어.
5. 짧은 인용은 이걸로! q 태그
<blockquote> 태그랑 비슷하게 인용할 때 쓰는데, <blockquote>는 좀 긴 문단 단위로 인용할 때 쓰고, q 태그는 짧은 문장이나 단어 정도를 인용할 때 써.
6. 새로 추가된 내용 vs 삭제된 내용
<ins>태그: 새롭게 삽입된 내용을 표시할 때 써. 밑줄이 생겨서 보여.<del>태그: 삭제된 내용을 표시할 때 써. 가운데 줄이 그어져서 보여.
이 두 태그도 시각적으로만 표시되는 게 아니라, '이 내용은 새로 추가된 거야', '이 내용은 삭제된 거야'라는 의미를 전달해주는 역할을 해.
7. 위아래로 살짝! <sub> 와 <sup> 태그
화학 시간에 배우는 H₂O 같은 거 있지? 숫자가 아래로 살짝 내려가 있잖아. 이건 '아래 첨자'라고 하는데, <sub> 태그를 사용하면 돼.
반대로, 제곱 같은 거 표현할 때 숫자가 위로 올라가 있잖아? 이건 '위 첨자'라고 하는데, <sup> 태그를 사용하면 돼.
이 태그들은 생각보다 자주 쓰이니까 꼭 기억해두자!
8. 덩어리로 묶어주자! <div> 와 <span> 태그
<div>와 <span> 태그는 내용 자체를 바꾸는 게 아니라, 다른 태그들을 묶어서 그룹화할 때 사용해. 마치 여러 물건을 상자에 담는 것처럼 말이야.
<div>: 여러 태그들을 덩어리로 묶을 때 써. '블록 요소'라서 줄바꿈이 돼.<span>: 주로 짧은 텍스트나 인라인 요소들을 묶을 때 써. '인라인 요소'라서 줄바꿈이 안 돼.
이 태그들은 눈에 직접적으로 보이지는 않지만, 나중에 CSS로 디자인을 꾸밀 때 정말 중요하게 쓰이니까 지금은 '그룹화하는 태그'라고만 알아두자.
9. 목록을 만들어보자! <ul>, <ol>, <li>, <dl>, <dt>, <dd> 태그
웹페이지에서 목록은 정말 많이 쓰이지? 목록을 만드는 태그는 크게 세 가지 종류가 있어.
- 순서 없는 목록 (
<ul>+<li>): 앞에 동그란 점 같은 기호가 붙는 목록이야.<ul>태그 안에<li>태그로 각 항목을 넣어주면 돼. - 순서 있는 목록 (
<ol>+<li>): 1, 2, 3처럼 숫자가 붙는 목록이야.<ul>대신<ol>태그를 쓰고, 마찬가지로<li>태그로 항목을 넣어주면 돼. - 설명 목록 (
<dl>+<dt>+<dd>): 어떤 용어와 그 설명을 짝지어서 보여줄 때 써.<dl>: 설명 목록 전체를 감싸는 태그.<dt>: 설명할 용어 (제목).<dd>: 용어에 대한 설명.
10. 다른 페이지로 이동! 링크는 <a> 태그
HTML의 핵심은 '하이퍼텍스트' 즉, 다른 곳과 연결되는 거야. 이걸 가능하게 해주는 게 바로 <a> 태그야.
href속성: 링크를 클릭했을 때 이동할 페이지의 주소를 적어줘.target="_blank"속성: 링크를 새 창에서 열리게 하고 싶을 때 써.
11. 사진을 보여줘! <img> 태그
웹페이지에 사진을 넣고 싶을 땐 <img> 태그를 사용해.
src속성: 보여줄 사진 파일의 경로를 적어줘.alt속성: 사진이 안 보일 때 대신 보여줄 설명 텍스트야. (검색 엔진에도 중요!)
이미지 링크? <a> 태그 안에 <img> 태그를 넣으면, 사진을 클릭해서 다른 페이지로 이동하게 만들 수도 있어!
12. 강조는 이걸로! <strong> 와 <em> 태그
텍스트를 강조하고 싶을 때 쓰는 태그들이야.
<strong>태그: 중요한 내용을 강조할 때 써. 보통 굵게 표시돼.<em>태그: 강조하고 싶은 단어를 강조할 때 써. 보통 기울임꼴로 표시돼.
옛날에는 <b> (굵게)와 <i> (기울임꼴) 태그도 썼지만, 이 태그들은 단순히 시각적인 효과만 있었어. <strong>와 <em> 태그는 '이 내용은 중요해!', '이 단어는 강조해야 해!'라는 의미까지 담고 있어서 더 권장돼.
이 외에도 더 많은 태그들이 있지만, 오늘 배운 것들만 잘 익혀도 웹페이지를 만드는 데 큰 도움이 될 거야!