01 웹 개발 시작하기
클라이언트
-사용자가 웹 사이트에 접근할 때 사용하는 기기
-좁은 의미로는 웹 브라우저를 의미함
->클라이언트 개발 = 프런트엔드 개발
서버
-인터넷에 연결된 컴퓨터
-웹 요소와 여러 정보가 저장됨
->서버 개발 = 백엔드 개발
html (html5)
css(css3)
반응형 웹디자인 구현에 필요
자바스크립트
지금은 html5안에 모든 기능이 다 포함되어있지만, 내용 부담을 줄이기 위해 따로 분류함
02 웹 개발 환경 만들기
웹 브라우저(크롬)와 웹 편집기(vs code)가 필요
vs code 설치 > 한국어 팩 설치 후 vs code 재실행(자동 업뎃 후 한글 적용 안될시에도 재실행하면 됨) > 배경색 변경은 관리 아이콘(톱니바귀)에서 색 테마 선택
작업폴더 지정 => 파일>폴더열기>작업할 폴더 클릭 후 선택
vs code에서 작성한 소스는 웹 브라우저에서 확인할 수 있음. 웹문서의 특징은 소스 작성과 소스 결과 확인이 다른 곳에서 이루어진다는 것.
매번 웹브라우저에서 확인하기 힘들기 때문에 'live server(ritwick dey)' 확장 설치하기 => 코드에서 우클릭> open with live server 클릭 시 탐색기에서 열리는 게 아니라 비주얼코드 스튜디오에서 열림, 코드 수정후 저장하면 바로 수정된 사항이 적용된 것 확인할 수 있음
03 html 기본 문서 만들기
html이란
hyper text = 웹에서 자유롭게 오갈 수 있는 링크. 링크만 누르면 다른 페이지로 옮길 수 있음. 이 기능을 말함.
mark up = 꼬리표. 마크업에 사용하는 꼬리표, 미리 약속된 꼬리표를 태그라고 함
language
=> 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
html 문서 기본구조
시작부분은
<!doctype html> : 현재문서가 html5 언어로 작성된 문서라는 뜻. (웹문서는 html 뿐만 아니라 pdf 등 다양함. 그중html임)
<html> ~ </html> : 웹 문서의 시작과 끝을 나타냄. </html> 뒤에는 아무것도 오면 안됨
*<html lang="ko"> : 한글 지정하는것. 필수 아님. 검색엔진에서 한글 문서를 찾는 등에서 사용됨. 화면낭독기 등에서 한국인이 읽어주는 등에 사용
<html> 태그 안은 <head> 부분과 <body> 부분으로 나눠짐
<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분. 이 부분에 쓰여진 건 화면에는 안나타남.
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용을 작성함.
<head>에 들어가는 내용
<meta> 태그 : 문자셋 등의 정보가 들어감. 한글로 된 내용을 표시하기 위해서는 utf-8 문자셋을 사용함
=> <meta charset="utf-8">
이외에도 <meta name="keywords" content="html의 구조"> : 웹 문서의 키워드로 문서에 어떤 내용이 들어가있는지
<meta name="description" content="html의 구조를 알아봅시다"> : 웹 문서의 내용 설명
<meta name="author" content="Hyunghee Ko"> : 웹 문서의 소유자나 제작자 정보 넣음
<title> : 브라우저 탭 부분에 문서 제목을 넣음
vs code에서 새문서 만들고, '이름.html' 로 확장자까지 넣어서 만들어줌
html문서의 기본구조는 탭이나 엔터 누르면 자동으로 생김 > html lang="ko"로 수정
html은 들여쓰기 여부에 영향받지 않지만 가독성을 위해 들여쓰기 해줌 (2칸 들어쓰기 추천함)
04-1 웹 문서에 다양한 내용 입력하기
제목을 나타낼때는 <h1> ~ <h6> 이용, 1이 제일 큰 글자
<p>~</p> : 묶인 부분을 하나의 단락으로 만들어서 단락 앞뒤에 공백을 넣어줌
<em>~</em> : 강조해서 이탤릭체로 표시
<strong>~</strong> : 강조해서 진하게 표시
<br> : break, 줄바꿈, 닫는 줄 없음
<hr> : 가로줄 넣어줌, 또는 이 앞뒤에 서로 다른 내용이 들어감을 표시해주는 역할. 닫는 줄 없음
<b>~</b> : 진하게 표시. strong은 강조의 의미가 있지만 b 태그는 그냥 굵게 표시할 뿐, 화면낭독기 등 다른 기기에서 읽을때의 차이가 있음. 굵게 표시할 글자는 <b> 태그보다 css 사용하는 것이 좋음
-항목 표시
<ol>~</ol> : ordered list, 순서가 있는 리스트=> 웹브라우저에서 1., 2., ... 순서가 들어감
<li>~</li> : 들어갈 항목들을 넣어줌.
1234가 아니라 abcd로 순서 나타내고 싶으면 <ol type="a"> 로 타입 속성을 바꿔주면 됨
<ul>~</ul> :unordered list, 순서가 없는 리스트. 얘는 굵은 동그라미로 각 항목을 구분지음. 마찬가지로 각 항목은 <li> 태그를 이용해서 써주면 됨
-표 만들기
표의 구성요소 :
표(<table>~</table> 표의 시작과 끝을 나타냄)
<caption>~</caption> 표의 제목을 표시. 브라우저에서 테이블 위 가운데에 표시됨.
행(<tr>~</tr> 한 행의 시작과 끝을 나타냄)
셀(<td>~</td> 각 행에 들어갈 cell을 표시) (<th>~</th> 제목 셀을 표시. 보통 젤 위의 행에 써줌. 진한글자로 표시됨)
이 태그만 가지고는 표의 형태를 갖추지 못하므로 <style> 태그 이용해줌
<style>
table {
border:1px solid #ccc;
border-collapse: collapse;
}
td, th {
border:1px solid #ccc;
padding:10px;
}
</style>
04-2 웹 문서에 다양한 내용 입력하기
-웹문서에 이미지 삽입 (<img> 태그)
해당 웹문서와 같은 폴더에 이미지 파일이 있는 경우 (src 속성에 이미지 파일 경로 써줌, alt 속성은 대체텍스트(시각장애인 등에게 읽어줄 이미지의 설명 등) 써줌, 아이콘 등 특별한 역할 없는 이미지라면 ""로 빈 텍스트라도 넣어줘야함)
<img src="하위폴더명/이미지.jpg" alt="대체텍스트">
경로가 잘못된 경우 엑박과 함께 대체텍스트가 표시됨
-오디오 삽입 (<audio> 태그 이용)
audio 태그 안에 src로 오디오파일 경로 표시, controls로 재생막대(실행, 일시정지, 볼륨 조절, 재생위치) 표시
<audio src="medias/spring.mp3" controls></audio>
-비디오 삽입(<video> 태그 이용)
<video src="medias/salad.mp4 controls width="450"></video>
src:파일경로
controls:플레이어 화면에 컨트롤러/재생막대 표시
width:동영상 사이즈 조절
-<audio>, <video> 태그의 속성
controls : 플레이어 화면에 컨트롤 바를 표시함
autoplay : 오디오나 비디오를 자동으로 실행함(크롬, 모바일 브라우저는 지원안함(소리가 같이 들어있는 비디오인 경우), 꼭 쓰고싶으면 muted 속성 써줘서 소리가 안나게 하면 비디오 자동실행 가능)
loop : 오디오나 비디오를 반복재생함
muted : 오디오나 비디오의 소리 제거
preload : 웹문서를 불러올때 오디오나 비디오 등 멀티미디어 파일을 전부다 불러올건지(auto), 멀티미디어 파일의 메타데이터만 불러올건지(metadata), 아무것도 불러오지 않고 재생버튼을 누르는 순간에 멀티미디어 파일을 불러올건지(none) 지정 가능. 기본적으로 preload="auto"가 사용됨. 약간 페이지 로딩에 시간이 걸림
width, height : 비디오 플레이어의 너비와 높이를 지정해서 바꿔줌. 둘 중 하나의 값만 지정해주면 나머지는 자동으로 계산해서 표시함
poster="파일이름" : <video> 태그에서 사용, 재생버튼 누르기 전에 플레이어 화면에 표시될 이미지 지정
-하이퍼링크 만들기(<a> 태그 사용)
클릭해서 다른 사이트로 넘어가는 기능을 하이퍼링크라고 함. <a> 태그 이용함
텍스트에다가 하이퍼링크를 만들어서 embed.html로 연결(텍스트링크)
=>텍스트를 <a> 태그 안에 넣고, href 속성으로 연결할 파일 경로 써줌
<p><a href="embed.html">멀티미디어 삽입하기</a></p>
이미지에다 하이퍼링크를 만들어서 index.html로 연결
<image>태그 앞에 <a> 태그를 넣고 href속성으로 연결할 파일 경로 지정
<a href="index.html><image src="images/tangerines.jpg" alt="레드향" width="300"></a>
이 링크를 사용하면 다음페이지로 이동하게됨. 원래 페이지로 이동하려면 뒤로가기 해줘야함
=>링크가 새 탭으로 열리게 하려면 target 속성으로 "_blank" 값을 주면 됨
<a href="index.html target="_blank"><image src="images/tangerines.jpg" alt="레드향" width="300"></a>
05-1 입력 양식 작성하기(폼 삽입하기, input)
폼은 사용자에게 정보를 받아들이기 위해 사용하는 형식. 검색창, 로그인창, 로그인 상태유지 버튼, 언어 선택박스 등
html 문서에서 어디부터 어디까지가 폼인지 구분 - <form> ~ </form>
폼 태그 안에 양식 넣으면 됨
폼에서 사용자가 입력하는 정보는 웹 브라우저가 직접 처리하는 것이 아니라 서버의 프로그램이 처리함
(예. 로그인화면)
그 중 어느 프로그램이 처리할지 나타내는 속성 => action="register.php" 등
로그인 화면을 생각해보자. 아이디, 비번 입력하는 버튼, 로그인 버튼 등이 있음
아이디: <input type="text">
input 태그는 사용자가 입력하는 부분임
type 속성에는 버튼, 체크박스 등... 아이디 같은 한줄짜리 텍스트는 text
비밀번호 : <input type="password">
비밀번호는 password 타입으로 주면 됨
input태그는 자동으로 줄바꿈 되지 않는 인라인태그임.
추가로, 화면낭독기를 이용하는 사용자에게 input태그를 이용한 입력칸이 무엇을 입력하는 칸인지 알려주기 위해
<label> 태그로 한 줄을 감싸주자
=>
<label>아이디 : <input type="text"></label>
<label>비밀번호 : <input type="password"></label>
간단한 소스인 경우 label과 input태그를 한번에 label 태그로 감싸주면 됨
만약 input 태그가 복잡하다면 label과 input태그를 분리할 수도 있음(<label>태그에선 for 속성, <input>태그에선 id 속성 이용, for 속성값과 id 속성값으로 똑같은 값 넣어주면 input 태그와 label 태그가 하나의 덩어리가 됨)
<label for="user-id">아이디 : </label>
<input type="text" id="user-id">
버튼을 만들때도 input 태그 이용함. 사용자가 입력한 정보를 서버로 전송해주는 버튼은 type="submit" 속성값을 가짐,
이 버튼에 표시될 내용은 value속성에 적어주면 됨 value="로그인" (로그인 이라는 글자가 적힌 버튼을 누르면 서버로 form 태그에서 사용자에게 입력받은 내용이 넘어감)
<input type="text" id="prod" value="상품용 3kg"> <-input태그에 value속성에 써준 값은 텍스트 필드안에 초기값으로 들어감시간이 지나면서 input 태그 type 속성값이 좀더 세분화되어 원래 text로 입력받던 값들을 각각 email, tel 등의 값으로 받게 됨
브라우저 화면상에는 특별히 차이가 없어보여도, 모바일의 경우 전화번호를 tel로 받게 되면 해당 입력박스를 눌렀을때 숫자 키패드가 뜨게됨. email의 경우, email 형식이 아닌 다른 값이 들어가게 되면 '잘못된 형식'이라는 오류메세지가 뜨는 등 차이가 있음
type="radio"와 "checkbox"의 경우
checkbox는 여러개 항목 중 여러개 사용 가능
라디오버튼은 여러개 항목 중 하나만 선택 가능
둘다 input 태그 안에 value값을 지정해줘야 함. 이 value값은 서버로 전달될 값임.
ex)
<label><input type="checkbox" value="f_3">가정용 3kg</label>
<input type="number">개
<label><input type="checkbox" value="f_5">가정용 5kg</label>
<input type="number">개
=>각 항목마다 value값 지정해줘야 함
3kg 1개, 5kg 2개를 선택 후 입력했다면
f_3 1개와 f_5 2개가 서버로 전송되는 것임
라디오버튼의 경우, 두 버튼 중 하나만 값을 선택할 수 있게 하려면 두 라디오박스의 name속성을 같은 값으로 주면 됨
<input type="radio" name="gift" value="yes">선물 포장
<input ytpe="radio" name="gift" value="no">선물 포장 안함
두 라디오 버튼이 같은 묶음이라는 걸 알려주기 위해 name속성을 사용하는 것임. 같은 name속성을 갖는 라디오버튼들은 사용자가 그중 하나만 선택할 수 있다. 만약 버튼을 5개 만들고 그중 하나만 선택할 수 있게 하고 싶으면 5개 라디오버튼을 같은 name값을 주면 됨
05-2 입력 양식 작성하기(input태그의 여러 유형)
type="number", type="range"
text필드의 좀더 확장된 유형에는 tel, email 말고도 number와 range라는 유형이 있음
number의 경우, 숫자를 직접 입력하는 대신 텍스트박스 옆의 위아래 화살표를 이용,
range의 경우, 텍스트박스가 아니라 막대 위의 점을 움직여서 숫자 지정.
range에서 막대로 내가 선택한 값이 무엇인지 알수없음. 이는 자바스크립트로 처리해줘야함
number와 range에서 사용할 수 있는 속성은 같음
min으로 최소값, max로 최대값 지정(number에서 최대값 5 지정시 화살표 아무리 눌러도 5보다 큰 숫자 안들어감)
value로 화면에 초기값을 나타나게 할 수 있음(range에서 value 1로 지정시 첫 화면에서 막대바의 점이 1에 표시되어있음)
number와 range는 편리한 기능이지만, 지원하지 않는 브라우저도 있으며 브라우저별로 어디까지 지원하는지 차이가 있기 때문에 미리 확인해볼 필요가 있음
type="date", type="time"
날짜의 경우, date(date(연월일)-month(연월)-week(연도와 몇번째주인지) 등), time 등의 타입도 있음
시간을 지정하는 경우 화면에서 칸 옆에 시계 아이콘이 표시되고, 날짜의 경우 달력 아이콘이 표시됨
예전에는 날짜, 시간을 지정하기 위해선 자바스크립트를 이용해야만 화면에 달력을 띄워서 선택할수 있었지만, 이 타입덕에 의해 편하게 이용할 수 있게 됨
입력할 시간, 날짜등의 범위를 제한할 수도 있음. min과 max 속성을 이용하면 됨(지정한 범위 외의 날짜는 비활성화(회색으로 표시됨)되어 달력에서 클릭 안됨.)
<input type="date" min="2020-02-01" max="2020-02-15">
<input type="time" min="14:00" max="16:00">
날짜와 시간도 브라우저 별로 지원하는 기능에 차이가 있음 주의.
웹브라우저에서 caniuse.com (can i use)에 접속하면 html에서 새로 등장한 태그나 속성들을 이용가능한지 체크해볼수있음 (date 이용가능한지 검색=>Can I use date input type ? =>date and time input types 이용가능 브라우저 결과 보여줌.. 숫자들은 버전을 의미함. 초록색은 완전히 지원한다는 의미, 빨간색은 아예 지원 안하는것, 황갈색은 부분적으로 지원)
'known issues' 탭에선 알려진 문제와 그 해결책들을 볼 수 있음
type="hidden"
이건 화면엔 보이지 않고 감춰져있지만 사용자 입력 정보와 함께 서버로 넘어갈 정보를 담아줌
회원가입한 시간, 지역, 유입된 경로 등...
id : 식별자. 고유한 식별을 목적으로 함.. document.getElementId("id")로 참조가능.
id 속성으로 설정된 값은 @RequestMapping에 지정한 server단(클래스나 메서드)의 파라미터로 넘어가지 않기 때문에 server단에서 접근이 불가능함
name : page 영역에서 중복사용 가능. action에 해당하는 페이지에 전달하는 파라미터로 사용함.
태그의 name값이 key로 해서 값(value)가 전송됨.(request에 값이 전달될 때 name과 value 쌍으로 데이터가 저장됨)
서버단에서는 request.getParameter(parameterName)으로 값을 가져옴
자바스크립트에서는 getElementsByName("name")로 가져옴 // element's'인 이유는 name은 중복 가능하게 사용할수있기때문. id는 중복안되어서 하나의 id는 하나의 input에만 사용가능. 또한 id는 단일값이므로 value를 그대로 받아서 사용하지만 name은 배열로 받아서 인덱스를 지정해 value를 가져와야함
value : 서버로 넘겨줄 값
id는 주로 자바스크립트에서 다루기 위해 지정함.
name은 주로 서버단에서 다루기 위해 지정함, 서버단에서는 HttpServletRequest 파라미터로 전달받을 수 있으며, 전달받은 파라미터는 name과 value 쌍 형식으로 이루어져있음
(*id, name속성과 비슷하게 class 속성의 경우, 여러 영역에서 중복정의를 허용하여 재사용이 가능한 식별자임. 요소의 유형과 상관없이 class="xxx"이면 동일한 디자인이 반영됨)
05-3 입력 양식 작성하기(input 태그 주요 속성, form에서 사용하는 태그들)
required 속성 : 필수 필드(반드시 입력해야함)임을 알려줌 예) 이름, 배송주소, 연락처 등 -> 입력해야만 '주문하기(submit)' 버튼을 누를 수 있음(안채우고 누르면 오류메세지 뜸)
readonly 속성 : 초기값으로 지정한 value 값을 사용자가 지우거나 변경하지 못하도록 수정 비활성화. 커서 안들어가고 지워지지 않음. 읽기 전용 필드로 만듦
autofocus 속성 : 해당 페이지에 넘어갔을 때 커서가 자동으로 해당 칸에 깜빡거리도록 설정함
텍스트 영역 만들기
여러 줄의 텍스트를 입력받고 싶을때 - input태그 대신 textarea 태그 사용
cols : 영문 기준... 한 줄에 들어갈 글자수
rows: 처음 화면에 보일 줄 수
select 태그
여러 항목 중 선택할때(화살표 누르면 하단으로 목록 주루룩 열림)
각 항목들은 option 태그로 구분, 화면에 보여질 내용은 <option>과 </option>사이에 써주면 됨, 서버로 넘겨질 값은 value 속성에 값으로 넣어줌.
<option value="family_3">가정용 3kg</option>
<option value="family_5">가정용 5kg</option>
<option value="special_3">선물용 3kg</option>
<option value="special_5">선물용 3kg</option>
selected 속성: 디폴트값으로 지정할 옵션을 지정할 수 있음
'HTML／CSS／Javascript' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 08 (0) | 2023.08.04 |
|---|---|
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 07 (0) | 2023.08.04 |
| [Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 06 (0) | 2023.08.03 |
| [javascript] 기본 문법 (0) | 2023.07.28 |
| [HTML] <form> 태그 (0) | 2022.05.09 |