👋 Hello, I am Seung-ho Ham

🧑🏻‍💻 A Developers who create code that changes the world

카테고리 없음

[DEV] HTML자주 사용하는 태그

Potato_H 2021. 5. 8. 19:33
반응형

HTML은 구조를 만드는 역할을 하므로, 각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 하는지만 기억해두면 된다.

 

<div> </div> : 구분이라는 뜻을 가진 Division을 뜻하며 특별한 의미가 없는 구분을 위한 요소이다.

 

<h1></h1>~<h2></h2> : 제목의 heading을 의미한다. (1이 가장 큰 글씨이며 6이 가장 작은 글씨이다.)

 

<p></p> : paragraph 를 뜻하며, 문장을 의미하는 요소이다.

 

<img src=" " alt=" "/> : 이미지 삽입 요소이다. (src와 alt는 필수 속성이다.) 이미지가 출력되지 않으면 alt의 글자가 출력된다. 이러한 상황을 "엑박(엑스박스)떴다." 라고 한다.)

 

<ul> : Unordered List로 순서가 필요없는 목록의 집합이다.

    <li> </li> : List Item으로 목록 내의 각 항목이다.

    <li> </li> 

</ul>

 

<a href=" "> </a> : Anchor을 뜻하며 속성인 href의 값의 하이퍼 링크를 걸어준다. (target속성을 추가로 사용할 수 있다. ex. targer="_blank" : 새로운 탭에 페이지를 연다.)

 

<br/> : 줄바꿈 요소이다.(엔터)

 

<input type="text"/> : 사용자가 데이터를 입력할 수 있게하는 요소이다.

type 속성은 text의 타입을 입력하겠다고 정해두는 것이다.

type속성에는 text외에도 checkbox와 radio 값을 입력할 수 있다.

checkbox는 체크 할 수 있는 란을 만들어준다.

<lable>

    <input type="checkbox">apple

</lable>

<lable>

    <input type="checkbox">banana

</lable>

 

radio값은 마찬가지로 체크 박스를 만들어주지만 중복 체크가 불가능하게 되어있다. 따라서 name이라는 그룹으로 묶어서 중복 체크가 되지않게 설정 해주어야한다. (fruits라는 그룹중 apple와 banana 중 하나만 선택가능)

<lable>

    <input type="radio" name="fruits">apple

</lable>

<lable>

    <input type="radio" name="fruits">banana

</lable>

 

input태그의 속성에는 value=" "(입력칸에 미리 입력해두는 속성)와 placeholder=" "(입력칸에 미리 입력해두지만 입력할 때 사라지는 속성), disable (입력칸은 보이지만 작성이 불가하도록 만드는 속성)이 있다.

 

<table> : 테이블 요소. 행(row)과 열(column) 요소.

    <tr> : table row. 행을 지정하는 요소

        <td> </td> : table data. 열을 지정하는 요소

        <td> </td>

    </tr>