[패캠 네카라쿠배 2기 도전] HTML/ 요소 - 표 콘텐츠&양식

출처 https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

 

 

1. 표 콘텐츠 

표를 만들 수 있는 전체 예제 

1)Table 

표의 영역

table{display: table} 

=> 블록, 인라인 요소 아님

but 블록 요소와 가장 유사

 

2) tr(table row) 

줄, 행을 만든다 

(1)tr을 먼저 만든다 

(2)그 안에 th,td로 칸을 만든다

 

3)TH 

제목(table head), 칸 속 내용이 아니라 제목, 두꺼운 글씨

머리글 칸을 지정

 

속성 = 값 

abbr 열(th)에 대한 간단한 설명 

headers 관련된 하나 이상의 다른 머리글 칸 id  속성 값(다른 th랑 연결하고 싶을 때 사용) 

colspan 확장하려는(병합)열의 수 (셀과 셀을 더해 새로운 셀을 만드는) = 1(기본값, 2부터는 n개를 병합한 것) 

rowspan 확장하려는(병합) 행의 수 (행과 행을 더해 새로운 행을 만드는) = 1 (기본값, 2부터는 n개를 병합) 

scope 자신이 누구의 머리글 칸인지 명시.

만약에 header가 왼쪽에 있으면 내용이 오른쪽으로 연결되어 있을 것이기 때문에 이를 인지하기 위해 scope를 사용

 - col : 자신의 열

 - colgroup : 모든 열

 - row : 자신의 행

 - rowgroup : 모든 행 

 => 모두의 기본값은 auto

 

4)TD : 일반적으로 td 사용 (table data)

=> th, td는 display: table-cell(칸)

=>칸을 만들 때 사용한다 

headers 관련된 하나 이상의 다른 머리글 칸 id  속성 값(다른 th랑(다른 td와는 안됨) 연결하고 싶을 때 사용)

colspan 확장하려는(병합)열의 수 (셀과 셀을 더해 새로운 셀을 만드는) = 1(기본값, 2부터는 n개를 병합한 것) 

rowspan 확장하려는(병합) 행의 수 (행과 행을 더해 새로운 행을 만드는) = 1 (기본값, 2부터는 n개를 병합) 

= 여기까지 구조를 만들어준다 

 

cf. id는 너무 일반적이지 않은 것을 쓴다 

 

ex. <table> 

<tr>

 <th colspan = "2" id="th-data">데이터</th> => colspan으로 숫자 2를 적으면

자신이 존재하는 셀을 기준으로 몇칸을 확장해서 병합하는지 정해줄 수 있다

</tr>

  <tr> => 열 3개 

      <th abbr="Type" scope="col" headers = "th-data">타입</th> => 두꺼운 글씨 

      <th abbr="Value" scope="col" headers = "th-data">값</th> 

           => headers는 자신이 종속되어 있는 상위 개념 id를 값으로 가짐으로써 종속 관계를 나타낸다

  </tr> 

  <tr>

      <td>알파벳</td>  => 각각에 칸 2개

      <td>A</td> 

  </tr>

  <tr>

      <td>숫자</td>

      <td>7</td>

  </tr>

 </table>

 

표처럼 보이게 하기 위해서는 css로 선을 그려주면 된다

각각의 칸 사이사이에 여백이 존재. 이를 없애기 위해 

table{ border-collapse : collapse; }

td{

    border: 1px solid red,

    padding: 20px

}

th{ 

border: 1px solid red,

    padding: 20px,

background-color: ligthgray

} 

 

cf. 부모 요소는 항상 자식 요소보다 위에 두어야 유지 보수 가능

 

cf. header를 왼쪽으로 두어 표를 만들 수 있다

태그를 바꾸는 것이 아니라 

<table> 

     <tr> 

         <th rowspan="2" id="th-data"> 데이터</th> => 셀이 아니라 줄이 이어져야 하니까 rowspan

         <th headers = "th-data" id="th-type"> 타입 </th> 

         <td headers = "th-type"> 알파벳 </td> 

         <td headers = "th-type> 숫자 </td> 

      </tr> 

      <tr> 

         <th headers = "th-data" id="th-value"> 값 </th> 

         <td headers="th-value"> 알파벳 </td> 

         <td headers="th-value"> 숫자 </td> 

      </tr>

</table>

예전에는 "테이블 코딩"이라고 레이아웃을 잡기 위해 table을 썼지만 요즘은 CSS로 레이아웃을 잡아야 한다. 

