LIGHTIXXX

<ul> - 순서가 없는 목록 (Unordered List)

순서가 중요하지 않은 목록을 작성할 때 사용하는 태그.

ex) 상품순서, 메뉴순서 등

<ul>
  <li>첫 번째 상품</li>
  <li>두 번째 상품</li>
  <li>세 번째 상품</li>
</ul>

<ol> - 순서가 있는 목록 (Ordered List)

순서가 중요한 목록을 작성할 때 사용하는 태그.

ex) 실시간 검색어, 요리법 등

<ol>
  <li>물을 끓인다</li>
  <li>스프를 넣는다</li>
  <li>면을 넣는다</li>
</ol>

 ul과 ol의 직계자식은 무조건 li만 가능! 

(실행은 되지만, 웹표준에 어긋남)

<dl> - 설명/정의 목록 (Description List)

1. 용어를 정의할 때 사용하는 태그 

ex) 사전에서 단어와 단어의 뜻

2. key-value로 정보를 제공할 때 사용하는 태그

ex) {이름 : 라이틱스}

 <dl>의 자식요소로는 <dt> <dd> <dfn>이 올 수 있다.

<dt> - 용어 / key 값 (description term)

<dfn> - 의미를 구체적으로 정의내릴 때 (definition)

<dd> - 설명 / value 값 (description data)

🚨 Syntax Alert 🚨

<!-- GOOD -->

<dl>
  <dt>
    <dfn> development </dfn<
  </dt>
  <dd> 1. [u] 발달, 성장 </dd>  <!-- development에 대한 설명 -->
  <dd> 2. [u,c] (신제품의) 개발; 신개발품 </dd>  <!-- development에 대한 설명 -->
</dl>


<dl>
  <dt>라이틱스</dt> <!-- 같은 의미일 때 -->
  <dt>lightixxx</dt> <!-- 같은 의미일 때 -->
  <dd>라이틱스의 블로그입니다.</dd>
</dl>


<dl>
  <dt>라이틱스</dt> 
  <dd>라이틱스의 블로그입니다.</dd> <!-- 같은 의미일 때 -->
  <dd>lightixxx의 블로그입니다.</dd> <!-- 같은 의미일 때 -->
</dl>


<dl>
  <div>
    <dt>사과</dt> 
    <dd>사과에 대한 설명</dd>
  </div> <!--div로 묶기도 가능 -->
	
  <div>
    <dt>바나나</dt>
    <dd>바나나에 대한 설명</dd>
  </div> <!--div로 묶기도 가능 -->
</dl>

<!-- BAD -->

<dt>
  라이틱스 <!-- dt와 dd는 반드시 dl의 자식요소로 존재해야 한다-->
</dt>


<dl>
  <dt>라이틱스</dt>
  <dd>라이틱스의 블로그입니다.</dd>	
  <dt>구글 짱</dt> <!-- 다른 의미인데 따로 설명이 없음 -->
</dl>


<dl>
  <section>
	<dt>사과</dt>
	<dd>사과에 대한 설명</dd>
  </section> <!-- div로만 묶을 수 있음 -->
  <section>
	<dt>바나나</dt>
	<dd>바나나에 대한 설명</dd>
  </section> <!-- div로만 묶을 수 있음 -->
</dl>

이미지를 넣어주는 <img />태그

<img src="경로" alt="대체 텍스트" />

src (source) - 이미지와 파일 경로 지정하기 (필수)

html 문서에서 이미지 파일까지 찾아가기 위한 경로를 지정해야 한다.

<!-- 절대 경로 -->
<img src="http://https://lightixxx.tistory.com/html.jpg" alt="라이틱스의 html 공부" />

<!-- 상대 경로 -->
<img src="../images/html.jpg" alt="라이틱스의 html 공부" />

alt (alternative text) - 이미지를 설명해 주는 대체 텍스트 (필수)

이미지가 불러들여지지 않을 때, 이미지를 설명해주는 대체 텍스트.

혹은 시각 장애인을 위한 화면 리더기가 이미지에 대해 설명해줘야 하기 때문에 반드시 입력해야 한다.

title - 툴팁 표시하기

<a>태그와 마찬가지로 마우스 호버시 툴팁이 노출되게 할 수 있다.

srcset - 다른 환경에서 사용될 이미지 소스를 명시

<img srcset="../images/image1.jpg 1x,
	     ../images/image2.jpg 2x" alt="예시 이미지"/>

width - 이미지의 가로 너비

height - 이미지의 세로 너비