분류 전체보기 211

스프링 MVC 6 - thymeleaf, @ModelAttribute, PRG, Redirection

0. 부트스트랩 html form 이쁘게 보이도록 하려고 사용 https://getbootstrap.com 동작 https://getbootstrap.com/docs/5.0/getting-started/download/ Compiled CSS and JS 항목을 다운로드 압축을 풀고 bootstrap.min.css 를 복사 폴더에 추가 : resources/static/css/bootstrap.min.css intellij css 작동 안할시 해결방안 'out' 이란 build folder(=compile folder) 삭제후 서버 재시작 정적 리소스가 공개되는 /resources/static folder에 HTML 두면, 실제 서비스에서도 공개된다. = 실제 서비스 운영시 해당 위치 html를 아무나 ..

framework/spring 2023.04.30

5. 표현식과 문

1. 값 식(표현식)이 평가되어 생성된 결과 평가: 식을 해석해서 값을 생성 혹은 참조하는 것 // 10 + 20은 평가되어 숫자 값 30을 생성 10 + 20; // 30 모든 값은 data type을 가지며 메모리에 저장된다. 현재는 값이 저장되었지만 변수가 없기에 재사용이 불가 2. 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 리터럴의 종류 정수, 부동소수점 2진수, 8진수, 16진수 문자열 불리언 null, undefined 객체, 배열, 함수 정규식 3. 표현식 값으로 평가될 수 있는 문 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조 예 값을 생성 기존 값 참조 // 표현식 : 100 // 100은 js engine에 의해 평가되어 값을 생성하므..

language/javaScript 2023.04.30

4. 변수

변수가 존재하지 않을 시, 값은 메모리 주소에 저장된다. 메모리 주소를 통해 값에 직접 전근하려는 시도는 올바른 방법이 아니다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 값의 위치를 가리키는 상징적인 이름 1. 식별자 변수 이름을 식별자라고 한다. 식별자는 값이 아니라 메모리 주소를 기억하고 있다. 변수, 함수, 클래스 등의 이름은 모두 식별자이다. 위의 이름과 같은 식별자는 네이밍 규칙을 준수해야한다. 선언에 의해 JS에 식별자의 존재를 알린다. 2. 변수 선언 변수 선언 변수를 생성하는 것 var, let, const 키워드 사용 JS engine에서 변수 선언 2 step 선언 단계: JS에 변수의 존재를 알림 초기화 단계 : unde..

language/javaScript 2023.04.30

11. CSS 추가 규칙과 반응형 웹

1. @import 규칙 1.1. 개요 핵심 css 파일 내부에 css 파일을 추가가능하도록 해준다. 사용 경우 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 사용 css file을 제공하는 외부 css를 받아올 때 사용 외부 font 받아오는 경우 사용 방법 @import url(); 외부에서 호스팅되는 CSS 파일을 가져오는 방식 @import ""; 현재 파일과 같은 경로에 있는 CSS 파일을 가져오는 방식 1.2. 예시 css file의 규모가 커질시 코드를 쉽게 알아보기 위해 파일을 분리할 경우 /* 현재 code block은 style.css 내부*/ /* default value */ @import "reset.css"; @import "variable.css..

web Language/css 2023.04.30

01,02,03 프로그래밍, 자바스크립트란, 자바스크립트 개발 환경과 실행 방법

1. 프로그래밍, 2. 자바스크립트란 컴퓨처가 이해할 수 있는 기계어로 변환하는 일종의 번역기 번역기 컴파일러 인터프리터 컴파일 언어 인터프리터 언어 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머시 코드로 변환한 후 실행 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환한 후 실행 실행 파일을 생성 실행 파일 생성 안함 컴파일 단계와 실행 단계가 분리, 명시적인 컴파일 단계를 거치고 명시적으로 실행 파일을 실행 인터프리트 단계와 실행 단계가 분리 안됨 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행 실행에 앞서 컴파일은 단 한번 수행 코드가 실행될 때마다 인터프리트 과정이 반복 수행 컴파일과 실행 단계가 분리되어 있으므로 코드 실행 속도가 빠르다 ..

