[학습정리] 2020.01.10 - cookie, 웹페이지 레이아웃 만들기, 첫번째 웹페이지 완료

1. cookie

---

어제에 이어서 연습문제 2문제를 더 풀어 보았다.

첫 번째 문제에서는 최근 관심 있는 상품을 최대 5개까지 보여주는 로직 구현을 하였다.

  1) 5개의 a태그가 있고

  2) 태그값을 누르면 queryString으로 아이템 no의 값을 보내주고

  3) controller페이지로 넘어가서

  4) parameter값을 가져와 쿠키에 저장하고

  5) view페이지에서는 쿠키값을 가져와서 화면에 최대 5개 띄운다.

  6) 값의 저장은 ArrayList를 활용하였고, 최대 5개까지 저장이 되니까, ArrayList의 size가 5보다 크면은 0번째 index 값을 지워준다

  7) ArrayList에서 값을가져와 1개의 쿠키로 저장할 때는 Iterator를 사용하였다.

문제를 풀면서 알게된 것은 쿠키값에는 공백을 저장하지 못한다.

 

두 번째 문제는 radio버튼을 활용한 페이지 언어 설정 문제였다.

radio버튼은 name값을 같게 설정하면 중복체크가 되지 않는 것을 활용하였고, controller페이지에서 radio버튼의 value값을 가져와 확인하여 쿠키에 언어가 무엇인지 저장하였다.

view페이지에서는 똑같이 쿠키값을 확인하고 쿠키값이 kor이면 한글을, eng면 영어 글자를 화면에 띄웠다.

나중에 웹페이지 구성 시, 언어설정 기능을 구현하여 한글/영문 페이지로 보이기가 가능할 것 같다.

 

 

2. CSS 맛보기 + 레이아웃 구성해보기

---

지금까지 CSS를 배우지 않아 부트스트랩 기본 제공 디자인 외로 하고 싶었다면 태그 안에 style=""로 설정하였으나, 이는 좋지 않은 방법이며, 사용하면 안 된다고 선생님께서 항상 말씀해주셨다. 따라서 오늘은 style 태그 안에 클래스를 만들어 활용하는 방법을 아주 간단한 예제로 알아보았다.

css 맛보기

그리고 앞으로 웹 포트폴리오 진행 시, 어떻게 레이아웃을 짜고 접근해야 할지 방법을 배웠다. 하나의 웹사이트를 들어가서 처음에는 id값으로 영역을 나누고, 각 id값은 div태그로, 그리고 각각 div id 태그 안에 div container를 사용해서, 몇 줄, 몇 칸을 쓸 건지 레이아웃을 쪼개(?) 보았다.

 

표→줄→칸 순서대로 나누면 어려움이 없다!

부트스트랩에서 제공하는 grid는 총 12칸이며, col의 합은 항상 12여야 한다.

 

 

 3. 첫 Mini project 완료

---

게시판+회원가입 기능만 있는 웹페이지 구현을 완료하였다.

랜딩페이지를 약간 꾸미고 이미지도 추가하여 이미지 클릭 시 페이지 이동하는 기능을 추가했다.

기본 기능은 완료하였지만, 쿠키를 조금 더 익숙하게 구현하고 싶어서 이벤트 div 태그를 주말 동안 하나 더 추가하여 호스팅 할 예정이다.