Image Tag

문서에 이미지를 넣는 태그

HTML의 Image Tag는 문서에 이미지를 마크업할 때 사용하는 태그다.

이 때 사용하고자 하는 이미지가 정보로서 가치가 없을때는 굳이 이미지태그를 사용하기보다는 CSS로 처리하는 것이 Semantic한 Markup이다.

이미지태그는 <img>태그를 사용하며 src, alt속성을 사용해 참조하는 이미지의 주소, 대체 텍스트를 입력한다.

<img src="이미지 참조주소" alt="이미지 대체 텍스트">

이미지 참조방법

이미지의 주소를 입력하는 src속성을 사용하는 방법은 크게 2가지가 있다.

1. 절대주소 (해당 이미지의 주소를 참조)

2. 상대주소 (해당 폴더에서 다른 폴더의 이미지를 참조)

  <!-- 1. 절대주소(해당이미지의 주소복사한 뒤 입력) -->
  <img src="https://img.khan.co.kr/news/2020/10/28/l_2020102901002861100258121.jpg" alt="저녁 노을 사진">
  
  <!-- 2. 상대주소(.:해당폴더에서 images폴더에서 sunflower.png사진을 업로드) -->
  <img src="./images/sunflower.png" alt="해바라기 사진">

alt속성값 작성시 유의사항

1. <img>태그에 이미지에 대해 할말이 없고 정보자체가 큰 의미가 없을때는 alt값을 공백으로 입력하는 것이 더 올바른 마크업이다.

2. <img>태그와 다른 태그를 같이 사용하는데 그 요소가 <img>태그를 설명해주는 태그라면 alt=""속성값은 생략하는것이 좋다.

3. <img>태그에는 빈 공백이여도 src, alt속성값이 반드시 입력되어 있어야 한다.

Lists Tag

요소들을 리스트로 나열하는 태그

HTML의 Lists Tag들은 해당 요소들을 목록으로 나타낼 때 사용하는 태그다.

리스트태그는 순서를 보장하는 유무에 따라 <ol> (Ordered List), <ul> (Unordered List)태그를 사용하며 태그안에 항목을 <li> (List Item)태그로 표현한다.

  <ol>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
  </ol>

  <ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
  </ul>

위 코드를 실행하면 아래와 같은 결과가 출력된다.

리스트태그 사용시 주의사항

<ul>과 <ol>태그 사용시 직계 자식요소는 무조건 <li>태그만 사용이 가능하다.

  <ul>
    <div> 사용 불가능 </div>
    <p> 사용 불가능 </p>
    <li> 사용 가능!! </li>
  </ul>

아래 코드처럼 직계자손에서 <li>태그를 사용하고 <li>태그안에 다른 태그를 사용하는 것은 가능하다.

  <ul>
    <li>
      <a href="https://www.naver.com/">네이버로 이동</a>                
    </li>
    <li>                
      <a href="https://www.daum.net/">다음으로 이동</a>
    </li>
  </ul>

참고 자료

<img> - HTML: Hypertext Markup Language - MDN Web Docs
<ol> - HTML: Hypertext Markup Language - MDN Web Docs
<ul> - HTML: Hypertext Markup Language - MDN Web Docs
<li> - HTML: Hypertext Markup Language - MDN Web Docs