지난 번 포스팅에서 말씀드렸듯 저는 시험이 끝난 이후로 코딩공부를 해왔습니다.
특히 직접 웹개발을 하고싶어 웹프론트엔드 개발언어에 해당하는 HTML, CSS, JS를 공부하기로 계획했고 지금까지 HTML과 CSS학습을 마쳤습니다.
아래는 제가 HTML을 학습하면서 필기해두었던 자료입니다.
HTML을 조금이라도 공부해보신 분들이라면 누구나 알고 있을정도로 기초적인 태그들입니다.
다른 말로 표현하면 HTML을 다루고자 한다면 반드시 알아야 할 필수태그들입니다.
이것은 저 혼자 기억을 되새김질 하기 위해 정리한 것이기도 하지만
저처럼 웹 프론트엔드 공부를 시작하려 하시는 분들에게도 도움이 되었으면 좋겠습니다.
<!DOCTYPE> 선언
HTML 파일을 쓸 때는 가장 먼저 <!DOCTYPE> 선언을 써야 합니다. 이전의 html 버전을 사용하려면 <!DOC
TYPE>을 복잡하게 써야 하지만, 그냥 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다:
|
<!DOCTYPE html> |
<title> 태그
페이지의 제목은 <title> 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이 곳에 들어갑니다.
|
<title>Hello Website</title> |
<h1>~<h6> 태그
한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그 중 가장 중요한 머리말은 <h1>(heading 1), 그 다음으로 중요한 머리말은 <h2>(heading 2). 이런 식으로 <h6>(heading 6)까지 작성할 수 있습니다.
|
<h1>머리말 1</h1> <h2>머리말 2</h2> <h3>머리말 3</h3> <h4>머리말 4</h4> <h5>머리말 5</h5> <h6>머리말 6</h6> |
각 머리말의 크기는 나중에 마음대로 설정할 수 있지만, 따로 설정해주지 않으면 <h1>부터 순서대로 작아집니다.
<p> 태그
보통 문단은 <p>(paragraph) 태그 안에 넣습니다. 물론 직접 설정할 수도 있지만 <p> 태그 위, 아래에는 기본적으로 여백이 조금씩 있습니다.
|
<p>Parasite is amazing.</p> <p>The most likely winner of the Academy Award is director Bong Joon-ho's parasite.</p> <p>Sure enough, director Bong Joon-ho's parasite won four Academy Awards..</p> |
<b> 태그
텍스트를 굵게 쓰고 싶으면 'bold'의 약자인 <b> 태그를 사용하면 됩니다.
|
Hello <b>man</b>! |
<i> 태그
텍스트를 날려 쓰고 싶으면 'italics'의 약자인 <i> 태그를 사용하면 됩니다.
|
Hello <i>man</i>! |
Phrase Tags
<b> 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 <i> 태그는 그냥 텍스트를 '이탤릭체'로 만들어줍니다. 둘 다 '시각적인 특징'만 갖고 있는 태그인데요. HTML에서는 시각적인 특징 뿐만 아니라 의미도 담고 있는 phrase tag가 있습니다.
<strong> 태그
|
Hello <strong>man</strong>! |
<b> 태그는 텍스트를 굵게 만드는 것이 목적이지만, <strong> 태그는 감싸고 있는 텍스트가 중요하다고 표시하는 것이 목적입니다. 지금 겉보기에는 두 태그가 똑같지만, 스크린리더(컴퓨터의 화면 낭독 소프트웨어: 시각 장애인, 학습/인지 장애인, 노인, 다문화 가정의 웹 접근성을 지원해주는 목적)가 글을 읽어줄 때 <strong>은 강조해서 읽을 수 있습니다.
<em> 태그
|
Hello <em>man</em>! |
<i> 태그는 그냥 시각적으로 날려쓰는 것이 목적이라면, <em> 태그는 강조하는 것이 목적입니다. em은 'emphasized'의 줄임말입니다.
<한글이 깨지지 않도록 써두어야 하는 코드>
|
<meta charset=“utf-8”> |
뒤 쪽에 </meta charset>과 같은 태그를 쓸 필요 없이 위 태그만 적어주면 한글이 깨지지 않습니다.
'코딩' 카테고리의 다른 글
| HTML, CSS 질문하기 편리한 사이트 추천 : jsfiddle.net (0) | 2020.02.11 |
|---|---|
| 웹개발 : 프론트엔드와 백엔드의 차이 및 공부계획 총정리 (feat. 테크보이 워니) (0) | 2020.02.08 |
