일반적인 웹사이트 HTML에 자주 쓰이는 tag(태그),element(엘리먼트)

 

일반적인 웹사이트에서 자주 쓰이는 tag(태그),element(엘리먼트)그리고 그 태그의 특징, 속성, 속성 값

 

 

<h1> ~ <h6>

제목 엘리먼트 

보통 로고나 홈페이지의 메인이 h1, 부제목, 카테고리 순으로 숫자가 커진다.

특징 : 숫자가 작을수록 크기가 커진다.커진다. 일반 텍스트보다 굵기가 굵어짐.

 

<ul>,<li> 

리스트를 작성할 때 많이 쓰인다.

ul이랑 li 이는 같이 쓰이며 ul 안에 li를 작성한다.

ul의 특징은 li들을 묶어주는 역할 정도로 사용하면 된다.

 

<a> (앵커)

 

링크를 걸기 위해서 사용하는 엘리먼트

속성 href 와 같이 쓰인다.

속성을 쓸 때는  쿼리 스트링 형태 query string  =“” 를 같이 사용한다.

<a href=“  ”></a>   " "안의 링크가 현재 url을 바꿔 준다.

 

<div>, <span>

 

구역을 나눠서 내용을 적을 때  사용한다. 가장 기본적인, 많이 쓰이는 엘리먼트

 

div -> block 

span ->inline 

 

<i>

 

inline , span이랑 역할이 비슷하지만 글자가 기울어짐.

 

<button>

 

inline , 버튼을 만드는 가장 기본적인 엘리먼트

 

<input>  (닫는 태그가 필요 없음.)

 

inline, 기본 크기가 큰 편이라 브라우저 사이즈가 작을 땐 밑으로 내려갈 수 있다.(블럭 속성이랑 헷갈리지 않기) 

입력창 만들어준다. 속성은 type 을 사용할 수 있고, type 의 기본 속성 값은 text 이다

type="text"  라고 작성하며, text 대신 password, radio를 사용할 수 있다.

 

속성 checked 속성 값 checked ->  checked=“checked” 

초기 값을 선택해주는 상태 (성별을 체크하는 곳에 남자가 먼저 체크되어 있는 경우)

 

<img>  (닫는 태그가 필요 없음.)

 

inline , 속성으로 src을 사용하고 경로를 지정해준다.

src="./images/logo.png"  로 사용한다.

 

상대 경로 내가 위치한 곳에서 원하는 곳으로 가는 경로

절대 경로 최상위 디렉토리부터 원하는 곳으로 가는 경로

 

 

<select>,<option>

inline,  예를 들면, 생년월일에 선택할 때 조그맣게 뜨는 창 을 만들어준다.