리스트

특징 : 블록레벨

1. 순서가 없는 목록 (unordered list)
   type(disc, circle, square)

   <ul>
	  <li></li>
   <ul>

2. 순서가 있는 목록(ordered list)
   type(1, A, a, I, i)

   <ol>
	  <li></li>
   <ol>

3. 개요 목록 : description list : description term : description description

<dl>
  <dt>오픈</dt>
  <dd>2021.09.17</dd>
</dl>

<결과>

오픈 2021.09.17

텍스트효과

특징 : 인라인레벨

종류 
1. 굵게 : <strong></strong>
2. 기울임 : <em></em>
3. 밑줄 : <ins></ins>
4. 취소선 : <del></del>
5. 형광펜 : <mark></mark>
6. 윗첨자 : <sup></sup>
7. 아래첨자 : <sub></sub>

그림 image

특징 : 인라인레벨

<ima alt="일요일" src="../../image.png">

상대경로 사용한 식.
-현재폴더 : .
-상위폴더 : ..

width와 height 하나만 지정 가능

링크

 링크 만들기 
   1. 인라인 레벨
   2. <a></a>
   3. 주요 속성
       1) href : 링크 경로 작성
       2) title : 풍선 도움말 (마우스를 대면 나타나는 메시지)
       3) target : 어떤 창으로 이동할 것인지 
             (외워두기)
               (1) _self : 현재 창으로 이동(디폴트)
               (2) _blank : 새 창으로 이동

<a href = "#"> 비어 있는 링크1</a>

<a href="javascript : void(0)"> 비어있는 링크2(완전 아무일도 없음)</a>
        <!-- 경로를 모를 때(?) 경로를 빈칸으로 해놓음  -->
        <!-- 개발할 때 이거 있으면 아 개발을 아직 다 못 했구나!하면됨 -->

비어 있는 링크1
비어 있는 링크2(완전 아무일도 없음)

<!-- 웹 링크  -->

<a href="https://www.google.com" target="_self">구굴</a>
<a href="https://www.naver.com" target="_self">네이버</a>

구굴
네이버

<!-- 이미지 링크  -->
<a href = "https://www.naver.com">  
	<img src = "../../images/naver.png" width="200px">
</a>

<!-- 파일 링크  -->
<a href="01_overview.html">오버뷰</a>

<!-- 같은 문서 안에서 이동하기 -->
<!-- id 속성 : HRML 구성요소를 식별하기 위한 속성, 죽봉이 없어야함 -->
<p>
    <a href="#image">이미지</a><br>
    <a href="#content">내용</a><br>
    <a href="#description">세부사항</a>
</p>


<p ID="image">
    <img src="../../images/apple.jpg" width="1000px">
</P>
<p id="content">
    맛있는 사과가 한 개 1000원<br>
</p>

<p id = "description">
    원산지 : 청송 사과 <br>
    품종 :  부사<br>
</p>

1. 이미지 일부에 링크를 생성
2. <img> 태그와 <map> 태그를 사용 
3. 사용 방법
    <img src = "이미지경로" usemap="#map이름">
    <map name= "맵이름"
    <area shape="모양"  href="링크경로" coords="좌표"  -- 네모난 링크, 동그란 링크
</map>
1) shape 속성 : rect(사각형 링크), circle(원 링크)
2) coords 속성 
    <area shape = "rect" coords = "시작x, 시작y, 종료x, 종료y">
    <area shape = "circle" coords="중심x, 중심y, 반지름"
          
<img usemap="#domino_event" src="../../images/dominopizza.jpg">
<map name="domino_event">
    <area shape ="rect" href = "https://web.dominos.co.kr/goods/list?dsp_ctgr=C0101" coords="300,2015,900,2170">
    <area shape="circle" href ="https://web.dominos.co.kr/gate" coords="820,640,80">

</map>

테이블

특징 : 블락레벨

<table>
    <caption>표 제목</caption>
    	 <thead : 생략가능>
      		 <tr : 행 만들 때 사용하는 태그>
        		 <th : 굵게+가운데 정렬>내용</th>
             </tr>
    	 </thead>
  
  		 <tbody : 생략불가능, 생략해도 자동으로 만들어짐. 크롬 f12에서 확인>
         	<tr>
              <td : 머리몸통꼬리 모두 사용가능>내용</td>
            </tr>
	     </tbody>
  
  		<tfoot>
			<tr>
              <td>내용</td>
            </tr>
       </tfoot>
</table>
   

3. 셀 병합 
    1) <th> 또는 <td>태그에서 사용
    2) colspan 속성 : 열병합, 좌우 셀 병합 (로우스펜보다 많이 씀)
        (1) <td colspan="2"> : 현재 셀과 오른쪽 셀을 병합 
        (2) <td colspan="3"> : 현제 셀과 오른쪽 2개 셀을 병합
    3) rowspan 속성 : 행 병합, 상하 셀 병합
        (1) <td rowspan="2" : 현재 셀과 아래쪽 1개 셀을 병합
        (2) <th rowspan="3" : 현재 셀과 아래쪽 2개 셀을 병합

기타 테이블 관련 태그 
    1. <caption>
        1) <table> 태그의 하위 태그 
        2) 테이블의 제목을 작성할 수 있는 태크 
    2. <colgroup>
        1) <thead>, <tbody>, <tfoot> 태그의 하위 태그 
        2) 열 단위로 공통 스타일(꾸미기,css:스타일지정하는거) 작업을 수행할 수 있는 태그