웹 프론트(4) - HTML tag(1)

이번 시간에는 기본적인 HTML tag를 알아볼 것이다.

 

 

제목 Tag

• 크기에 따라 <h1>~<h6>으로 나뉜다.

 

 

본문 Tag

• <p> : 단락 or 문단
• <pre> : 형식화된 텍스트
• <br> : 줄바꿈 수행
• 그 외에 <div> 등이 있다

 

 

글자 Tag

• <strong> : 볼드체
• <em> : 이탈릭체
• <sup>: 문장을 위로
• <sub>: 문장을 아래로
• <ins>: 밑줄
• <del> : 취소선

 

 

 

링크 Tag

• <a> : 하이퍼 링크의 역할을 수행
  • href(Hypertext Reference) 속성 : 웹 사이트 주소를 정한다.
  • target 속성 : 링크를 클릭했을 때, 해당 페이지를 어떻게 열 지 정한다.
    • _self: 현재 탭에서 링크를 연다
    • _blank: 새 탭 or 새 창에서 링크를 연다.

'상추의 tistory'를 누르면 새 탭에서 href 속성에 지정한 주소로 이동한다.

 

 

 

이미지 Tag

• <img> : 이미지 넣고 싶을 때 사용 (종료 태그가 없다)
  • src(source) 속성: 불러올 이미지의 파일 경로 or URL
  • alt(Alternative text) 속성: 이미지가 정상 출력되지 않거나 파일이 존재하지 않을 때, 이미지 대신 표시할 문구를 값으로 가짐

이미지가 너무 커서 추가적으로 width, height 속성을 이용해 조절했다.

하지만 이렇게 요소의 디자인적인 부분은 CSS에서 수정하는게 좋다.

 

 

 

목록 Tag

• <ul> : Unordered List의 약자로 순서 없는 목록의 리스트를 만들 때 사용한다.
• <ol> : Ordered List의 약자로 순서 있는 목록의 리스트를 만들 때 사용한다.
• <li> : ul 또는 ol태그 내에서 리스트에 나열할 항목을 담아두는 태그이다.