#절대 길이 단위 px: 픽셀(화소) mm : 밀리미터 cm : 센치미터 in : 인치 선언방법 size1{ font-size:1px; font-size:5mm; font-size:1cm; font-size:0.5in; } #상대 길이 단위 em: 현재 요소의 font-size에 비례한 크기 조절 > 2.0em 일 때 현재 요소에 설정된 font-size의 2배가 된다. rem: 현재 페이지 html태그에 설정된 font-size에 비례한 크기 조절 > 2.0rem일 때 현재 html태그에 설정된 font-size의 2배가 된다. vw (viewport width): 현재 웹 페이지를 보고있는 프로그램의 너비에 기반 > 1vw일 때 현재 viewport width의 1%를 의미한다 vh (viewport..
#Box Model HTML이 요소를 구성하는 방식 제일 바깥쪽부터 margin > border > content 순으로 구성된다. content-box와, border-box가 있다. #box Sizing content-box (기본) width + padding + border로 크기를 결정 border-box width 만으로 크기를 결정 #content-box{ box-sizing:content-box; /* 기본값 */ background-color: red; color: white; border: 15px solid black; width:350px; } #border-box{ box-sizing: border-box; background-color: darkslateblue; color: w..
#Margin 해당 요소의 border 바깥쪽의 여백 해당 요소와 다른 요소와의 거리를 결정한다. top margin과 bottom margin이 만나는 곳에서는 둘 중 더 높은 margin만 적용 된다. margin을 auto로 설정하면 자동으로 margin을 조절하여 요소를 가운데 정렬한다. 아래 사진의 이 색으로 표시된 영역이 Margin이다. (요소의 "외적" 여백) 선언방법 #div1{ /*옆50, 높이25*/ margin:50px 25px; } #div2{ margin:50px; } #div3{ width:500px; margin:auto; } margin: 50px 25px; -> 옆여백 50px, 높이여백 25px margin: 50px; -> 옆,높이 여백 50px margin: auto..
#border - 테두리를 만드는 속성. 위,오른쪽,아래,왼쪽선을 한번에 정한다. 선언방식 div{ /*한번에 3가지 동시 선언*/ border: solid 3px black; /*따로 선언*/ border-width:15px; border-style:solid; border-color:red; } border-width : 선의 두께를 정한다. (픽셀 단위 ) border-style : 선의 모양을 정한다.(기본 none(없음)) border-color : 선의 색을 정한다. border-style 종류 solid | dashed | dotted | double | groove | ridge | inset | outset | hidden | none | 하나의 속성에 여러값 선언 #div1{ borde..
#background-image 배경 이미지를 넣을때 사용하는 속성 기본적으로 바둑판 형식으로 사진이 채워진다. background-image: url('[사진경로]') : 배경화면에 사용할 사진의 경로를 입력한다. - 웹에서 사용할 사진의 주소를 복사후에 넣어도 되고, 로컬PC에 존재하는 사진의 경로를 넣어도 된다. div{ /*웹 상에 존재하는 이미지 주소*/ background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtUMbYGuLdO0HJhrDidBrr4EetIrBj5e-otw&usqp=CAU'); } 배경이미지 기본값 background-repeat : no-repeat -> 기본 바둑판 형식의 사진을 딱 한장만 배..
#Selector CSS에서는 선택자를 이용해 원하는 요소를 선택할 수 있다. - tag : 해당 태그인 모든 HTML요소를 선택한다. - .class : 해당 클래스 속성 (attribute)를 가진 모든 HTML요소를 선택한다. - #id : 해당 ID 속성(attribute)을 가진 모든 HTML요소를 선택한다. li{ background-color:salmon; color:white; padding:3px; margin-bottom:1px; } /* .이 붙은건 class*/ .warning{ border: 3px dashed black; background-color:yellow; color:black; } /* #이 붙은건 id*/ #item1{ color:red; font-weight:bol..
1. 이클립스 IDE에 스프링 부트 개발 툴 설치 1. Help -> Eclipse Marketplace 2. sts검색후 화면에 보이는 세가지 설치 ( 모두다 체크 ) 2. 프로젝트 생성 1. 이름, 사용하는 언어, 버전 선택 2. group : 도메인형식으로 설정 3. package : group이랑 똑같이 ( 달라도됨 ) 4. Next 1. Selected에 보이는 것들 검색하고 체크한뒤 Finish 3. 프로젝트 디렉토리 구조 1. src/main/java - java 파일 2. src/main/resources - Spring 정보, static html 문서 등등 3. src/test/java - Spring Boot Test를 수행할 폴더 4. src/main/webapp - jsp 파일 (..
웹데이터 형식 웹상에서는 다음과같은 형식을 많이 제공한다. XML / JSON / YAML / CSV / TSV / Excel / PDF ... 데이터형식으로는 Text/Binary형식이 있다. Text 일반적으로 에디터로 편집할 수 있는 데이터포맷 자연어(한국어, 영어, 중국어, 일어 ... )와 숫자로 구성된 데이터 장점 편집을 쉽게 할 수 있고 설명을 포함해서 쓸 수 있기 때문에 가독성이 좋다. 단점 보안성이 떨어지고 바이너리 데이터보다 데이터크기가 크다. 주의점 어떤 문자코드(문자인코딩)로 저장되어있느냐에 따라 다른 의미를 갖게 되므로 같은 문장을 텍스트로 저장할 때 인코딩문제를 해결해 주어야 한다. 보통 UTF -8 방식을 많이 사용한다. EX) XML / JSON / YAML / CSV .....
jsp에서 Redirect는 기본적으로 값을 넣지않고 페이지만 이동할때 사용 했지만 addAttribute를 사용하면 값도 넘길수 있습니다. 일단 Redirect 사용문법부터 보겠습니다. Controller @RequestMapping(value = "/studentConfirm", method = RequestMethod.GET) public String studentRedirect(Model model,HttpServletRequest request) { String id = request.getParameter("id"); model.addAttribute("id",id); if(id.equals("abc")) { return "redirect:studentOk"; } return "redirect..
커맨드객체를 통해 값을 출력할때 EL(Expression Language)을 사용했습니다. 이번엔 EL에 별칭을 주는 방법을 알아보겠습니다. StudentInformation DTO/VO package com.co.mvc05_03; public class StudentInformation { private String name; private String age; private String gradeNum; private String classNum; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getAge() { return age; } public v..
스프링에서 HTTP 전송 데이터를 받아오는 방법은 getParameter를 사용해서 받아오거나 @RequestParam이라는 어노테이션을 사용하여 받아올 수 있습니다. 위의 방법은 데이터의 속성들이 적다면 큰 문제가 생기지 않지만 굉장히 많은 속성을 처리하기엔 현실적으로 불가능합니다. 그래서 스프링에서는 커맨드 객체를 지원해서 각체 자체의 속성값을 커맨드 객체에 바인딩하여 처리할 수 있게 해주었습니다. 사용예시 Member VO package com.co.mvc03; public class Member { private String name; private String id; private String pw; private String email; public String getName() { retur..
MVC2 에서는 컨트롤러에서 get,post 어느 방식으로 데이터가 들어와도 doProcess라는 메소드를 생성하여 둘다 한번에 처리하는 메소드를 만들어서 처리했습니다. 스프링 컨트롤러에서는 같은 메소드를 두개만들고 오버로딩을 하여 사용하면 됩니다. studentInput.jsp studentId: studentId: 위 화면처럼 post, get 버튼을 만들어서 입력한 값을 원하는 방식으로 보내보겠습니다. post get get,post를 처리해주는 컨트롤러를 보겠습니다. 어떤 방식으로 데이터를 받아도 처리를 하기위해서 같은 메소드를 오버로딩해서 두개를 만들어주어야 합니다. 오버로딩하기 위해서는 매개변수의 갯수나 타입이 다르면 오버로딩을 할 수 있는 조건을 성립하게 됩니다. 그래서 하나는 ModelAn..