1. Form 태그
•
사용자에게 데이터를 입력받기 위한 화면 구성
•
폼 태그 사이에 아래의 관련 태그를 넣어 하나의 폼을 구성, 사용자의 입력을 받아 원하는 서버의 주소로 데이터를 전송할 수 있음
•
주요 속성
◦
action: 데이터를 전송할 url 주소
◦
method: 데이터를 전송할 방법. 주로 get과 post의 방식 중 하나를 사용
◦
enctype: 데이터를 전송할 때 전송 인코딩 형식을 지정
1.1 input 태그
•
크롤링할 때, 로그인을 하고 나서 이동한 페이지를 크롤링할 시 이용 가능
•
주요 속성
◦
type: 입력 형태 지정 (text, password, button, submit, radio, checkbox 등)
◦
name: 입력 값의 이름을 지정
◦
value: 입력 상자의 값을 지정
1) type = text, password
•
placeholder 속성: 어떤 정보를 넣는지 알려줌
•
사용 예시
<input type="text" name="" value="" placeholder="이메일">
<input type="password" name="" value="" placeholder="패스워드">
HTML
복사
→ 적용시 아래와 같이 나타난다.
2) type = radio
•
여러 개 중에 선택하는 박스 (택1)
•
name 속성의 값으로 그룹핑(같은 name끼리 그룹핑 → 택1하게 만들어짐)
•
요즘에 웹 개발에선 많이 사용되지는 않음
•
사용 예시
<input type="radio" name="radio_1" value="b1">버튼1</input>
<input type="radio" name="radio_1" value="b2">버튼2</input><br>
<input type="radio" name="radio_2" value="b3">버튼3</input>
<input type="radio" name="radio_2" value="b3">버튼4</input>
<input type="radio" name="radio_2" value="b5">버튼5</input>
HTML
복사
→ 적용시 아래와 같이 나타난다.
버튼1
버튼2
버튼3 버튼4 버튼5
버튼3 버튼4 버튼5
3) type = checkbox
•
해당사항을 체크하는 박스
•
사용 예시
<input type="checkbox" name="" value="c1"> 체크박스1</input>
<input type="checkbox" name="" value="c2"> 체크박스2</input>
HTML
복사
적용시 아래와 같이 나타난다.
체크박스1
체크박스2
1.2 textarea 태그
•
여러줄을 입력받는 element
•
input(text)와 달리 여러줄을 입력할 수 있음. 줄바꿈을 인식함.
•
style="resize:none;"을 넣어주면 크기가 고정됨
•
사용 예시
<textarea name="name" cols="30" rows="10" style="resize:none;"></textarea>
HTML
복사
→ 적용시 아래와 같이 나타난다.
1.3 select, option 태그
•
option 선택할 수 있는 dropdown element
•
사용 예시
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select><br>
<!-- select>option[value=$][style=color:red]{option $}*3 -->
<select name="" id="">
<option value="1" style="color:red">option 1</option>
<option value="2" style="color:red">option 2</option>
<option value="3" style="color:red">option 3</option>
</select>
HTML
복사
→ 적용시 아래와 같이 나타난다.
1.4 label 태그
•
사용자에게 각 입력 칸을 설명해주는 레이블(제목) 표시
•
for 속성: 입력 태그에 id 속성으로 지정된 값을 넣어주면 해당 입력 태그를 수식함
•
사용 예시
<label for="username">이름</label>
<input type="text" id="username"/>
HTML
복사
→ 적용시 아래와 같이 나타난다.
1.5 fieldset, legend 태그
•
여러 입력 태그를 하나의 그룹으로 묶고 원하는 제목 지정
•
사용 예시
<fieldset>
<legend>가장 좋아하는 과일은?</legend>
<input type="radio" name="fruit" id="fruit-apple"/>
<label for="fruit-apple">사과</label>
<input type="radio" name="fruit" id="fruit-strawberry"/>
<label for="fruit-strawberry">딸기</label>
<input type="radio" name="fruit" id="fruit-tangerine"/>
<label for="fruit-tangerine">귤</label>
</fieldset>
HTML
복사
→ 적용시 아래와 같이 나타난다.
1.6 button 태그
•
onclick 속성: 클릭했을 때 event. javascript 코드를 넣어줄 수 있음
•
사용 예시
<button type="button" name="button" onclick="javascript:(alert('alert msg'))">Click</button><br>
<button type="button" name="button" onclick="javascript:(location.href = '<http://naver.com>')">네이버로 이동</button>
HTML
복사
→ 적용시 아래와 같이 나타난다.
2. Meta 태그
•
웹문서의 정보(메타 데이터)를 알려주기 위해 작성하는 태그
•
사용자에겐 보이지 않지만 웹 브라우저, 검색엔진, 그리고 메타데이터를 활용하는 웹 서비스들이 사용
•
<head> 태그 내에 위치하고 홀 태그 형식으로 사용
2.1 charset
•
웹문서의 문자 인코딩을 알려주는 역할
•
문자 인코딩: 웹 문서에 표시되는 문자열이 어떤 문자코드 기반으로 해석되고 표현할지를 정함
•
현재의 웹에서는 유니코드 기반인 UTF-8 인코딩을 사용하기 때문에 charset=“UTF-8”으로 작성
◦
<meta charset="UTF-8">
2.2 viewport
•
웹 문서가 그려지는 영역(viewport)에 대해 크기나 확대 비율을 어떻게 조정할지 정함
•
content 속성: viewport 설정 값 지정
◦
<meta name="viewport" content="width=device-width, initial-scale=1.0">
◦
width: 웹문서가 표현되는 영역의 너비를 결정
모바일 기기 너비에 맞추려면 device-width라는 값을 사용할 수 있습니다.
◦
initial-scale: 처음 화면에 보여질 때의 배율을 결정
1.0이면 기본 크기이고 2.0이면 2배 크기
◦
그 외에도 user-scalable, maximum-scale, minimum-scale 등을 사용
2.3 author,description,keyword
•
검색 엔진이나 외부 웹 서비스에 알려질 정보들을 표현
•
SEO(검색 최적화)에도 사용
•
<meta name="author" content="인프런">
<meta name="keywords" content="HTML">
<meta name="description" content="웹 개발 오리지널">
2.4 open graph
•
author, description, keyword 메타 태그로도 정보를 나타낼 수 있지만 open graph 메타 태그를 사용하면 facebook 과 같은 SNS에 더 자세한 정보를 알려줄 수 있음
•
<meta property="og:title" content=＂인프런"/>
<meta property="og:type" content=“article" />
<meta property="og:url" content=“https://www.inflearn.com" />
<meta property="og:image" content="https://cdn.inflearn.com/public/main/profile/default_profile.png"/>
3. 기타 태그
3.1 iframe
•
다른 웹 페이지를 표시하기 위한 element
•
중고나라 네이버 카페 등에서 크롤링할 경우 필요
◦
iframe 안으로 들어가서 element를 선택해서 데이터를 가져와야 함
•
속성
◦
scr: iframe에 표시될 웹 문서 주소
◦
width, height: 높이, 너비 (px 기준, % 가능)
◦
frameborder: 테두리 표시 여부 (1, 0)
◦
scrolling: 스크롤바 표시 여부 (yes, no, auto)
◦
name: a 태그에서 참조할 이름
•
사용 예시
<iframe src="https://www.naver.com" width="600" height="400"></iframe>
HTML
복사
→ 적용시 아래와 같이 나타난다.
참고자료
•
패스트캠퍼스, ⟪데이터사이언스스쿨 8기⟫ 수업자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료