📅 2025-09-04
➡️ 오늘은 개인적인 이유로 오전 수업을 듣지 못 했기 때문에 강의 자료와 일일 미션을 통해 새로 알게 된 것, 궁금한 것들 위주로 정리하려고 한다.
🔎 학습 리마인드
📌 링크 태그 - <a>
-
rel속성-
noopener→window.opener연결 차단 → 보안 강화 -
noreferrer→ 내 사이트 주소(Referer) 정보 차단 → 프라이버시 보호
<a href="<https://example.com>" target="_blank" rel="noopener noreferrer"> 외부 사이트 열기 </a> -
-
만약
noopener가 없다면 상태 사이트(example.com)가window.opener를 통해 원래 사이트 조작 가능 (⚠️피싱 위험) -
외부 링크를 새 탭에서 열 때(
_blank)는 둘 다 사용하는 것이 안전함!
📌 입력 태그 - <input>
-
type속성을 통해input의 타입을 정할 수 있음-
text(기본값),password,date,file,checkbox,number,radio,email등 -
❗
radio타입은name값이 같으면 그룹으로 묶을 수 있음 → 같은 그룹 안에서 하나만 선택 가능
-
-
name: 입력한 값의 이름표(키)를 정함- 데이터를 어떤 이름으로 보낼지 결정
📌 라벨 태그 - <label>
-
라벨 사용 방식 2가지
-
for→id<label for="email">이메일</label> <input id="email" name="email" type="email" /> -
input을label안으로<label> <input type="checkbox" name="agree" /> 이용약관에 동의합니다 </label>- 주로 체크 박스, 라디오 박스에 쓰임
-
📌 선택 박스 태그 - <select>
<label for="country">나라</label>
<select name="country" id="country">
<option value="ko">한국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
<option value="ch">중국</option>
</select>-
미국을 선택하고 제출하면,
country=us로 제출됨 -
select속성-
multiple: 여러 개 선택 가능 -
size: 동시에 보여줄 항목 개수
-
-
option속성selected: 기본 선택 값으로 지정
📌 폼 태그 - <form>
-
입력 폼 전체를 감싸는 태그
-
사용자가 작성한 테이터를 한 번에 서버로 전송
<form action="/submit" method="post">
<label for="username">아이디: </label>
<input type="text" id="username" name="username" />
<label for="password">비밀번호: </label>
<input type="password" id="password" name="password" /><button type="submit">로그인</button>
</form>-
주요 속성
-
action: 입력 데이터를 보낼 서버 주소 (URL) -
method: 전송 방식 (GET/POST) -
target: 응답을 어디에 표시할지 결정 (_blank,_self)
-
-
<fieldset>form안에서 여러 입력 필드를 논리적으로 묶어줌
-
<legend>fieldset으로 묶인 그룹의 제목
🌊 Deep Dive
🤔 input의 type 속성 중 tel과 text의 명확한 차이는 뭘까?
➡️
tel이 전화번호 입력이라는 의도를 명시적으로 전달한다는 것은 알겠으나, 입력창에 문자열도 입력이 되길래text와 무슨 차이지? 싶은 생각이 들었다🤔
-
text와tel둘 다 문자, 숫자 모두 입력 가능하고, 자동 형식 검증도 없음 (대신pattern속성으로 입력 형식을 강제할 수 있음)tel에 자동 형식 검증이 없는 이유는 전화번호 형식이 전 세계적으로 매우 다양하기 때문!
-
❗명확한 차이점 → 모바일 사용자 경험
tel을 사용하면 모바일 환경에서는 전화번호 입력에 최적화 된 키패드가 뜬다!
📎 https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/tel
