html5 : <hn> <p> <br> <b> <i> <img> <a> / 자주 쓰는 기본 태그

자주 쓰는 기본 태그를 알아보자

 

<hn> : 제목을 입력하는 태그, h1 h2와 같이 순서대로 지정해서 태그를 쓸 수 있다.

<p> : 일반 텍스트에 사용하는 태그이다. 가장 많이 사용하는 태그 중 하나이다.

텍스트를 입력하면 앞뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.

<br> : br도 자주 쓰는 태그로 줄바꿈 태그이다. 닫는 태그는 없다.

<b> : 텍스트를 진하게 해준다.

<i> : 텍스트를 이탤릭체로 표기 해준다.

<img> : img를 삽입할 수 있다.

주요 속성은 src, alt, width, height, loading이다.
-src : 이미지의 경로 (이전 게시글에서 사용했다)
-alt : 이미지를 표시할 수 없을 때 출력할 내용
-width : 이미지의 가로 크기
-height : 이미지의 세로 크기
-loading : 이미지 로딩 방식

 

<a> : 웹 문서나 웹 사이트를 연결할 수 있다.

<a href="웹사이트 주소"> 형식으로 입력하면 된다.

 

그리고 주석을 붙일 수 있다. 주석은 웹에서는 보이지 않는다

<!--주석의 내용--> 와 같은 형식으로 입력하면 된다.

 

이를 이용해 실습해보자.

 

1. h1으로 제목, p1으로 텍스트, img로 이미지를 삽입한다.

2. a href를 통해 링크를 삽입

링크를 보여주는 h2 제목 입력

a href에서 노출할 링크를 입력한다.

</a>로 끝맺음도 반드시 해야한다. 안하면 하이퍼링크가 끝나지 않는다...

p로 텍스트를 달아준다.

 

 

3. 줄바꿈, 강조, 이탤릭체를 연습해보았다.

끝!

 

저장 후 html 페이지를 열어보니,

이미지 하이퍼링크 모두 맞게 들어가 있고 주석도 노출되지 않고 있다.

h1, h2 태그는 자동으로 글씨 크기가 다르게 들어가는 것 같다.