language/javaScript 2023.04.30

4. Mega Menu - 가로 및 반응형

1. summary property float : tag 자체를 좌우로 이동 text-decoration: link 밑줄 없애줌 border : none; // button 테두리 없애기 button border: none; // 버튼의 테두리 제거 outline: none: // 버튼 클릭시 생기는 포커스 표시 제거 inherit: 조상의 attribute 값을 들고 옴 box-shadow: 해당 block 그림자 넣기 z-index: position이 absolute, relative, fixed 같은 경우 적용, 숫자가 클수록 위로 쌓임. 팝업, 드롭다운 메뉴 만들 때 사용 background: 배경 이미지, 색상, 위치 등을 설정하는데 사용 background-color: 요소의 배경 색상만을 설..

web Language/css 2023.04.27

외장 tomcat 사용법 및 project 생성

개인 학습용 설치 방법 인텔리제이 맥북용은 애초에 spring 프로젝트를 처음부터 build하는 것이 힘들다. 그래서 기존에 있는 workspace를 다운로드 받아서 사용해야한다. 맥북으로 sat 설치 까다로움 맥북 apache tomcat 설치 파일 - 두번째 꺼 프로젝트 생성 spring으로 생성된 ch2 workSpace 자체를 다운로드 open open 시, marven으로 check 외장 tomcat 설치 방법 우상단 run configuration 우클릭 edit configurations 클릭 + 버튼 눌러서 tomcat Server -> local 클릭 우측 화면 configur... 부분에 내가 다운로드 받은 apache 경로 지정 apply 후 시간이 조금 흐른 후 deployment..

스프링 MVC 0 - 웹애플리케이션 이해

1. web server, web app server 웹 http 기반으로 작동 = http protocol의 규칙을 따라서 요청과 응답이 오고 간다. http 메시지 거의 모든 형태의 데어터 전송 가능 ex) HTML, TEXT, IMAGE, 음성, 영상, 파일, JSON, XML (API) 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 1.1. 용어 1.1.1. 웹 서버(WEB) HTTP 기반으로 동작 정적 리소스 제공, 기타 부가기능 webServer가 가지고 있는 html,css.js.img,avi 를 client가 요청시, http로 응답해주는 것 ex) NGINX, APACHE 1.1.2. 웹 애플리케이션 서버(WAS) HTTP 기반으로 동작 웹 서버 기능 포함 + (정적 리소스 제공..

framework/spring 2023.04.26

6. HTTP 상태코드

상태코드: client가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 종류 1xx (Informational): 요청이 수신되어 처리중 2xx (Successful): 요청 정상 처리 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 1. 2xx (Successful) 200 OK 요청 성공 201 Created 요청 성공해서 새로운 리소스가 생성됨 202 Accepted 요청이 접수되었으나 처리가 완료되지 않았음 배치 처리 - 대량의 반복적인 데이터 작업을 완료하는 데 사용하는 방법 - 시스템에서 ..

CS 2023.04.25

3. accordion 메뉴창 내부 html 보여주기

1. property outline: outline은 단지 테두리만 생기는 것 뿐 - border와 차이점 border: 은 두께만큼 박스의 전체 크기도 커진다. text-align: block 내부 글자 위치 선정 transition: property의 값의 변화가 생길 경우 부드럽게 변화 시켜준다. ::after : 가상요소, 선택한 요소의 일부에만 style 적용, html에 elelment를 적용한 것 처럼 동작 content : ::after ::before와 보통 같이 사용, 요소로 추가된다. overflow : 부모 영역 바깥으로 나가면 해당 부분 자르기 float : 좌우 이동 max-height: div 높이 설정 scrollHeight: 원글이 길어서 화면 바깥으로 빠져나간 부분을 포함..

web Language/css 2023.04.25