그냥혀유 그냥혀유

1. HTTP 응답 - 정적 리소스, 뷰 템플릿 스프링(서버)에서 응답 데이터를 만드는 방법은 크게 3가지이다. > 정적리소스 : 웹 브라우저에 정적인 HTML,css,js를 제공할 때 > 뷰 템플릿 : 동적 페이지 제공 > HTTP 메시지 : HTTP API를 제공하는 경우, HTTP 메시지 바디에 JSON 같은 형식으로 데이터 실어 보냄 1.1 정적 리소스 - 스프링 부트는 클래스 패스의 다음 디렉토리에 있는 정적 리소스 제공 /static,/public,/resources,/META-INF/resources 등 - src/main/resources는 리소스를 보관하는 곳이자 클래스 패스 시작 경로이다. 따라서 다음 디렉토리에 리소스 넣어두면 스프링 부트가 정적 리소스로 제공 * 내장 톰캣의 경우 w..

대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행된다. 이벤트 -> 이벤트 발생시 실행하는 함수를 이벤트 처리기라고 한다. 1. 이벤트 알아보기 1.1 마우스 이벤트 click,dbclick : HTML 요소를 클릭할 때 이벤트 발생 mousedown,mousemove,mouseover,mouseout,mouserup: 요소 위에서 마우스 버튼을 눌렀을 때 혹은 움직일 때, 요소위에 마우스가 올라가거나 벗어날 때 발생 1.2 키보드 이벤트 keydown:사용자가 키를 누르는 동안 발생 keypress: 키를 눌렀을 때 이벤트 발생 keyup: 키가 눌린 후 발생 1.3 문서로딩 이벤트 abort : 문서가 완전히 로딩되기 전에 발생 error : 문서 로딩이 안될 때 load ..

1. 함수 1.1 함수 선언 함수 선언문 //함수 선언문 function 함수명(){ } //함수 표현식 const 변수명 = function(){ //익명함수 } //람다식 const 변수명 = () => { } //생성자 함수 const object = new Function() - 실행문에서 return을 명시적으로 적지 않으면, undefined가 자동반환된다. 2. var 변수의 특징 2.1 변수의 적용 범위 스코프 알아보기 - 자바 스크립트 변수는 지역변수와 전역변수로 나눌 수 있음 - 전역변수를 선언하려면, 함수 스코프 밖에서 선언하거나 함수 안에서 var 예약어를 빼고 선언해야한다. var 예약어를 사용하지 않으면 전역변수가 된다. function addNumber(){ var sum = ..

1. 뷰포트 지정하기 뷰포트 단위 vw 뷰포트 너비 1% vh 뷰포트 높이 1% 2. 미디어 쿼리 알아보기 2.1 미디어 쿼리란 접속하는 장치마다 특정한 CSS스타일 적용하는 방법이다. 2.2 미디어 쿼리 구문 @media [only | not] 미디어 유형 [and 조건] * [and 조건] only: 미디어 쿼리 지원하지 않는 웹 브라우저에서는 미디어 쿼리 무시 not: 다음에 지정하는 미디어 유형 제외 not tv 등 and: 조건을 연결합니다. @media screen and (max-width:1439px){ } 유형 종류는 print와 screen만 알면된다 일단! 웹 문서의 가로너비와 세로 높이 속성 : 실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고함 width,height 가로너비..

1. with HTML 1.1 confirm() 함수 : 확인, 취소 누르면 해당 값이 boolean으로 return된다. 1.2 prompt 창에서 입력받기 1.3 브라우저 화면에 출력하기 * 자바스크립트에서 html 태그는 객체화 - > 태그는 속성,메서드(이벤트) 있다! * 자바 스크립트 오류는 개발자 도구에서 확인 가능 (콘솔에 오류 뜬다!) 2. 자바스크립트 기본 문법 2.1 변수 (스네이크 케이스+카멜케이스) 동적 자료형 : var, const, let 숫자형: number 문자열: '' 혹은 ""로 묶으면 문자열 처리 배열: []안에 값을 넣으면 됨 -> 이때 배열은 object처리 객체: {키:값, 키:값 }형태 script> var name ='길홍똥'; console.log(name);..

1. 그리드 레이아웃이란? 반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야함 이때 재배치 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용한다. 그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문 이미지의 웹 요소를 화면에 맞게 배치하는 것을 말한다. - 시각적으로 안정된 디자인을 만들 수 있다. - 업데이트가 편한 웹 디자인을 구성할 수 있다. - 요소를 자유롭게 배치할 수 있다. 2. 그리드 레이아웃을 만드는 방법 CSS의 float 속성을 사용할수도 있고, 플렉서블 박스, CSS 그리드 레이아웃으로 적용할 수도 있다. 2.1 플렉서블 박스 레이아웃 그리드 레이아웃을 기본으로하고, 각 박스를 원하는 위치에 따라 재배치 하는 것을 말한다..

1. CSS와 박스모델 1.1 블록 레벨 요소와 인라인 레벨 요소 > 블록 요소인지 인라인 요소인지에 따라 나열 방법이 달라진다. > 블록레벨: 태그로 요소를 삽입했을 때 한줄을 모두 차지 (요소 너비 100%) (다른 요소 올 수 없다) > 인라인레벨: 컨텐츠 영역만큼 차지, 나머지 공간에 다른 요소가 올 수 있다. *요소는 태그 1.2 박스 모델의 기본 구성 블록 레벨요소는 박스 형태이다. 스타일 시트에서 박스 형태 요소를 박스모델 요소라고 한다. 박스모델은 : 콘텐츠영역 패딩: 콘텐츠와 박스 여백 (테두리) 테두리 마진: 여러 박스 모델 사이 여백 이 중 마진과 패딩을 다른 콘텐츠 사이의 간격과 배치를 고려할 때 사용한다. * 마진은 따로 지정하지않으면 기본 스타일에 따라 마진 여백이 할당된다. 1..

1. 글꼴 관련 스타일 웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다. ex body{font-family: "맑은 고딕", 돋움, 굴림} 1.2 글자 크기 지정 font-size font-size : | | | 절대크기: 브라우저에서 지정 상대크기: 부모요소 글자크기 기준으로 상대 크기 크기: 브라우저 상관없이 글자크기 백분율 : 부모요소 글자 크기 기준으로 백분율 *키워드 지정 가능 em : 부모 요소 지정 글자 크기 너비 기준을 1em으로 해서 비율 rem: 문서 시작 부분 크기 1rem으로 비율 백분율은 부모요소 크기 기준임 (단 부모요소가 16px처럼 단위로 표시되어 있어야함) 1.3 이탤릭체 font-style 1.4글자 굵기 font-weight 2.웹폰트 사용하기 > 추..