• div는 블록형식으로 선택된 요소 내용전체를 감싸는 태그이다
• 은 라인형식으로 선택된 요소를 각각 감싸는 태그이다

리스트

실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/2-2.html

ui

순서가 없는 리스트를 작성할때 를 사용한다

<ui>
			<li> 오렌지
			<li>사과
			<li>포도
</ui>

이런식으로 ui태그안에 li 태그를 감싸 사용한다

출력결과는

• 오렌지
• 사과
• 포도

이다

ol

순사가 있는 리스트를 사용할때는

태그를 사용한다

<ol>
      <li>오렌지</li>
      <li>사과</li>
     <li>포도</li>
</ol>

ol태그 안에 li태그를 감싸 사용한다

출력결과는

1. 오렌지
2. 사과
3. 포도

이다

dl

태그는 용어를 정의 : 해설 하는 형태로 표현되는 리스트이다

정의 할때는

단어

해설은

해설로 표현한다

<dl>
          <dt>과일은</dt>
          <dd>
            오렌지 포도 사과가 있다 </dd>
            <dt>색깔은</dt>
            <dd>각각 주황 보라 빨강이다</dd>
</dl>

출력결과는

과일은

오렌지 포도 사과가 있다

색깔은

각각 주황 보라 빨강이다

로 나오게된다.

img태그

실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/2-3.html

img태그는 <img src="" alt="" width="" hight=""> 로 구성된다

• src안에는 이미지의 값
• alt에는 간단한 이미지의 설명 (시각장애인을 위한 설명)
• width는 가로값 hight는 세로 값을 입력하면 된다
• 이미지 값의 경우 가로값, 세로값을 하나만 입력하면 그 값을 기준으로 이미지의 크기를 조절하게 되고

두가지 값을 모두 입력하면 그 값으로 크기를 조절한다

절대경로 상대경로

경로에는 절대경로와 상대 경로가 있다

./ → 현제 페이지가 있는 폴더

../ → 상위 폴더

../../→상위의 상위 폴드

폴더명/이미지명 → 하위폴더에 갈시에는 하위폴더의 폴더위치를 입력

절대경로의 경우에는 정확한 이미지의 위치를 입력해야 한다

table 태그

표 태그는 셀로 만들어져있다

실행결과 : https://hana78786.github.io/Study_hana/bostcourse_htmlcss/2-4.html

• <td>,<th>:데이터 셀
• <tr> : 행
• <table> : 표

표 만들기

<table>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td>
    </tr>
    </table>

먼저 <table> 태그로 감싸고 그 안에

<tr>태그를 입력하여 한 줄을 만든다

<tr>태그 안에 입력한 <td> 태그만큼 셀이 생긴다

위에 입력한 태그대로 표를 만들면 행 4개 열 4개의 표가 생긴다

테이블의 구조

• : 표의 제목
• : 제목 행을 그룹 - 제목 행에서는 td태그를 쓰지 않고 th태그를 써서 첫 행을 구성한다. 자료의 기준이 되기 때문이다
• : 본문 행을 그룹
• : 바닥행을 그룹

위 태그들은 표의 구조를 제목/본문/바닥 으로 구분하여 자료를 출력하거나 색인하기 쉽도록한다.

각각의 구조를 만든 뒤 구조 안에 똑같이 표의 셀을 태그로 입력해주면 표가 완성된다.

<table>
      <caption>Monthly Savings</caption> <!--제목이 출력된다-->
      <thead>
        <tr>
          <th>Monthly</th><th>Savings</th> <!--기준이 되는 첫째줄-->
        </tr>
      </thead>
      <tbody> <!--본문 태그-->
        <tr>
          <td> January</td><td>$100</td> <!--내용이 두줄이기에 tr태그가 2개 입력되었다 -->
        </tr>
        <tr>
          <td>Febrary</td><td>$80</td>
        </tr>
      </tbody>
      <tfoot> <!--마지막 줄 내용을 정리하는 부분이 들어간다-->
        <tr>
          <td>Sum</td><td>$180</td>
        </tr>
      </tfoot>
    </table>

출력값

Monthly Saving

Monthly	Saving
January	$100
Febrary	$80
Sum	$180

셀의 병합

• colspan : 셀을 가로방향으로 병합
• rowspan : 셀을 세로방향으로 병합

<table>
      <caption>Monthly Savings</caption>
      <thead>
        <tr>
          <th>Monthly</th><th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> January</td><td>$100</td>
        </tr>
        <tr>
          <td>Febrary</td><td rowspan="2">$80</td> <!--아래 셀 2개를 병합한다-->
        </tr>
        <tr>
          <td>March</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Sum</td> <!--오른쪽 셀 2개를 병합한다-->
        </tr>
      </tfoot>
    </table>

출력값



form

form의 활용법에 대해 알아보자

input

text

text 박스를 활용하는 방법이다. 이 input박스를 활용하면 텍스트를 입력할수있다

<input type="text”>로 입력한다

