hn은 h1, h2...h6 태그로 텍스트 삽입 기능을 한다.
<h1>h1태그 : 표지제목, 로고</h1>
<h2>h2태그 : 단락제목(대제목)</h2>
<h3>h3태그 : 페이지제목(중제목)</h3>
<h4>h4태그 : 문단제목 (소제목)</h4>
<h5>h5태그 : 문단제목</h5>
<h6>h6태그 : 주석제목</h6>
- <'strong><'/strong> or <'b><'/b> 볼드체
- <'u><'/u> 밑줄
- <'i><'/i> or <'em><'/em> 이탤릭체 (*i를 주로사용함)
- <'s><'/s> 취소선
- <'strike><'/strike> 취소선 (*타 태그 내에서만 사용가능)
- <'hr> 수평선을 그리는 태그
- <'br> 줄바꿈 태그
두 태그 모두 텍스트를 입력할때 사용하는 태그인데, 기능이 조금 다르다.
일단 p는 기본적으로 문단을 나탄내는 태그다. 태그 내에 줄바꿈과 탭 등은 반영되지 않는다. 줄바꿈을 원한다면 br태그를 사용하는 것과 같은 태그를 사용해야한다.
반면 pre의 경우 택스트의 모든 형태를 그대로 출력한다. 물론 다른 태그의 활용도 가능하다.
*다만 <와 같은 문자를 사용하는 것은 될때도 있고 아닐때도있는 그런 알쏭달쏭.. 조금더 공부해 봐야겠다.
두 태그는 모두 경로를 입력할때 사용하는 태그이다. 다만 기능의 차이가 있다.
<a>
앵커태그는 body태그 내에서 사용하면 끝태그가 존재한다.
속성
- 필수속성으로 href를 가지기때문에 반드시 입력해줘야한다.
- href는 링크뿐아니라 경로를 입력해도 된다. (아이디나 클래스 호출, 파일경로 등)
- href에는 #top 값을 넣어 가장 위로 올라가게 할수있다!
- 선택속성으로 title, target이 있다.
- title : 마우스오버 시 보여줌
- target :링크 클릭시 동작
- "_blank" 새창열기
- "_self" 현재창 열기
- "anything" 임의창열기 (좀더 확인해봐야겠어요)
<link>
링크태그는 참조파일을 불러올때 사용한다. 즉 홈페이지를 이용하는 사용자의 눈에는 보이지 않고, 파일을 구성하는 또다른 파일을 불러오는 등의 용도이다.
예를 들어 css파일에 style요소를 모두 넣어두고, link태그로 불러왔다면 정상작동된다. 그러나 a태그는 적용이 되는게 아니라 그 파일로 이동하게된다.
img태그는 이미지를 삽입하는 태그이다.
속성
- 필수속성으로 src와 alt를 가지기때문에 반드시 입력해줘야한다.
- src : 이미지의 경로를 입력한다.
- alt : 이미지 오류 시 출력한다.