여기서는 id와 headers를 일일히 연결시켰지만 그럴 필요는 없다 

 

나머지는 꾸며주는 용도

 4)Caption 

-표의 제목을 설정 

 -열리는 table 태그 바로 다음에 작성해야 함. 

 -<table>당 하나의 <caption>만 사용 가능

 - {display: table-caption}

ex.

<table> 

   <caption>데이터 타입과 값</caption> 

=> 테이블의 상단 부분에 추가되는 이름(table바로 밑이어야)

 

 5)colgroup, col

- 표의 열들을 공통적으로 정의하는 컬럼 <col> - 한개, 빈태그

- 그의 집합 <colgroup> - 여러 개 

- 속성 = 값

span = 숫자 (기본값 1, 연속되는 열 수)

colgroup{display: table-column-group}; 

col{display: table-column};

=> display는 크게 상관이 없다. 

 

ex. 

<table>

<caption> 데이터 타입과 값</caption>

<colgroup>

<col style="background-color: tomato" > => 첫번째 열 전체 부분에 색상이 들어간다

(아래 th마다 style을 넣은 것과 같은 효과)

<col> => 여기에 style을 넣으면 두번째 열 전체 부분에 색상이 들어간다 

<col>

 </colgroup>

---------------------------------------------------------------------------------------------------

<colgroup>

<col style= "background-color: tomato" span="2"> => 첫번째, 두번째 열 부분에 색상이 들어간다

 

(아래 th마다 style을 넣은 것과 같은 효과)

<col>

</colgroup>

=> col이 여러개 있으면 <col style = "", span = "n">으로 원하는 개수의 col(열)에 style을 입힐 수 있다

 

=> col을 묶어주는 태그 colgroup

=> 이때 아래 태그들에 background-color가 지정되어 있지 않아야 가능함

 

 <tr> 

    <th style="background-color: tomato"></th>

    <th>타입</th> 

    <th>값</th>

</tr>

  <tr>

      <th style="background-color: tomato">1</th>

      <td>알파벳</td>  => 각각에 칸 2개

      <td>A</td> 

  </tr>

  <tr>

      <th style="background-color: tomato">2</th>

      <td>숫자</td>

      <td>7</td>

  </tr>

 </table>

=> ex. 첫번째 열 부분 전체를 한가지 색으로 하고 싶으면 전체 열들을 한번에 제어할 수 있는 col,colgroup 태그로 사용한다 

 

 

6)thead, tbody, tfoot

표의 머리글, 본문, 바닥글을 지정 

기본적으로 테이블의 레이아웃에 영향을 주지 않고(시각적으로) 의미만 있다 

thead는 머리글 th부분

tbody는 머리글에 해당하는 값의 부분

tfoot는 바닥글

 

2. 양식에 해당하는 태그들

1)form 

: 웹 서버에 정보를 제출하기 위한 양식 범위를 정의

여러 입력 양식들을 form태그로 wrapping.

특정한 입력 양식에 들어간 정보를 특정 페이지 주소로 전송하도록 설정 가능

ex. 네이버 로그인에 한꺼번에 입력한 id, password를 서버에 정보를 제출해 다른 페이지로 움직이게 하는 등

- form이 다른 form을 자식 요소로 포함할 수 없음. 

 

속성 = 값 

action = url 전송한 정보를 처리할 웹페이지의 url 

autocomplete = on, off(기본값: on) 사용가자 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

method = GET, POST(기본값: GET) : 서버로 전송할 HTTP 방식 

 - GET : email, password에 대한 정보가 url에 담겨져서 넘어가는 거 

 - POST : url에 포함되어 있지 않지만 전송된 정보를 뜯어보면 있다 그러므로 개인 정보 보호를 위해 POST 방법을 쓴다 

            (실제 사이트는 이를 암호화해서 보낸다 =) 

name = 서버에 정보를 제출할 때 다른 form태그가 있다면 정보를 구분하기 위해 부여하는 고유한 양식의 이름

novalidate : 서버로 데이터 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 (정해진 데이터가 맞는지 아닌지) : 테스트할 때 많이 사용 

target = _self, _blank (기본값: _self)

마찬가지로 action에서 지정해준 url로 페이지가 바뀔 때 현재 탭, 다른 탭을 할지 정해준다

cf. a 태그에서 target - a 태그로 내보내는 페이지를 현재에 띄울지 다른 탭에 띄울지 정해줬음

