(1-2) HTML/CSS 기초 - HTML 기초(자주 사용하는 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

div VS span, div와 span의 큰 차이는 한 줄을 차지하느냐 아니냐이다.

물론 css를 이용해 바꿀 수도 있지만 기본적인 값은 그렇다는 것이다.

<div>div 태그는 한 줄을 차지합니다</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지합니다</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3</div>

결과는? 👇🏻

img : 이미지 삽입, img 태그는 닫는 태그가 필요하지 않다.

<img src="http://i.imgur.com/JVAj4tO.jpg">

a : 링크 삽입

<a href="http://codestates.com" target="_blank">코드스테이츠</a>

ul,li : 리스트

li = list , ul = unordered list, ol = ordered list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 has nested list
    <ul>
      <li>Item 3-1</li>
    </ul>
  </li>
</ul>

트리 구조로 열리는 리스트가 된다. 여기서 ul을 모두 ol 로 바꾸면?

input, textarea: 다양한 입력 폼

<input type="text" placeholder="type here">
<div>
  <input type="radio" name="choice" value="a"> a
  <input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
  <input type="checkbox" checked> checked
  <input type="checkbox"> unchecked
</div>

텍스트박스를 입력해보았다.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8"  />
    <title>제목</title>
  </head>
  
  <body>
  
    <input type="text" placeholder="type here">
    
  </body>
  
</html>

input type에 "password"를 작성하면 비밀번호창이 생긴다.

<input type="password">

input type에 "checkbox"를 작성하면?

<input type="checkbox"> 다음에 들어올 때 ID 기억하기

input type을 라디오버튼("radio")으로 하면 ? ( 라디오버튼은 그룹이 가능하고 체크박스는 여러개를 설정할 수 있다. )

<input type="radio"> 옵션A
<input type="radio"> 옵션B

textarea를 입력하면 text 와는 다르게 줄바꿈이 가능한 박스가 생긴다.

<textarea></textarea>

button : 버튼

<button>로그인</button>

여태 해본 것들을 묶어서 그럴싸한 로그인 화면을 만들어보자.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8"  />
    <title>제목</title>
  </head>
  
  <body>
  
    <div>
      ID <input type="text" placeholder="type here">
    </div>
    <div>
      Password <input type="password">
    </div>
    <div>
     <input type="checkbox"> 다음에 들어올 때 ID 기억하기
    </div>
    
    <div>
      
      <input type="radio" name= "option1"> 옵션A
      <input type="radio" name= "option1"> 옵션B  
      				    / name이라는 속성을 통해 묶어줌으로써 둘중 하나만 선택가능하게 /
    </div>
    
    <textarea></textarea>
    
    <div>
    
      <button>로그인</button>
    </div>
  </body>
  
</html>

완성!

저작자표시 비영리 변경금지

'My Wiki (CodesStates) > HTML,CSS' 카테고리의 다른 글

(2-1) HTML/CSS 중급 - 레이아웃 (0)	2021.08.03
(1-5) HTML/CSS 기초 - CSS 기초 (박스 모델) (0)	2021.07.10
(1-4) HTML/CSS 기초 - CSS 기초 (텍스트 꾸미기) (0)	2021.07.10
(1-3) HTML/CSS 기초 - CSS 기초 (CSS 따라하기) (0)	2021.07.10
(1-1) HTML/CSS 기초 - HTML 기초 (기본구조와 문법) (0)	2021.07.10