3강 HTML기본문법

- 이해도를 높이기 위해 한글 문서를 캡처했습니다. -

1. 글자를 진하게 하기

무언가 중요하다고 생각하는 글자에게는 우리는 강조를 주고 싶어 한다. 문서 작성 프로그램을 보면 "진하게"라는 메뉴가 따로 존재할 것이다. 옆에 사진은 한글이란 프로그램을 실행한 화면이다. 선택한 글자를 진하게 해주는 메뉴를 볼 수 있다.

이것을 웹 페이지에서도 구현이 가능하다.

코드 :  <strong> 내용 </strong>

 

 

 

 

---

 

 

2. 밑줄 긋기

글자를 진하게 하는 것만으로도 부족하고 느낄 때 밑줄을 한번 더 그어서 더 중요하다는 것을 강조하고 싶을 때 사용한다.

밑줄은 영어로 underline이라고 하는데 앞 글자를 따서 코드를 만들었다.

코드 : <u> 내용 </u>

 

 

 

 

 

 

---

3. 제목의 크기 나타내기

티스토리 글쓰기를 보면 제목의 크기를 고를 수 있는

메뉴가 나타난다.

웹 페이지에서도 제목의 크기를 정할 수가 있다.

영어로는 heading이라고 하고 앞 글자를 따서 코드를

만들었다.

코드:  

<h1> 제목 </h1>
<h2> 제목 </h2>
<h3> 제목 </h3>
<h4> 제목 </h4>
<h5> 제목 </h5>
<h6> 제목 </h6> 

 

<h1> 태그가 제목의 크기가 가장 크고 <h6> 태그가 가장 작다.

---

 

4. 통계에 기반한 태그

어드밴스 웹 랭킹 : 전 세계 웹 페이지 중 어느 태그를 제일 많이 사용하는 알려주는 웹 사이트

The average web page from top twenty Google results

---

5. 줄 바꿈 태그

 

위 문서는 나무 위키에서 애국가를 검색해서 나온 문장을 한글 문서에 붙여 넣기를 한 화면을 캡처해 놓은 것이다.

사실 내용은 중요하지 않다. 

우리가 지금부터 해야 할 건 웹 페이지에서 줄을 바꾸는 기능에 대해 알아보기 위하여 이 과정을 이해하는 것뿐이다.

코드: <br>

<br>이라는 태그는 독립적인 태그이다.

보통은 열리는 태그와 닫히는 태그로 나누어지는데 <br>은 무언가를 감싸줄 필요가 없다.

<br>은 연속적으로 사용이 가능하다. 

코드는 무조건 간단하고 깔끔한 게 좋다.

HTML을 만든 사람들은 여러 번의 <br> 태그를 사용해 단락을 나누는 걸 좋아하지 않기에 새로운 태그를 만들었는데

그 태그는 바로 <p> 태그이다.

영어로는 페어 그래프(paragraph) 단락을 뜻한다.

코드 : <p> 내용 </p>

 

---