HTML 기초 지식 정리 / HTML basic knowledge summary

​

body태그

대표적인 속성들

background (배경이미지 지정)

bgcolor (배경색 지정)

text / link / vlink (방문했던 링크 색 지정) / alink (링크를 클릭하는 순간의 색 지정)

​

---

h태그 (1~6)

- html문서 본문 내 제목을 표현하는 태그

​

​

​

p태그

- 본문의 내용을 단락으로 표현할 때 사용하는 태그 / 줄바꿈o

​

​

​

​

span태그

- 본문의 내용을 문장으로 표현할 때 사용하는 태그 / 줄바꿈x

​

​

​

​

br 태그

- 줄바꿈(개행) 태그

​

​

​

hr 태그

- 수평선 (눈에보이는 수평선 생성)

​

​

​

br / hr 태그의 경우 닫는 태그가 존재하지 않음

이유) 내용을 채워놓을게 없어서 닫는 태그가 존재하지 않음

하지만 실제로는 br/ hr/로 되었음 (/는 생략되어 나타남)

​

hr 관련 속성들

align / color / size / width / noshade

​

---

글자 강조태그

b 태그

strong 태그 ( 개인정보처리방침 )

​

> 크게 차이는 없지만 쌤의 말로는

시각장애인을 위해서 텍스트가 읽어질때

b태그를 통하면 그냥 글자를 읽고

strong태그를 통하면 억양도 나온다고 함

---

리스트 태그

ul / ol / li

​

ul

unorder list

번호없는 목록을 사용할 때 사용하는 태그

​

​

​

ol

order list

번호있는 목록을 사용할 때 사용하는 태그

​

​

​

​

li (무조건 들어감 )

공통적으로 사용되는 태그

​

​

---

img 태그 - 웹페이지에 이미지를 보여주는 태그

src (이미지의 경로 지정)

alt ( 경로가 잘못되었을 경우 이미지에 대한 설명 ) _ alternate

border / height / width

hspace (좌우여백)

vspace (상하여백)

​

---

a태그 anchor 닻 태그 / 하이퍼링크 만들 때 사용하는 태그

< a href = "url"> 텍스트 </a>

​

a태그의 속성

href

hypertext reference로 연결할 주소 지정

name 문서 내 특정 위치 이동

*target (안써봐서 뭔지 모르겠)

링크된 내용이 열릴 대상

_blank : 링크 클릭 시 새창 설정

_self : 현재와 동일한 브라우저 창 설정

---

table 태그

​

속성

align / bgcolor / border / bordercolor / width / height

​

border 설정할때 '두종색' - 두께 종류 색

​

>> 게시판에서 가장 많이 사용한다고 함

​

​

​

caption 표제목

​

th 태그 ( table head )

정렬의 기본값은 가운데정렬

​

td 태그 ( table data )

한개의 열이라고 생각 또는 하나의 칸

​

tr 태그 ( table row )

​

td를 통한 병합

colspan 콜스판 : 좌우병합

rowspan 로우스판 : 위아래병합

ex. colspan = "2"

해석 : 자신 포함 다음 1칸을 병합해줌

---

form 태그

- 웹 페이지에 입력폼을 만들 때 사용하는 태그

​

속성

action : 입력 데이터의 전달 위치를 지정

mothod : 입력 데이터의 전달 방식 지정 ( get (default ) / post )

name : from태그의 이름 지정

---

input 태그

​

< input type = "text" >

대표적 타입 종류

text / password / color / range / file / date or datetime-loca

checkbox / radio ( name-그룹화, value-구분 지정 必 )

submit ( form 내 모든 input요소의 값을 전송하는 태그 )

reset ( form 내 모든 input요소의 값을 초기화 )

​

​

​

속성

name : 입력한 값을 구분하기 위해 이름 지정

value : 기본값 지정

placeholder : 미리보기 텍스트 지정

autofocus : 자동 커서 설정 (true)

maxlength : 글자 수 제한 지정

readonly : 읽기 전용 지정

​

value와 placeholder 차이

​

​

​

---

label 태그

<label for = " " > 텍스트 </abel>

: input 태그를 설명하는 태그

​

ex.

<label for = "name"> 이름 : </label>

<input type = "text" id = "name" >

---

datalist 태그 ------ 입력

: input 요소에서 사용하기 위한 옵션을 미리 정의하는 태그

​

속성

id : input 요소의 list속성과 연결하기 위한 값 설정

​

​

option태그

: input 요소에서 사용할 값을 value 속성에 지정

​

​

​

​

< >

​

​

​

select 태그 ------- 선택

+

option 태그 같이 사용

​

​

​

​

---

너비 높이 비율값 % 사용 가능

​

​

---

textarea 태그 ( 입력하기때문에 닫는 태그 있음 )