제목 태그

제목 태그는 문서의 제목과 소제목을 정의합니다. <h1>이 가장 크고 <h6>이 가장 작습니다. <h7>는 존재하지 않으므로 <div> 와 같은 사이즈로 출력됩니다.

<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
<h4>네 번째로 큰 제목</h4>
<h5>다섯 번째로 큰 제목</h5>
<h6>여섯 번째로 큰 제목</h6>


본문 태그

본문 태그는 문서의 주요 내용을 담는 태그입니다.

<p>여기는 본문 영역입니다.</p>


줄 바꿈 태그 (<br>)

<br> 태그는 줄 바꿈을 생성합니다. 주로 문단 내에서 강제로 줄을 바꿀 때 사용합니다.

<p>이 문장은<br>두 줄로 나눠져 있습니다.</p>


수평선 태그 (<hr>)

<hr>태그는 수평선을 삽입합니다. 문단 간의 구분이나 주제 변경 등을 나타낼 때 사용됩니다.

<p>이전 내용</p>
<hr>
<p>다음 내용</p>


강조 태그

<strong>: 스크린 리더 등의 보조 기기를 사용하는 사용자들이 해당 텍스트를 더 강조해서 들을 수 있도록 합니다. 검색 엔진 등은 이 태그를 사용하여 페이지의 중요한 부분을 인식하고 강조합니다.
<b>: 단순히 텍스트를 굵게 표시
<em>: <strong>과 비슷한 의미의 이탤릭체
<i>: 단순히 텍스트를 이탤릭체
<del>: 취소선


목록 태그

순서 없는 목록 (<ul>)

순서가 중요하지 않은 목록을 만들 때 사용합니다. type 속성으로 목록 기호를 지정할 수 있습니다.

  • type 속성: 목록의 기호를 지정합니다. (예: “disc”(default), “square”, “circle”, none)
<ul type="square">
    <li>HTML 복습하기</li>
    <li>운동하기</li>
    <li>Git 명령어 연습하기</li>
</ul>


순서 있는 목록 (<ol>)

순서가 중요한 목록을 만들 때 사용합니다. type, start, reversed 속성을 지정할 수 있습니다.

  • type 속성: 목록의 번호 형식을 지정합니다. (예: “1” (default), “a”, “A”, “i”, “I”)
  • start 속성: 목록의 시작 번호를 지정합니다.
  • reversed 속성: 목록을 역순으로 표시합니다.
<ol type="A">
    <li>우유 180ml를 컵에 넣어주세요</li>
    <li>얼음을 컵에 가득 넣어주세요</li>
    <li>에스프레소 샷을 넣어주세요</li>
    <li>완성! 맛있게 드세요</li>
</ol>

<ol type="i" start="4" reversed>
    <li>마지막 단계</li>
    <li>세 번째 단계</li>
    <li>두 번째 단계</li>
    <li>첫 번째 단계</li>
</ol>


이미지 태그 (<img>)

이미지를 삽입할 때 사용합니다. src 속성으로 이미지 파일 경로를 지정하고, alt 속성으로 이미지 설명을 작성합니다. width, height 둘 중하나만 쓰면 그 비율에 맞춰서 자동 조절되고, 둘 다 쓰면 그에 맞춰서 적용되지만 이미지 비율이 깨질 수 있습니다.

상대 경로를 활용한 이미지 삽입

폴더 위치가 바뀌어도 상대 경로를 유지하면 이미지를 정상적으로 불러올 수 있습니다.

  • ./의 존재유무는 값을 변경하지 않습니다.
<img src="image/sesac.jpeg" alt="새싹" width="300">
<img src="./image/sesac.jpeg" alt="새싹" width="300">


절대 경로를 활용한 이미지 삽입

절대 경로를 사용하면 로컬 환경에서는 어느 곳에서든 이미지를 불러올 수 있지만, 다른 환경에서는 경로가 일치해야 합니다.

  • 확장프로그램을 사용하면 127.0.0.1(localhost)로 전달하기에 절대경로 오류가 생기므로, 디렉토리를 수동으로 찾아 들어가서 C:/~~ 으로 시작하는 주소로 접속하면 정상 출력인 것을 확인 할 수 있습니다.
<img src="/Users/sba/Documents/github/SeSAC_YDP_6/02-html/image/sesac.jpeg" alt="새싹">


링크 태그 (<a>)

하이퍼링크를 삽입할 때 사용합니다. href 속성으로 링크 URL을 지정합니다.

  • target="_self": 현재 탭에서 열기 (default)
  • target="_blank": 새 탭으로 열기
<a href="http://www.naver.com" target="_blank" title="마우스를 올리면 나타나는 제목!">네이버 바로가기</a>
<a href="./html-start.html">HTML 시작하기 공부내용 보기</a>