WEB/2020_webCamp

LAB1: html tag

HBean_ 2020. 7. 21. 04:01
  • <body> : 해당 태그의 content가 웹페이지에 보여진다.
    • 속성
      • style -> background로 페이지 배경색 설정 가능

 

 

  • <!—내용—> : 주석처리 태그

 

 

  • <h1> : 제목처럼 굵게 표시하는 태그, 1~6 까지 가능하고 숫자가 커질수록 글씨 크기가 줄어든다.

 

 

  • <p> : 문단 태그, 하나의 문단을 표시한다.
    • 해당 태그는 종료 태그없이 돌아가지만, 예상치 못한 오류가 발생할 수 있으니 잊지 말고 표시하자!
    • 속성 
      • style : 내용의 font, color, size 등을 지정할 수 있다. color의 경우 글자색을 변경하고 background color는 글자의 배경색을 변경한다.

 

        • title : tooltip을 보여 준다. 텍스트에 커서를 올리면 확인할 수 있다.
        • ‘’안에 내용을 적으면 “”을 페이지에 보이도록 할 수 있고, “”를 사용하면 ‘’를 보이게 할 수 있다.

 

 

  • <br> : 줄바꿈 태그, 종료 태그 없이 사용 (empty tag)

 

 

 

  • <a> : 링크 태그 content는 링크를 나타낼 내용을 의미한다.
    • 속성 
      • href : 링크가 이동할 목적지

 

 

 

 

  • <img> : 이미지 표시하는 태그 (종료 태그 X)
    • 속성 
      • src : 이미지 경로
      • alt : 이미지를 출력할 수 없을 때, 표시할 내용
      • width : 이미지의 가로 크기
      • height : 이미지의 세로 크기

 

 

 

  • <b> : 글씨를 굵게 하는 태그
  • <i> : italic체로 변경하는 태그
  • <em> : 강조하는 태그, italic효과가 나타나지만,
  • 해당 효과를 나타내기 보다는 특정 단어나 문장을 강조하기 위해 사용
  • <strong> : 글자를 굵게 표시하여 글자를 중요하게 보이는 태그
  • <mark> : marked text, 노란색 형광펜 처리
  • <small> : 글자를 작게 표시하는 태그
  • <del> : 텍스트에 가로줄을 그어 삭제된 내용임을 표시하는 태그
  • <ins> : 텍스트에 밑줄을 긋는 태그
  • <sub> : 아래첨자 태그
  • <sup> : 윗 첨자 태그

 

 

 

 

 

 

 

  • <hr> : content 구분하는 태그, 가로 선으로 구분 -> Horizontal rules

 

 

 

 

 

  • <pre> : enter, space, tab을 활용할 수 있는 태그 -> 즉, 입력한 형태 그대로 웹으로 출력한다.

 

 

 

  • <blockquote> : 인용 태그
    • 속성 
      • cite : 인용문의 출처를 나타낸다. 웹에는 특별히 표시되는 것이 없지만, 검색엔진이 이 주소 정보를 사용할 수 있다.
  • <q> : 짧은 인용구 태그, 해당 부분이 “”로 표시된다.
  • <abbr> : 약자(줄임말)을 나타내는 태그, 커서를 약자에 올리면 뜻이 툴팁으로 나타난다.
  • <address> : 문서나 글의 저자의 연락정보를 나타내는 태그, italic으로 나타나 다른 내용과 구분한다.
  • <cite> : 제목이나 출처를 italic으로 표시하는 태그
  • <bdo> : 텍스트의 방향성을 정의하는 태그 (오->왼, 왼->오)