블락요소 

 

2)<input/>

사용자에게 입력받을 데이터 양식

속성 = 값 

autocomplete  = on(기본), off : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 

autofocus = 불린 : 페이지가 로드될 때 자동으로 포커스 - 문서 내 고유해야 함(하나만 포커스할 수 있다) 

checked = 불린:  양식이 선택되었음을 표시 (type 속성 값이 radio, checkbox일 경우만 사용할 수 있다) 

form : <form>의 id 속성 값(form태그를 쓰지 않고 밖에서 사용하는 방법)  해당 <form>의 후손이 아닐 경우만 

name: 양식의 이름 (해당 데이터에 이름을 지정해준다) 

type(매우 중요): 입력 받을 수 있는 데이터의 종류 

cf. type의 value들 : button(일반 버튼), checkbox, file, text, email, password, submit

 

 

3)label

라벨 가능 요소의 제목 

- 1)for 속성으로 라벨 가능 요소를 참조하거나 2)콘텐츠로 포함 

: <button>, <input>, <progress>, <select>, <textarea>

- 체크박스를 쓸 때 글자를 클릭하고도 체크가 되는 경우: 

<label>

또는 <label for = ""> 

-인라인 요소

 

속성    의미 

for      참조할 라벨 가능 요소의 id 속성 값

 

<!-- 라벨 가능 요소를 참조 -->

<input type="checkbox" id="user-agreement" /> => input태그가 여기서 끝난다

<label for="user-agreement">동의하십니까?</label>  => 그러므로 for 속성이 없으면 위의 input과 아무 상관 없는 태그가 되어 버린다. 그러므로 for 속성으로 지칭하고 싶은 태그의 id를 값으로 가져야 한다

<!-- 라벨 가능 요소를 포함 -->

<label><input type="checkbox" />동의하십니까?</label> => for 속성을 사용하지 않는 방법. <label>로 감싸준다

 

4)button 

선택 가능한 버튼을 지정.

속성             의미                                                값                              특징

autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)	문서 내 고유해야 함
disabled	버튼을 비활성화	불린(Boolean)
form	<form>의 id 속성 값 : button이 form 태그 내부에 존재하지 않을 때  id를 연결하면 된다		해당 <form>의 후손이 아닐 경우만
name	폼 데이터와 함께 전송되는 버튼의 이름
type	버튼의 타입	button(일반적인 용도면 명시할 필요 없다),  reset(초기화 용도 버튼),  submit(제출 용도)

button { display: inline-block; }

 

ex. input과 button이 동일한 기능을 할 수 있다

<input type = "reset" value = "초기화">

<button type = "reset">초기화</button>

 

- button이 기능을 하려면 JS이 필요 

<button onclick = "doit()">클릭하세요</button>

 

<script>

  function doit() {

       alert('클릭했습니다!'); 

        } 

</script>

 

 

5)textarea

 

여러 줄의 일반 텍스트 양식.

 

속성            의미                                                                   값            기본값   특징

autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
autofocus	페이지가 로드될 때 자동으로 포커스	불린(Boolean)		문서 내 고유해야 함
disabled	양식을 비활성화	불린(Boolean)
form	<form>의 id 속성 값			해당 <form>의 후손이 아닐 경우만
maxlength	입력 가능한 최대 문자 수	숫자(Number)	무한
name	양식의 이름
placeholder	사용자가 입력할 값의 힌트			내용을 입력하기 전에 있 고 삭제하면 다시 나타난다
readonly	수정 불가한 읽기 전용	불린(Boolean)
rows	양식의 줄 수	숫자(Number)	2

textarea { display: inline-block; }

- <textarea rows= "6"></textarea> 

: 기본적으로 글씨를 입력할 수 있고 2줄까지 보인다

rows 속성으로 더 보일 수 있는 줄의 수를 조절할 수 있다

오른쪽 하단 화살표로 확대 축소 가능하다 

 

 

6)fieldset,legend

같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정.

<form>

  <fieldset>

     <legend>Coffee Size</legend>

     <label>

          <input type="radio" name="size" value="tall" />

           Tall

     </label>

<label>

     <input type="radio" name="size" value="grande" />

     Grande

</label>

<label>

         <input type="radio" name="size" value="venti" /> Venti

</label>

</fieldset>

</form>

cf. type = "radio" : 택1 

 

 

fieldset, legend { display: block; }

 

<fieldset>

같은 목적의 양식을 그룹화.

