일상의 조각

타임리프 : 서버사이드 렌더링. jsp와 유사하다. 스프링부트에서 지향하는 엔진이 타임리프다. 기본적으로 내장하고 있다. 기본적인 셋팅을 할 필요가 없다. 타임리프를 위한 준비 : 1. 별도의 라이브러리 필요 2. 추가적인 플러그인이 설치 3. 자동재시작하여 수정된 코드를 반영 자바파일같은 경우에는 컴퓨터가 인식해서 자동적으로 재시작 html은 변경된 사항에 대해서 다시 재요청을 하는 부분이여서.? satatic : 정적인 웹 자원들 / 바뀌지 않는 부분들. 파일만 읽어드린다. js, css , 이미지 파일을 추가. 탬플릿 : 동적인 웹 자원들 / uri 로 주소요청이 일어났을 때 타임리프로 만든 페이지가 위치하는 공간 어플리케이션 프로퍼티 : 스프링부트에 대한 설정파일. 설정파일을 읽고 실행한다. - ..

model 1. -> dao, 비즈니스 로직. java는 네이티브 언어다. 웹 : http 통신을 위해서 만들어져야 되는 기술들이 있다. java만으로는 힘들어. 만들어져 있는 프로그램들을 사용하고싶어. 요게 servlet 입니다. sp는 서블릿을 포함하고 있습니다. html 안에다가 form으로 get post 방식으로 주소요청을 했었죠. 요청을 받을 수 있는 화면이 필요할 거아니에요. db도 조작을 하고... 그게 한번에 가능한 것이 jsp 에요. 요 jsp도 컴파일러를 거쳐서 java 소스는 클래스화시키고. 변혀을 시킵니다. html에 대한 요소들은 . 최종적으로 java 소스는 보여지지 않아요. java 하면서 f12 눌러봤다? java 소스는 보이지 않아요. 순수한 html만 보여지게 돼요. j..

실습1. CREATE TABLE `tb_test` ( `t_name` VARCHAR(5) NOT NULL COMMENT '이름', `t_season` VARCHAR(5) NOT NULL COMMENT '계절', `t_amount` INT(11) NOT NULL COMMENT '수량' ) 실습2. SELECT t_season AS '계절' ,sum(if(t_name='김성주', t_amount, 0)) AS '김성주' ,sum(if(t_name='정동영', t_amount, 0)) AS '정동영' ,sum(t_amount) AS '합계' FROM tb_test GROUP BY t_season ORDER BY FIELD(t_season, '봄','여름','가을','겨울'); 3. 실습 SELECT resul..

그리드 시스템, 반응형 유틸리티 - 부트스트랩 그리드 시스템과 반응형 유틸리티를 활용하여 반응형 웹사이트 제작을 할 수 있다. 그리드 시스템 - 특정 대상의 상위(부모)요소의 크기를 12열로 나누어 정렬시키는 방식 - 크게 디바이스 크기 4가지로 구분하여 정렬 가능 - 디바이스 크기 분류 : 큰 데스크탑 (lg) > 작은 데스크탑(테이블) (md) > 태블릿 (sm) > 스마트폰 (xs) - 그리드 시스템은 접두사 col-디바이스 크기(lg, md, sm, sx)-*(12칸 기준으로 차지할 영역) ex) col-log-6 - 디바이스 크기 4가지를 부트스트랩에서 정의를 해놓고 디바이스 크기가 정해놓은 범위에 접근시 각각의 lg, md, sm, xs 접두사들이 반응을 한다. - .container, .co..

부트스트랩 실습- 회원가입 폼 실습. 아래의 항목에 알맞는 폼을 구성하도록 하시오. 항목 : 아이디, 패스워드, 패스워드 확인, 이메일, 성별 회원가입 아이디 패스워드 패스워드 확인 이메일 주소 성별 남 여 회원가입

부트스트랩이란? - html, css, js 프레임 워크 - html, css, js를 활용하여 만들진 많은 콤포넌트 제공 - 부트스트랩을 활용하여 제작된 사이트는 반응형 웹사이트가 된다. - 반응형 웹사이트 : 디바이스 크기에 맞춰 화면이 변환하는 웹사이트 경로 : http://bootstrapk.com 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com 1. 현재 사용할 버전은 3버전이다. 5버전까지 나와있지만 5버전에서는 제이쿼리를 제..

${cursor}

HTTP 상태코드 : 분류 1XX ( 조건부 응답) 2XX (성공) - 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다. 3XX (리다이렉션 완료) - 요청을 마치기 위해 추가 동작을 취해야 한다 4XX(요청오류) - 클라이언트에 오류가 있음 404(Not Found, 찾을 수 없음): 서버가 요청한 페이지(Resource)를 찾을 수 없다. 예를 들어 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버는 이 코드를 제공한다. 5XX(서버오류) 서버가 유효한 요청을 명백하게 수행하지 못했음 500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없..

제이쿼리 배열 관련 메서드 실습 1. 실습. 아래의 버튼을 클릭시 ul 하위 요소의 li텍스트 요소가 'Y' 일 경우 'N' 으로 , 'N' 일 경우 'Y' 로 변경되는 코드를 작성하고 실행하여라. 반전 Y Y N Y N 속성 상태에 따른 탐색 선택자, 속성 상태변화 및 확인 메서드 1. 속성 상태에 따른 탐색 선택자 - 각 태그의 속성으로 상태를 변화시키는 속성 (checked, selected) - $(':상태속성명'), $('선택자:상태속성명') 1-1. 1개 이상 체크 확인하기 전주 군산 익산 확인 $(function(){ $('#checkBtn').click(function(){ var addr = $('.addr:checked'); //체크될 때 마다 상태가 바뀌기 때문에 안에 선언해야한다. ..

제이쿼리? - 호환성 체크 및 애니메이션 효과를 쉽게 사용할 수 있도록 만들어진 라이브러리 - 제이쿼리를 사용하기 위해서는 제이쿼리 파일이 필요하다. console.log(jQuery, 'jQuery'); console.log($, '$'); console.log($(), '$'); $() -> 선택기(선택자로 객체를 검색) 인수(선택자)에 해당되는 객체를 찾아 반환 제이쿼리 객체가 반환되어야 제이쿼리 메서드를 사용할 수 있다. console.log($('body'), "$('body')"); console.log($(document), "$('document')"); console.log($('안녕하세요.'), "$('안녕하세요.')"); ready - 문서 로딩 완료 후에 실행되는 메서드 문서 로딩 ..