목록HTML (11)
관심쟁이 영호
이번 시간에는 서버를 만들어서 html을 리턴해보자! 먼저 서버를 만들자. 다음에 나오는 코드는 이전 시간에 했던 프로젝트에서 계속 유지한다. [#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse 이용해보자! ㅣ 서블릿 체험 오늘은 이전 포스팅에서 다루었던 서블릿을 코드로 직접 확인하자! 목차 프로젝트 생성 HttpServletRequest 확인 HttpServletResponse 확인 프로젝트 생성 스프링으로 시작할 것이다. 1. 스프링 부트 프로젝 bestkingit.tistory.com @WebServlet(name = "ServletTest", urlPatterns = "/servlet") public class HttpServletTest ..
이번에는 "주문하기"에 대한 코드를 살펴보자. 주문하기는 Member, item, order 등등 모든 테이블과 엔티티가 엮어있기 때문에 조금더 생각을 해야한다! 어쨋든, 홈화면에서 주문하기 버튼을 클릭해보자. 그렇게 되면, localhost:8080/order로 넘어가게 된다. 화면은 아래와 같다. 여기서 Controller에 매핑이 되어있을 것이다. 해당 url이 매핑되어 있는곳으로 가보자! ※ 주문 회원, 상품명을 클릭하면 리스트가 콥보박스처럼 드롭다운된다. @Controller @RequiredArgsConstructor public class OrderController { private final OrderService orderService; private final MemberService..
이전 시간에는 데이터베이스에 테이블을 어떻게 생성하는지 살펴보았다. 이번 시간에는 웹에서 데이터를 생성할 때를 살펴보자. 회원가입을 해보자. 위 그림과 같이 생성했다. "Submit" 버튼을 눌렀을 때, 어떤일이 일어날까!? - 먼저 해당화면을 구성하는 html을 살펴보자. 이름 Incorrect date 도시 거리 우편번호 Submit 위와 같이 구성되었다. 여기서 태그에 주목을 하면, "" 이렇게 코드가 짜여져 있다. 자세한 이해를 하고 싶다면, html의 form태그의 기능을 살펴보자! action 으로 "/members/new"라고 적혀있다. "/members/new"라고 매핑이 되어있는 곳으로 해당 폼정보를 던진다는 뜻이다. method는 폼정보를 post형태로 던진다는 뜻이다. 이렇게 던지면,..
이제부터는 모든 코드를 하나하나 뜯어보고, 어떤일이 일어나있는 지, 왜 그렇게 되는지 완벽하게 분해분석을 할 예정이다. 1. H2 서버를 시작해주고, 프로젝트를 실행해준다. - 해당 내용에 대한 설정은, application.yml에 표시되어 있다. spring: datasource: url: jdbc:h2:tcp://localhost/~/jpashop username: sa password: driver-class-name: org.h2.Driver - 여기서 url로 설정되어 있다. 2. url : localhost:8080으로 접속해준다. 그럼 홈화면이 뜬다. - 왜 localhost:8080인가? 이 이유는 yml에 설정이 되어 있기 때문이다. yml에 server.port에 대한 설정이 없으면 ..
오늘부터 HTML을 공부할 것이다. 웹 기초라고 보면 된다. HTML은 건물을 짓을 때, 기초 골격이라고 생각하면 된다. 해당 포스팅은 유튜브의 ZeroCho님을 보고 포스팅한 것이다. HTML 공부 다음에는 CSS공부를 할 것이다. 두 공부는 초중급정도만 해둘 생각이다. 목표는 1~2주만에 모든 것을 공부하고 자바스크립트로 넘어가는 것이다. 화이팅! 아 참고로 html은 본 내용은 엄청 대충 다룰 예정이다..
태그란? 태그는 Division의 약자입니다. 레이아웃을 나누는데 사용하는 태그입니다. 쉽게 말해서, 구역들을 정해주는 겁니다. 예를들면, 어느 구역만 background 색을 바꿔주고 싶을 때, 해당 구역만 지칭하는 틀을 만들어주어야 합니다. 이 떄, 태그를 사용합니다. 사용법 첫번째 구역 두번째 구역 위와 같이 코드를 짜면 구역이 2개가 생깁니다. 박스가 2개 생겼다고 생각하시면 됩니다. 여기서 css를 이용하여 div의 구역을 설정해줄 수 있습니다. 첫번째 구역 두번째 구역 #first{ background-color: #000000; width: 10px; height: 100px; } #second{ background-color: #123456; width: 1000px; height: 100..