1. 활용! 테그들..

---

1.1. <h1~6> 제목 태그

<!-- 1. 제목 태그(heading) : h1 ~ h6 -->
<h1> 클라우드기반 인공지능서비스 엔니어과정 </h1>
<h2> 담임 : 경남 선생님 </h2>
<h3> 학생 : 송민 교육생 </h3>

---

1.2. 본문 태그

- p 태그(paragraph) :

<p> 내용 </p>
문단을 표현, 가로 한줄의 영역을 전부 차지함. 
개행이 된 것처럼 보인다.

- span 태그

<span> 내용 </span>
- 내가 넣은 컨텐츠 만큼만 영역을 차지 한다.
- 자리가 있다면 가로로 쭉 이어서 배치 한다. 
- 특별한 기능이 없어, '공태그' 라고도 부름
사용 이유? 특정 요소에 접근하기 위해 사용

- br 태그(break)

<br>
- 줄바꿈 (계행) 
- 내용이 없기 때문에 끝태그 생략 가능
- 홀태그 

- hr 태그(horizontal rule)

- 단락간의 구분 태그(컨텐츠 구분) 
<hr size="100px" color="green" width="100px">
    hr 태그 속성
    size : 두께
    color : 색상
    width : 너비(길이)

- bold

<b>내용</b>
- 두꺼운 글자를 만드는 태그, 단순 디자인 용
- CSS로 대체 가능

- strong

<strong>내용</strong>
- 중요한 내용을 강조하고 싶을 때 사용

- i : italic

<i>내용</i>
- 기울임체

- em : emphasized text

<em>내용</em>
강조된 텍스트 

- s : strikethrogh

<s>내용</s>
-  취소선

- super scrip : 위 첨자

<p>X<sup>2</sup> + Y<sup>2</sup></p>
- 제곱을 표현할때 사용

- sub script : 아래첨자

<p> 물 화학식 : H<sub>2</sub>O</p>
- 화학식 구조를 표현할때 주로 사용

---

1.3. 리스트 태그

- ul(unordered list)

<ul type="none">
    <li>정보처리기사</li>
    <li>SQLD</li>
    <li>ADsP</li>
</ul>

- 순서가 없는 목록
- type 속성 : disc, circle, square, none

- ol(ordered list)

<ol reversed start="10" type="1">
    멜론차트 100위
    <li>Perfect Night - 르세라핌</li>
    <li>첫 눈 - EXO</li>
    <li>Drama - 에스파</li>
</ol>

- 순서가 있는 목록
type 속성 : a, A, i, I, 1
start : 시작할 숫자 지정
reversed : 내림차순

---

1.4. 하이퍼 링크 삽입 태그

- a 태그

<a href="https://www.smhrd.or.kr">스마트 인재개발원으로 이동🚀</a>

- 하이퍼 링크를 만들 때 사용하는 태그
- 아직 경로가 정해지지 않을 경우 #을 사용
href 속성 필수 !
href : hyper reference의 약자

---

1.5. 이미지 삽입 태그

- img

- 이미지 가져오기
src(source) : 가져올 이미지의 경로 작성
alt(alterate) : 이미지를 제대로 가지고 오지 못했을 때


- 상대경로 
특정 위치를 기준으로 데이터 경로에 접근하는 방식
     ./ : 현재 폴더 접근, 생략 가능
    ../ : 상위폴더 접근
      / : 루트 폴더(최상위폴더) 접근


1. 내부 경로로 가져오는 방법 : src = "img/img1.jpg"
    <img src = "../img/댕댕이포켓몬.png" 
     	 alt = "이미지가 준비 중 입니다." 
         width="100px">

2. 외부 경로로 가져오는 방법 : src = "이미지 주소 복사"
	<img src="https://i.pinimg.com/564x/5c/58/39/5c5839efe26d76def463e6a19265dcc7.jpg" 
    	 width="100px"
    	 alt="이미지 준비중입니다.">

---

1.6. 테이블 태그

- table

• table 태그의 구조

<!-- 표 형태 (행과 열을 가진 형태) -->
<table border="1" bordercolor="red">
    <caption>뉴진스 정보</caption>
    <!-- 행(가로) 태그 -->
    <!-- table row의 약자 -->
    <tr bgcolor="yellow"  align="center">
        <!-- 컬럼별 제목 태그 -->
        <!-- table header의 약자 -->
        <th width = "50px">나이</th>
        <th width = "100px">이름</th>
    </tr>
    <tr align="center">
        <!-- 컬럼별 데이터 태그 -->
        <!-- table data의 약자 -->
        <td>18</td>
        <td>민지</td>
    </tr>
    <tr align="center">
        <td>18</td>
        <td>하니</td>
    </tr>
    <tr align="center">
        <td>17</td>
        <td>다니엘</td>
    </tr>
    <tr align="center">
        <td>16</td>
        <td>해린</td>
    </tr>
    <tr align="center">
        <td>14</td>
        <td>혜인</td>
    </tr>
