01. 표 컨텐츠 - TABLE
데이터 표(<table>)의 행(줄 / <tr>)과 열(칸, 셀(Cell) / <th>, <td>)
열(th,td) : th(헤더, 제목을 나타냄) , td(tr안에 있는 가로줄의 칸수 )
table row - 행(줄) : 행(tr) : tr이 3개: 가로 라인이 3개가됨
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
<!-- table 요소는 td 의 부모요소이다.
css에서 부모요소 코드가 자식위에 있어야함
-->
< table > <!-- 테이블 영역 생성 -->
< tr > <!-- 첫번쨰 줄 -->
< th > 타입 </ th > <!-- 헤더(속ㄷ성)를 의미 -->
< th > 값 </ th >
</ tr > <!-- 첫번쨰 줄 -->
< tr > <!-- 두번째 줄 -->
< td > 알파벳 </ td > <!-- 두개의 칸 -->
< td > A </ td >
</ tr > <!-- 두번째 줄 -->
< tr > <!-- 세번째 줄 -->
< td > 숫자 </ td > <!-- 두개의 칸 -->
< td > 7 </ td >
</ tr > <!-- 세번째 줄 -->
</ table > <!-- 테이블 영역 생성 -->
</ body >
</ html >
결과:
02. 표 컨텐츠 - TH
th- 머리글 칸
abbr - 일에 대한 간단한 설명
headers - 관련된 하나 이상의 id 속성 값
colspan - 확장하려는 열의 수 (기본값 1)
rowspan - 확장하려는 행의 수 (기본값 1)
scope - 자신이 누구의 머리글 칸 인지 명시
col - 자신의 열
colgroup - 모든 열
row - 자신의 열
rowgroup - 모든 행
auto
예시 코드 1
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< table >
< tr >
< th colspan = "2" id = "th-data" > 데이터 </ th > <!--id 값은 일반적이지 않은 값을 사용하면 좋다. -->
</ tr >
< tr >
< th abbr = "Type" scope = "col" headers = "th-data" > 타입 </ th > <!-- abbr= 헤드의 약어 -->
< th abbr = "Value" scope = "col" headers = "th-data" > 값 </ th >
<!-- headers 속성은 자신이 종속되어져있는 자신의 상위 계열의 칸에 연결해서 쓰는 것 -->
</ tr >
< tr >
< td > 알파벳 </ td >
< td > A </ td >
</ tr >
< tr >
< td > 숫자 </ td >
< td > 7 </ td >
</ tr >
</ table >
</ body >
</ html >
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
결과:
코드 2:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< table >
< tr >
< th rowspan = "2" id = "th-data" > 데이터 </ th >
< th headers = "" > 타입 </ th >
< td > 알파벳 </ td >
< td > 숫자 </ td >
</ tr >
< tr >
< th headers = "th-data" > 값 </ th >
< td > A </ td >
< td > 7 </ td >
</ tr >
</ table >
</ body >
</ html >
코드2 결과:
03 표 컨텐츠 - TD
일반 칸을 지정
headers- 관련된 하나 이상의 다른 머리글 칸 ( th에 있는 id 값을 연결
rowspan - 확장(병합)하려는 열의 수 (세로줄이 가로인덱스로 늘어난다)
colspan - 확장(병합)하려는 행의 수 (가로줄이 세로인덱스로 늘어난다)
코드:
main.css 코드 :
table {
border-collapse : collapse ;
}
td {
border : 1px solid red ;
padding : 10px ;
}
th {
border : 1px solid red ;
padding : 10px ;
background-color : lightgray ;
}
결과:
04. 표 컨텐츠 - CAPTION
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< table >
< caption > 데이터 타입과 값 </ caption >
<!-- caption 태그 : 테이블의 제목을 설정 -->
< tr >
< th rowspan = "2" id = "th-data" > 데이터 </ th >
< 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" > A </ td >
< td headers = "th-value" > 7 </ td >
</ tr >
</ table >
</ body >
</ html >
main.css 코드:
table {
border-collapse : collapse ;
}
td {
border : 1px solid red ;
padding : 10px ;
}
th {
border : 1px solid red ;
padding : 10px ;
background-color : lightgray ;
}
결과:
05. 표 컨텐츠 - COLGROUP,COL
표의 열들을 공통적으로 정의하는 컬럼(<col>)과 그의 집합(<colgroup>).
(Column, Column Group)
코드:
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< table >
< caption > 데이터 타입과 값 </ caption >
< colgroup >
< col > <!-- col 태그는 caption 태그 바로밑에 써줘야함 -->
< col style = " background-color: tomato" span = "2" ; >
<!-- span속성을 통해서 확장해서 늘려서 썼기 때문에 열이 3개가 생성 되고 색이채워짐 -->
</ colgroup >
< tr >
< th ></ th >
< th > 타입 </ th >
< th > 값 </ th >
</ tr >
< tr >
< th > 1 </ th >
< td > 알파벳 </ td >
< td > A </ td >
</ tr >
< tr >
< th > 2 </ th >
< td > 숫자 </ td >
< td > 7 </ td >
</ tr >
</ table >
</ body >
</ html >
main.css 코드:
table {
border-collapse : collapse ;
}
td {
border : 1px solid red ;
padding : 10px ;
}
th {
border : 1px solid red ;
padding : 10px ;
}
결과:
06. 표 컨텐츠 - THEAD,TBODY,TFOOT
표의 머리글(<thead>), 본문(<tbody>), 바닥글(<tfoot>)을 지정.
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< table >
< caption > Fruits </ caption >
< colgroup >
< col span = "2" style = " background-color: yellowgreen;" >
< col style = " background-color: tomato;" >
</ colgroup >
< thead > <!-- 머리글 부분(헤더) -->
< tr >
< th > ID </ th >
< th > Name </ th >
< th > Price </ th >
</ tr >
</ thead >
< tbody > <!-- -->
< tr >
< td > F123A </ td >
< td > Apple </ td >
< td > $22 </ td >
</ tr >
< tr >
< td > F098B </ td >
< td > Banana </ td >
< td > $19 </ td >
</ tr >
</ tbody >
</ table >
</ body >
</ html >
결과:
07.양식 - FORM
웹 서버에 정보를 제출하기 위한 양식 범위를 정의.
action : 전송한 정보를 처리할 웹페이지의 URL URL
autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on(기본값)
method : 서버로 전송할 HTTP 방식 GET, POST GET(기본값)
name : 고유한 양식의 이름
novalidate : 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target : 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self (기본값)
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< form action = "/login" method = "GET" novalidate target = "_blank" >
<!--
method: 서버로 데이터를 전송할 때 어떤방식으로 정의해서 보낼것이냐를 정의
get 방식 : 그 정보를 url 에 담아서 전송함
post 방식 : URL 주소에는 정보를 포함하지않지만, 보완해서 전송 ( 일반적)
autocomplete: 자동완성기능, 기본적으로 on 으로 되어있음
novalidate : 유효성검사(테스트 할떄 사용,이메일 형식이 아닐경우에도 에러창 x) boolean 값, 별도의 값 쓰기 필요 x
target="_blank" : 로그인 버튼을 누르고나서 페이지를 현재탭이 아닌 새로운 탭에 생성
target="_self" : 로그인 버튼을 누르고나서 페이지를 현재탭에 생성 (기본값)
-->
< input type = "email " name = "email" >
< input type = "password" name = "password" >
< button type = "submit" > 로그인 </ button >
</ form >
</ body >
</ html >
결과:
08.양식 - INPUT 1
input /> : 빈태그
사용자에게 입력 받을 데이터 양식.
코드 1( form ,input,id 사용 예제)
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< form action = "/login" id = "login-form" > <!-- login 페이지로 전송한다는 뜻 -->
</ form >
<!-- input 태그를 이용해서 기본으로 입력받을 데이터양식을 생성 -->
<!-- form 태그로 데이터양의 범위를 지정 -->
<!--input 태그를 form 밖에쓰면 따로 속성값을 지정해줘야함 -->
<!-- form 속성을 사용해서 두가지를 연결해줌 -->
< input type = "text" form = "login-form" >
</ body >
</ html >
코드2 (maxlength 사용방법)
< body >
< input type = "text" maxlength = "6" >
<!-- maxlength : input 타입의 최대글자수를 의미 -->
</ body >
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< form action = "/login" method = "GET" >
< input type = "email" >
< input type = "password" >
< input type = "submit" value = "로그인" >
<!-- <button>로그인</button> 과 같은 의미를 지님-->
<!-- 입력받은 값을 서버로 제출 하겠다는 의미의 submit을 속성으로 지정
button 으로만해놓으면 서버로 제출이 안됨 -->
</ form >
</ body >
</ html >
결과:
09.양식 - INPUT 2
input /> : 빈태그
사용자에게 입력 받을 데이터 양식.
코드1(name 태그 사용방법)
< form action = "/login" method = "GET" >
< input type = "email" name = "id" >
< input type = "password" name = "pw" >
< input type = "submit" value = "로그인" > <!-- name 속성을 이용해서 데이터의 이름을 설정할 수 있다. -->
</ form >
코드2(readonly)
< input type = "number" value = "1234" readonly >
<!-- input type="number" -> 인풋에 숫자만 입력 가능하다.
value="1234" ->인풋에 기본값이 1234로 지정됨(키자마자 1234가 나온다.)
readonly -> 1234의 값을 읽을 수 만 있고 수정 할 수 없다.
disabled -> 사용자에게 입력받는 데이터방식을 비활성화시킨다. (포커스조차 않음, 비활성화)
-->
코드3(disabled)
< input type = "number" value = "1234" disabled >
<!-- input type="number" -> 인풋에 숫자만 입력 가능하다.
value="1234" ->인풋에 기본값이 1234로 지정됨(키자마자 1234가 나온다.)
readonly -> 1234의 값을 읽을 수 만 있고 수정 할 수 없다.
disabled -> 사용자에게 입력받는 데이터방식을 비활성화시킨다. (포커스조차 않음, 비활성화)
-->
코드4(placeholder)
< input type = "number" placeholder = "숫자를 입력하세요" >
<!-- placeholder : 사용자에게 알려주는 일종의 힌트 -->
코드5(max,min)
< input type = "number" max = "8" >
<!-- 사용자가 입력하는 값의 최대값을 지정함-->
< input type = "number" min = "4" >
<!-- 사용자가 입력하는 값의 최소값을 지정함-->
< input type = "number" step = "4" >
<!-- 사용자가 입력하는 값이 4단위로 오르내림-->
코드6(checked)
< input type = "checkbox" checked >
<!-- 체크할 수 있는 박스가 생김(기본으로 체크가안되어있는 상태) -->
<!-- checked: 기본으로 체크가 되어있게끔 함 -->
코드7(file)
< input type = "file" multiple >
<!-- 파일을 선택해서 불러올 수 있는 창을 만들어냄 (1개)-->
<!-- multiple : 파일을 선택해서 불러올 수 있는 창을 만들어냄 (여러개)-->
코드8(input type="image")
< form action = "/login" >
< input type = "image" src = "images/heropy.png" alt = "HEROPY" >
<!-- input 타입과 함께 쓰는 이미지는
이미지 삽입뿐만 아니라 이미지를 클릭했을시 로그인 페이지로 이어지게끔 할 수 있다. -->
</ form >
코드9(radio)
< input type = "radio" name = "radio1" >
< input type = "radio" name = "radio1" checked >
< input type = "radio" name = "radio1" >
<!-- 체크박스와 유사한 동그란 체크버튼 생성, 체크를 누르면 다시 해제가되지않음.(여러개가 있어야함) -->
<!-- radio는 택1(여러가지중에 하나를 선택) 을 해야할 경우에 사용함 -->
<!-- 원하는 부분에 체크된 상태를 기본값으로 지정할려면 "checked" 속성을 넣어준다. -->
코드10(reset)
< form action = "/login" >
< input type = "text" name = "id" >
< input type = "password" name = "pw" >
< input type = "submit" value = "로그인" >
< input type = "reset" value = "초기화" > <!-- reset 버튼은 기본적으로 자신이 포함되어있는 form 태그 범위안에서 작동하게됨 -->
</ form >
< input type = "text" >
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< form action = "/login" >
< input type = "text" name = "id" >
< input type = "password" name = "pw" >
< input type = "submit" value = "로그인" >
< input type = "reset" value = "초기화" >
<!-- reset 버튼은 기본적으로 자신이 포함되어있는 form 태그 범위안에서 작동하게됨 -->
</ form >
< input type = "text" >
</ body >
</ html >
*결과는 input 1 과 같다.*
10.양식 - LABEL
label> 라벨 가능 요소(labelable)의 제목(Caption). for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. 라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea> 코드1(label) <!-- 라벨 가능 요소를 참조 --> <input type="checkbox" id="user-agreement"/> <label for="user-agreement" >동의하십니까?</label> <!-- for 라는 속성을 제거하게되면, 글자를 눌러도 체크가 되지않음 --> <!-- 라벨 가능 요소를 포함 --> <label><input type="checkbox" />동의하십니까?</label> <!--label: 체크박스를 만들고, 체크박스옆에있는 글자를 눌러도 체크박스가 눌러질 수 있게 함 --> 코드2(search) <label > 검색<input type="search"> <!-- 검색이라는 한글 키워드만 클릭해도 검색창에 포커스가 됨 --> </label>
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< label >
검색 < input type = "search" > <!-- 검색이라는 한글 키워드만 클릭해도 검색창에 포커스가 됨 -->
</ label >
</ body >
</ html >
11.양식 - BUTTON
선택 가능한 버튼을 지정. 코드1(인풋 태그, 버튼: 초기화) 코드2(인풋,태그, 버튼:리셋1) 코드3(버튼과 자바스크립트 클릭창 )
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< button onclick = " doit ()" > 클릭 하세요! </ button >
< script >
function doit (){
alert ( '클릭 했습니다!' );
/* doit 이라는 이름의 함수를 생성,실행시 알림창이 뜨면서 alert의 내용이뜸
조건:클릭 하세요! 라는 문구를 클릭해야함 (클릭시 do it 함수를 실행 )
*/
}
</ script >
</ body >
</ html >
결과:
12.양식 - TEXTAREA
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< textarea rows = "6" placeholder = "설명을 입력하세요!" ></ textarea >
</ body >
</ html >
결과:
13.양식 - FIELDSET,LEGEND
같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정.
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< 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 >
<!--
radio: 택1을 하게함
label :
fieldset: 그룹안에 있는 양식을 그룹화함
-->
</ body >
</ html >
결과:
14.양식 - SELECT, DATALIST, OPTGROUP, OPTION
옵션(<option>, <optgroup>)의 선택 메뉴(<select>)나 자동완성(<datalist>)을 제공. 코드1(select) 코드2(optgroup)
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< input type = "text" list = "fruits" >
<!-- list 라는 속성을 이용해서 데이터리스트의 아이디값을 연결해서 사용 -->
< datalist id = "fruits" > <!-- 데이터리스트의 아이디값과 리스트의 값이 동일해야함 -->
< option > Apple </ option >
< option > Orange </ option >
< option > Banana </ option >
< option > Mango </ option >
< option > Fineapple </ option >
</ datalist >
</ body >
</ html >
결과:
15.양식 - PROGRESS
작업의 완료 진행률을 표시.
코드1(Progress)
< body >
< progress value = "70" max = "100" > 70 % </ progress >
<!-- 현재 진행률 = 70 , 최대가 100 이기때문에 70%를 의미 -->
< progress value = "0.7" > 70% </ progress >
<!-- max값을 적지않을 경우, value에 0과1사이중에 하나를 표시해야함 -->
</ body >
코드:
<! DOCTYPE html >
< html lang = "ko" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< link rel = "stylesheet" href = "./main.css" >
</ head >
< body >
< progress value = "0" max = "100" > </ progress >
</ body >
</ html >
결과:
