이제하네

클라이언트 - 서버 구조 웹 서비스는 클라이언트의 요청에 따른 서버의 응답으로 동작 클라이언트: 서비스를 사용하는 프로그램 또는 컴퓨터 서버: 서비스를 제공하는 프로그램 또는 컴퓨터 클라이언트의 요청에 응답하려면 당연히 서버가 실행 중이여야 한다 localhost:8887/hello의 의미 localhost:실행 중인 서버의 주소중 특별한 주소인 내 컴퓨터를 의미 IP주소를 127.0.0.1과 같은의미 8887: 포트 번호를 의미 localhost가 우리집이라면 8887은 방 번호에 해당됨 hello: 서버에 요청하는 파일을 의미

스프링 부트란 자바 웹 프로그램을 더욱 쉽고 빠르게 만들기 위한 도구 자바 웹 프로그램을 만들기 위한 기능과 도구가 모여있다 스프링 과 스프링 부트의 차이점 스프링 부트는 의존성 관리가 편하다 기존 스프링은 원하는 라이브러리를 사용할 때마다 의존성을 각각 설정해야하지만 스프링 부트는 메이븐의 경우에는 부모, 자식 관계로 의존성이 버전 등을 미리 세팅해놓고 제공하고 그래들인 경우는 플러그인 블록을 통해 스프링 부트가 관리하는 의존성을 받아올수 있다. 자동 설정 스프링은 많은 환경 설정이 필요하지만 스프링 부트는 환경설정 부분들을 의존성 추가와 함께 프로퍼티즈 파일만 설정 해주면 가능하다. 내장 WAS 스프링은 웹 애플리케이션을 개발하고 나서 배포하려면 외부 WAS 서버를 이용해야하지만 스프링 부트는 WAS..

* { margin: 0px; padding: 0px; } #main { width: 100%; height: 100vh; overflow: hidden; background-color: #b1e1e2; animation: sky linear 20s infinite; } #title { width: 1000px; position: absolute; top: 68%; left: 50%; transform: translate(-50%, 150%); font: 92px/1 "Poiret one"; color: #fff; text-align: center; animation: day linear 20s infinite; } section{ width: 1000px; height: 500px; position: ..

js을 사용해서 간단히 좋아요 모션 구현 처음에는 그냥 색깔만 변하도록 설정 했는데 모양을 바꾸고 싶어서 클래스 네임을 바꾸는 형식을 취함 또한 설명할때 쉽게 하기위하여 궁금한거나 새로 알았던 사실에 주석을 달아 설명할때 이야기 할수 있도록 함

기본 틀 작성 이름 둘리 나이 999999세 직업 백엔드 엔지니어 위치 서울, 대한민국 이메일 example@example.com 거기에 맞는 CSS * { margin: 0px; padding: 0px; } #main { width: 100%; height: 1000px; display: flex; justify-content: center; } .profile-card { margin-top: 100px; width: 300px; height: 400px; border: 1px solid #ccc; border-radius: 5px; padding: 20px; text-align: center; } .profile-picture { width: 100px; height: 100px; border-ra..

지금까지 공부했던 html, css, js 을 사용해서 간단한 웹 페이지 생성 실습페이지 로그인 프로필 보기 내용 먼저 헤더부분을 구성하기위해 로 헤드부분을 생성 * { margin: 0px; padding: 0px; box-sizing: border-box; } ul { list-style: none; } a { text-decoration: none; } #header { width: 100%; border-bottom: 1px solid #ddd; background: gray; } #header .inner { width: 1180px; height: 80px; margin: 0px auto; position: relative; } #header .inner h1 { position: absolu..

속성값 알아내기 변수 link 에 a의 요소를 저장 getAttribute() 함수를 호출 getAttribute() 는 선택된 요소의 속성값을 구하는 함수 괄호 안에 인수값으로 알아내고 싶은 속성명을 입력하면 해당 속성값 반환 인수로href를 넣고 결과값을 변수 link_herf 에 저장후 콘솔로 확인 속성값 변경하기 link2 에 a의 요소를 저장 변수 new_href 에 변경할 주소값을 저장 변수 link2를 불러와 setAttribute() 함수를 실행 setAttribute() 은 2개의 인숫값을 전달 첫번째 인수는 변경할 속성명 두번째 인수로는 변경할 속성값 입력

함수 정의 및 호출로 기능 재활용하기 함수란 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여서 정의한 코드 plus 함수의 괄호 안에 num1, num2 라는 매개변수를 만듬 매개변수는 함수 외부에서 내부로 값을 전달하는 통로 매개변수를 통해 실제 전달되는 값을 인수라고 함 plus함수는 외부에서 매개변수 num1,num2로부터 2개의 인수를 전달받고 내부의 해당값을 더함 See the Pen 코드패키징 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 버튼에 on 클래스가 붙으면 글자색이 검정으로 활성화되고, 박스는 y축으로 180˚회전하면서 투명도가 1이 되도록 함 입체적으로 보이기 위하여 부모 요소 section에 perspective 로 원근감 설정 버튼 ..

클래스 이름만 추가·제거하는 방법으로 스타일 변경 See the Pen js추가제거로 스타일변경 by 신범식 (@ulqsqjpw-the-solid) on CodePen. document.querySelector()문으로 #wrap 요소를 찾아서 변수 wrap에 저장 wrap을 불러 다시 querySelector으로 자식 요소인 ex1-1을 찾아 변수 box에 저장 addEventListener()문을 활용하여 wrap 을 클릭하면 자식 요소의 배경색 변경 ※ 하짐만 이렇게 인라인 형태로 삽입된 스타일 구문은 우선순위가 매우 높아서 기존 css파일에 적용된 스타일 우선순위에 문제가 발생할 수도 있다. 스타을 속성값을 직접 변경하지않고 클래스명을 추가해서 스타일 제어 See the Pen Untitled b..

클릭 이벤트 연결하기 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. .addEventListener() 문은 요소명.addEventListener("이벤트명" , (전달될 값) =>{실행할 구문}); 으로 사용 js에 있는 1번 같은 경우에는 콘솔에 찍히기도 전에 네이버로 이동 js에 있는 2번 같은 경우에는 네이버로 이동을 막고 콘솔에 내용이 찍힘 e.prventDefault() 문은 이벤트의 기본 기능을 실행 X 호버 이벤트 연결하기 See the Pen 호버이벤트 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 코드 블록 내부에 전달되는 값이 1개이면 괄호를 생략 가능 (e)=> 이걸 e=>로 써도 됨 반복되는..