0. ! + tab 키 : Html 짜는 데 필요한 기본 툴을 제공

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

자세한 내용은 심화에서 배우고,

우리는 여기서 body 내부만 신경쓰기로 하자.

다만 위에 <html lang="en"> 부분의 "en"을 "ko"로 바꾸어주자.

그래야지, 페이지의 폰트도 한글로 최적화 되고, 한국어로 검색했을 때 접근성이 높아진다.

1. 제목 태그

h1부터 h6까지 차례대로 제목의 크기가 작아진다. 해당 태그를 이용하면 컴퓨터가 해당 글이 제목임을 인지하게 된다.

따라서 제목으로 검색 시 우리가 만든 문서 제목과 내용이 같다면 그 사람의 검색창에 우리가 만든 문서를 띄워준다.

2.줄바꿈 태그

<br>

해당 태그 앞 뒤 내용을 줄바꿈 해준다.

3. 문단태그

해당 내용을 문단으로 다른 글들과 구분해준다. 또한 컴퓨터가 해당 내용이 문단 임을 인식하게 해준다.

4. 가로줄 긋는 태그

<hr>

해당 태그 쓰인 위치에 가로줄이 그인다.

5. 주석 태그

주석 처리하고 싶은 글을 Drag하고 Ctr +/ 하면 자동 주석처리 된다.

예시)

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<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>

Document

제목 태그들과 문단 태그

용도에 적합한 태그 사용하기

페이지나 섹션, 주요 요소의 제목은 h1 ~ h6 태그를 사용합니다.
숫자가 높을수록 낮은 단계의 제목이 되죠.

본문은 문단별로 p 태그로 감쌉니다. p 태그끼리는 자동으로 줄바꿈이 되죠.
문단에 관계없이 이처럼

원하는 횟수로 줄바꿈을 하기 위해서는 br 태그를 쓰면 됩니다.
br 태그는 열고 닫을 필요가 없는 몇 안 되는 태그 중 하나인데 남용하지 않는 것이 좋습니다.

위와 같이 hr 태그를 사용하면 가로줄을 표시할 수도 있습니다.

이 렇 게 글자 사이의 공백을 여럿 두려면 & n b s p ; 를 붙여서 입력하세요.

마지막으로, 여기서는 보이지 않지만 페이지 원본 보기에서 주석을 확인할 수 있습니다.

저작자표시

제목과 태그

0. ! + tab 키 : Html 짜는 데 필요한 기본 툴을 제공

1. 제목 태그

2.줄바꿈 태그

3. 문단태그

4. 가로줄 긋는 태그

5. 주석 태그

제목 태그들과 문단 태그

용도에 적합한 태그 사용하기

티스토리툴바