0. ! + tab 키 : Html 짜는 데 필요한 기본 툴을 제공
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
자세한 내용은 심화에서 배우고,
우리는 여기서 body 내부만 신경쓰기로 하자.
다만 위에 <html lang="en"> 부분의 "en"을 "ko"로 바꾸어주자.
그래야지, 페이지의 폰트도 한글로 최적화 되고, 한국어로 검색했을 때 접근성이 높아진다.
1. 제목 태그
<h1>제목 내용</h1>
<h2>제목 내용</h2>
<h3>제목 내용</h3>
<h4>제목 내용</h4>
<h5>제목 내용</h5>
<h6>제목 내용</h6>
h1부터 h6까지 차례대로 제목의 크기가 작아진다. 해당 태그를 이용하면 컴퓨터가 해당 글이 제목임을 인지하게 된다.
따라서 제목으로 검색 시 우리가 만든 문서 제목과 내용이 같다면 그 사람의 검색창에 우리가 만든 문서를 띄워준다.
2.줄바꿈 태그
<br>
해당 태그 앞 뒤 내용을 줄바꿈 해준다.
3. 문단태그
<pr> 문단 내용 </pr>
해당 내용을 문단으로 다른 글들과 구분해준다. 또한 컴퓨터가 해당 내용이 문단 임을 인식하게 해준다.
4. 가로줄 긋는 태그
<hr>
해당 태그 쓰인 위치에 가로줄이 그인다.
5. 주석 태그
<!-- 주석 내용 -->
주석 처리하고 싶은 글을 Drag하고 Ctr +/ 하면 자동 주석처리 된다.
예시)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목 태그들과 문단 태그</h1>
<h2>용도에 적합한 태그 사용하기</h2>
<p>페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용합니다. <br>
숫자가 높을수록 낮은 단계의 제목이 되죠.
</p>
<p>본문은 문단별로 p 태그로 감쌉니다. p 태그끼리는 자동으로 줄바꿈이 되죠. <br>
문단에 관계없이 이처럼 <br><br><br>
원하는 횟수로 줄바꿈을 하기 위해서는 br 태그를 쓰면 됩니다. <br>
br 태그는 열고 닫을 필요가 없는 몇 안 되는 태그 중 하나인데 남용하지 않는 것이 좋습니다.
</p>
<hr>
<p>위와 같이 hr 태그를 사용하면 가로줄을 표시할 수도 있습니다.
</p>
<p>이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.
</p>
<p>마지막으로, 여기서는 보이지 않지만 페이지 원본 보기에서 주석을 확인할 수 있습니다.
</p>
<!-- 이 부분은 웹페이지에서는 보이지 않았을거에요 -->
<!-- 이처럼, 코드에서만 볼 수 있는 텍스트를
'주석'이라고 합니다. 위의 주석처럼 한 줄로도,
이 주석처럼 여러 줄로도 작성할 수 있어요. -->
</body>
</html>
제목 태그들과 문단 태그
용도에 적합한 태그 사용하기
페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용합니다.
숫자가 높을수록 낮은 단계의 제목이 되죠.
본문은 문단별로 p 태그로 감쌉니다. p 태그끼리는 자동으로 줄바꿈이 되죠.
문단에 관계없이 이처럼
원하는 횟수로 줄바꿈을 하기 위해서는 br 태그를 쓰면 됩니다.
br 태그는 열고 닫을 필요가 없는 몇 안 되는 태그 중 하나인데 남용하지 않는 것이 좋습니다.
위와 같이 hr 태그를 사용하면 가로줄을 표시할 수도 있습니다.
이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.
마지막으로, 여기서는 보이지 않지만 페이지 원본 보기에서 주석을 확인할 수 있습니다.
'프론트엔드 개발 > HTML, CSS - 이론' 카테고리의 다른 글
| 인용문 태그, 강조문 태그, 축약어 설명 태그 (0) | 2023.02.07 |
|---|---|
| 강조 태그, 첨자 태그, 밑줄 태그 (0) | 2023.02.07 |
| VSCODE로 마크업 언어 공부 전 세팅 해놓 으면 좋은 것 (0) | 2023.02.02 |
| HTML_생활코딩_10강 웹페이지는 접근성을 우선적으로 생각 (0) | 2023.01.29 |
| HTML Paragraph Tag <br> , <p> </p> (0) | 2023.01.29 |
