HTML 기본 태그

주석

<!-- 주석영역 -->

<!-- 여러줄 주석1
여러줄 주석2
여러줄 주석 3 -->

---

h1 ~ h6

• h1 ~ h6 6단계로 제목을 나타냅니다.
• h1이 가장 크며 h6이 가장 작습니다.
  

    <h1>첫 번째 제목입니다.</h1> <!-- 디자인과 의미 분리. 태그=의미-->
    <h2>두 번째 제목입니다.</h2> <!-- <h1> 태그는 블록요소 -->
    <h3>세 번째 제목입니다.</h3>
    <h4>네 번째 제목입니다.</h4>
    <h5>다섯 번째 제목입니다.</h5>
    <h6>여섯 번째 제목입니다.</h6>

---

p

• 단락(문단)을 정의합니다.
• 단락이 끝나면 한줄이 띄워져 표시됩니다.
  

    <p>
        <!-- <p>는 문단 -->
        구하지 원대하고, 튼튼하며, 인생을 피다. 놀이 가장 가는 봄바람이다.
        새가 대고, 이상의 때문이다. 천자만홍이 날카로우나 인류의 끓는 찾아다녀도,
        <br>
        위하여, 이것이다. 하는 그림자는 창공에 굳세게 인도하겠다는 그와 위하여서.
      ![](https://velog.velcdn.com/images/msnine/post/8e7dcddc-a708-458d-a24f-99ddb02551a4/image.png)
  눈에 인생에 못할 안고, 열락의 것이다. 없으면 얼마나 영락과 무엇을 크고 것은
        싸인 뛰노는 이 힘있다.
    </p>

---

hr

• 주제별 구분을 정의합니다.
• 컨텐츠를 분리하거나 변경을 정의하는데 사용합니다.
  

  <hr> <!-- 선을 그리기 위한 태그가 아니라 앞뒤의 내용이 관련 없을 때 사용-->

---

blockquote

• 다른글을 인용할때 사용합니다.
• 주로 긴글을 인용할 때 사용합니다.
• 블록태그로 인용내용이 줄바꿈 되어 표시됩니다.

    <blockquote>
        <!-- 인용 표현(블록. 줄바꿈) -->
        대한민국은 한반도 남부에 있는 ~~
        국화는 무궁화이다.
    </blockquote>

---

q

• 단락(문단)을 정의합니다.
• 주로 짧은 글을 인용할 때 사용합니다.
• 인라인태그로 같은 줄 에 표시됩니다.

<q>별과 이상 앞이 청춘의 희망의 같이 뜨고, 너의 가치를 그리하였는가?</q>

---

strong

• 테스트에서 중요성, 심각성, 긴급성의 단어에 사용합니다.
• 화면에 굵은 글씨로 표시됩니다.
• 음성으로 읽어줄 경우 볼륨이나 톤을 달리해서 표현할 수 있습니다.

---

em

• 텍스트를 강조할때 사용합니다.
• 화면에 이탤릭체로 표시됩니다.
• 음성으로 읽어줄 경우 볼륨이나 톤을 달리해서 표현할 수 있습니다.

---

ol

• 순서가 필요한 목록(ordered list)을 만들때 사용합니다.

<li> </li> 태그와 같이 사용합니다. 

    <ol>
        <!--순서 있는 리스트-->
        <li>입사지원</li> <!-- List Item-->
        <li>서류전형</li>
        <li>1차면접</li>
        <li>적성검사</li>
        <li>최종면접</li>
        <li>신체검사</li>
    </ol>

---

ul

• 순서없는 목록(ordered list)을 만들때 사용합니다.

<li> </li>태그와 같이 사용합니다.

    <ul>
        <!--순서 없는 리스트. 나열-->
        <li>HTML</li>
        <li>CSS</li>
        <li>JAVA</li>
        <li>Oracle</li>
        <li>JavaScript</li>
        <li>Spring Framework</li>
    </ul>

---

img

• 웹 문서에 이미지를 불러올때 쓰는 태그입니다.
• 단일 태그이며, 속성값이 필요합니다.
  

   <img src="img/jung.jpg" alt="프로필이미지">

---

img 경로

절대경로: 어떤 기준위치 부터 표시하는 방식  루트( / )

<img src="C:\javaStudy\workspace_front\front01\img\profile.jpg“>
<img src="/javaStudy/workspace_front/front01/img/profile.jpg“>
<img src="https://www.google.com/logos/“>

상대경로: 자신의 위치로 부터 표시하는 방식  현재위치( ./ ) 또는 (표시없음)

<img src="./img/profile.jpg" >
<img src="img/profile.jpg" >

상위폴더 이동

<img src="../../../profile2.jpg" >

---

a

• 다른 웹페이지로 연결해주는 태그입니다.
• 속성값이 필요합니다.

<a href=“./ex02.html” target=“_blank”>

<a href=“./ex02.html” target=“_self”>