속성                의미                                                                                         값

disabled	그룹 내 모든 양식 요소를 비활성화	불린(Boolean)
form	그룹이 속할 하나 이상의 <form>의 id 속성 값
name	그룹의 이름

 

7)select, datalist, optgroup, option 

 

<select>, <datalist>, <optgroup>, <option>

옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공.

 

<select>

<optgroup label="Coffee">

<option>Americano</option>

<option>Caffe Mocha</option>

<option label="Cappuccino" value="Cappuccino"></option>

</optgroup>

 

<optgroup label="Latte" disabled>

<option>Caffe Latte</option>

<option>Vanilla Latte</option>

</optgroup>

 

<optgroup label="Smoothie">

<option>Plain</option>

<option>Strawberry</option>

<option>Banana</option>

<option>Mango</option>

</optgroup>

</select>

 

select { display: inline-block; } datalist { display: none; } optgroup, option { display: block; }

 

<select>

옵션을 선택하는 메뉴.

속성                의미                                                                                    값                  기본값

autocomplete	사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부	on, off	on
disabled	선택 메뉴를 비활성화	불린(Boolean)
form	선택 메뉴가 속할 하나 이상의 <form>의 id 속성 값
multiple	다중 선택 여부 : ctrl을 누르고 선택하면 2개 이상된다. ctrl shift면 선택된 두 option사이 다 선택	불린(Boolean)
name	선택 메뉴의 이름
size	한 번에 볼 수 있는 행의 개수	숫자(Number)	0(1이 보이는 것과 같음)

 

<select name = "fruits" size ="3"> 

<option> Apple </option> 

<option>Orange </option> 

<option> Banana </option> 

</select>

 

<optgroup>

<option>을 그룹화.

선택목록이 너무 많으면 정리하기 위해 사용할 수 있다 

따로 넣으면 선택할 때 나눠서 보인다

label도 넣으면 보인다

 

속성                          의미                                                                    값

label	(필수)옵션 그룹의 이름
disabled	옵션 그룹을 비활성화	불린(Boolean)

 

<option>

선택 메뉴(<select>)나 자동완성(<datalist>)에서 사용될 옵션.

• 선택적 빈(Empty) 태그로 사용 가능.

속성           의미                                        값                      특성

disabled	옵션을 비활성화	불린(Boolean)
label	표시될 옵션의 제목 (화면에 표시될)		생략되면 포함된 텍스트를 표시
selected	옵션이 선택되었음을 표시 (화면에 가장 먼저 보여지는 것)	불린(Boolean)
value	양식으로 제출될 값		생략되면 포함된 텍스트를 값으로 사용

=> 태그 내용으로 label, value 대체 가능

<option>Apple</option> 

<option  label="Apple" value="Apple"></option>

=> 위 아래가 같다. 빈태그의 형식으로 쓰고 싶으면 아래와 같이 쓴다. 

 

<datalist>

<input>에 미리 정의된 옵션을 datalist로 지정해서 자동완성(Autocomplete) 기능을 제공하는 데 사용.

• <input>의 list 속성 = "<datalist>의 id" 
• <option>을 포함하여 정의된 옵션을 지정.

<input type="text" list="fruits">

=> input태그에 아래 datalist에 있는 내용을 자동완성 기능으로 제공을 하겠다

 

<datalist id="fruits">

<option>Apple</option>

<option>Orange</option>

<option>Banana</option>

<option>Mango</option>

<option>Fineapple</option>

</datalist>

 

8)progress

<progress>

작업의 완료 진행률을 표시. 로딩바. 

속성       의미                      값                         특징

max	작업의 총량	숫자(Number)
value	작업의 진행량	숫자(Number)	max 속성을 생략할 경우 0~1 사이의 숫자여야 함

value는 가변하기 때문에 JS로 많이 표현한다

<progress value="0" max="100">70 %

<script> 

     const progress = document.querySelector('progress') => 위 태그를 찾는다

     const interval = setInterval(function(){ 

            progress.value += 10; => value값을 10씩 더한다

            if (progress.value >= 100) clearInterval(interval);  => value가 100이 되면 1초에 한번씩 커지는 행위 스탑

}, 1000) => 1초에 한번씩

</script> 

 

 

<progress value="70" max="100">70 %</progress>

<progress value="0.7">70 %</progress>

=> 위와 아래가 같다

=>태그 내용(태그 사이 내용)은 화면에 나타나지 않는다 

 

progress { display: inline-block; }