[목차]
페이지내에서 사용하는 html 태그
1) table 요소
👉🏻행과 열로 구성된 표를 만들 때 사용하는 요소입니다.- <thead> : 표 상단을 담당
- <tbody> : 표의 본문
- <th> : 표 상단 thead의 칸을 나타낼 때 사용
- <tr> : (table row) 행, 한줄
- <td> : (table data) 열, 한 칸의 cell data를 표현
- 행 병합(rowspan) : 줄. 셀을 세로로 합친다. 데이터를 가로 방향으로 읽습니다.
- 열 병합(colspan) : 칸. 셀을 가로로 합친다. 데이터를 세로로 읽을 수 있습니다.
[코드예제1] table
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>table</title> </head> <body> <table border="1"> <thead> <tr> <th>제목</th> <th>내용</th> <th>이름</th> </tr> </thead> <tbody> <tr> <td rowspan="2">안녕</td> <td colspan="2">안녕</td> <!-- <td>안녕</td> --> </tr> <tr> <!-- <td>안녕</td> --> <td>안녕</td> <td>안녕</td> </tr> </tbody> </table> </body> </html>
[코드예제2] table
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>table 예제</title> </head> <body> <h1>여행지 선정</h1> <table border="1"> <thead> <tr> <th>지역</th> <th>이름</th> <th colspan="2">대표 관광지</th> </tr> </thead> <tbody> <tr> <td rowspan="3">전라북도</td> <td rowspan="2">전주시</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> <tr> <td>강원도</td> <td>강릉시</td> <td>강문해변</td> <td>동해</td> </tr> </tbody> </table> <h2>테이블 실습2</h2> <table border="1" style="width: 500px; height: 500px;"> <thead> <tr style="color:blue; font-style: italic;"> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> </tr> </thead> <tbody style="font-weight:bold; text-align: center;"> <tr> <td>1</td> <td rowspan="2">2</td> <td>3</td> <td>4</td> <td colspan="3">5</td> <!-- <td>6</td> --> <!-- <td>7</td> --> <td>8</td> <td rowspan="4">9</td> </tr> <tr> <td rowspan="2">1</td> <!-- <td>2</td> --> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td colspan="2">7</td> <!-- <td>8</td> --> <!-- <td>9</td> --> </tr> <tr> <!-- <td>1</td> --> <td>2</td> <td colspan="3">3</td> <!-- <td>4</td> --> <!-- <td>5</td> --> <td>6</td> <td>7</td> <td>8</td> <!-- <td>9</td> --> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td colspan="4">4</td> <!-- <td>5</td> --> <!-- <td>6</td> --> <!-- <td>7</td> --> <td>8</td> <!-- <td>9</td> --> </tr> </tbody> </table> </body> </html>
2) input 요소
👉🏻사용자가 데이터를 입력하는 요소입니다. type 속성으로 입력 받을 데이터 타입을 정할 수 있습니다.👉🏻속성종류1️⃣ name 속성으로 해당 input의 이름을 명시
2️⃣ value 속성으로 해당 input의 초기값을 명시
- form 데이터를 서버로 전송하면 서버에서 받을 때 name데이터로 받는다. 실제 값은 value값이 들어있다.
3️⃣ label 속성으로 input 태그와 관계(연결)를 맺을 수 있다.
- input 태그가 무엇을 말하는지 제목을 명시할 수 있다.
- label 태그를 사용하면 사용자가 클릭할 수 있는 범위를 확장할 수 있다.
👉🏻[사용방법] label- input 태그 감싸기
- input id속성의 값과 label for속성에 동일한 값을 작성하기
- 사용자 측면에서 label을 사용하는 것이 편하다.
[코드예제] label
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>label</title> </head> <body> <label for="test"> ID : <input id="test"> PW : <input id="test"> </label> </body> </html>
4️⃣ placeholder 속성으로 힌트를 표시한다.
- 사용자가 입력 할 안내문 역할.
- 사용자의 입력 실수를 최소화.
5️⃣ disabled 속성으로 비활성화 한다. 입력 요소를 비활성화 할 수 있다.
6️⃣ readonly 속성으로 읽기 전용한다. 사용자가 입력은 할 수 없지만 읽는 것만 가능한 읽기 전용 필드
👉🏻type 종류- text
- maxlength : 최대길이
- minlength : 최소길이(최소 길이 위반 시, 서버로 전송 거부)
- password
- number
- date
- time
- search
- tel
- PC브라우저에서는 큰 변화가 없어 보이지만, 모바일 기기에서는 키보드 배열이 바뀐다.
- file
- accept : 받을 파일의 종류 설정
- multiple : 여러 파일을 선택할 수 있는 속성
- hidden
- 화면에는 보이지 않지만 서버로 전송되는 요소
- 사용자에게 보여줄 정보는 아니지만, 관리자 / 개발자가 알아야 하는 정보를 hidden 필드에 입력한다.
- radio
- 택 1. 사용자에게 체크 여부를 해당 그룹에서 1개만 입력 받는다.
- 동일한 name 속성을 작성하여 그룹으로 묶을 수 있다.
- value 값은 실제 서버에 전송되는 값 > 코딩 시 영어 또는 숫자로 작성
- checkbox
- 사용자에게 체크 여부를 입력 받는다.
- checked : 초기에 체크되어 있다.
[코드] input (속성, type)
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input name="input-name" value="input-value"> ID : <input placeholder="ID를 입력하세요."> (입력불가)<input disabled> (읽기전용)<input readonly> 텍스트 : <input type="text"> 비밀번호 : <input type="password"> 이메일 : <input type="email"> 숫자 : <input type="number"> 날짜 : <input type="date"> 시간 : <input type="time"> 찾기 : <input type="search"> 모바일 : <input type="tel"> 파일 <input type="file" accept="png" multiple> 보이지않음 <input type="hidden"> <label for="label1"> 선택 1 <input type="radio" name="radio1" id="label1"> </label> <label for="label2"> 선택 2 <input type="radio" name="radio1" id="label2"> </label> 다중 선택 <input type="checkbox"> 다중 선택 <input type="checkbox"> </body> </html>
3) textarea 요소
👉🏻장문의 텍스트 데이터를 받을 때 사용➡️ 너비를 지정하는 cols 속성과 몇줄을 표시할지 정하는 rows 속성을 사용
- cols="20" --> 한글 20글자 너비가 아니라 약 10글자 정도.
4) select 요소
👉🏻사용자가 여러 데이터 중 1개를 선택할 수 있다.➡️ radio와 차이는 드롭 다운 기능을 제공한다.
➡️ option 태그와 함께 사용한다.
➡️ select 태그는 value 속성을 가질 수 없고, name 속성은 가질 수 있다.
➡️ option 태그는 value 속성을 가질 수 있다.
➡️ select 태그에 multiple 속성을 작성할 수 있지만 사용자 입장에서 친절한 화면이 아니다. 사용법을 모를수도 있다.
➡️ 그룹화 - optgroup
- label 속성으로 하위 option들의 이름을 정할 수 있다.
[코드예제] select
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>select</title> </head> <body> <textarea cols="20" rows="5"></textarea> <select name="birthPlace"> <option>::출생지를 선택 해주세요::</option> <option value="seoul">서울</option> <option value="jeonju">전주</option> <option value="gochang">고창</option> </select> <select name="study"> <option>😉함께 배워요😉</option> <optgroup label="frontend"> <option value="HTML">1. HTML</option> <option value="CSS">2. CSS</option> <option value="JS"> 3. JS</option> </optgroup> <optgroup label="backend"> <option value="JAVA">4. JAVA</option> <option value="Python">5. Python</option> </optgroup> <optgroup label="dbms"> <option value="DBMS">6. DBMS</option> </optgroup> </select> </body> </html>
5) form 요소
👉🏻서버에 데이터를 전송하기 위한 태그입니다.➡️ 사용자에게 데이터를 입력 받아 작성된 데이터를 전달 할 수 있습니다.
➡️ 사용자가 웹 사이트로 정보를 보낼 수 있는 대부분의 요소들은 폼이다.
- ex) : 로그인, 회원가입 등
👉🏻공통 속성- name : 폼의 이름을 지정하며 서버에 전송될 데이터의 명칭
- value : 서버에 전송될 데이터의 값
- action : 데이터가 전송되는 URL(경로)
- method : 데이터의 전달 방식을 작성하며 사용자가 입력한 내용을 어떻게 서버에 넘겨줄 것인지 결정
- get : 호출되는 주소에 값을 등록하여 보내는 방식 (검색)
- post : 데이터를 감춰서 서버에 전달한다. (비밀번호)
- enctype : 첨부 파일 전달 시 사용한다. (잘 안씀)
- autocomplete : 자동 완성 기능을 나타내는 속성이며 기본값은 on / off 시 autocomplete = “off”
[코드예제] form
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>form 실습</title> </head> <body> <form name="joinform"> <fieldset> <legend><h1>회원가입 폼 실습</h1></legend> <table border="1"> <thead> <tr> <th>ID</th> <th>PW</th> <th>비밀번호 확인</th> <th>Email</th> <th>Age</th> <th>Gen</th> <th>Addr</th> </tr> </thead> <tbody> <tr> <td><input name="idbox" id="id-box" type="text" placeholder="사용하실 ID를 입력하세요."></td> <td><input name="passwordbox1" id="password-box1" type="password" minlength="8" placeholder="비밀번호"></td> <td><input name="passwordbox2" id="password-box2" type="password" placeholder="비밀번호 확인"></td> <td><input name="emailbox" id="email-box" type="email"></td> <td><input type="number" name="agebox" id="age-box">세</td> <td> <label for="gen-box1"> <input type="radio" id="gen-box1" name="gencheck" value="man">남자 </label> <label for="gen-box2"> <input type="radio" id="gen-box2" name="gencheck" value="woman">여자 </label> </td> <td><input name="addrbox" value="newaddr" id="addr-box" placeholder="주소를 입력해주세요."></td> </tr> </tbody> </table> <button name="joinbox" id="join-box" type="submit">JOIN</button> <button name="resetbox" id="reset-box" type="reset">Reset</button> </fieldset> </form> </body> </html>
6) button 요소
💡이벤트를 발동시키는 태그입니다.👉🏻type 종류➡️ button : 단순한 버튼임을 명시하며, 클릭이 가능한 버튼이다.
➡️ submit : 해당 버튼이 폼 데이터를 전송하는 버튼임을 명시한다.
➡️ reset : 버튼 클릭 시 작성한 폼 데이터를 초기화
7) fieldset 요소
💡form 태그 안에 있는 입력요소와 label을 그룹화합니다. legend 태그는 필수 작성 태그는 아니지만 fieldset의 이름을 지정한다.[코드예제] fieldset + label + input
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>input 실습</title> </head> <body> <fieldset> <legend>일본 여행지 선택</legend> <h3>가고 싶은 여행지를 선택하세요.</h3> <label> <input type="checkbox" name="input-1" value="Tokyo"> Tokyo </label> <label> <input type="checkbox" name="input-1" value="Okinawa"> Okinawa </label> <label> <input type="checkbox" name="input-1" value="Osaka" checked> Osaka </label> <input type="checkbox" name="input-1" value="Sapporo" id="label-1"> <label for="label-1"> Sapporo </label> <h3>여행 구분</h3> <input type="radio" name="input-2" value="single"> 혼자 여행! <input type="radio" name="input-2" value="package"> 패키지! </fieldset> </body> </html>
8) iframe 요소
💡현재 문서(페이지)안에 다른 html문서(페이지)를 삽입합니다.👉🏻[단점]➡️ 보안 측면
- 해커가 해킹용 사이트를 다른 사이트에 집어 넣고, 그 사이트에 사용자가 입력하는 정보를 가로챌 위험이 있다.
➡️ 사용성이 저하
- 사용자 입장에서 하나의 사이트에서 다른 사이트가 또 열리기 때문에 헷갈리 수 있다.
➡️ 검색이 제한
- 로봇이 우리 사이트를 보는데 iframe으로 설정된 페이지는 포함하지 않는다.
9) 인라인, 블록 요소
💡요소가 화면에 출력되는 특성을 크게 2가지로 구분➡️ 블록 요소 : 상자(레이아웃)를 만들기 위한 요소
➡️ 인라인 요소 : 텍스트처럼 취급
➡️ 블록 요소로 구조를 잡고, 인라인 요소로 정보를 전달합니다.
👉🏻블록요소➡️ 기본적으로 레이아웃 작업에 많이 사용하며 특별한 의미는 없고 구분을 위해 사용합니다.
1️⃣ 특징
- 한줄에 한개만 배치 가능
- 기본 너비값이 100%를 차지한다.
- 크기 값을 가질 수 있다.(가로 세로)
- 상, 하, 좌, 우 마진을 가질 수 있다.
2️⃣ 종류
💡div, table, th, td, header, nav, footer, form 등➡️ div(Division)
- 특별한 기능이 없다.
- 어떤 영역을 잡을 때 많이 사용
➡️ h*(Heading)
- 제목을 의미하며 1~6번까지 있다.
- 숫자가 작을수록 더 중요한 제목을 정의한다.
- 웹 표준에서 h1태그는 한 문서에서 1개만
➡️ p(Paragraph)
- 문단을 의미한다
➡️ ul(Unorderd List)
- 순서가 필요 없는 목록을 의미한다.
- li(List item)태그로 각 항목을 작성한다.
➡️ ol(orderd List)
- 순서가 필요한 목록을 의미한다.
- li(List item)태그로 각 항목을 작성한다.
👉🏻인라인 요소1️⃣ 특징
- 한줄에 여러개 배치 가능하다.
- 기본 너비값이 콘텐츠의 너비값
- 크기값을 가질 수 없다.
- 상, 하 마진을 가질 수 없다.
2️⃣ 종류
💡span, a, small, strong 등➡️ span
- 대표적인 인라인 요소
- 특별한 의미는 없고 콘텐츠의 영역을 설정하는 용도
➡️ a(Anchor)
- 다른 곳으로의 링크
- 하이퍼링크를 지정하는 요소이다.
👉🏻필수 속성- href(Hypertext Reference) : 연결할 주소 작성
- target : 링크(페이지)를 여는 옵션
- “_blank” : 웹 접근성을 위한 값. 여러 사용자들이 편리하게 사용하기 위해 “새 창에서 열립니다.”와 같은 문구로 안내를 해야한다.
👉🏻함께 사용하는 address 태그<address> <a href=” “> </address>
- tel : 모바일에서 클릭 시 해당 연락처로 전화 걸기 사용 가능
- mailto : 클릭 시 이메일 전송 화면으로 이동
10 )인라인 블록 요소
➡️ 특징
- 인라인 요소의 특징과 블록 요소의 특징을 같이 가지고 있다.
- 한줄에 여러개 배치 가능하다.
- 크기 값을 가질 수 있다.
- 상, 하, 좌, 우 마진을 가질 수 있다.
➡️ 종류
💡img, input, button 등1️⃣ img(image)
👉🏻필수 속성➡️ 필수 속성을 작성하지 않으면 웹 표준에 어긋난다.
- src(source) : 실제 이미지의 경로를 명시한다.
- alt(alternate) : 이미지가 출력되지 않는 상황 또는 스크린 리더를 사용하는 사용자를 위해 대신 출력할 이미지의 설명을 명시한다.
2️⃣ input
- 사용자로부터 입력을 받는다.
[코드예제] 블록, 인라인, 인라인 블록
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>인라인, 블록, 인라인 블록</title> <style> div { border: 1px solid red; height: 100px; } span { border: 1px solid red; /* width: 500px; 인라인 요소는 크기값을 가질 수 없다*/ /* height: 300px; 인라인 요소는 크기값을 가질 수 없다*/ } img { margin: 50px; } </style> </head> <body> <div></div> <div></div> <div></div> <span>KSMART</span> <span>네이버 홈페이지</span> <span>Goooooooogle</span> <img src="https://cdn.pixabay.com/photo/2016/01/08/11/57/butterflies-1127666__340.jpg" alt="나비 이미지"> <img src="https://cdn.pixabay.com/photo/2016/02/27/06/43/cherry-blossom-tree-1225186__340.jpg" alt="벚꽃 이미지"> <img src="https://cdn.pixabay.com/photo/2017/05/08/13/15/bird-2295436__340.jpg" alt="새 이미지"> <a href="https://www.naver.com">naver</a> <a href="https://www.naver.com" target="_blank">naver(새창에서 열립니다.)</a> <h2>Contact us</h2> <address> 사이트 주소 : <a href="http://www.ksmart.or.kr" target="_blank">KSMART(새 창에서 열립니다.)</a><br> 연락처 : <a href="tel:063-717-1008">063-717-1008</a><br> 이메일 : <a href="mailto:cheetah254@naver.com">cheetah254@naver.com</a> </address> </body> </html>
tag : #웹 #개발 #HTML #태그 #블록 #인라인 #인라인 블록
Uploaded by N2T