-
[3회차] HTML-②HTML 2021. 5. 31. 07:34
강의명 : 오픈프레임워크 활용 디지털융합 SW엔지니어 양성 과정
강의날짜 : 21.05.25
<html>
1. block레벨과 inline레벨
block레벨은 자체 박스, 여백, 자체 새 줄(new line)을 만들면서 실행한다.
inline은 자체 새 줄로 시작하지 않는다. 그리고 inline레벨은 block레벨을 감쌀 수 없다.
이 둘의 너비는 100%로 모바일 최적화 상태이다.
즉, 창 크기에 따라 너비가 저절로 그 창에 맞춰 조절된다.
사진이나 글자는 inline 레벨로 한글은 한 글자 단위, 영어는 단어 단위로 조절된다.
Block 레벨 ul, dd, div, li, ... Inline 레벨 a, br, span, tt, ... *div와 span
non-semantic이다. 즉, 속성을 가지고 있지 않는다.
다른 요소들을 감싸는 역할만 해준다.
의미를 정의하고 싶으면 style에서 속성을 부여한다.
div는 contents를 가질 수 있지만 그 밑을 잘라버린다는 의미를 가지고 있다.
span은 낱개 개체를 하나로 묶어주는 것이다.
이 둘은 display를 정의해주기 위해 묶어주는 것으로 한마디로 그 목적이 식별자를 주기 위함이다.
id와 class 속성을 가질 수 있는데, 이 둘은 속성을 부여하는 것이 아니라 이름을 부여하는 것이기 때문이다.
이름을 가져야 css에서 스타일 재정의가 가능하다.(css랑 javascript에서 다른 이름으로 부를 수 있게 해준다.)
그래서 이 둘을 이름 정의 속성이라고도 한다.
* block 레벨 : 자체 새 줄을 만들면서 실행한다.
- <p> 레벨 : 위, 아래 여백이 존재한다.
- <div> 레벨 : 위, 아래 여백이 존재하지 않는다.
* inline 레벨 : 자체 새 줄로 시작하지 않는다.
inline 레벨인 span은 block 레벨의 개체들을 감쌀 수 없다.
만약 div나 p를 span에 넣으려면 그 속성을 css에서 바꿔서 span에 넣어주어야 한다.
즉, css가 html의 속성을 고쳐주는 것이다.
html의 우선 순위를 잘 파악하여 css에서 조절해야 한다.
child 계층 (contents)부분의 우선순위가 가장 높으므로 직접 그 대상에 가서 조절을 하더지 아니면 parent에게 가서 조절해주어야 한다.
* #의 쓰임
<a> 북마크 selector id이름 속성 16진수 색상 코드 2. 레이아웃
태그 설명 header 시작, 두문, 로고, 메뉴가 많이 들어감
보통 브랜드명이 많이 들어간다.nav 외부 링크로 통하는 링크들을 모아둔 섹션이다. footer 저작권, 회사명, 회사주소 등을 기재 div section, article, aside 대신 그냥 다 div로 묶음 * tabindex 속성
tab키를 통해 메뉴 선택에 접근이 가능하도록 한다. 즉, 접근성 속성이다.
마우스를 쓸 때 불편한 경우를 고려한 것이다.
옆의 속성값은 tab키를 눌렀을 때 접근하는 순서이다.
3. form
: 서버와의 대화 양식
속성명 설명 name 이름 정의 속성=서버가 부르는 이름! method 데이터 전송 방식 속성 action 보낸 데이터를 받을 페이지
실제 수행을 할 데이터를 처리할 페이지 경로form 태그는 블록 레벨이다.
form 안의 control 요소들은 99% 인라인 레벨이지만 fieldset은 block레벨이다.
폼 요소들은 자체적으로 키보드로 접근이 가능하다.
구현한 순서대로 키보드 접근이 가능하며, 만약 순서를 주고 싶다면 tabindex 속성을 사용해야 한다.
보이지 않는 form 영역이 table을 감싸고 있는 것이다.
태그명 설명 label java의 label과 같음. 소제목같은 역할 input 입력용 tag. 폼 요소의 90%가 input tag이다.
type속성으로 어떤 타입을 입력받을 것인지 확인한다.legend fieldset의 제목 fieldset 필드들을 묶어주는 용도 textarea java의 textarea와 같음. 자체 스크롤 기능이 있다. * label 태그를 사용하는 방법
① for속성을 담는 방법
② label 시작 tag와 종료 tag로 묶어서 표시
* label 태그의 접근성
label 태그로 묶은 대상은 그 라벨을 클릭해도 입력 커서가 생겨난다.
위의 예제처럼 체크박스와는 다르게 라디오버튼은 해당 영역을 클릭만 해도 라디오버튼을 활성화시킬 수 있다.
즉, 접근성을 엄청나게! 높여줄 수 있다.
input 태그의 type 속성값 설명 textfield 텍스트 입력란 radio 라디오 버튼(단일 선택)
그래서 모두 같은 name을 가진다.checkbox 체크 박스(다중 선택)
name이 같아도 되고 달라도 상관없다.submit 서버로 전송. value 속성으로 화면에 표시할 내용 기재 reset 작성한 내용 clear. value 속성으로 화면에 표시할 내용 기재 password 비밀번호. 눈에 보이면 안 되서 지정 특수문자로 가림 email 이메일. @가 필요하며 그 뒷부분까지 있어야한다. tel 전화번호. 숫자만 입력되도록 한다.
단, 그 데이터자체는 string이다.4. 제약조건
속성명 설명 required 필수항목 autofocus 자동 커서 이동(접근성 향상) minlength 최소 길이 maxlength 최대 길이 placeholder 어떤 내용이 들어가야 하는지 필드 안에 미리 써주는 것
접근성을 높여줌제약조건(=유효성 체크)이 있는 경우에는 먼저 form에서 막아주고, 다음에 JSP서버페이지에서 2차로 막아주고
마지막으로 DB에서 다시 막아주어야 한다. 절대로 DB에 제약조건에 어긋난 데이터가 들어갈 수 없도록!
5. select 태그
java의 콤보박스와 비슷하다.
단일 선택이지만 multiple 속성이 있으면 다중 선택이 가능하다.
안에 아이템이 있어야 하기 때문에 option태그가 존재한다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>제목</title> <style type="text/css"> table, tr, td {border : 1px solid #666; border-collapse: collapse;} td { padding : 10px;} </style> </head> <body> <h3>폼 요소</h3> <form name="form1"> <label for="sel1">크기 선택 : </label> <select name = "sel1" id="sel1"> <!--java의 combobox와 같다--> <option value ="">SIZE</option> <option value ="la">LARGE</option> <option value ="me">MIDDLE</option> <option value ="sm">SMALL</option> </select><br><br> <label for="sel2">색상 선택 : </label> <select name = "sel2" id="sel2" multiple><!--java의 list와 같다--> <option value ="wh">White</option> <option value ="kh">Khaki</option> <option value ="br">Brown</option> <option value ="bl">Black</option> <option value ="or">Orange</option> </select><br><br> 수량 : <input type ="number" min="1" max="10" value="1" name="umun"> <br><br> 날짜 : <input type ="date" name="udate"><br><br> 시간 : <input type ="time" name="utime"><br><br> 검색 : <input type ="search" name="usearch"> </form> </body> </html>form control요소들에게는 name을 준다.
그리고 어떤 값이 선택되었는지 value 속성은 필수로 준다.
input태그의 type 설명 number min(최소값), max(최대값), value(현재값) 속성 사용 가능 date 달력 time 시간 search 검색창 image 이미지를 넣어서 버튼 메뉴를 만듬.
alt, hight 속성 줘야함
submit기능만 가능
number 
date 
time 
search 6. file 속성
input 태그의 type속성의 속성명 중 하나이다.
file첨부가 가능하도록 버튼이 생기고 버튼을 누르면 탐색기가 열린다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>제목</title> <style type="text/css"> table, tr, td {border : 1px solid #666; border-collapse: collapse;} td { padding : 10px;} </style> </head> <body> <h3>폼 요소</h3> <form> 파일 선택 : <input type="hidden" value="숨김"><br><br> <input type="file"><br><br> <input type="file" multiple><br><br><!--여러 개 첨부 가능--> <input type="file" accept="image/*"><br><br> <input type="file" accept="image/*" multiple><br><br> <input type="submit" value ="확인"><br><br> <input type="button" onclick="alert('Hello Web!')" value="Click"><br><br> </form> </body> </html>
* accept 속성 = "image/*"
: image파일만 첨부할 수 있도록 한다.
그 외의 파일은 애초에 뜨지 탐색기에 뜨지 않도록 하는 것이다.
이런 기술 방식을 mime type이라고 한다.(웹에서는 가장 좋은 방식)
type/subtype 설명 text/plain 서식이 없음 /* all * type="hidden" 속성값
: 고객은 데이터를 보면 안 되지만 개발자는 볼 수 있어야 한다.
그래서 value 속성에 값을 받아올 수 있는 객체를 넣는다.
* type="button" 속성값
: 서버와 대화하기 위한 용도가 아니라 script처리용이다.
html 뼈대 css style, 성격 javascript 제어, 메세지 *기타 속성들
속성명 설명 value 글로벌 속성. 모두 다 받아줄 수 있음 readonly 읽기만 가능(회원 정보 수정) disabled 비활성화 기능(단, 서버에서도 그 데이터를 끌어가지 못한다.) required 필수항목 속성 autocomplete 영문 자동 완성만 가능 geolocation 지도(naver, google API 연동) alt img 태그의 별도 속성. 접근성 속성 title 글로벌 속성, 접근성 속성 'HTML' 카테고리의 다른 글
[2회차] CSS (0) 2021.05.29 [1회차] HTML-① (0) 2021.05.29