그냥혀유 그냥혀유

1. 웹문서에 디자인 입히기 CSS로 꾸밀 수 있음 2. 스타일과 스타일 시트 스타일 형식은 선택자 {속성: 값; 속성: 값} 스타일을 한군데 묶어 놓은 것을 스타일 시트라고 한다. 브라우저 기본 스타일 and 사용자 스타일 (인라인,내부,외부스타일) 내부 스타일 시트는 에 스타일 정의 외부 스타일 시트는 외부 css파일을 정의한 뒤에 불러오는 것 head에 3. 캐스케이딩 스타일 시트 3.1 캐스케이딩의 의미 -> 스타일 시트의 우선순위가 위에서 아래로 계단식으로 적용되는 것을 의미한다. CSS에서는 웹 요소에 둘 이상의 스타일이 적용될 때 우선순위에 따라 적용할 스타일 결정된다. 3.2 스타일 우선순위 : 사용자 스타일 -> 제작자 스타일 -> 브라우저 기본 스타일 적용범위 : !important -..

1. 모바일 기기를 위한 뷰포트 뷰포트를 지정하면, 접속한 기기와 화면에 맞춰 확대하거나 축소해서 표시할 수 있다. 1.2 뷰포트 지정하기 지정할 수 있는 속성 width (뷰포트 너비) device-width 또는 크기 (브라우저 기본값) height(뷰포트 높이) device-height 또는 크기 (브라우저 기본값) user-scalable (확대 축소 가능 여부) yes or no initial-scale (초기 확대 축소 값) 1~10 1.3 뷰포트 단위 vw : 1vw 뷰포트 너비의 1% vh: 1vh는 뷰포트 높이의 1% vmin: 뷰포트 너비와 높이 중 작은 값의 1% vmax: 뷰포트의 너비와 높이 중 큰 값의 1% 2. 미디어 쿼리 알아보기 미디어 쿼리는 반응형 웹 디자인에서 가장 기본..

1. 연결 선택자 1.1 하위요소 선택자와 자식 선택자 하위 요소에 스타일 적용하는 하위 선택자와 자식 선택자 상위요소 하위요소 부모요소 > 자식요소 1.2 형제 요소 스타일 적용하는 인접형제 + 형제 선택자 요소1+요소2 요소1~요소2 2. 속성 선택자 특정 속성이 있는 요소를 선택할 수 있다. (속성만 선택하는 건 없는 듯하다) 2.1 특정 속성 요소 선택 a[속성] a[속성=값] a[속성~=값] : 여러 값 중에서 특정 속성값이 포함된 요소 선택 (단어별) a[속성 |= 값] : 특정 속성 값이 포함된 속성 요소 선택 (단어별,하이픈포함) ex a[title|=us] : 속성이 us거나 us-로 시작 하는것 모두 a[속성 ^= 값] : 속성값이 정확하게 일치하지 않더라도 지정한 문자로 시작하는 속성..

1. 배경색과 배경범위 지정하기 1.1 background-color 속성 : 배경색 지정 , 상속 안됨 1.2 background-clip 속성: 배경 적용범위 조절 2. 배경 이미지 지정하기 2.1 웹 요소에 배경 이미지 넣는 background-image body{ background-image: url("path"); } 2.2 배경 이미지 반복을 지정하는 background-repeat속성 repeat: 가로세로 반복 (기본값) repeat-x : 화면 너비에 가득 찰 때까지 가로 반복 repeat-y : 높이에 가득 찰 때까지 세로로 반복 no-repeat: 한번만 표시하고 반복 안함 2.3 배경 이미지 위치 조절하는 background-position background-position: ;..

1. 들어가기 전에 - 프로젝트 생성 주의점 Packaging War가 아닌, Jar를 선택 -> JSP를 사용하지 않기 때문에 (스프링 부트를 사용하면 주로 위 방식을 사용하게 된다) Jar+내장 톰캣+ webapp경로x War+ 주로 외부 웹 서버 + webapp경로 o - Welcome페이지 만들기 스프링 부트에 Jar를 사용하면, /resoureces/static 위치에 파일을 두면, Welcome페이지로 처리해준다. 정적컨텐츠는 주로 저 위치에 두면된다. 1.2 로깅 알아보기 - 운영시스템에서는 System.out.println()같은 시스템 콘솔을 사용해서 필요한 정보 출력x > 별도의 로깅 라이브러리를 사용해서 로그를 출력한다. - 로깅 라이브러리 : 스프링 부트 라이브러리를 사용하면 스프링..

1. 시작하기 - 짧은 클라이언트 서버 역사 과거: pc 통신 (p2p) 각자 개인 pc가 서버이자 클라이언트로 서로 연결됨 현재 : 서버 pc 분리하여 서버에 대부분의 데이터를 저장해두고, pc는 약간 다운받아 쓰는 정도임 -> cloud로 발전 - 웹 개발 환경 만들기 > 브라우저 :크롬, vs code, extension: 라이브 서버 정도 > vs code에서 하나의 프로젝트(워크 플레이스) 여로 용도로 사용가능 (live서버에 root directroy) 2. HTML 시작하기 2.1 HTML 기본 문서 만들기 HTML : HyperText Markup Language -> 텍스트, 이미지, 영상등의 리소스 위치를 표시하는 역할한다. -> 위치를 표시하기 위해 tag를 사용함 HTML 구조 파악..

- 직접 만든 프레임 워크와 스프링 MVC는 큰 차이가 없다 - 이름만 조금 다를 뿐 구조는 매우 비슷함. > DispatcherServlet 구조 살펴보기 -org,springframwork.web.servlet.DispatcherServlet 프론트 컨트롤러 패턴으로 구현됨 스프링 MVC의 핵심 - dispatcherservlet도 httpservlet을 상속받아서 사용하고, 서블릿으로 동작한다. - 스프링 부트는 dispatcherservlet을 서블릿으로 자동등록하며, 모든 경로에 대해서 맵핑한다. * 더 자세한 경로가 우선순위 높음 따라서 기존에 등록한 서블릿도 함께 동작함 > 요청 흐름 - 서블릿이 호출되면, service()가 호출됨 - frameworkServlet.service()를 시작..

1. 유연한 컨트롤러 - v5 - 이전에 살펴본 v3방식과 v4방식을 섞어서 쓰고 싶다면 어떻게 해야할까? - 두 컨트롤러는 매개변수와 리턴값이 다르다. ** 어댑터 패턴 두 컨트롤러의 인터페이스는 다르므로 호환이 불가능하다 마치 110v와 220v와 같다. 이럴 때 호환이 안되는 두 인터페이스를 일관되게 사용하고 싶을 때 어댑터 패턴을 사용하면 된다. v3용 어댑터와 v4용 어댑터를 만들고, 프론트 컨트롤러는 어댑터를 통해서 컨트롤러 메서드를 호출하게 만들자. 변화하는 부분은 요청에 따른 각컨트롤러, 그리고 컨트롤러별 매개변수와 리턴 값이다. 어댑터는 이러한 부분을 캡슐화함 -> 각 컨트롤러에 따라 로직을 처리하도록 request에서 값 뽑기, 매개변수 전달 등등을 수행 실제 로직 처리를 각 어답티(컨..