목차
3.
1. HTML 기본 태그
태그 | 내용 |
img | 이미지를 불러오기 위해 사용.
src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정. |
alt | HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값 |
block | div, h1 ~ h6, hr, table 태그 |
span | 텍스트 영역만 반영, inline 태그,
밖에 보이지는 않지만 감싸는 특징이 있음 |
시맨틱 태그 | 시맨틱 태그도 div와 같은 블록 태그 |
•
img 태그
◦
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 태그</title>
</head>
<body>
<h1>이미지 태그 사용</h1>
<img src="image/mini.jpg" alt="mini" width="400" height="300">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1920px-Google_2015_logo.svg.png"
alt="google logo"
height="100">
안녕하세요
</body>
</html>
HTML
복사
◦
view
•
시맨틱 태그
◦
header - 헤더
◦
nav - 내비게이션
◦
aside - 사이드에 위치한 공간
◦
section - 여러 중심 내용을 감싸는 공간
◦
article - 글자가 많이 들어가는 부분
◦
footer - 푸터
2. HTML 입력 양식 태그
•
div 태그
◦
100% width 반영, block 태그, 밖에 보이진 않지만 감싸는 특징이
있음
◦
개행이 되는 특징이 있음
◦
code
<div>div - 111111111</div>
<div>div - 2</div>
<div>div - 3</div>
<div>div - 4</div>
HTML
복사
◦
view
•
form 태그
◦
type
◦
action
◦
method
▪
get - 엽서 (주소/내용)
http://127.0.0.1:5500/tag1.html?search=html5
<form action="tag1.html">
<!-- 입력란에 html5 라고 입력하면 URL이 다음과 같이 확인됨
http://127.0.0.1:5500/tag1.html?search=html5 -->
<input type="text" name="search">
<!-- http://127.0.0.1:5500/tag3.html? URL 상에 물음표가 추가됨-->
<!-- form : action => 데이터를 받을 주소 target -->
<!-- ? : querystring 개념 -->
<input type="submit">
</form>
HTML
복사
▪
post - 택배
(박스 안에 내용을 넣어서 보냄, 안에 내용이 뭐가 들어있는지 모름. 텍스트 뿐만 아니라 binary 파일, 이미지 등을 보냄)
<form action="tag1.html" method="post">
<!-- 입력란에 html5 라고 입력하면 URL이 다음과 같이 확인됨
http://127.0.0.1:5500/tag1.html?search=html5 -->
<input type="text" name="search">
<!-- http://127.0.0.1:5500/tag3.html? URL 상에 물음표가 추가됨-->
<!-- form : action => 데이터를 받아서 처리할 주소 target -->
<!-- ? : querystring 개념 -->
<input type="submit">
</form>
<!-- 보이지 않음 (get, post 구분함) -->
HTML
복사
▪
입력 → 서버 (post로 보내는 게 좋음)
•
보안 차원에서 post로 보냄
◦
input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input tag</title>
</head>
<body>
<div><input></div>
<!-- value = 초기값 -->
<div><input type="text" value="cool"></div>
<!-- 문자, 숫자 입력 시 암호화 됨-->
<div><input type="password"></div>
<!-- 체크박스 : 여러 개 동시 선택 가능 -->
<input type="checkbox"> 개인정보 동의 <br>
<!-- radio : 여러 개 중 하나, name을 설정하면 하나 씩 선택 가능 -->
<!-- checked - 단일 값인 경우 on이 됨-->
성별 :
남 <input type="radio" name="gender" >
여 <input type="radio" name="gender" checked>
<br>
<!-- selected: 선택되는 초기값 지정 -->
<!-- value: 전송되는 데이터가 0, 1, 2, 3
최상 : 0, 상 : 1, 중 : 2, 하 : 3 -->
<select name="status">
<option value="0">최상</option>
<option value="1">상</option>
<option value="2">중</option>
<option value="3">하</option>
</select> 상태
<br>
<input type="file">
<br>
<input type="submit" value="회원가입">
</body>
</html>
HTML
복사
▪
type
•
text
•
password
•
checkbox
<!-- 체크박스 : 여러 개 동시 선택 가능 -->
<input type="checkbox"> 개인정보 동의 <br>
HTML
복사
•
radio
<!-- radio : 여러 개 중 하나, name을 설정하면 하나 씩 선택 가능 -->
<!-- checked - 단일 값인 경우 on이 됨-->
성별 :
남 <input type="radio" name="gender" >
여 <input type="radio" name="gender" checked>
<br>
HTML
복사
•
select
<!-- selected: 선택되는 초기값 지정 -->
<!-- value: 전송되는 데이터가 0, 1, 2, 3
최상 : 0, 상 : 1, 중 : 2, 하 : 3 -->
<select name="status">
<option value="0">최상</option>
<option value="1">상</option>
<option value="2">중</option>
<option value="3">하</option>
</select> 상태
HTML
복사
•
file - 외부로 경로를 보여주지 않음
<input type="file">
HTML
복사
◦
textarea
▪
code
<textarea></textarea>
HTML
복사
▪
view
◦
date
▪
code
<input type="date">
HTML
복사
▪
view
◦
datetime-local
▪
code
<input type="datetime-local">
HTML
복사
▪
view
◦
time
▪
code
<input type="time">
HTML
복사
▪
view
◦
month
▪
code
<input type="month">
HTML
복사
▪
view
◦
week
▪
code
<input type="week">
HTML
복사
▪
view
◦
email - 해당 기능은 잘 사용하지 않음 (’@’만 있어도 적용되는 이슈)
▪
code
<input type="week">
HTML
복사
▪
view
◦
url - 해당 기능은 잘 사용하지 않음
(이미지 참고 - 제대로 된 url 형식이 아니어도 적용되는 이슈)
◦
number
▪
code
<!-- 수량 -->
<input type="number"><br>
HTML
복사
▪
view - 문자는 제대로 적용 안 됨
◦
range
▪
code
<!-- 막대 바로 범위 조정 가능 -->
<input type="range" min="0" max="100">
HTML
복사
▪
view
◦
submit
▪
code
<input type="submit" value="회원가입">
HTML
복사
▪
view
◦
reset
▪
code
<!-- 모든 내용 초기화 -->
<input type="reset">
HTML
복사
▪
view
3. CSS
•
HTML
◦
시맨틱 태그
▪
header - 헤더
▪
nav - 내비게이션
▪
aside - 사이드에 위치한 공간
▪
section - 여러 중심 내용을 감싸는 공간
▪
article - 글자가 많이 들어가는 부분
▪
footer - 푸터
•
CSS3 선택자
◦
특정한 HTML 태그 선택
◦
원하는 스타일, 스크립트 적용 가능
선택자 종류 | 선택자 형태 | 사용 예 |
후손 선택자 | 선택자 선택자 | header h1 |
자손 선택자 | 선택자 > 선택자 | header > h1
|
•
공통적으로 쓰여지는 코드들은 메인 코드 외부에 작성 (CSS, JavaScript)