💡 핵심 요약 (TL;DR)

'HTML기초: div와 span의 차이, 새탭에서 링크열기'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 동작 원리와 장단점을 비교 파악하여 프로젝트 개발 상황에 적합한 방식을 선택할 수 있다.

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

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

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

div 태그는 한 줄을 차지한다
<div>division</div>

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

2. 새탭에서 링크열기

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

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

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

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

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

<div>
 ID <input type="text" placeholder="아이디">
</div>
<div>
 PASSWORD <input type="password" placeholder="비밀번호">
</div>
<div>
 <input type="checkbox"> 항상 ID기억하기
</div>

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

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

<div>
  <input type="radio" name="choice1" value="a"> 출근이 힘들까?
  <input type="radio" name="choice1" value="b"> 퇴근이 힘들까?
</div>
만약 name이 없다면 중복선택이 가능하다.근데 한 번클릭하면 해제가 안됨.
name의 값은 똑같은 이름이 되어야 같은 그룹으로 지정이 되어 둘중하나 선택이 가능해진다

<div>
  <input type="checkbox" checked> 월급은 내가 받을게
  <input type="checkbox"> 출근은 누가 할래
</div>

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

<div>
<textarea></textarea>
</div>

6. 버튼만들기

<div>
  <button> 제출하기 </button>
</div>

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

#TILHTML&CSS