20.05.28 코딩연습_HTML

[Most Used tags in HTML]

 

1. <div> vs <span>

• div 태그는 한 줄을 차지함.
• span은 컨텐츠 크기만큼만 차지함
• 물론 css를 통해 얼마나 차지할지 변경할 수는 있음.

 

2. <img> : 이미지 삽입

<img src = ~ 속성 >

 

• 닫는 태그가 없음.
• src는 속성키로서 뒤에는 이미지 주소를 입력하면 됨.

 

3. <a> : 링크 삽입

<a href= "www.naver.com">네이버<a/>  <!-- 기존 창에서 열림-->

<a href= "www.naver.com" target="_blank">네이버<a/>  <!--새창으로 열림-->

 

 

4. <ul>& <li> : 리스트

<ul> : unordered list/순서가 중요하지 않음. 정렬되지 않은 목록을 나타냄. 보통 <li>를 자식 요소로 둠.

<li> : list item

 

<ol> : orderded list/순서가 있음. <ul>과 서로 중첩, 교차할 수 있음.

 

 

여기까지가

<문서 자체를 입력하는 방식>

---

웹에서 실질적으로 활용할 수 있는 폼

 

4. <inqut> & <texttarea> : 다양한 입력 폼

<inqut> : input(tsxt, radio, checkbox)

 

예제)

<input type="text" placeholder="type here"> <!--아이디 입력 창으로 활용 가능-->

<input type="password"> //패스워드 입력 창


<!--!!반드시 radio는 name이라는 속성을 이용해 그룹화 해주어야 하나만 선택 가능!!-->
<input type="radio" name="choice" value="a"> a <!--뒤에 a를 입력해야 화면에도 나옴-->

<input type="radio" name="choice" value="b"> b



<input type="checkbox"> 다음에 ID 기억하기

 

<texttarea> : Multi-line Text Input

• input과는 다르게 줄바꿈이 가능함. 닫는 태그 필요

 

6. <button> : button

- 말그대로 버튼을 만들 수 있는 태그

<div>

  <span>
  
    <button>로그인</button>
    
  </span>
  
  <span>
  
  	<button>회원가입</button>
  
  </span>

</div>