chrome 개발자 도구(f12)
(우측 상단-도구 더보기-개발자도구)
-
Network
네트워크로 전달되는 데이터 : 패킷
데이터 주고받고 하는 작업 多
요청 메세지(request headers) → header있고 body 있음 -
Response
응답 받은 데이터 -
Elements - style(서식, 꾸밈)
점선 네모 안에 든 화살표 아이콘 누르고, 뷰포트 내에 있는 요소 찍으면 거기 적용된 css들이 나옴 -
console
-> alert("안녕") : 창 뜨면서 “안녕” 출력됨
-> console.log(”test”) : test
-> document.head.parentNode.removeChild(document.head)
:css 걷어내기(없애기)
-> ctrl + 누르면 console창 커짐
HTML
-
HTML : Hyper Text Markup Language
-
크로스 브라우징 이슈(브라우저가 달라서 다 다르게 나옴)로 W3S에서 웹표준에 맞게 작업하도록 웹과 관련된 기술 표준을 정함. (현재 표준 html5)
-
HTML -> 웹의 구조를 담당(웹페이지의 구성요소를 정의할 때 사용)
cf) CSS -> 시각적인 표현을 담당(페이지의 레이아웃이나 서식을 정의)
구조 (head + body)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- title 태그 -->
<title>Title</title>
</head>
<body>
<!-- h1 태그 -->
<h1>Hello HTML5</h1>
</body>
</html>- 이클립스 window-preferance-web-HTML Files 들어가서 encoding UTF-8로 변경(CSS,JSP도 동일하게 변경)
- <meta charset="utf-8"> : 한글을 번역하는 코드라고 생각하면 됨
- workspace, web application의 문자셋을 UTF-8로 변경
- 자바를 하든 스프링을 하든 마찬가지
- 자바스크립트는 general-context type-text-자바스크립트 소스파일 ??
- <!DOCTYPE html> → 문서의 버전 확인할 수 있음. 현재 표준5라서 기본문서임을 알 수 있음
head
- HTML문서에 대한 설정 중심
- meta charset = UTF-8 : 문자 인코딩 설정
- front 페이지 연결/정의
<link> : 외부 css연결
<style> : css 정의
<script> : 외부 js 연결/정의 - 브라우저가 해석하는 웹페이지의 제목, 설명, 사용할 파일의 위치, 스타일정보, 스크립트 위치, 정의하는 태그(보이지 않는 정보를 해석)
body
- 브라우저의 주요 부분 : viewport에 출력될 문서를 정의하는 곳
- w3schools에 tag 정리되어있음.
- 주요 태그 : 문자열태그, 이미지, 단락, 리스트, 테이블, 양식태그
- 글꼴, 사이즈, 색상과 같은 속성은 모두 css에서 하도록 권고(역할분담 명확하게) : 문서 안에 서식을 저장해놓으면 빨리 바꾸기 어려움, 유지보수하는 시간이 길어짐
tag
- <tag명 속성명="속성값" 속성명="속성값">데이터</tag명>
태그명과 속성명은 대소문자 구분 x, 속성값은 대소문자 구분 - <tag명></tag명> : 오픈태그 + 클로즈태그 (데이터 없으면 클로즈 태그 생략)
여는 태그, 닫는 태그 한쌍으로 써야 함. 그래야 웹표준
a 태그 : 페이지 연결
<a href = "www.naver.com">네이버</a>
enter 태그
<br/> → 싱글태그인데 /써주기
문단, 단락 태그
<p></p>
화면 구성 태그(가상의 구분)
<div></div>
제목 태그(h1~h6)
<h1></h1>
가로줄
<hr/>
주석 태그
<!-- -->
ctrl+shift+/ → 주석 태그 단축기(컴퓨터 설정 마이크로소프트 단축기로 되어있어야함)
굵게
<b></b>
기울임
<i></i>
둘다 쓴다면 이렇게 맞춰줘야함
<b><i>내용</i></b>
< : <
> : >
space : <a>태그
href속성 : 연결할 문서나 사이트 주소
target속성 : 하이퍼링크로 연결된 문서가 실행될 위치
_self : 현재 문서 위에서 연결
_blank : 새 창에서 실행
절대경로
<a href="/clientweb/html/day2mission.html">하이퍼링크연습</a>
<a href="http://127.0.0.1:8088/clientweb/html/day2mission.html" target="_blank">하이퍼링크연습</a>
<a href="https://www.daum.net/" target="_self">사이트연결</a>
<a href="https://www.naver.com/">검색창</a>상대경로
<a href="day2mission.html">문서연결(상대경로)</a>
<a href="./day2mission.html">문서연결(상대경로)</a>요청
-
web application 폴더(dynamic web project)에 저장된 application이 실행되도록 요청하는 방법
http://127.0.0.1:8088/clientweb/html/basic.html
http: → 프로토콜
127.0.0.1:8088 → ip
clientweb → port
html → context명
basic.html → application명 -
context
=web application 폴더, 디렉토리
=dynamic web project?? -
프로젝트 익스플로러는 개발자가 보기 위한 파일시스템, 경로를 보여줌
이클립스에 등록된 서버가 인식하는 context의 위치 ->
C:\backend23\work\webwork.metadata.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\clientweb\html 폴더 안의 basic.html 열면
http://localhost:8088/clientweb/html/basic.html
이렇게 나옴
img 태그
- src : 이미지 경로, 이름 지정
- alt : 이미지 로드 안될 시 대체 글자
- width : 이미지 가로 크기
- height : 이미지 세로 크기
- 경로 주의
- 약속에 맞게 폴더의 구조를 만들기
<img src=”이미지 주소”/>
-> 싱글태그지만 웹표준 지키기 위해 슬래쉬 넣음
이미지파일
- 절대경로
: 현재 문서의 위치를 기준으로 경로를 파악할 수 있도록 풀네임을 모두 명시
- 풀네임→서버의 ip와 port도 명시
- ip 생략가능
- path가 /로 시작하면 절대경로의 의미
path(경로) : 파일의 위치
/는 root를 의미
<img src="http://127.0.0.1:8088/clientweb/images/c1.jpg"/>
<img src="/clientweb/images/c1.jpg" width="300" height="300">
- 큰따옴표 써야함, 파일명 영어로
- 상대경로
- 현재 요청된 문서의 위치를 기준으로 src에 명시된 경로를 찾는다.
<img src="clientweb/images/c2.jpg"/>- 현재 문서의 위치 imagetest.html문서의 위치가 /client/html이 위치이므로 이 위치에서 clientweb/images/c2.jpg 를 찾는다
-> . :현재 디렉토리를 의미
-> . . : 상위 디렉토리를 의미
<img src="../images/c2.jpg"/>
-> 상위디렉토리에서 찾으라는 뜻ul, ol, li 태그
- ul : unordered list, 무의미한 순서 목록
- ol : ordered list, 의미있는 순서 목록
- li : ul, ol의 목록
<h1>순서가 있는 목록</h1>
<ol> <!-- 순서가 있는 목록 ordered list -->
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
</ol>
<h1>순서가 없는 목록</h1>
<ul> <!-- 순서가 없는 목록(특수문자 - 기호) un-ordered list -->
<li>java</li>
<li>oracle</li>
<li>servlet</li>
<li>jsp</li>
</ul>
table 태그
- tr : table row (한 행)
- td : table definition(한 칸, 한 열)
- th : 제목 진하게 표현
- border : 두께
- rowspan : 행(가로줄)을 확장하여 넓힌다
- colsapn : 열(세로줄)을 확장하여 넓힌다
<table border ="1px solid black" align="center">
<tr>
<th bgcolor="pink">부서</th>
<th bgcolor="FFFF00">이름</th>
<th bgcolor="BFFF00">직급</th>
</tr>
<tr>
<td>기획</td>
<td>박기획</td>
<td>과장</td>
</tr>
<tr>
<td>영업</td>
<td>박영업</td>
<td>대리</td>
</tr>
<tr>
<td>교육</td>
<td>박교육</td>
<td>사원</td>
</tr>
</table>
연습1
<table border="1" width="500">
<thead>
<tr bgcolor="pink">
<th>번호</th>
<th>제목</th>
<th>저자</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>이클립스</td>
<td bgcolor="skyblue" rowspan="2">스테파니</td>
</tr>
<tr>
<td align="center">2</td>
<td>브레이킹던</td>
</tr>
<tr align="center">
<td>3</td>
<td>감자</td>
<td rowspan="2">김동인</td>
</tr>
<tr>
<td>4</td>
<td>젊은그들</td>
</tr>
<tr>
<td colspan="3">비고:</td>
</tr>
</tbody>
</table>
연습2
<table border="1" width="500" height="500">
<tr align="center">
<td>1</td>
<td colspan="2">2</td>
<td colspan="2"rowspan="2">3</td>
</tr>
<tr align="center">
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
</tr>
<tr align="center">
<td>7</td>
<td colspan="3">8</td>
</tr>
<tr align="center">
<td colspan="3">9</td>
<td colspan="2">10</td>
</tr>
</table>
input 태그
- SUBMIT : 서버에 전송할 수 있는 기능을 가지고 있는 버튼
- 양식태그 : 사용자가 입력할 수 있는 것
ex, 제목, 이미지, 파일, 내용 - method
: get방식(헤더에 저장), post방식(바디에 저장)
바디에 저장하면 주소표시줄에 뜨지 않음 - 체크박스 복수선택가능(취미)
래디오 단일선택 (투표, 결제수단) - 같은 그룹인 경우 name이 동일해야함-> 이름 하나만 추출하고 하나만 null처리하면 되기 때문
- 같은종류의 체크박스는 같은 이름을 주고 제어하자는 약속임
<h3>검색할 단어를 입력하세요.</h3>
<hr size="4"/>
<form>
검색할 단어
<input type="search">
<input type="submit" value="검색 시작" onclick="alert('검색어를 입력하세요')">
</form>
<hr size="4"/>
<form action="/clientweb/login.do" method="post">
<h3>로그인 화면</h3>
아이디 <input type="text"><br/>
패스워드 <input type="password"><br/>
<input type="submit" value="로그인 처리">
</form>
<hr size="4"/>
<h3>회원가입 화면</h3>
<form action="" method="post">
가입할 id <input type="text"><br/>
가입할 pw <input type="password"><br/>
가입할 name <input type="text" placeholder="이름 성순서대로"><br/>
성별 <input type="radio" name="sex" value="남자" checked>남자
<input type="radio" name="sex" value="여자">여자<br/>
취미 <input type="checkbox" name="hobby" value="달리기" >달리기
<input type="checkbox" name="hobby" value="여자" checked>동영상보기
<input type="checkbox" name="hobby" value="여자">인터넷서핑<br/>
전화번호 통신사 <select name="company">
<option value="알뜰폰">알뜰폰</option>
<option value="SK">SK</option>
<option value="KT">KT</option>
<option value="LG">LG</option>
</select>
<input type="tel" name="telnum" placeholder="-없이 숫자로 이어서쓰세요"> <br/>
생년월일 <input type="date"><br/>
가입한 시기 <input type="datetime-local">
가입한 주 <input type="week"><br/>
하고 싶은 말 <textarea rows="10" cols="30" placeholder="100글자 이내로 써주세요."></textarea>
</form>
textarea 태그
<textarea cols="30" rows="10"></textarea>form 태그
- action : 입력 데이터의 전달 위치 지정
- method : 입력 데이터의 전달 방식 선택
- action : 백엔드 어플리케이션 요청해서 보내는거, 사용자가 입력한 네임과 밸류 값 추출(내가 입력한 걸 실행되게 하려면, 서버에 어플리케이션 호출해야하는데, action에서 어플리케이션 명시함)
<form>
<input type="text" name="search"/>
<input type="submit"/>
</form>select태그, option태그, multipe
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/clientweb/login.do" method="get">
<h2>1. 텍스트를 입력 받는 양식 태그</h2>
아이디 : <input type="text" name="id" size="100" maxlength="10" value="bts"><br/>
패스워드 : <input type="password" name="pass" disabled="disabled"><br/>
<!-- name 설정하니까, 주소창에 뜸, 전송됨 -> 이후 DB와 연결 -->
<textarea rows="5" cols="30" name="info" placeholder="100글자 이내로 써주세요"></textarea>
<h2>2. 버튼 관련 태그</h2>
<input type="button" value="자바스크립트 코드를 실행하기 위한 버튼" onclick="alert('안녕')">
<input type="submit" value="서버로 전송">
<input type="reset" value="초기화">
<h2>3. 선택관련 양식 태그 - 체크박스</h2>
<fieldset>
<legend>좋아하는 과목</legend>
<input type="checkbox" name="subject1" value="자바" checked>자바
<input type="checkbox" name="subject1" value="자바스크립트">자바스크립트
<input type="checkbox" name="subject1" value="JSP">JSP
<input type="checkbox" name="subject1" value="SPRING">SPRING
</fieldset>
<h2>4. 선택관련 양식 태그 - 라디오</h2>
<!-- 같은 그룹으로 묶기 위해서 반드시 name속성이 동일해야 한다.
radio는 같은 그룹 안에서 한 개만 선택이 가능
-->
<input type="radio" name="subject2" value="자바" checked>자바
<input type="radio" name="subject2" value="자바스크립트">자바스크립트
<input type="radio" name="subject2" value="JSP">JSP
<input type="radio" name="subject2" value="SPRING">SPRING
<h2>5. 선택관련 양식 태그 - 콤보상자</h2>
<select name="subject3">
<option value="자바">자바</option>
<option value="자바스크립트">자바스크립트</option>
<option value="JSP">JSP</option>
<option value="SPRING">SPRING</option>
</select>
<h2>6. 선택관련 양식 태그 - 목록상자</h2>
<select name="subject4" size="4" multiple>
<option value="자바">자바</option>
<option value="자바스크립트">자바스크립트</option>
<option value="JSP">jsp</option>
<option value="SPRING">spring</option>
</select>
<h2>7. 기타 양식 태그</h2>
검색:<input type="search">
전화번호:<input type="tel"><br/>
수량1:<input type="number" max="20" min="10"><br/>
수량2:<input type="range" step="10"><br/>
날짜:<input type="date"><br/>
날짜:<input type="month"><br/>
날짜:<input type="week"><br/>
파일업로드:<input type="file" name="my file">
<input type="hidden" name="hidden" value="myvalue">
<!-- hidden 태그는 화면에 표시되지 않는다
폼태그를 이용해서 사용자가 선택한 정보를 서버로 넘길 때 필요한 값들을 정의할 용도로 사용
-->
<!-- submit 버튼을 누른 것과 동일하게 동작 -->
<input type="image" src="/clientweb/images/c1.jpg" width="200">
</form>
</body>
</html>
fieldset 태그, legend 태그
기타
- 큰따옴표 중복해서 못씀, 큰따옴표 안에 써야하면 작은따옴표 쓰면 됨
본 포스팅은 멀티캠퍼스의 멀티잇 백엔드 개발(Java)의 교육을 수강하고 작성되었습니다.
