오늘은 Html에 대한 설정 및 기초를 배워보도록 하겠습니다.
| 목차 | |
| 1. | Html 설정 |
| 2. | text |
| 3. | input |
| 4. | 예제 문제 |
| 5. | 느낀 점 |
1. Html 설정
VSCode를 이용하여 Html를 실행해보겠습니다.
- Extensions에서 Live Sever를 다운로드 합니다.
- setting에 들어가서 Extensions를 들어간 후 Live Server Config에서 chrome으로 변경합니다.
- Html의 경우에는 File을 생성할 때 제목.html로 생성하고 줄에 !를 입력한 후 Enter를 하시면 자동으로 html 코드가 생성이 됩니다.
- 화면에서 줄을 우클릭하고 Open with Live Sever를 하면 출력된 웹 페이지를 출력합니다.
- 웹 페이지에서 F12를 하면 코드를 볼 수 있는 탐색기를 엽니다.
※ mdn web docs
: 웹 개발자들의 웹 기술 참고 사이트
2. text
◈ h
<!-- 실제 화면에 보이는 내용을 작성 -->
body입니다.
<!-- h태그 제목을 표현할 때 사용 h1 ~ h6 -->
<!-- 각 태그마다 고유한 크기와 두께가 정해져있음. 브라우저마다 다를 수 있음. -->
<h1>제목입니다</h1>
<h2>제목입니다</h2>
<h3>제목입니다</h3>
<h4>제목입니다</h4>
<h5>제목입니다</h5>
<h6>제목입니다</h6>
◈ br
<!-- html에서 enter는 줄바꿈이 아니라 공백 하나로 인지(띄어쓰기 1칸) -->
<!-- 줄바꿈 태그를 이용하여 줄바꿈 <br> -->
body입니다 <br>
html 공부중
◈ block / inline / inline
<!-- block / inline / inline + block로 구분 -->
<!-- block : tag 하나가 한줄을 차지하는 태그 -->
<!-- inline : tag 하나가 본인이 가지고 있는 글자만큼의 영역을 가지는 태그 -->
<!-- inline + block -->
- span
<!-- span 태그 : 대표적인 인라인 태그 중 하나 -->
<span>span 태그입니다.</span>
<span>span 태그입니다.</span>
- p
<!-- p 태그 : 대표적인 블록 태그 중 하나 -->
<p>p 태그입니다 <br>
p 태그입니다 <br>
p 태그입니다 <br>
</p>
- b, strong
<!-- b, strong : 글자를 굵게 만드는 인라인 태그 -->
<p>
<b>hello</b> hello</br>
<strong>Hi!!!</strong>
</p>
- ins, del
<!-- ins : 밑줄, del : 취소선 인라인 태그 -->
<p>
<ins>Hello</ins>
<del>Hi~~!!</del>
</p>
- sup, sub
<!-- sup : 위첨자, sub : 아래첨자 인라인 태그 -->
<p>
10<sup>2</sup>
log<sub>10</sub>
</p>
- hr, i, small
<!-- hr : 수평선 블록 태그 -->
<hr>
<!-- i : 기울림꼴 -->
<i>기울림꼴</i>
<!-- small : 작게 -->
<small>small</small>
</body>
</html>
▷ 출력
3. input
<!--
input 태그는 단일태그
속성값이 다양하여 여러가지 기능에 활용 가능.
form 태그와 같이 사용됨. (데이터를 서버로 전송하는 역할)
<input type = "속성명" 옵션>
-->
◈ text
<!--
input type = "text" : 가장 많이 사용 한글, 영어, 특수문자, 숫자 등 글자를 입력
placeholder : 흐리게 표시, 안내문구 같은 것을 입력할 때 사용. 문자를 입력하면 사라짐
input의 value 값이 없으면 내가 쓴 값을 value로 인지
-->
<input type = "text">
<input type = "text" placeholder = "이름입력">
◈ button, submit, reset
<!--
type = "button" : 일반 버튼
type = "submit" : 전송 버튼 - form 태그 안의 값을 서버로 전송
type = "reset" : 취소 버튼 - form 태그 안의 값을 리셋
<button></button> 태그에서도 동일한 속성을 사용.
value="값" input 태그 안의 값을 나타내는 속성
-->
<hr>
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
<hr>※ block, inline
- block tag : 웹 페이지에서 한 줄 영역을 전부 차지함
- inline tag : 웹 페이지에서 한 블럭 영역(문자가 있는 영역)을 차지함
◈ form, action, method
<!--
form : 태그 안의 정보를 서버로 전송하는 역할을 태그
action = "" : 서버의 주소
method = "" : 전송 방식을 설정 2가지 get(기본값) / post
name = "변수역할" value = "값" ex) name = "age" value = "25" name = 25 age = 25
주소?age=25 => 쿼리스트링 => get방식
post : 데이터를 숨겨서 가져가는 방식
-->
<form action="" method="">
<input type="text" name="name" placeholder="이름"><br>
<input type="text" name="age" placeholder="나이"><br>
<input type="button" value="button">
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<hr>
◈ password
<!--input type = "password" : 비밀번호 입력시 사용 (*******으로 표시) -->
<input type = "password" placeholder="비밀번호">
<hr>
◈ checkbox
<!-- type = "checkbox" : 다중선택을 할 때 사용-->
<input type="checkbox" name="" id="">사과
<input type="checkbox" name="" id="">오렌지
<input type="checkbox" name="" id="">바나나
<form action="">
<p>좋아하는 과일을 선택해주세요.</p>
<input type="checkbox" name="fruit" value="apple"> apple
<input type="checkbox" name="fruit" value="orange"> orange
<input type="checkbox" name="fruit" value="banana"> banana
<input type="submit" value="전송">
</form>
◈ lable
<!--
lable : 다른 태그의 제목 역할을 하는 태그
for = "값" = 대상 태그의 id 값과 일치 => id 값을 가지는 태그의 제목이 됨.
id = "하나만 가능 유일한 구분자" class = "중복 가능" => js css 사용
-->
<hr>
<br>
<form action="">
<p>좋아하는 과일을 선택해주세요.</p>
<label for = "apple">사과</label> <input type="checkbox" name="fruit" id="apple" value="apple">
<input type="checkbox" name="fruit" id="orange" value="orange"> <label for = "orange">오렌지</label>
<label for="banana">바나나
<input type="checkbox" name="fruit" id="banana" value="banana">
</label>
<input type="submit" value="submit">
</form>
<hr>
◈ radio
<!--
type = "radio" : 여러개 중 하나만 선택
-->
<form action="">
<p>좋아하는 과일을 선택해주세요.</p>
<label for = "apple1">사과</label> <input type="radio" name="fruit" id="apple1" value="apple">
<input type="radio" name="fruit" id="orange1" value="orange"> <label for = "orange1">오렌지</label>
<label for="banana1">바나나
<input type="radio" name="fruit" id="banana1" value="banana">
</label>
<input type="submit" value="submit">
</form>
<hr>
<br>
◈ month
<!--
type = "month" : 년 월 표시
type = "week" : 년 주 표시
type = "date" : 년 월 일 표시
type = "datetime-local" : 년 월 일 시 분 초 표시
type = "time" : 시 분 초 표시
jquery, 부트스트랩 제공하는 datepicker를 주로 사용
-->
<input type= "month">
<input type= "week" name="" id="">
<input type= "date" name="" id="">
<input type= "datetime-local" name="" id="">
<input type= "time" name="" id="">※ jquery
: 부트스트랩 제공하는 datepicker를 주로 사용 (month와 같은 형식보다 더 좋은 형식이 많음)
=> month와 같은 태그는 잘 사용하지 않음
<!--
type = "email" : email 형식으로 입력되어 있는지 체크, 맞지 않으면 알림창 띄움
-->
<form action="">
<input type="email" name="email">
<input type="submit" name="전송">
</form>
<hr>
<br>
◈ search
<!-- type = "search" : x 버튼이 생김 -->
<input type = "search">
<hr>
<br>
◈ file
<!-- type = "file" : 첨부파일 선택 -->
<input type="file">
<hr>
<br>
◈ number
<!-- type = "number" : 위/아래 버튼이 생김 숫자만 입력 가능 -->
<input type="number" max="10" min="0">
<hr>
<br>
◈ hidden
<!-- type = "hidden" : 안 보이게 숨김처리 (개발 시 많이 사용)-->
<input type ="hidden">
<form action="">
<input type="hidden" name="name" value="영이">
<input type="text" name="nick_name" value="양이">
<input type="submit" value="submit">
</form>
<hr>
<br>
◈ image
<!--
type = "image" : 그림을 삽입하는 태그
src = "경로" alt = "그림이 표시되지 않을 때 대체되는 단어"
<img> 태그로 대체 가능
-->
<input type="image" alt="강아지"
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQgByBT5IiAT_a2x9pUVb4VMoOrlzHH7Jrzj-HB5jzHlR4lNLMS">
<br>
<!-- 상대경로 : ../ 상위폴더로 이동 -->
<input type="image" alt="강아지" src="../image/강아지2.jpg">
<hr>
<br>
◈ url
<!-- type = "url" : http:// 형식인지 체크 -->
<form action="">
<input type="url" name="url">
<input type="submit" value="submit">
</form>
<br>
0 <input type="range" max="10" min="0"> 10
▷ 출력
◈ 속성
<!--
input 속성
모든 태그는 속성을 가지고 있음.
<태그명 속성 = "값" 속성 = "값" 속성 = "값" 속성>
속성은 순서에 상관 없음.
name = "" : 서버로 정보를 전송시 변수명으로 사용되는 속성
value = "" : 서버로 전송시 값으로 사용되는 속성
name = value
id = "" : 한 페이지에 하나만 허용(중복x) (주로 js에서 사용)
id가 겹치면 에러가 나거나 하지는 않지만 작동하지 않을 수 있고, 엉뚱한 작동을 할 수 있음.
class : css / js 구분자 역할을 하는 속성 중복 가능, 여러개 가능
class = "a b c ab" => a b c ab 4개의 class 사용
readonly : 읽기전용
disabled : 비활성화, 서버로 값을 보내지 않음
tabindex : 탭순서 정할 때 사용
required : 필수
-->
<form action="">
<input type="text" name="a" value="111" tabindex="5">
<input type="text" name="b" value="222" tabindex="1">
<input type="text" name="c" value="333" readonly tabindex="3">
<input type="text" name="d" value="444" disabled tabindex="2">
<input type="text" name="e" value="555" tabindex="4">
<input type="button" disabled value="button">
</form>
◈ checked
<form action="">
<!-- checked : checkbox, radio 버튼에서 사용하면 체크된 것으로 표시 -->
<input type="checkbox" name="f" id="" checked> 선택1
<input type="checkbox" name="f" id=""> 선택2
<input type="radio" name="g" checked> 라디오1
<input type="radio" name="g"> 라디오2
</form>
▷ 출력
4. 예제 문제
◎ 문제
▶ 1번
▶ 2번
▶ 3번
◎ 정답
▶ 1번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<h1>자기소개</h1>
안녕하세요 제 이름은 <ins><b>홍길동</b></ins>이고, 현재 <i>활빈당</i>에서 의적활동을 하고 있습니다.<br>
특징으로는 아버지를 아버지<sub>서자라서ㅠㅠ</sub>라 부르지 못했고, 형을 형(<del>형이 나빠서</del>)이라 부르지 못했습니다.<br>
</p>
<hr>
<p>
<h1>수학 문제</h1>
문제 : 한변의 길이가 a인 정사각형의 넓이는?<br>
답 : s = a<sup>2</sup>
</p>
</body>
</html>
▶ 2번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>회원가입</h1>
<form action="">
<input type="image" alt="강아지"
src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQgByBT5IiAT_a2x9pUVb4VMoOrlzHH7Jrzj-HB5jzHlR4lNLMS">
<br>
아이디 : <input type="text" name="아이디">
<br>
비밀번호 : <input type="password" name="비밀번호">
<br>
비밀번호 확인 : <input type="password" name="비밀번호 확인">
<br>
이메일 : <input type="email" name="이메일">
<br>
성별 : <label for = "남자">남자</label><input type="radio" name="성별" id="남자"> <label for = "여자">여자</label><input type="radio" name="성별" id="여자">
<br>
전화번호 : <input type="number" name="010">-<input type="number" name="1234">-<input type="number" name="5678">
<br>
<input type="submit" name="회원가입" value="회원가입">
</form>
</body>
</html>
▶ 3번
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>공지사항</h1>
<hr>
<form action="">
<p>
작성자<input type="text" name="이름" value="OOO">
<br>
제목<input type="text" name="제목">
<input type="checkbox" name="공지" id="공지"> <label for ="공지">공지</label>
</p>
<p>
내용
<br>
<textarea name="content" id="" cols="50" rows="10"></textarea>
</p>
<hr>
<br>
파일첨부
<br>
<input type="text" disabled>
<input type="file" name="file1">
<br>
<input type="text" disabled>
<input type="file" name="file2">
<br>
<input type="text" disabled>
<input type="file" name="file3">
<pre>
<small>
- 파일 확장자가 zip,pdf,hwp,doc,txt,xis,xisx,ppt,pptx,jpg,jpeg,gif,png,egg,dwg,wax,psd,ai인 파일만
업로드 하실 수 있습니다. (파일명은 특수문자 +,#,$ 등 & 공백 사용금지!)
- 파일 업로드 시, 첨부파일 1개당 200MB까지 가능합니다.
</small>
</pre>
<hr>
<input type="reset" value="취소">
<input type="submit" value="등록">
</form>
</body>
</html>※ textarea
- cols : 가로 길이, rows : 세로 길이 (이용자가 게시판, 댓글과 같은 입력창에서 사용됨)
※ pre
- 서식 그대로 출력 (띄어쓰기 같은 공백들을 그대로 출력해줌)
5. 느낀 점
Html에서 배운 내용들이 일상생활에서 쉽게 접근할 수 있는 부분들이 많아서 수업을 들으면서 흥미롭게 수업을 들을 수 있었고, 다음 수업은 어떤 내용을 배울지 기다리지기도 했다.