password

비밀번호를 입력하는 방식이다 이 방식으로 입력하면 입력값이 숨겨진다

<input type="password”>로 입력된다.

radio

여러개의 선택지 중 단 한개의 값만을 선택할수있는 input타입이다

<input type="radio”> 를 입력하면 된다 다만 묶어야할 그룹값을 동일하게 선언해야 한가지만 선택이 가능함으로

<input type="radio" name="그룹값”> 반드시 name에 동일 그룹값을 선언해야한다.

Checkbox

중복으로 선택할수 있는 타입이다

<input type="checkbox”>를 입력하면 된다, 이 경우에도 중복선택을 원하는 그룹값을 동일하게 해야 하기때문에 name에 그룹값을 선언해야 한다

<input type="checkbox" name="그룹값">

placeholder

입력값을 입력하기 전에 기본적으로 보여지는 값이다

실제 값을 입력하면 사라진다

태그 안에 <input type="text" placeholder="입력값"> 이렇게 선언해주면 입력값이 보이게 된다

checked

기본적으로 체크될수 있게 하는 값이 태그 안에 이 값을 넣으면 기본값으로 체크된다

<input type="radio" name="gender" value="" checked> 이렇게 마지막에 입력시키기만 하면된다.

활용법

<h1>Form 관련 요소</h1>
  아이디 :  <input type="text" name="" value="" placeholder="영문으로만 써주세요">
<!--placeholder를 입력해두었다-->
  <br>
  비밀번호 : <input type="password" name="" value="" placeholder="">
<!--인풋타입이 password이기때문에 입력값이 가려진다-->
  <br>
성별 : 남성 <input type="radio" name="gender" value="" checked> 
<!--checked가 들어가있기때문에 남성이 기본 체크값이 된다-->
여성 <input type="radio" name="gender" value=""> 
기타 <input type="radio" name="gender" value=""><br>

취미 : 영화감상<input type="checkbox" name="hobby" value=""> 
음악감상<input type="checkbox" name="hobby" value=""> 
독서<input type="checkbox" name="hobby" value="">

출력값



• 출력값이 보기 좋게 하기위해 체크박스와 비밀번호는 일부러 입력했다 초기 상태에는 입력되어있지 않다.

botton

다양한 버튼타입에 대해 알아보자

submit

데이터를 서버에 제출해주는 버튼이다

<input type="submit" name="" value="이름값">

벨류안에 이름값을 적어주면 버튼 위에 그 이름이 출력된다.

File

파일을 불러오는 버튼이다

<input type="file”> 그림이나 문서 파일등을 서버에 업로드 할때 사용한다.

Button

일반적인 버튼이다, 특별한 값을 입력해주지 않을시에는 버튼의 형태 외에는 기능이 없다.

<input type="button" name="" value="이름">

마찬가지로 벨류값이 이름을 적어줘야 버튼위에 이름이 출력된다

Reset

지금까지 입력한 값을 초기화 시키는 버튼이다.

문서안에 있는 모든 입력값을 초기화시킨다.

<input type="reset" name="" value="이름"> 밸류값을 입력해야 버튼에 이름이 나타난다.

Image

이미지로 버튼을 만든다. 그 외에는 Button과 다를것이 없다.

<input type="image" src="이미지주소" width="출력할 이미지크기" height="" alt="설명글">

활용법

사진등록 : <input type="file" name="" value=""><br>
<input type="submit" name="" value="전송"> <input type="reset" name="" value="취소">
<input type="button" name="" value="등록"><br>
<!--벨류값에 출력될 버튼의 이름을 지정하였다-->
<input type="image" src="./button.png" width="100px" height="" alt="다운로드" name="" value="">

출력값



Select

select는 여러개의 목록중에서 하나를 선택하는 값이다

그 안에 option태그를 넣어 목록을 생선한다 option태그 안에 selected값을 넣으면 기본 선택값이 된다.

<select>
  <option>선택1</option>
  <option>2</option>
  <option>3</option>
  <option selected>4</option>
</select>



Textarea

textarea는 긴 문장을 입력하여 전송할수 있는 텍스트 칸이다.

text에 비해 많은 문장을 전송하는것이 가능하다

<textarea name="이름값" rows="표시할 텍스트창의 줄의 길이" cols="한줄에 입력가능한 글자의 길이" placeholder="입력전 기본출력값"></textarea>

rows와 cols를 사용하여 텍스트칸의 길이를 조절할수있다.

입력한 칸의 길이보다 더 입력이 가능하다

Button

button의 값은 input의 버튼과는 다르게 작동된다

input은 html안에 있는 버튼의 형식을 빌려오지만 button은 작동은 비슷하게 되나 다른 여러가지 모양으로 출력이 가능한 장점이 있다.

<button type="submit" name="button">전송</button>

같은 submit버튼이라도 Button태그는 닫힘 태그안에 버튼에 출력할 값을 입력하여 그대로 출력되게 한다

