SH's 개발일기

New > Dynamic Web Project 생성 > 프로젝트 이름 입력 > Next > Finish * JSP 파일 생성 New > JSP File > JSP 파일 이름 입력 > Finish -> webapp 밑에 만들게 됨 META-INF나 WEB-INF에는 만들지 않기 * 프로젝트를 server에 추가하기 JSP 는 PHP나 ASP와는 달리 ‘웹컨테이너’ 방식으로 동작하며, 이클립스 개발환경에서는 Server 에 add/remove 를 하여 웹컨테이너를 적재합니다. 서버에 오른쪽 마우스 - Add and Remove를 눌러 프로젝트 Add >Finish * 특정 JSP 파일 실행시키기 1. 해당 jsp 파일 내에서 우클릭후에 Run As - Run on Server 를 하던지 2. 좌측의 Proj..

BS 의 grid 시스템은 flexbox + 12 column 을 사용한다. 다음과 같이 5종류의 class 제공 screen width 별로 다음과 같다 .col- (extra small devices - 576px 미만) .col-sm- (small devices - 576px 이상) .col-md- (medium devices - 768px 이상) .col-lg- (large devices - 992px 이상) .col-xl- (xlarge devices - 1200px 이상) .col-xxl- (xxlarge devices - 1400px 이상) * BS grid 의 기본 구조 방법1] 우선은 를 만들고 그 안에 넣고자 하는 컬럼들을 넣는다 .col-*-* 클래스들을 넣는다. 첫번째 * 는 scr..

BootStrap 은 HTML, CSS, JavaScript 를 활용한 반응형 웹 (Responsive Web) 프레임워크 . 최신버젼은 (2022.01 현재) 5.1.x (이하 BS5) 4.6.x (이하 BS4) 3.4.x (이하 BS3) BS 장점 - 모던한 스타일을 '손쉽게' + '빨리' 제작 가능케 함 - Mobile-First 로 반응형 웹 설계됨 - typography, forms, buttons, tables, navigation, modals, image carousels 등 다양한 디자인 템플릿 제공 - 현재 시중의 대부분의 브라우저 지원 (IE11 및 그 이하 지원안함) BS 단점 - 너무 오래 + 널리 사용되어, 이제는 그닥 신선하지 않다. - 무겁다.(성능) BS4 → BS5 에서 ..

Flexbox 레이아웃 기존에 학습했던 레이아웃 방법들 1. display : block / inline / table 2. position : static, relative, absolute, fixed ... FlexibleBox 레이아웃 float 나 position 을 사용하지 않고도 반응형 레이아웃 을 손쉽게 작성할수 있다. FlexibleBox 사용하기 1. 우선 flex container 정의 2. container 안에 flex item 들 나열 Flex container 의 property 들 flex-direction : column, column-reverse, row, row-reverse flex-wrap : > nowrap(디폴트), wrap, wrap-reverse flex-f..

* image 가 확대축소 되게 하려면 .responsive1 { width: 100%; height: auto; /* 종횡비율 유지 */ } * 화면이 커져도 이미지 '원래 크기' 이상 늘어나지 않게 하기 .responsive2 { max-width: 100%; /* 이미지 원래의 크기 100% 만큼이 최대치 */ height: auto; } * image를 특정 maximum 사이즈 이내로 국한시킬 경우 .responsive3 { width: 100%; height: auto; max-width: 400px; background-image 또한 크기에 따른 resizing이 가능하다 div { width: 100%; height: 400px; border: 1px solid red; backgroun..

body { /* 기본 값 설정*/ background-color: lightgreen; font-size : 20px; } div.pop { background-color: yellow; padding: 20px; } /* 기본적으로 CSS는 적층형 (덮어쓰기) 으로 적용된다. */ body { background-color: cyan; } /* @media 에서 max-width: ~ : ~ 보다 같거나 작은 경우 min-width: ~ : ~ 보다 큰 경우 */ @media only screen and (max-width: 600px){ /* 600px 이하이면 적용 */ body {background-color: tomato;} p {color: white;} } @media only screen..

box-sizing: border-box ; -> width 안에 border 포함, 반응형에 필수 * { box-sizing: border-box; } 아래 두가지를 '모바일 이나 태블릿' 에서 확인해보자 1. viewport meta태그가 적용 안 된 페이지 https://www.w3schools.com/css/example_withoutviewport.htm 2. viewport meta태그가 적용된 페이지 https://www.w3schools.com/css/example_withviewport.htm 위 두 페이지의 효과를 보려면 꼭! 모바일에서 보기를 추천 (크롬의 device 에서도 체험하기 어렵다) 1.의 경우 필히 '확대' 및 '좌우 스크롤' 을 발생해야 할것이다. 사용자게게 있어 수직스..

jQuery UI 는 JavaScript 와 jQuery 기반 라이브러리로 GUI widget, 각종 애니메이션 효과, 테마 등을 편리하게(?) 사용할수 있도록 제공한다. 공식: https://jqueryui.com/ CDN : https://code.jquery.com/ui/ jQuery 라이브러리 우선 " target="_blank" rel="noopener">https://code.jquery.com/jquery.min.js"> " target="_blank" rel="noopener">https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> jQuery UI 적용 CSS : 종류가 많고 다운로드 받아 커스터마이징 가능 https://c..

$.when() 함수 thenable object들 (다른말로 deferred object)의 이벤트가 끝나면 리턴타입은 Promise 객체 리턴 https://api.jquery.com/jquery.when/ deferred.then() 함수 deferred 들이 다 마무리 되면 콜백 함수 호출 https://api.jquery.com/deferred.then/ $(document).ready(function(){ $("#run").click(function(e){ var $box1 = $(".box1"); var $box2 = $(".box2"); var $box3 = $(".box3"); $box1.animate({left : "200px"}, 1000); $box2.animate({top: "0p..

* jQuery - AJAX jQuery를 사용하는 중요한 이유중 하나가 AJAX를 간편히 구현할수 있기 때문 AJAX를 브라우저 호환성 고민하지 않고 구현할수 있기 때문 실제 JavaScript 만으로 AJAX를 구현할경우, 브라우저 특성별 코드들을 만드는등 복잡한 과정 많음. jQuery는 이를 간편화 하였다. * load() 함수 $(selector).load(URL, data, callback); 서버로부터 데이터를 읽어와서 select된 element 에 넣음 * URL: request 할 url data : 쿼리스트링에 해당하는 데이터 (key-value 쌍으로 이루어짐) callback : load() 완료후 수행할 함수 * Same Origin Policy (동일 출처 정책) 어떤 출처에서..