html기초 - 자주 사용하는 태그로 로그인 창 만들기

1. HTML과 태그

- 웹페이지의 틀을 만드는 마크업 언어

- Tag들의 집합

- 트리 구조로 이루어져 있다.

html 문서 예시

 

- Tag : 부등호(<>)로 묶인 HTML의 기본 구성요소, 여는태그(<tag>)와 닫는태그(</tag>)로 구성되어 있다.

- Self-Closing Tag : 닫는 태그가 없는 경우(<tag/>)

  ex) 이미지 태그 <img src="이미지 주소" />

 

* 태그 종류가 궁금하다면 MDN 참고!

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

 

2. 자주 사용하는 HTML태그

구역 나누기

- <div> </div> : 구역 나누기, 섹션마다 동일한 스타일을 지정할 수 있다. 한 줄을 모두 차지함

- <span> </span> : 짧은 텍스트. 다른 콘텐츠와 같은 줄에 있는 작은 부분을 구분하며 콘텐츠 크기만큼 공간 차지함

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

 

이미지 태그

- <img src="이미지주소"/> : 이미지태그, 자체 닫는 태그(/생략 가능)! src(소스)라는 필수 속성 가짐
- <img src="이미지주소" alt="이미지설명"/> : 이미지 대체(alternative) 속성, 이미지에 대한 설명

<img src="https://blog.kakaocdn.net/dn/CNxUY/btqw7dnElRU/HuVZgvpT6J8n4aEYFathEk/img.jpg">

 

링크 삽입

- <a href="참조링크주소(URL) or ./index.html" target="_blank">내용</a> : 앵커태그. 링크 삽입 기능

• 링크를 삽입하여 다른 웹페이지에 연결시킨다.
• href(하이퍼링크)라는 필수속성을 가짐! 이 때, href속성은 절대경로(URL)와 상대경로(./index.html)로 구분됨.
• 상대경로는 로컬파일을 연결시킬 때 사용하며 도메인 변경 등 절대경로를 사용했을 경우 링크가 끊어지는 현상 방지
• target="_blank" : 링크가 새 창에서 열리도록 지시

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

<a href="naver.com" target="_blank"><img src="https://blog.kakaocdn.net/
dn/CNxUY/btqw7dnElRU/HuVZgvpT6J8n4aEYFathEk/img.jpg" alt="네이버로고"/>네이버</a>
: 이미지태그를 앵커태그로 래핑하여 이미지를 링크로 변환

 

목록 태그

- <ul> </ul> : 순서가 지정되지 않은 목록 태그(unordered list), 목록 항목에 글머리기호 매겨짐
- <ol> </ol> : 순서가 지정된 목록 태그(ordered list), 각 목록 항목에 번호가 매겨짐!
- <li>내용</li> : 리스트 태그, 목록 태그 내에서 개별 요소들을 정렬해 줌

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

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

 

다양한 입력 폼

- <input> : 입력요소

• 사용자의 데이터를 받을 수 있는 대화형 컨트롤이 생성된다.
• type 속성에 따라 여러가지 동작을 처리할 수 있다. (password, button, checkbox, radio 등)
• type을 지정하지 않을 경우 기본값은 text이다.
• type 외에도 다양한 속성이 존재하므로 MDN 참고할 것

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

- <textarea> </textarea> : 일반 텍스트 입력 창. 줄바꿈이 가능한 텍스트 입력 창이 생성된다.

- <button> </button> : 버튼태그. 클릭 가능한 버튼이 생성된다.

<input type="text" placeholder="type here">
<div>
	<input type="radio" name="choice" value="a"> a      // radio 버튼은 선택지 중 하나 선택 가능
	<input type="radio" name="choice" value="b"> b      // name 속성 이용해 하나의 선택지로 묶어줌
</div>
</textarea></textarea>
<div>
	<input type="checkbox" checked> checked             // checkbox는 자유롭게 선택 가능
	<input type="checkbox"> unchecked
</div>
<div>
	<button>Submit</button>
</div>

 

간단한 로그인 창 코드

<div>
	ID <input type="text" placeholder="type here">
</div>
<div>
	Password <input type="password">
</div>
<div>
	<input type="checkbox"> id 기억하기
</div>
<div>
	<button>로그인</button>
</div>
<div>
	<label> <input type="checkbox">Keep Login</label>
</div>