활용법

주소 : <select>
  <option>경기</option>
  <option>서울</option>
  <option>강원</option>
  <option selected>제주</option> <!--이 값이 기본선택된다-->
</select>  <br><br>
자기소개 : <textarea name="int" rows="8" cols="80" placeholder="자기소개는 짧게 해주세요"></textarea>
<!--textarea의 크기는 줄은 8줄이며 한 줄에 80자를 입력할수있는 크기이다 입력전 기본값이 출력된다-->
<br>
<button type="submit" name="button">전송</button>
<button type="reset" name="button">초기화</button>
<!--전송과 초기화 버튼은 input태그와 기능이 동일하지만 버튼 태그 안에 값으로 형태가 출력된다-->

출력값



Label

라벨요소는 선택하는 체크박스나 텍스트 박스를 그 앞에 소개 하는 값과 연동시키는 것이다

예를 들어 라디오박스로 체크하는 성별의 경우

성별 : <label for="male">남성</label> <!--남성의 lable값을 male로 지정하였다-->
<input type="radio" id="male" name="gender" value="" checked>
<!--라디오박스의 id값을 동일하게 적용하였다-->
 <label for="female">여성</label>
<input type="radio" name="gender" id="female" value="">
 <label for="other">기타</label>
<input type="radio" name="gender" id="other" value="">

라벨값을 <label for="id값">으로 지정한 뒤 그 뒤에 오는 값의 id를 동일하게 하면

라벨로 지정한 값만 선택하여도 그 뒤에 체크박스, 텍스트 박스 ,라디오 박스의 값이 선택된다

Filedset/Legend

이 태그는 폼의 값을 구분지어주는 태그이다.

사용법은 그다지 어렵지 않지만 설명하기가 복잡해 전체 태그를 사용하여 출력하는 값을 보여둘까 한다.

반드시

 <fieldset>
<legend>필드의 이름</legend>
내용요소
</fieldset>

으로 필드셋(부모태그) 안에 레젠드(자식태그)를 입력해야 한다.

<h1>Form 관련 요소</h1>
    <fieldset> <!--필드셋 태그를 시작한다-->

    <legend>필수정보</legend> <!--필드셋태그안에 레젠드 태그를 넣어준다-->

  <label for="userid">아이디 : </label> <input type="text" id="userid" value="" placeholder="영문으로만 써주세요">
  <br>
  <label for="pass">비밀번호 :</label> <input type="password" id="pass" value="" placeholder="">
  <br>
성별 : <label for="male">남성</label><input type="radio" id="male" name="gender" value="" checked> <label for="female">여성</label><input type="radio" name="gender" id="female" value=""> <label for="other">기타</label><input type="radio" name="gender" id="other" value=""><br>
 
 </fieldset>
<!--필드셋 태그를 종료한다-->

<fieldset> 
<!--필드셋 태그를 시작한다 위와는 다른 필드이다-->
  <legend>부가정보</legend> <!--레젠드 태그로 필드의 이름을 선언한다-->

취미 : <label for="movie">영화감상</label><input type="checkbox" name="hobby"id="movie" value=""> <label for="music">음악감상</label><input type="checkbox" id="music" name="hobby" value=""> <label for="book">독서</label><input type="checkbox" name="hobby" id="book" value=""><br>
사진등록 : <input type="file" name="" value=""><br>
<input type="submit" name="" value="전송"> <input type="reset" name="" value="취소">
<input type="button" name="" value="등록"><br>
<input type="image" src="./button.png" width="100px" height="" alt="다운로드" name="" value=""><br>
주소 : <select>
  <option>경기</option>
  <option>서울</option>
  <option>강원</option>
  <option selected>제주</option>
</select>  <br><br>
자기소개 : <textarea name="int" rows="8" cols="80" placeholder="자기소개는 짧게 해주세요"></textarea>
<br>

</fieldset> <!--필드셋 태그를 종료한다-->

<button type="submit" name="button">전송</button>
<button type="reset" name="button">초기화</button>

출력값



필드셋 태그 안에 레젠드정보가 감싸져 만들어진다.

Form

form태그는 입력된 값을 전송하는 태그이다,

post/get으로 구성되며

get의 경우 내가 입력한 값이 그대로 파일정보에 노출되기때문에 회원가입등의 정볼르 입력했을때는 반드시 post값으로 전송해야 한다

<form class="" action="index.html" method="post">
<!--action은 내가 입력한 값을 전송할 주소이다, method는 post값으로 전송하였다-->
<!--개인정보 등의 민감한 값이 아닐때는 get으로 바꾸어 전송한다-->

      아이디:<input type="text" name="id" value=""><br>
      비밀번호:<input type="password" name="" value=""><br>
      <input type="submit" name="" value="전송">

    </form>

실행결과 :
https://hana78786.github.io/Study_hana/bostcourse_htmlcss/2-5.html
https://hana78786.github.io/Study_hana/bostcourse_htmlcss/2-6.html