</table>

- 태그로 테이블을 구현한다.
border : 테이블 구분 선
align : 글자 중앙 배치
table : 테이블 시작과 끝 구간 설정
caption : 테이블 타이틀
tr : 행의 범위
th : 컬럼명 위치 (table head)
td : 데이터 (table data)

---

1.7. 데이터 전송

- form 태그

• 페이지 간 데이터를 전송할때 form 태그에 담아 보낸다.
• form, value, submit 조합
• action : form 태그 안에 있는 데이터들을 전달하는 url 지정
  (정해지지 않을땐 #을 쓴다.)

<form action="#">
	input 태그의 value = "값1"
    input 태그의 value = "값2"
    input 태그의 value = "값3"
</form>

---

1.8. input 태그

    <input 
        type="text" 
        maxlength="10" 
        placeholder="아이디 입력" 
        value="smhrd123" 
        readonly>
    
    <!-- 비밀번호를 입력할 수 있는 태그 -->
        <input type="password">
        <br>
        <input type="file">
        <br>

        <!-- 색깔 선택 태그 -->
        <input type="color">
        <br>

        <!-- 년, 월, 일, 시간 선택태그 -->
        <input type="datetime-local">
        <br>

        <!-- 년, 월, 일 -->
        <input type="date">
        <br>

        <!-- 중복선택이 가능할때 사용하는 태그 -->
        <!-- name을 food로 통일하는 이유!
            => name 속성은 데이터를 구분하기 위한 속성으로
               치킨 / 피자 / 탕수육을 가지고 올때 '좋아하는 음식'
               이라는 카테고리로 묶어주는 역활 
            
            => 어떤 것을 선택했는지 구분하기 위해서 value 값 지정
            
            -->
        좋아하는 음식 고르기<br>
        치킨🍗   <input type="checkbox" name="food" value="치킨">
        피자🍕   <input type="checkbox" name="food" value="피자">
        탕수육🍤 <input type="checkbox" name="food" value="탕수육">
        
        <!-- 하나만 선택해야하는 경우 사용하는 태그 -->
        <hr>
        성별 선택하기
        <br>
        <input type="radio" name="gender" value="남자">남자
        <input type="radio" name="gender" value="여자">여자
        <!-- radio 버튼을 사용할때는 중복으로 선택되는 것을
            방지하기 위해서 name 속성을 사용 한다.
            * 같은 name 값을 넣어주면 중복선택 x *
        -->
        <br>


        <!-- 범위를 설정하는 태그 -->
        <input type="range">
        <br>


        <!-- 숫자를 입력하는 태그 -->
        <input type="number">
        <hr>


        <!-- 
            통신사선택 select, option 
            리스트 형태로 데이터를 출력해주는 태그들
            1) select
            2) datalist
            차이점 : datalist 따로 입력이 가능하다.
                    select는 선택만 가능하다.
        -->
        통신사 선택
        <select name="Phone">
            <option value="SKT">SKT</option>
            <option value="KT">KT</option>
            <option value="LG">LG</option>
        </select>
        <hr>


        <input type="text" list="song">
        <!-- input에서 사용할 요소를 미리 정의 -->
        <datalist id="song">
            <option value="크리스마스니까"></option>
            <option value="come back home"></option>
            <option value="I am"></option>
        </datalist>
        <br>

        게시글 작성
        <br>
        <textarea name="board" cols="50" rows="5" style="resize: none;"></textarea>
        <hr>

        <!-- submit 버튼 : input 요소의 모든 값을 전송할때 사용 -->
        <input type="submit" value="회원가입">
        <input type="reset" value="초기화">
    

type = "text" : 데이터를 입력할 수 있는 태그
1) placeholder : 미리보기 텍스트 지정
2) value : 기본 값 지정
3) maxlength : 최대 글자수 제한
4) autofocus : 자동 커서 설정
5) readonly : 읽기 전용 설정

---

1.9. 공간분할태그

• 주요 쓰임.
  div : 큰영역
  p : 중간영역
  span : 작은영역

---