Basic HTML Overview

인프런의 HTML+CSS+JS 실전 퍼블리싱 강의를 듣고 정리한 게시물입니다.

💡HTML5 핵심 태그 사용법(문단, 텍스트 서식)

• 제목 표시하기: h1~h6
• 문단, 줄 바꿈: p, br
• 글자 굵게 표시하기: b, strong
-strong만 시각장애인에게 '강조하라는 의미'가 전달된다.
• 글자 기울림 표시하기: em, i
• 글자 밑줄 표시하기: u
• 글자 취소선 표시하기: s, del
-del만 시각장애인에게 '취소선' 의미가 전달된다.
• 큰 글자, 작은 글자 표시하기: big, small
-html기본 폰트 크기는 16pixel인데, 이 기본 pixel을 기준으로 조금 크게 조금 작게 만든다.
• 위 첨자, 아래 첨자: sup, sub
-순서(1st)나 화학식(H2O) 표현할 때 사용된다.
• 형광펜 배경색 글자: mark
• 수평선 넣기: hr
• html은 대소문자 구분을 하지 않는다.

💡목록 만들기

• 순서가 있는 목록: ol(ordered list) > li
• 순서가 없는 목록: ul(unordered list) > li
-대부분 ul을 사용한다.
• 중첩된 목록을 만드는 경우에는 부모 리스트의 마감 태그 안쪽에 중첩된 자식 리스트를 작성해야 한다.
  

  <ol>
          <li>방콕 쇼핑 리스트</li>
          <li>방콕에서 반드시 들러야 할 베스트
              <ul>
                  <li>씨암(Siam)</li>
                  <li>카오산 로드(Khaosan Road)</li>
              </ul>
          </li>
          <li>방콕 맛집 리스트</li>
          <li>방콕 관광 리스트</li>
      </ol>

💡링크, 이미지

• 외부 링크나 파일 링크하기: a(anchor tag)

▶️링크를 클릭하면 현재 페이지에서 바로 링크 걸린 페이지로 넘어가게 하기

<a href="http://www.naver.com">Naver</a>

▶️링크를 클릭하면 새 페이지에서 링크 걸린 페이지 열기 (target="_blank")

<a href="http://www.naver.com" target="_blank">Naver</a>

▶️링크에 마우스를 올리면 글씨가 나타나게 하기

<a href="http://www.naver.com" title="네이버 사이트로 이동">Naver</a>

• 이미지 첨부하기: img

<img src="http://placecorgi.com" alt="an adorable puppy">

+) img는 마감 태그가 없다!

• 이미지를 a 태그로 감싸기

  <a href="http://www.naver.com"><img src="http://placecorgi.com" alt="an adorable puppy"></a>