HTML 요소
2023-03-08
- select의 그룹화, optgroup
-label 속성으로 하위 option들의 이름을 작성할 수 있다.
-select 태그에 multiple 속성을 작성 할 수 있지만, 사용자 입장에서 친절한 화면이 아니다.
shift 또는 ctrl 키(다중선택)를 누를 생각을 하지 않을 수 있다.
위 결과 값
- form
form 요소는 서버에 데이터를 전송하기 위한 태그이다.
사용자에게 데이터를 입력 받아 작성된 데이터를 전달할 수 있다.
사용자가 웹 사이트로 정보를 보낼 수 있는 대부분의 요소들은 form이다.
예 : 로그인, 회원가입 등
공통속성
1) name : form의 이름을 지정하며, 서버에 전송될 데이터의 명칭
2) value : 서버에 전송될 데이터의 값
3) action : 데이터가 전송되는 URL(받을 경로)
4) method : 데이터의 전달 방식을 작성하며, 사용자가 입력한 내용을 어떻게 서버에 넘겨줄 것인지 결정
-get : 호출되는 주소에 값을 등록하여 보내는 방식
-post : 데이터를 감춰서 서버에 전달한다
예 : 비밀번호, 개인정보 등
-enctype : 첨부 파일 전달시, 사용(자주사용안함)
-autocomplete : 자동완성기능을 나타내는 속성, 기본값은 on
off : autocomplete off
- button
이벤트를 발동시키는 태그
type
1) button : 단순한 버튼임을 명시하며, 클릭이 가능한 버튼이다
2) submit : 해당 버튼이 form 데이터를 전송하는 버튼임을 명시한다
3) reset : 해당 버튼 클릭 시, 작성한 form 데이터를 초기화
fieldset - form 안의 요소를 묶어준다.
-form 태그안에 있는 입력요소와 label을 그룹화 한다.
-legend 태그는 필수 작성 태그는 아니지만, fieldset의 이름을 지정한다.
실습예시)
위 결과 값
- iframe
-현재 문서(페이지)안에 다른 html 문서(페이지)를 삽입한다.
장점
1) 컨텐츠 추가가 쉽다. (포털사이트 광고란 등)
단점
1) 보안 측면
-해커가 해킹용 사이트를 다른 사이트에 집어 넣고, 그사이트에 사용자가 입력하는 정보를 가로챌 위험이 있다.
2) 사용성 저하
-사용자 입장에서 하나의 사이트에서 다른사이트가 또 열리기 때문에 헷갈릴 수 있다.
3) 검색 제한
-로봇이 우리 사이트를 보는데, iframe으로 설정된 페이지는 포함하지않는다.
보안때문에 자주 안쓰는편이다
- 인라인 요소와 블록 요소, 인라인 블록 요소 (중요)
-요소가 화면에 출력되는 특성을 크게 2가지로 구분한다
블록 요소는 상자(레이아웃)를 만들기 위한 요소
인라인 요소는 텍스트 처럼 취급한다
블록 요소로 구조를 잡고, 인라인 요소로 정보를 전달한다.
1)블록요소
-기본적으로 레이아웃 작업에 많이 사용하며, 특별한 의미는 없고 구분을 위해 사용한다
특징
-한줄에 한 개만 배치 가능하다
-기본 너비값이 100%를 차지한다
-크기 값을 가질 수 있다(가로, 세로)
-상, 하, 좌, 우 마진을 가질 수 있다.
종류
div, table, th, td, header, nav, footer 등
div(Division)
-특별한 기능이 없다.
-어떤 영역을 잡을 때 많이 사용한다.
h*(Heading)
-제목을 의미하며, 1~6번까지 있다
-숫자가 작을수록 더 중요한 제목을 정의한다
-웹 표준 h1 태그는 한 문서에 1개만 있어야 한다
p(Paragraph)
-문단을 의미한다.
ul(Unorderd List)
-순서가 필요 없는 목록을 의미한다
-li(List Item)태그로 각 항목을 작성한다
ol(Orderd List)
-순서가 필요한 목록을 의미한다
-li(List Item)태그로 각 항목을 작성한다
2)인라인 요소
-한줄에 여러 개 배치 가능
-기본 너비값이 콘텐츠의 너비 값
콘텐츠--> <여는 태그>콘텐츠<닫는 태그>
-크기값을 가질 수 없다.
-상,하 마진을 가질 수 없다.
종류
span, a, small, strong 등
span
-대표적인 인라인 요소
-특별한 의미는 없고, 컨텐츠의 영역을 설정하는 용도
3)인라인 블록 요소
특징
-인라인 요소의 특징과 블록요소의 특징을 같이 가지고 있다
-한 줄에 여러 개 배치 가능하다
-크기 값을 가질 수 있다
-상, 하, 좌, 우 마진을 가질 수 있다
종류
img, input, button 등
img 태그 (image)
필수속성
src(source) : 실제 이미지의 경로를 명시한다
alt(alternate) : 이미지가 출력되지 않는 상황 또는
스크린 리더를 사용하는 사용자를 위해 대신 출력할 이미지의 설명을 명시한다 (필수 속성)
***필수 속성을 작성하지 않으면, 웹 표준에 어긋난다
a태그 - 다른 곳으로의 링크
Anchor의 약어 - 닻
하이퍼 링크를 지정하는 요소이다
필수속성
href(Hypertext Reference) : 연결할 주소 작성
target 속성 : 링크(해당 페이지)를 여는 옵션
_blank는 웹 전근성을 위한 값이다
시각 장애를 가지고 있는 사용자와 같이 다양한 사용자들이 편리하게 사이트를 이용할 수
있도록 웹 사이트를 만들어야 한다. _blank를 사용하는 경우, "새 창에서 열립니다"와 같은
문구로 안내를 해야한다. 눈으로 보지 못하는 사용자들이 당황하지 않고 사이트를 사용할 수 있다.
참고(하이퍼 링크와 함께 사용 가능)
a 태그와 함께 사용할 수 있는 address 태그
tel : 모바일에서 클릭 시, 해당 연락처로 전화 걸기 사용 가능
mailto : 이메일 링크 작성. 클릭 시, 이메일 전송 화면으로 이동
br(Line Break)
최대한 사용안하는 것이 좋다, 스크린 리더 오류 발생 가능성 줄 바꿈
input -사용자로부터 입력을 받는다