TIL # 2021.10.12

kdobro_dev·2021년 10월 12일

TIL (Today I Learned)

목록 보기

6/56

HTML 기본 구조와 문법

📝오늘 배운 내용

HTML에서 가장 많이 쓰이는 Tag

- <div>          한 줄을 차지한다.
- <span>         컨텐츠 크기만큼 공간을 차지한다.
- <img>          이미지를 삽입 할 때 사용한다.
- <a>            링크를 삽입 할 때 사용한다.
- <ul>&<li>      리스트를 작성 할 때 사용한다.
- <input>        다양한 입력 폼에 사용한다.
- <textarea>     줄바꿈이 되는 입력 폼이다.
- <button>       전송 혹은 로그인등 버튼 생성.

HTML 태그 기본 문법

div 태그

<div>div 태그는 한 줄을 차지한다</div>

span 태그

<span>컨텐츠 크기만큼 공간을 차지한다</span>

img 태그

<img src="https://i.imgur.com/JVAj4to.jpg">

a 태그

<a href="https://www.naver.com" target="_blank">네이버</a>

ul & li 태그

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

input 태그

<input type="text" placeholder="type here">
<input type="text" placeholder="type here">

textarea 태그


<textarea>줄바꿈이 되는 입력 폼이다</textarea>

button 태그

<button>Submit</button>

기본적으로는 이런식으로 HTML 태그들을 사용할 수 있다.

<!DOCTYPE html>
<html>
	<head>
          <meta charset="UTF-8" />
          <title>제목</title>
        </head>
        
        <body>
            <div>div 태그는 한 줄을 차지한다</div>
            <span>컨텐츠 크기만큼 공간을 차지한다</span>
            <img src="https://i.imgur.com/JVAj4to.jpg" width="300px" height="300px">
            
            <ul>
   		<li>Item 1</li>
    	        <li>Item 2</li>
                <li>Item 3</li>
            </ul>

            <input type="text" placeholder="type here">
            <input type="text" placeholder="type here">
			
            <div>
            	<textarea>줄바꿈이 되는 입력 폼이다</textarea>
            </div>

            <button>Submit</button>
        </body>
</html>