HTML_태그1.

ESTHER PARK·2023년 5월 14일
0

HTML

목록 보기
8/11

1. 제목입력 태그; hn

hn은 h1, h2...h6 태그로 텍스트 삽입 기능을 한다.

    <h1>h1태그 : 표지제목, 로고</h1>
    <h2>h2태그 : 단락제목(대제목)</h2>
    <h3>h3태그 : 페이지제목(중제목)</h3>
    <h4>h4태그 : 문단제목 (소제목)</h4>
    <h5>h5태그 : 문단제목</h5>
    <h6>h6태그 : 주석제목</h6>

2. 강조태그

- <'strong><'/strong> or <'b><'/b> 볼드체 
- <'u><'/u> 밑줄
- <'i><'/i> or <'em><'/em> 이탤릭체 (*i를 주로사용함)
- <'s><'/s> 취소선
- <'strike><'/strike> 취소선 (*타 태그 내에서만 사용가능)

3. 기능태그

- <'hr> 수평선을 그리는 태그
- <'br> 줄바꿈 태그

4. 텍스트 입력태그; p와 pre

두 태그 모두 텍스트를 입력할때 사용하는 태그인데, 기능이 조금 다르다.
일단 p는 기본적으로 문단을 나탄내는 태그다. 태그 내에 줄바꿈과 탭 등은 반영되지 않는다. 줄바꿈을 원한다면 br태그를 사용하는 것과 같은 태그를 사용해야한다.

반면 pre의 경우 택스트의 모든 형태를 그대로 출력한다. 물론 다른 태그의 활용도 가능하다.

*다만 <와 같은 문자를 사용하는 것은 될때도 있고 아닐때도있는 그런 알쏭달쏭.. 조금더 공부해 봐야겠다.

두 태그는 모두 경로를 입력할때 사용하는 태그이다. 다만 기능의 차이가 있다.

1) anchor <a>

앵커태그는 body태그 내에서 사용하면 끝태그가 존재한다.

속성

  • 필수속성으로 href를 가지기때문에 반드시 입력해줘야한다.
    - href는 링크뿐아니라 경로를 입력해도 된다. (아이디나 클래스 호출, 파일경로 등)
    • href에는 #top 값을 넣어 가장 위로 올라가게 할수있다!
  • 선택속성으로 title, target이 있다.
    - title : 마우스오버 시 보여줌
    - target :링크 클릭시 동작
    • "_blank" 새창열기
    • "_self" 현재창 열기
    • "anything" 임의창열기 (좀더 확인해봐야겠어요)

링크태그는 참조파일을 불러올때 사용한다. 즉 홈페이지를 이용하는 사용자의 눈에는 보이지 않고, 파일을 구성하는 또다른 파일을 불러오는 등의 용도이다.

예를 들어 css파일에 style요소를 모두 넣어두고, link태그로 불러왔다면 정상작동된다. 그러나 a태그는 적용이 되는게 아니라 그 파일로 이동하게된다.

6. 이미지 삽입태그; img

img태그는 이미지를 삽입하는 태그이다.

속성

  • 필수속성으로 src와 alt를 가지기때문에 반드시 입력해줘야한다.
    - src : 이미지의 경로를 입력한다.
    - alt : 이미지 오류 시 출력한다.
          

0개의 댓글