[코딩자율학습] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(3.1-3.5)

• HTML은 공식적으로 150여 개의 태그를 지원하고 있다. 모든 태그와 속성 정보를 알고 싶다면 www.w3.org
• hn 태그 : 제목이나 주제를 나타내는 텍스트를 표현
  • <h1> Title </h1>
  • 1부터 6까지 있고 숫자는 중요도를 나타낸다 h1이 제일 중요하고 h6가 중요도가 낮다
  • 숫자 건너뛸 수 없다 (h1,h2,h3 가능 h1,h3,h4 불가능)
  • SEO 검색 엔진에서 상위에 랭크될 수 있도록 마크업을 작성하는 것, hn 태그로 작성된 텍스트는 검색 엔진에서 키워드로 인식 
• p 태그 : paragraph를 작성할 때 사용
  • <p>내용</p>
• br 태그 : 줄 바꿈 태그 
  • <br>
• blockquote : 인용한 문단 단위의 텍스트를 작성할 때 사용
  • <blockquote cite="출처 URL">문단 단위 인용문</blockquote>
• q 태그 : 텍스트 단의의 짧은 인용문을 작성할 때 사용
  • <q cite="출처 URL"> 인용문</q>
• ins 태그 : 추가된 텍스트, 밑줄(하단 이미지)
  • <ins> 추가된 내용 </ins>
• del 태그 : 삭제된 텍스트, 취소선(하단 이미지)
  • <del> 추가된 내용 </del>

• sub 태그 : 아래첨자 (하단 이미지)
  • _{아래 첨자}
• sup 태그 : 위 첨자 (하단 이미지)
  • ^{위 첨자}

 

 

GROUP

• div 태그 : 블록요소와 인라인 요소를 그룹으로 묶을 때 사용
  • <div> </div>
• span 태그 : 인라인 요소를 그룹으로 묶을 때 사용
  • <span> </span>

LIST

• ul 태그 : unordered list, 비순서형 목록, 글머리 기호

<ul> 추가된 내용

  <li>목록 내용</li>

  <li>목록 내용</li>

  <li>목록 내용</li>

</ul>

• ol 태그 : ordered list, 순서형 목록, 번호가 붙는 리스트

<ol> 추가된 내용

  <li>목록 내용</li>

  <li>목록 내용</li>

  <li>목록 내용</li>

</ol>

• dl 태그 : description list, 정의형 목록, 용어설명
• dt : description term, dd : description detail

<dl> 

  <dt>용어</dt>

  <dd>용어 설명</dd>

</dl>

 

 

LINK

• a 태그 : 내부나 외부 링크를 생성
  • <a herf="대상경로" target="링크연결방식" title="링크설명"> </a>
  • href : 대상경로의 주소(URL)이거나 내부 문서의 id 속성값
  • target : 새 창으로 열기인 _blank를 제외하고 거의 사용하지 않음, 생략가능
  • title : 생략가능

IMAGE

• img 태그 : 이미지 객체를 삽입하고 싶은 경우
  • <img scr="이미지경로" alt="이미지설명"> 
  • src : source, 웹 브라우저에서 실행되는 HTML 파일의 위치가 기준
  • ./ 현재폴더 ../ 상위폴더 ../../ 상위폴더의 상위폴더
  • alt : 이미지 객체를 설명할 수 있는 텍스트

IMAGE LINK

 

<a herf="대상경로">

  <img scr="이미지경로" alt="대체 텍스트"> 

</a>

 

img 태그 : 이미지 객체를 삽입하고 싶은 경우

 

• strong 태그 : 이미지 객체를 삽입하고 싶은 경우
  • <strong>중요한 의미가 있는 텍스트</strong>
• em 태그 : 기울어짐으로 강조하고 싶은 경우
  • <em>중요한 의미가 있는 텍스트</em>

 

---

 

링크를 만드는 거까지는 성공했는데 링크에서 왜 길벗홈페이지로 가지 않는 것인가.

 

 

블로그 글 쓰다가 알아차렸다. ;와 :를 구분 잘 합시다..