구문 및 일반적인 작업을 위한 HTML 치트시트 (HTML cheatsheet for syntax and common tasks)
HTML을 사용하다 보면, HTML 태그들을 어떻게 올바르게 사용하고 적용해야 하는지 쉽게 기억할 수 있는 방법이 있으면 정말 편리합니다. MDN은 심도 있는 심층 HTML 가이드 세트뿐만 아니라, 아주 자세한 HTML 참조 문서도 제공하고 있어요. 하지만, 막상 코딩을 하다 보면 그냥 그때그때 필요한 짧은 힌트만 빠르게 확인하고 싶을 때가 많죠. 이 치트시트의 목적이 바로 그거예요. 흔히 쓰이는 작업들에 대해 즉시 가져다 쓸 수 있는 정확한 코드 스니펫(조각)들을 빠르게 제공하는 것이랍니다.
참고 (Note):
HTML 태그는 눈에 보이는 '외형(appearance)'이 아니라, 그 태그가 가진 '의미론적 가치(semantic value)'에 맞게 사용해야 합니다. 특정 태그의 디자인이나 느낌은 CSS를 사용해서 얼마든지 완전히 바꿀 수 있어요. 그러니 HTML을 작성하실 때는 겉모습보다는 이 코드가 어떤 의미를 담고 있는지에 집중하는 시간을 꼭 가지시길 바랍니다.
💡 강사의 팁:
방금 나온 '시맨틱(Semantic) 마크업'은 프론트엔드 기술 면접에서 정말 자주 나오는 단골 질문입니다! 면접관들은 종종 "왜 디자인이 똑같은데<div>대신<section>이나<article>을 써야 할까요?"라고 묻곤 하죠. 스크린 리더기(웹 접근성)나 검색 엔진 최적화(SEO) 관점에서 시맨틱 태그가 얼마나 중요한지 꼭 기억해 두세요.
이 문서에서 다루는 내용 (In this article)
인라인 요소 (Inline elements)
"요소(element)"란 웹페이지를 구성하는 하나의 작은 부품이라고 생각하시면 됩니다. 어떤 요소는 덩치가 커서 그 안에 더 작은 요소들을 담는 컨테이너 역할을 하기도 하고, 어떤 요소는 작아서 큰 요소들 안에 "중첩(nested)"되어 들어가기도 하죠.
기본적으로 "인라인 요소(inline elements)"들은 웹페이지 안에서 서로 나란히 옆으로 배치됩니다. 이 친구들은 딱 자기가 품고 있는 내용물만큼의 너비(width)만 차지해요. 마치 문장 속에 들어있는 단어들이나, 책장에 나란히 꽂혀 있는 책들처럼 가로로 차곡차곡 끼워 맞춰진답니다. 모든 인라인 요소들은 <body> 태그 안에 배치할 수 있어요.
💡 강사의 팁:
인라인 요소는 CSS에서width,height,margin-top,margin-bottom값을 주어도 기본적으로는 먹히지 않아요. 혹시 CSS를 먹여야 한다면display: inline-block;이나display: block;으로 성질을 바꿔주셔야 합니다. 리액트나 넥스트로 컴포넌트 스타일링을 하실 때 레이아웃이 마음대로 안 움직이면, 이 태그가 혹시 인라인 요소는 아닌지 가장 먼저 의심해 보세요!
1. 링크 (A link)
- 요소:
<a> - 예시:
<a href="https://example.org">
A link to example.org</a>.
2. 이미지 (An image)
- 요소:
<img> - 예시:
<img src="beast.png" width="50" />
3. 인라인 컨테이너 (An inline container)
- 요소:
<span> - 예시:
Used to group elements: for example,
to <span style="color:blue">style
them</span>.
4. 텍스트 강조 (Emphasize text)
- 요소:
<em> - 예시:
<em>I'm posh</em>.
5. 이탤릭체 기울임 텍스트 (Italic text)
- 요소:
<i> - 예시:
Mark a phrase in <i>italics</i>.
6. 굵은 텍스트 (Bold text)
- 요소:
<b> - 예시:
Bold <b>a word or phrase</b>.
7. 중요한 텍스트 (Important text)
- 요소:
<strong> - 예시:
<strong>I'm important!</strong>
8. 텍스트 하이라이트 (Highlight text)
- 요소:
<mark> - 예시:
<mark>Notice me!</mark>
9. 취소선 텍스트 (Strikethrough text)
- 요소:
<s> - 예시:
<s>I'm irrelevant.</s>
10. 아래첨자 (Subscript)
- 요소:
<sub> - 예시:
H<sub>2</sub>O
11. 작은 텍스트 (Small text)
- 요소:
<small> - 예시:
Used to represent the <small>small
print </small>of a document.
12. 주소 (Address)
- 요소:
<address> - 예시:
<address>Main street 67</address>
13. 텍스트 인용구 (Textual citation)
- 요소:
<cite> - 예시:
For more monsters,
see <cite>The Monster Book of Monsters</cite>.
14. 위첨자 (Superscript)
- 요소:
<sup> - 예시:
x<sup>2</sup>
15. 인라인 인용구 (Inline quotation)
- 요소:
<q> - 예시:
<q>Me?</q>, she said.
16. 줄바꿈 (A line break)
- 요소:
<br> - 예시:
Line 1<br />Line 2
17. 상황에 따른 줄바꿈 허용 (A possible line break)
- 요소:
<wbr> - 예시:
<div style="width: 200px">
Llanfair<wbr />pwllgwyngyll<wbr />gogerychwyrndrobwllllantysiliogogogoch.
</div>
18. 날짜 (Date)
- 요소:
<time> - 예시:
Used to format the date. For example:
<time datetime="2020-05-24">
published on 23-05-2020</time>.
19. 코드 형식 (Code format)
- 요소:
<code> - 예시:
This text is in normal format,
but <code>this text is in code
format</code>.
20. 오디오 (Audio)
- 요소:
<audio> - 예시:
<audio controls>
<source src="/shared-assets/audio/t-rex-roar.mp3" type="audio/mpeg" />
</audio>
21. 비디오 (Video)
- 요소:
<video> - 예시:
<video controls width="250"
src="/shared-assets/videos/flower.webm" >
<a href="/shared-assets/videos/flower.webm">Download WebM video</a>
</video>
블록 요소 (Block elements)
반면에 "블록 요소(Block elements)"들은 웹페이지의 가로 너비 전체를 꽉 채우려고 합니다. 항상 웹페이지에서 온전한 한 줄(line)을 전부 차지하기 때문에, 옆에 다른 요소가 나란히 붙지 못해요. 대신 에세이의 문단들이나 위로 쌓아 올린 장난감 블록 탑처럼 위아래로 차곡차곡 쌓이게 됩니다.
참고 (Note):
이 치트시트는 특정한 구조를 띄고 있거나 특별한 의미(semantic)를 가진 몇 가지 주요 요소들만 추려서 다루고 있기 때문에,<div>요소는 의도적으로 제외했습니다.<div>요소 자체는 어떠한 것도 상징하지 않으며, 특별한 의미론적 가치를 가지고 있지 않기 때문입니다.
💡 강사의 팁:
이 부분도 정말 중요해요! 예전에는 화면을 나눌 때 무조건<div>만 썼지만, 요즘 프론트엔드 트렌드는 다릅니다. 헤더는<header>, 하단은<footer>, 메인 콘텐츠는<main>, 독립적인 글은<article>로 묶어주는 것이 실력 있는 개발자의 기본기입니다.
1. 간단한 단락 (A simple paragraph)
- 요소:
<p> - 예시:
<p>I'm a paragraph</p>
<p>I'm another paragraph</p>
2. 확장된 인용구 (An extended quotation)
- 요소:
<blockquote> - 예시:
They said:
<blockquote>The blockquote element indicates
an extended quotation.</blockquote>
3. 추가 정보 (접었다 펴기) (Additional information)
- 요소:
<details> - 예시:
<details>
<summary>HTML Cheat Sheet</summary>
<p>Inline elements</p>
<p>Block elements</p>
</details>
4. 순서 없는 목록 (An unordered list)
- 요소:
<ul> - 예시:
<ul>
<li>I'm an item</li>
<li>I'm another item</li>
</ul>
5. 순서 있는 목록 (An ordered list)
- 요소:
<ol> - 예시:
<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
</ol>
6. 용어 정의 목록 (A definition list)
- 요소:
<dl> - 예시:
<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>
7. 가로줄 구분선 (A horizontal rule)
- 요소:
<hr> - 예시:
before<hr />after
8. 텍스트 제목 (Text Heading)
- 요소:
<h1>-<h6> - 예시:
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
