HTML 자주 쓰는 태그 정리

HTML 태그 정리

---

HTML에서 자주 쓰는 태그 위주로 정리했습니다! 코드펜에서 직접 실습을 하면서 어떻게 출력되는지 확인하면서 익혀보도록 합시다!!!

 

https://codepen.io/pen/

Create a New Pen

 

 

 

코드펜과 함께 실습해보기!!!

---

1. div (블럭요소)

 

<div> 내용 </div>    // 특별한 의미가 없는 구분을 위한 요소

2. span (인라인요소)

 

<span> 내용 </span>   // 특별한 의미가 없는 구분을 위한 요소

▶ div태그와 span 태그의 차이점을 css를 통해 쉽게 이해하자!!

 

// CSS //    코드펜에서 사용하기

div {
background-color : red;
width : 
height : 
}

span {
background-color : blue;
width : 
height : 
}

// 코드펜에서 div 와  span에 다양한 css 속성값을 넣어서 차이점을 파악하기!

3. h1 ~ h6 (블럭요소)

 

<h1> 제목1 </h1>
<h2> 제목2 </h2>
<h3> 제목3 </h3>

//  제목을 의미하는 요소(heading)
//  숫자가 작을수록 더 중요한 제목을 정의 ... 적정선에서 h3,4 쓰는걸 권장

4. p (블록요소)

 

<p> 내용 </p>    // 문장을 의미하는 요소 (paragraph)

5. br (인라인요소)

 

<div>안녕하세요 <br>여기서 줄바꿈하고싶어요</div>    // 줄바꿈 요소 break

6. a (인라인요소)

 

// 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (anchor) //

<a href="https://www.naver.com/">네이버</a>   
// href 안에 이동하고자하는 링크 및 url 넣기

<a href="https://www.google.co.kr/" target="_blank">구글</a>   
// target="_blank"  링크 url의 표시 위치(새탭을 연다는 뜻)

7. ul & li (블록요소)

 

// ul은 순서가 필요없는 목록의 집합을 의미합니다 (unorderd list)
// li는 목록 내 각 항목을 나타냅니다 (list item) 
// ul태그 자식으로는 li요소가 무조건 하나 이상 있어야 됩니다!

<ul>    // ul 대신 ol을 넣으면 어떤 변화가 ??
   <li>사과</li>
   <li>바나나</li>
   <li>김치</li>
</ul>

8. img (인라인요소)

 

// 이미지를 삽입하는 요소 (image)

<img src="이미지 경료" alt="삽입할 이미지의 이름이나 내용">   
// arl는 화면에 이미지가 안나올 때 나오는 글입니다.

9. input (글자요소 블록요소)

 

// 사용자가 데이터를 입력하는 요소

// ID & Password//
아이디 <input type="text"> <br>     
비빌먼호 <input type='password'>    // 입력창쓸때 ********

// placeholder & disabled
<input type='text'placeholder='입력해주세요'/>  //사용자가 입력할 값의 힌트
<input type="text" disabled/>                        // 입력창이 회색처리되면서 비활성화 됩니다.
 

10. label (인라인요소)

 

// 라벨가능 요소의 제목

// 체크박스 만들기
<label>
     <input type='checkbox'/>
</label>
<label>
     <input type='checkbox' checked/>    // 체크박스 입력요소가 미리 체크됨
</label>


// radio는 둘 중 하나를 택하기
<label>
     <inputtype='radio' name='color/>red  
</label>
<label>
     <inputtype='radio'name='color/>blue
</label>

// 사용자에게 체크여부를 그룹에서 1개만 입력 받음 (name이란 속성을 통해 그룹화 해주기)