HTML 기본 태그들 공부 (나중에 다시 정리)

##head 요소

역할: 문서의 메타데이터 집합

메타데이터: 웹 페이지에 직접적으로 보이지 않는 정보. 

css파일과 js파일을 연결하는 부분

ex) 페이지가 검색엔진에 노출 될지 안될지, 페이지 소개 등의 정보, 

head 내에 위치하는 요소

<title> : 문서의 제목이나 이름

<meta> : 속성값으로 정보를 나타냄

인코딩에 관한 정보 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

현제 페이지에 관한 정보 --> <meta name="Description" content="소개 내용" />

<link> : css 파일을 연결할 때 사용하는 요소.

#href : 링크될 외부 리소스의 URL를 명시함.

#rel : 현재 문서와 외부 리소스 사이의 연관 관계를 명시함. (필수)

<script> : js 파일을 연결. --> <script type="text/javascript" src="abc.js"> </script>

 

<meta> : 현제 페이지의 인코딩을 어떤 방식으로 출력할 지 결정

 

 

##문구 요소들1

<em> : 기울림체 (italic) - 저자의 주관적인 강조(중요성x)

<strong> : 굵은 글씨체 (blod) - 강조

<del> : 취소선 - 블럭&인라인

<ins> : 밑줄 - 블럭&인라인

<p> : 한 문단, 가로 한 줄 전체

 

##글자 속성

<i> : 기울림체인데 대게 아이콘 요소를 만들때 쓰임

 

<a> : 웹페이지로 연결하는 요소. ex) <a href="url.html">링크</a> 

: 또는 현재페이지의 특정위치로 연결시키는 요소. 

#id: body 내의 모든 요소에서 쓸 수 있는 속성

ex) <a href="#a">1. A</a><br />

<a href="#b">2. B</a><br />

<a href="#c">3. C</a><br />

<h2 id="a">AAA</h2>

<h2><a id="b"></a>BBB</h2>

<h2><a name="c"></a>CCC</h2>  #name은 중복 가능하기 때문에 잘 사용안함

#target: 링크를 현재 페이지, 새창 등으로 열지

#rel: 해당 링크와의 관계를 나타냄. ex) prev(이전 글), author, search...

 

<img> : 문서 내에 이미지를 넣읗 수 있는 요소

#src: 이미지 주소

#alt: 이미지가 안나올때 나오는 대안

#width: 가로

#height: 세로

 

목록

<ol> : Ordered List, 순서가 있는 목록

 

##head 요소

역할: 문서의 메타데이터 집합

메타데이터: 웹 페이지에 직접적으로 보이지 않는 정보. 

css파일과 js파일을 연결하는 부분

ex) 페이지가 검색엔진에 노출 될지 안될지, 페이지 소개 등의 정보, 

head 내에 위치하는 요소

title 요소: 문서의 제목이나 이름

meta 요소: 속성값으로 정보를 나타냄

인코딩에 관한 정보 --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

현제 페이지에 관한 정보 --> <meta name="Description" content="소개 내용" />

link 요소: css 파일을 연결할 때 사용하는 요소. --> <link href="style.css" type="text/css" rel="stylesheet" />

script 요소: js 파일을 연결. --> <script type="text/javascript" src="abc.js"> </script>

 

 

##문구 요소들1

<em> : 기울림체 (italic) - 저자의 주관적인 강조(중요성x)

<strong> : 굵은 글씨체 (blod) - 강조

<p> : 한 문단, 가로 한 줄 전체

<del> : 취소선 - 블럭&인라인

<ins> : 밑줄 - 블럭&인라인

 

##문구 요소들2

<abbr> : abbreviation(축약어), 알파벳 단위, 마우스 갖다대면 뜻 보임. ex) <abbr title="World Wide Web">WWW</abbr>는 언터넷에 연결된...

<acronym> : 축약어2, NASA와 같이 그대로 발음할 때

<address> : 연락처의 의미, 저자의 주소, 이메일 등

<dfn> : 개념의 정의를 나타내는 요소 <p> <dfn>AA</dfn> 란 ...이다</p>

<code> : 프로그래밍 소스 코드를 나타낼 때. 인라인 요소

<samp> : 화면에 출력되는 텍스트. 인라인 요소

 

##글자 속성

<i> : 기울림체인데 대게 아이콘 요소를 만들때 쓰임

 

<a> : 웹페이지로 연결하는 요소. ex) <a href="url.html">링크</a> 

: 또는 현재페이지의 특정위치로 연결시키는 요소. 

#id: body 내의 모든 요소에서 쓸 수 있는 속성

ex) <a href="#a">1. A</a><br />

<a href="#b">2. B</a><br />

<a href="#c">3. C</a><br />

<h2 id="a">AAA</h2>

<h2><a id="b"></a>BBB</h2>

