221221 태그정리2

태그정리1 = https://codingpracticenote.tistory.com/125

221219 태그 정리

---

 

<img src='~~' alt='~~' width='~~' height='~~' />

img 태그

• 이미지를 가져온
• src 속성 : 가져올 이미지의 주소
• alt 속성 : 이미지 불러오기 실패 시 보여줄 문자열
• width 속성 : 이미지의 가로의 길이
• height 속성 : 이미지의 세로의 길이

 

 

<input>

input 태그

• 입력창을 만드는 태그
• 속성 type에 따라 다양한 속성을 가진 입력창을 생성
  • text : 텍스트를 입력할 수 있는 입력창
  • password : 비밀번호를 입력할 수 있는 입력창 (입력된 문자가 가려져 보임)
  • checkbox : 체크 박스를 만듦
  • radio : 라디오 박스를 만듦
  • button : 버튼을 만듦
  • submit : 데이터 전송 버튼을 만듦
  • reset : 초기화하는 버튼을 만듦
  • file : 첨부파일을 선택하는 창을 만듦
  • hidden : 사용자에게 보이지 않는 창을 만듦
  • email : email 형식의 주소를 입력하는 창을 만듦
  • url : url 형식의 주소를 입력하는 창을 만듦

 

 

<button> </button>

button 태그

• 버튼을 생성하는 태그
• 속성 type에 따라 다양한 속성을 가진 버튼을 생성
  • button : 버튼을 생성
  • reset : 초기화
  • submit : 데이터를 전송하는 버튼으로 form 태그와 같이 사용

 

 

<form> </form>

form 태그

• 데이터를 전송하기 위한 태그
• action 속성 : 데이터를 전송할 url
• method 속성 : 데이터 전달 방식이 get인지 post인지 결정

 

 

<a href='https://www.naver.com'>네이버 이동</a>

A 태그

• 클릭 시 다른 주소로 이동하는 태그
• href : 넘어갈 주소

 

 

<ul> </ul>

ul 태그

• 번호가 없는 리스트 ( 아래와 같음)
  • .
  • .
  • .
• List 태그를 이용

 

 

<ol> </ol>

ol 태그

• 번호가 있는 리스트 (아래와 같음)
  
  1. .
  2. .
  3. .
• List 태그를 이용

 

 

<ol>
  <li>사과</li>
  <li>배</li>
  <li>감</li>
</ol>

<ul>
  <li>사과</li>
  <li>배</li>
  <li>감</li>
</ul>

li 태그

• ul태그나 ol태그 안에서 사용되는 태그

 

 

<select>
	<option value='전체'>전체</option>
	<option value='제목'>제목</option>
	<option value='내용'>내용</option>
</select>

select 태그

• 셀렉트 박스 창을 만드는 태그
• option 태그를 이용하여 여러 내용을 입력