<head> html 파일의 속성을 지정하기위한 태그 현재 페이지의 정보, 필요한 파일을 연결 작업을 함.
<body> 실제 화면에 보이는 내용을 작성.
html 에서 enter는 줄바꿈이 아니라 공백하나로 인지(띄어쓰기 1칸)
h태그 - 제목을 표현할 때 사용 ( h1~h6 ) 각 태그마다 고유한 크기와 두께가 정해져있음, 브라우저마다 다를 수 있음.
<br> : 줄 바꿈.
태그는
< block, lnline, inlineblock > 세 종류로 구분.
block 태그 - tag 하나가 한줄을 차지하는 태그
inline 태그 - tag 하나가 본인이 가지고있는 글자만큼의 영역을 가지는 태그
inlineblock 태그 - block + inline
span 태그 - 대표적인 인라인 태그 중 하나
p 태그 - 대표적인 블록 태그 중 하나 한 문단을 구분
b, strong 태그 - 글자를 굵게 만드는 태그 인라인 태그
ins 태그 - 밑줄 인라인 태그
del 태그 - 취소선 인라인태그
sup 태그 - 위첨자 인라인 태그
sub 태그 - 아래첨자 인라인 태그
hr 태그 - 수평선 블록태그
i 태그 - 기울림꼴
small 태그 - 작게
input 태그
input 태그는 단일태그
속성값이 다양하여 여러가지 기능에 활용가능.
form 태그와 같이 사용됨. (데이터를 서버로 전송하는 역할)
form 태그 : 태그안의 정보를 서버로 전송하는 역할을 하는 태그
<input type = "속성명" 옵션>
type = "text" : 가장많이 사용 한글, 영어, 특수문자, 숫자 등 글자를 입력
placeholder : 흐리게 표시, 안내문구 같은 것을 입력할 때 사용. 문자를 입력하면 사라짐
input의 value 값이 없으면 내가 쓴 값을 value로 인지
type = "botten" : 일반버튼
type = "submit" : 전송버튼 - form 태그안의 값을 서버로 전송
type = "reset" : 취소버튼 - form 태그 안의 값을 리셋
<botten></botten> 태그에서도 동일한 속성을 사용.
value="값" input 태그안의 값을 나타내는 속성
action="" : 서버의 주소
metoh="" : 전송 방식을 설정 2가지 get(기본값) / post
name = "변수역할"
주소?name=value - 쿼리스트링 - get
post : 데이터를 숨겨서 가져가는 방식
type = "password" : 비밀번호 입력시 사용 **** 표시
type = "checkbox" : 다중선택을 할 때 사용
lable : 다른 태그의 제목 역할을 하는 태그
for = "값" : 대상태그의 id 값과 일치 => id 값을 가지는 태그의 제목이 됨.
id = "하나만 가능" 유일한 구분자 class ="중복가능", 여러개가능 => js css 사용
class = css / js 구분자 역할을 하는 속성
id가 겹치면 에러가 나거나 하지는 않지만 작동하지 않을 수 있고, 엉뚱한 작동을 할 수 있음.
type = "radio" : 여러개 중 하나만 선택
type = "month" : 년 월 표시
type = "week" : 년 주 표시
type = "date" : 년 월 일 표시
type = "datetime-local" : 년 월 일 시분초 표시
type = "time" : 시분초 표시
type = "email" : email 형식으로 입력되어 있는지 체크 맞지 않으면 알림창 띄움
type = "search" : x버튼이 생김
type = "file" : 첨부파일을 선택
type = "number" : 위아래 버튼이 생김 숫자만 입력가능 / max, min으로 최대 최소 설정가능.
type = "hidden" : 안보이게 숨김처리 개발시 많이사용.
type = "image" : 그림을 삽입하는 태그
- src = "경로" alt = " 그림이 표시되지 않을때 대체되는 단어"
<img> 태그로 대체 가능. 경로 > ../ 상위폴더로 이동
type = "url" : http:// 형식인지 체크
type = "range" : 게이지 설정.
속성
모든 태그는 속성을 가지고 있음.
<태그명 속성="값" 속성="값" 속성="값" 속성>
속성은 순서에 상관없음.
readonly : 읽기전용
disabled : 비활성화, 서버로 값을 보내지 않음
tabindex : 탭순서 정할때 사용
checked : check, radio 버튼에서 사용하면 체크된 것으로 표시
'화면 수업 정리' 카테고리의 다른 글
| HTML,CSS,JS 6일차 (0) | 2024.08.01 |
|---|---|
| HTML,CSS,JS 5일차 (0) | 2024.07.31 |
| HTML,CSS,JS 4일차 (0) | 2024.07.30 |
| HTML,CSS,JS 3일차 (0) | 2024.07.29 |
| HTML,CSS,JS 2일차 (1) | 2024.07.26 |