<h2><a name="c"></a>CCC</h2>  #name은 중복 가능하기 때문에 잘 사용안함

#target: 링크를 현재 페이지, 새창 등으로 열지

#rel: 해당 링크와의 관계를 나타냄. ex) prev(이전 글), author, search...

 

<img> : 문서 내에 이미지를 넣읗 수 있는 요소

#src: 이미지 주소

#alt: 이미지가 안나올때 나오는 대안

#width: 가로

#height: 세로

 

목록

<ol> : Ordered List, 순서가 있는 목록. (ol 안에는 li만 가능)

<ul> : Unordered List, 순서 없는 목록. (ul 안에는 li만 가능)

<li> : 모드 블럭 요소

<dl> : Description List, 개념과 정의로 이루어진 목록. (<dt>는 정의, <dd>는 개념)

 

의미 없는 요소 - css로 조절하기 위해 사용

<div> : 블럭 요소로, 레이아웃 잡는 용도로 많이 쓰임, 중첩 가능

<span> : 인라인 요소

 

class 속성 : 모든 요소에서 사용 가능, 한 요소에 여러 클래스 사용가능

id 속성 : 페이지에서 단 한번만 사용가능 

 

## 테이블 요소 기본 구조

<table> : 도표를 나타낼 때

# summary : 시각적으로 보이진 않지만 설명을 제공하기 위해

<caption> : 표의 제목, table요소의 가장 첫 번째 자식으로 와야 함(table을 레이아웃 잡기 위한 용도가 아니라면 필수)

<colgroup> : 하나 이상의 col(열)을 그룹 짓는데 사용

<th> : 해당 테이블의 제목이 되는 셀

#scope : th에서 사용, th요소가 어느 셀에 영향을 미치는지를 정해줌, 즉, 어느 영역의 제목을 뜻하는 지를 정의. (row, col, rowgroup, colgroup)속성 사용 가능

<tr> : 테이블의 행을 만들 때 

<td> : 행에서 각각의 셀을 표현

#colspan : 가로 셀을 병합할 때(몇칸 차지할 지)

#rowspan : 세로 셀을 병합할 때, 병합된 셀의 수 만큼 다음 행(tr)의 셀 개수가 하나씩 줄어듬

 

<thead> : 열의 제목으로 구성된 행의 집합

<tbody> : 도표의 본문에 해당되는 영역

<tfoot> : 도표 하단에 나오는 열의 요약으로 구성된 행의 집합

 

## form 요소1 - <form> : 버튼, 텍스트 입력 창 등의 폼 관련

#action : 이 폼을 전송할 URL을 지정

#method : 폼에 전송할 방식을 지정 (GET, POST)

GET 방식 : 해당 URL로 값을 받는 방식, 주로 페이지 검색, 조회. ex) http://search.naver.com/search.naver?query=test

'search.naver' 란 페이지에 query=test란 값을 전송한 것('query'는 해당 서버에서 요구하는 임의 변수 이름)

POST 방식 : 서버에 값을 URL이 아닌 숨겨져서 보내지는 방식, ID, PW로 로그인 등

<label> : 해당 폼 요소에 어떤 값을 넣어야 하는지 라벨을 붙여줌

#for : for="여기" '여기'에 해당하는 값과 id에 해당하는 값을 연결할 때, 해당 라벨을 클릭하면 연결된 폼으로 포커스됨

 

## form 요소2

<textarea> : input의 text와 비슷, input의 text는 한 줄만 입력가능, textarea는 긴 내용을 입력가능

#rows, cols : 각각 높이가 몇 줄, 한 줄에 몇 글자 나타낼 지

<input> : type 속성에 따라 text 입력, 버튼, 라디오, 체크 등으로 결정

???# required, data-attr-name, data-type, data-guide, data-datapicker, role

ex) type=submit일 경우, 폼 안의 값들이 서버로 전송됨. <input type="submit" value="전송" /> 

--type 종류--

#text : 텍스트 타입으로 입력 #password : 비밀번호 형태

#radio : 라디오 버튼 형태 #checkbox : 체크박스 형태

#button : 버튼 형태 #button : 버튼 형태

#file : 파일 업로드 형태 #submit : 폼 전송 인풋

#reset : 버튼 형태로, 폼 값을 초기화, 기본 값으로

#image : 이미지버튼, submit과 같이 폼 전송이 일어남

#hidden : 숨김 형태의 인풋, 폼에 정보를 전송할 때 사용자가 입력한 정보 외에 정보들은 보이지 않게 같이 전송 가능

--input 속성--

#disable : 모든 요소에서 사용 가능, 해당 폼 요소를 비활성화 시킴

#readonly : 수정이 안됨

#size : 글자 수 기준으로 너비 지정

#maxlength : 최대 입력 가능 글자

#checked : 기본적으로 선택됨