HTML 복습-2 (태그)

📍 Block요소를 가진 태그

<p> 태그

사용 예시

<p>There was once an example from Femley,<br>
 Whose markup was of dubious quality.<br>
 The validator complained,<br>
 So the author was pained,<br>
 To move the error from the markup to the rhyming.</p>

• 일반적인 문단을 구성하거나 문장을 쓸 때 사용한다.
• 다른 태그로 적절히 사용할 수 있을 때는 그 태그를 써야지 p태그를 쓰면 안 된다.
• p태그는 ol태그나 ul태그를 자식으로 가질 수 없다. 문단 사이에 리스트가 필요하면 p태그를 닫고 리스트를 적은 뒤 다시 p태그를 열어 적어야 한다.
• 근데 그럼 너무 수고스럽고 보기도 안 예쁘니까 p태그 대신 div태그로 묶는 것이 낫다.
  
  

<ol> 태그

사용 예시

<p>I have lived in the following countries:</p>
<ol>
  <li>Switzerland
  <li>United Kingdom
  <li>United States
  <li>Norway
</ol>

• 순서가 있는 리스트를 나타낼 때 사용한다.
  
  

<ul> 태그

사용 예시

<p>I have lived in the following countries:</p>
<ul>
  <li>Norway
  <li>Switzerland
  <li>United Kingdom
  <li>United States
</ul>

• 순서가 없는 리스트를 나타낼 때 사용한다.
  
  

<menu> 태그

사용 예시

<menu>
  <li><button onclick="copy()"><img src="copy.svg" alt="Copy"></button></li>
  <li><button onclick="cut()"><img src="cut.svg" alt="Cut"></button></li>
  <li><button onclick="paste()"><img src="paste.svg" alt="Paste"></button></li>
</menu>

• 순서가 없는 리스트이지만 사용자와 상호작용할 수 있는 툴바의 형태이다.
  
  

<li> 태그

사용 예시

<figure>
  <figcaption>The top 10 movies of all time</figcaption>
  <ol>
    <li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
    <li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
    <li value="8"><cite>A Bug's Life</cite>, 1998</li>
    <li value="7"><cite>Toy Story</cite>, 1995</li>
    <li value="6"><cite>Monsters, Inc</cite>, 2001</li>
    <li value="5"><cite>Cars</cite>, 2006</li>
    <li value="4"><cite>Toy Story 2</cite>, 1999</li>
    <li value="3"><cite>Finding Nemo</cite>, 2003</li>
    <li value="2"><cite>The Incredibles</cite>, 2004</li>
    <li value="1"><cite>Ratatouille</cite>, 2007</li>
  </ol>
</figure>

• <ol>, <ul>, <menu> 태그의 자식 태그로 각각의 리스트들을 적을 때 사용한다.
• 순서가 있는 리스트일 때는 예시와 같이 순서를 바꿀 수 있다.
  
  

<div> 태그

사용 예시

<article lang="en-US">
  <h1>My use of language and my cats</h1>
  <p>My cat's behavior hasn't changed much since her absence, except that she plays
    her new physique to the neighbors regularly, in anattempt to get pets.</p>
  <div lang="en-GB">
    <p>My other cat, coloured black and white, is a sweetie. He followed us to the
      pool today, walking down the pavement with us. Yesterday he apparently visited
      our neighbours. I wonder if he recognises thattheir flat is a mirror image of
      ours.</p>
    <p>Hm, I just noticed that in the last paragraph I used British English. But I'm
      supposed to write in American English. So I shouldn't say "pavement" or "flat"
      or "colour"...</p>
  </div>
  <p>I should say "sidewalk" and "apartment" and "color"!</p>
</article>

• 특별한 의미 없이 임의의 공간을 설정할 때 사용한다.
• 즉, css와 함께 자주 사용된다.
• class나 id와 함께 주로 사용된다.
• p태그와 마찬가지로 다른 적절한 태그를 사용할 수 없을 때만 사용하는 것이 좋다.
  
  
  
  

📍 inline요소를 가진 태그

<a> 태그

사용 예시

<a href="https://www.naver.com" target="_blank">네이버</a>

• href 속성을 통해 하이퍼링크를 거는 태그
• 클릭시 다른 사이트로 이동시킬 때 사용한다.
• target 속성을 통해 어느 탭에서 이동할지 정할 수 있다.
  _self는 디폴트값으로 현재 탭에서 이동한다.
  _blank라는 속성값을 넣어주면 새 탭에서 이동한다.
  
  

<img> 태그

사용 예시

<img src="logo.png" alt="로고">

• 정보를 가지고 있는 이미지를 삽입하는 태그
• src속성의 값에 이미지를 삽입할 파일 경로를 입력한다.
• alt속성의 값에 이미지를 출력하지 못했을 경우의 대체 텍스트를 입력한다.(필수)
  
  

<span> 태그

사용 예시

<span style="background-color:red">span</span>

• div태그의 inline 버전
• div태그와 비슷하게 특별한 의미 없이 사용한다. 근데 얘는 inline요소를 가지고 있어 공간 설정도 못한다.
• 얘도 css와 함께 사용된다.
• class나 id와 함께 주로 사용된다.
  
  
  
  

---

📖 참고

https://html.spec.whatwg.org/multipage
엘리스 군장병 AI SW 온라인교육 [입문] 웹 개발 프로젝트
https://ofcourse.kr/html-course/HTML-%EC%9E%85%EB%AC%B8