HTML 태그

 

 

 

 

 

 

오늘은 마크업언어 HTML에서 자주사용되는 태그들에 대해 알아보자

 

 

자주 사용되는 태그 리스트

 

태그	설명
<div>	Division
<span>	Span
<img>	Image
<a>	Link
<ul> & <li>	Unordered List & List Item
<input>	Input (Text, Radio, Checkbox)
<textarea>	Multi-line Text Input
<button>	Button

HTML태그는 수십개가 넘지만 다른 언어의 메소드와 마찬가지로 우선은 자주사용하는 것들을 위주로 배우고, 

필요한 기능이 있으면 그때 그때 찾아서 사용하는게 좋다.

 

 

 

 

div vs span

div와 span태그는 웹페이지의 공간을 나눌 때 사용한다. 

이전에는 많이 사용된 태그이지만 HTML5 이후 시멘틱 태그가 소개되면서 이후 Section태그로 대체되고 있다. 

 

이 둘의 차이점은 대략 다음과 같다. 

• div는 한 줄을 차지
• span는 컨텐츠의 크기만큼 공간을 차지

 

 

 

 

 

 

img

 

img는 이미지를 삽입할 때 사용하는 태그이다. 

 

예시)

<img src = " contents address ">

 

*img태그는 다른 태그와는 다르게 종료태그가 없다. 셀프 클로징 태그!

 

 

 

 

 

 

a

a태그는 이동하고자 하는 주소를 적으면 해당 텍스트를 클릭했을 때 해당 주소로 이동한다.

 

예시)

<a href = "이동하고자 하는 주소"> </a>

 

target="_blank"를 넣으면 클릭 시 새로운 윈도우 화면에서 해당 주소로 이동한다.

 

예시)

<a href = "이동하고자 하는 주소" target="_blank"> </a>

 

 

 

 

ul vs li

 

ul : unordered list

 

트리구조로 ●모양의 리스트를 나열한다.

 

 

ol : ordered list 

오더리스트를 사용하면 1,2,3과 같은 숫자가 앞에 붙으며 리스트가 나열된다.

스타일을 적용하면 숫자 뿐만아니라 로마자 혹은 알파벳 등 다양하게 나열이 가능.

li: ol과 함께 사용

 

예시)

<ol style="list-style-type:upper-roman">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

 

 

 

 

 

input, textarea

 

입력폼으로 웹에플리케이션의 기본이자 가장 중요한 태그.

 

 

 

text박스

 

예시)

<input type="text" placeholder="입력창에 표시되는 문구">

 

 

*만약 패스워드 입력창이 필요한 경우라면 text를 password로 변경하면 된다. 

 

예시)

<input type="password"> 

 

 

 

 

체크박스

체크가 가능한 박스 생성

 

예시)

<input type="checkbox">

 

 

*라디오박스와 체크박스의 차이점

아래 두 코드의 차이점이 무엇일까?

 

 

<input type="radio" name="그룹명"> a

<input type="radio" name="그룹명"> b

<input type="radio" name="그룹명"> c

 

vs

 

<input type="checkbox" checked> checked

<input type="checkbox"> unchecked

 

 

라디오박스는 옵션들 중 하나의 옵션만을 선택할 수 있으나

체크박스는 그것과는 무관하게 여러개를 사용할 수 있다.

 

만약 라디오박스의 name이 설정되어 있지 않다면 서로 같은 그룹임을 인지하지 못하니 주의하자.

체크박스에서 checked가 있는 옵션은 기본적으로 선택이 되게 된다.

 

 

 

 

textarea

 

텍스트 에어리어는 input과는 다르게 줄바꿈이 되는 텍스트 영역을 생성한다. 

 

예시)

<textarea></textarea>

 

 

 

 

button

버튼을 통해 정보를 전송하게끔 할 수 있다.

 

예시)

<button>텍스트</button>