HTML기초: div와 span의 차이, 새탭에서 링크열기

HTML기초: div와 span의 차이, 새탭에서 링크열기

비전공자가 IT개발자로, 커리어전환기8

HTML기초: div와 span의 차이, 새탭에서 링크열기

1. 먼저 div VS span 태그의 차이점

1
2
3
4
5
div 태그는 한 줄을 차지한다
<div>division</div>

span태그는 컨텐츠 크기만큼 공간을 차지한다
<span>요~~~만큼span</span>



2. 새탭에서 링크열기

1
<a href="http://naver.com" target="_blank"> 새탭에서 네이버링크열기</a>



3. 아이디와 비밀번호 입력칸 만들기

아이디칸을 만들때는 인풋타입을 text로 하고
비밀번호칸을 만들때는 인풋타입을 password로 지정해주면 됨!

1
2
<input type="text" placeholder="아이디">
<input type="password" placeholder="비밀번호">

또는 아래와 같이도 그럴듯하게 만들 수 있다!

1
2
3
4
5
6
7
8
9
<div>
ID <input type="text" placeholder="아이디">
</div>
<div>
PASSWORD <input type="password" placeholder="비밀번호">
</div>
<div>
<input type="checkbox"> 항상 ID기억하기
</div>



4. 라디오버튼과 체크박스버튼의 차이점은?

라디오버튼은 그룹설정가능, 중복선택불가능
체크박스버튼은 그룹설정불가능, 중복선택가능

1
2
3
4
5
6
<div>
<input type="radio" name="choice1" value="a"> 출근이 힘들까?
<input type="radio" name="choice1" value="b"> 퇴근이 힘들까?
</div>
만약 name이 없다면 중복선택이 가능하다.근데 한 번클릭하면 해제가 안됨.
name의 값은 똑같은 이름이 되어야 같은 그룹으로 지정이 되어 둘중하나 선택이 가능해진다
1
2
3
4
<div>
<input type="checkbox" checked> 월급은 내가 받을게
<input type="checkbox"> 출근은 누가 할래
</div>



5. textarea는 줄바꿈이 가능하다!

1
2
3
<div>
<textarea></textarea>
</div>



6. 버튼만들기

1
2
3
<div>
<button> 제출하기 </button>
</div>

지금까지의 내용들을 html로 보면 아래와 같다