티스토리 뷰
html은 문서의 구조나 내용을 다루는 언어로 웹페이지의 틀을 만드는 언어이다.
html은 수많은 tag들의 집합으로 구성되어 있다.
tag는 <>롤 묶은 html의 기본구성요소이다.
태그 안에 src같은 속성이 존재하며 쌍으로 존재하는 태그사이에 내용을 삽입한다.
트리구조로 이루어져 있으며 부모와 자식 노드로도 구분할 수 있다.
ps. 태그 내부에 내용이 없다면 첫번째 태그 마지막에 /을 넣는 self-closing tag로 간략화 가능.
자주 사용되는 태그:
p:paragraph(문단)의 약자로, 하나의 문단을 표현하기 위하여 사용됩니다. HTML 문서 작성 시 목적에 맞게 사용하는 것이 권장
div: 한 줄 전체의 공간을 차지. 자식 태그들의 줄바꿈을 위해서 사용가능
span: 컨텐츠 크기만큼 공간을 차지. 한줄에 여러 span이 존재할 수 있음.
img:이미지 삽입. src속성으로 이미지 주소를 " " 입력해 이미지를 불러올 수 있음. 이 태그는 닫는 태그가 없음.같은 폴더내 image폴더에 있는 파일을 불러올 경유 src=./images/주소"로 가
a:링크 삽입. 클릭하여 특정 사이트의 주소로 이동가능. href 속성으로 사이트의 주소를 " " 에 입력하여 사용. target 속성으로 기존 페이지에서 이동할지 새 탭을 만들어 이동할지 등의 설정가능.
_self : 링크를 클릭한 해당 창에서 연다.
_blank : 링크를 새창으로 연다.
_parent : 부모 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)
_top : 전체 브라우저 창에서 가장 상위의 창에서 연다. (부모 창이 없으면 _self 속성으로 처리)
ul&li:리스트. ul안에 li들을 넣어서 사용. 목록을 만들때 사용. ul대신 ol를 사용하면 li들이 1,2,3같은 순서를 표시하여 리스트 생성. ul대신 ol를 사용하여 순서있는 목록 작성가능.
<ol type=" ">으로 마커의 종류 설정가능.1,A,a,l,i 를 사용가능. start 속성으로 시작값을 정할 수 있음.
input:다양한 입력 폼. type속성으로 텍스트,패스워드,라디오 버튼,체크박스 등 이용자가 다양한 입력을 하게 지원.이 태그는 닫는 태그가 없음. placeholder속성으로 입력전 안내문구 삽입가능
input에 사용가능한 type 속성:
- <input type="button">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="hidden">
- <input type="image">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="reset">
- <input type="search">
- <input type="submit">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
체크박스는 중복선택이 가능한 버튼
라디오 버튼은 보기 중 한가지만 선택가능한 버튼. 그러나 name 속성으로 묶어주지 않으면 다중설정이 되므로 반드시 묶어야함.
textarea:이 태그는 닫는 태그가 존재. input과 달리 줄바꿈하면서 입력이 가능.
button:클릭시 작동하는 요소. js코드로 코딩하여 동작 설정.
label:input 태그와 연결하여 사용하는 태그.
<label for="inputName">이름 :</label>
<input type="text" id="inputName">