우롱차 2020. 8. 11. 16:34
728x90

id는 문서내의 유일하게 특별하게 select지정

.class {} : 공통적인 테마 적용할  때

 

아이디값이 버튼이라고 되어있는곳이 있으면

그 셀렉트 안쪽에 버튼이라는 태그가 있으면

button이라는 태그가 여러개있을 때 스타일을 지정하는 방법

 

.html은 공백 px의 p,x하나하나 1byte임 그래서 

시계방향으로 

이런식으로 사용함

조금이라도 용량을 줄이자하는 취지에서 만들어짐

보통 사용할 때 4개 혹은 2개 로 자주쓰고 (w3shcool에 css margins 참조)

메이븐.org
메이븐 컴파일러의 최신 버전 확인
pom.xml에서 최신버전으로 변경 해주기

<%@ page language="java" contentType="text/html; charset=${encoding}"
    pageEncoding="${encoding}"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="${encoding}">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>나의 홈페이지</title>
</head>
<body>
<h3>나의 홈페이지 방문을 환영합니다.</h3>
</body>
</html>

home.jsp 파일 이렇게 템플릿 정해줌.


스프링

<link rel="stylesheet" type="text/css" href="static/main.css"/>
css파일 불러들일때 쓰는 type은 최신버전으로 와서 안써도 되지만
다른 인터넷 환경을 위해????? 해줌

1.pom.xml 고쳐주고 update

2. home.jsp 템플릿 고쳐주고

3. home.jsp에 vsc에서 작성한 코드들 body안에있는 tag들을 복사 붙여넣어주고

4. resources(static으로 변경) 안에 css폴더 만든 후에 main.css 파일안에 vsc에 적은 style태그 안에 있는 것들 복사해줌

앱서블릿에 여기도 변경

5. home제이에스피를 복사 write제이에스피로 저장

6. css에서 a tag 버튼태그로 상속받기

 

.gitignore에 있는 것들 그냥 갖다 복사해서 넣어놓으면 됌

.target을 특히 중요시

.class도 

 

liner 는 효과가 부드럽게 나타내게 하는 효과

transition: all 0.5s linear;

a href="주소"는 무조건 GET으로 간다. (태생이 그래!)

POST로 보낼 수 있는 방법은 입력할 수 있는 form화면으로 보여주고 입력하는 박스를 클릭했을 때만  POST로 보낼 수 있다. (blog의 README.md확인)

& :쿼리문

<div>
	<input name="title" placeholder="제목을 입력하세요" />
</div>

<div>
	<input name="content" placeholder="내용을 입력하세요" />
</div>

이렇게 넣어주면 변수에 값이 저장이되는거

GET으로 받으면 바로 문자열이 그대로 보이고

?뒤에서부터 255까지만 받아서 데이터 유실이 있을 수 있다.

평문 문자열 길이 256자

<form action="writer" method="GET">
<div>
<input name="title" placeholder="제목을 입력하세요" />
</div>

<div>
<input name="content" placeholder="내용을 입력하세요" />
</div>

<div>
<input name="user" placeholder="사용자를 입력하세요" />
</div>

<div>
<button>처음으로</button>
<button>저장</button>
</div>
</form>

POST로 form method를 변경했을 때 나타나는

get방식으로 보내면 데이터가 header에 실려서 가는거임

그래서 header길이가 제한되어있기 때문에 문자열을 잘라버리는 거임

 

post로 보내면 body에 실어서 보내서 이론상으로 무제한으로 데이터가 가능하다.

데이터 크기를 내마음대로 보낼 수 있음

또 패킷(묶어서)보내기 때문에 데이터 탈취가 어렵고

우리는 무조건 POST로 보내야한다고 생각하자!!

 

model.addAttribute("TITLE", title);
model.addAttribute("CONTENT", content);
>>> controller

<section class="blog_title">
	<h4>${TITLE}</h4>
</section>
<section class="blog_text">
	<p>${CONTENT}</p>
</section>
>>> view.jsp

spring은 jsp를 열어서 ${}에 있는 변수명을 찾아가고

model에있는 변수명을 읽어서 버물림 (rendering렌더링한다)

다시 html로 변경해서 사용자에게 보여줌

 

서버는 웹이 요청(request)하면 처리를 하고 다시 되돌려준다(response)

서버가 먼저 웹에게 보여주지 않음

서버는 항상 웹이 요청했을 때만 보여준다 여기에서는~

 

요즘에는 서버가 웹에게 먼저 보여주는 서비스가 생겨나고 있음 (push service라함)

ex) 카톡이 서버에게 보내지고 상대 카톡에 서버가 push하는 거임

 

전통적인 인터넷 서비스는 웹이 서버에게 요청 서버가 응답하는 식

 

선생님 깃허브 reference > settings > web.xml

데이터를 다시 분석해서 한글은 한글대로 영어는 영어대로 특문은 특문대로 잘 포장해서 전달해주는 식

이 친구가 한글을 깨지지않도록 해주는

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
	version="4.0">
	
	<filter>
		<filter-name>encKor</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	
	<filter-mapping>
		<filter-name>encKor</filter-name>
		<url-pattern>*</url-pattern>
	</filter-mapping>

오늘 keypoint

jsp파일로 입력해서 컨트롤러에 보내는 방법

jsp와 컨트롤러가 잘 주고받는 방법을 잘 이해해주쎄용~~~

728x90