TIL #220526 #JSP #WEB

정신없이 공부하다보니 벌써 목요일 저녁이되었습니다.

한 주가 저번주 보다 더 빠르게 지나가는 것 같습니다.

어제는 수업진도를 많이 나가지 않아서 벼르고 벼뤘던 Git 정리를 했었습니다.

오늘도 진도보다는 이전에 배웠던 내용들을 활용하는 시간이 많았는데

그래도 복습을 꾸준히 해서 따라갈수는 있었던 것 같습니다.

다가오는 주말에 더 단단해져 봅시다!

 

 

오늘은 오전 JSP 오후 WEB시간이었습니다.

사실 프론트엔드를 목표로 지원했었기에 WEB수업이 한 번인거는 조금 아쉽..

그래도 아직까진 새싹이기에 둘다 꾸준히 정진해봅시다! 둘다 재밌어요!

 

오전 JSP

 

게시판만들기

 

그동안 학습했던 내용들을 잘 믹스 해서 게시판을 만드는 과정으로 왔습니다. 두둥!

활용하여 실제로 눈에보이는 값들을 출력하니 평소보다 더 재미있었던 것 같습니다.

 

많이들 헷갈려했던 순서!

복습과 공부를 꾸준히 하셨더라면 수월하게 진행 할 수 있었을 겁니다. 

저는 잔잔한 에러로 고생했는데 오히려 좋아!

에러를 만났을때는 당황하지않고 콘솔창의 에러를 확인하고 질문하기전에 고민하고 해결하는 습관을 가져봅시다!

 

1. joinForm에서 입력창 만들기
2. requestGetParamet를 통해서 폼의 입력된 값을 joinPro전달받아 변수에 저장합니다.
3. memberDTO에 접근제한자 Private의 형태로 joinPro에서 전달된 변수명과 동일한 이름으로 Getter와 Setter를 형성해줍니다.
4. memDAO에서 JDBC를 연결하고 데이터베이스에 해당 값들을 저장할수있는 메서드 insertMemer를 만들어줍니다.
5. 정상적으로 메서드를 만들어 주고나면 다시 joinPro로와서 DTO의 인스턴스를 형성해주고 DTO인스턴스 변수에 setXXX를 통해서 JDBC에 입력할 값들을 set해줍니다.
6. set을 완료하고 insertMember메서드를 호출하여 getXXX을 통해 값을 DB에 저장해줍니다.
7. 리턴타입이 insertMember의 리턴타입이 int형임으로 정상적으로 출력되었는지 확인하고 sql에 값을 확인합니다.

Join - MemberDAT & DTO

입력창에 입력한 값을 데이터베이스에 저장하고 그 값을 사용합니다.

(joinform - joinPro - MemberDTO - MemberDAO)

Main - login & logout & write & list

저장된 데이터베이스에서 조건과 일치하는 값이 있을 때와 없을 때를 이용하여 각기 다른 페이지로 이동하여 작동하는 jsp를 만들어서 사용합니다.

(main - login_form - login_pro - logout - write_form - list)

 

내용이 어렵다면

 

https://meerkat127.tistory.com/12?category=1062369 

TIL #220521 #JSP

 

 

https://meerkat127.tistory.com/13?category=1062369 

TIL #220522 #JSP

 

제가 주말에 정리한 JSP복습을 한번 쭉 보시면 도움이 많이 될것 같습니다.! 파이팅

 

---

오후 WEB

 

css를 배운지도 어느덧 2주차 빨리 더 많은 내용들을 배워서 활용하는 시간이 왔으면 좋겠습니다.

 

 

코드 오류는 없는데 CSS적용이 되지 않을 때 :
internet 도구 더보기에서 인터넷 방문 기록 삭제를 하면 됩니다!

CSS에서 사용되는 크기의 단위

 

 

text-indent

px, %, em, rem 등이 있는데 이 단위들은 모두 상대값으로 나타나는 단위입니다.

(모니터의 해상도에 따라 같은 수치라도 다르게 보입니다.)

• px : 픽셀값 (가로x세로 px)
• % : 사용자가보이는 화면에서 차지하는 비중입니다. (화면 공간안의 너비 비율)
• em : em단위의 폰트 사이즈의 배수입니다.
• rem : 문서의 기본값 사이즈의 배수입니다.

레이아웃과 같은 스타일의 css를 적용하기전에 적용되는 범위를 구분하기 위해서 { border : 1px solid } 과 같은 테두리 구분 css를 사용해서 범위를 확인할 수 있습니다. 범위가 보고 싶을 때 이용합시다

 

 

관계선택자

• 자식 선택자 :
  ” 선택자 1>선택자2 “의 형태, 선택자 1의 자식요소인 선택자2를 선택해줍니다.
• 자손 선택자: ”선택자1 선택자2”의 형태, 선택자와 선택자를 공백으로 구분합니다. 선택자 1의 자손 중에서 선택자 2를 선택합니다.

text-shadow :
글자에 그림자 효과를 주는 속성입니다.

“text-shadow: offeset-x offset-y blur-radius color” 의 형태입니다. (text-shadow: x y 흐린정도 색)

• offset-x :그림자의 수평거리, 음수(그림자의 위치는 왼쪽), 양수(그림자의 위치는 오른쪽)
• offset-y : 그림자의 수직거리 음수(그림자의 위치는 위), 양수(그림자의 위치는 아래)
• blur-radius : 흐림의 정도 (값이 증ㅇ가하면 그림자가 흐려집니다.)
• color : 색

예시

{text-shadow: 2px 3px 5px aqua;}

{text-shadow: 4px 4px 6px #93f4f2, -4px -4px 6px #e9df85}

 

Margin 과 Padding

 

웹브라우저에서 ctrl + shift + i를 누르면 개발자 도구가 나옵니다.

computed라는 창을 누르면 Margin과 Padding을 쉽게 이해할 수 있습니다. 각 구역에 커서를 올리면 hover의 효과처럼

웹브라우저에 영역이 표시가 됩니다.!

 

 

Margin : 외부의 여백 (object와 화면과의 여백)

padding : 내부여백

 

Margin과 Padding 속성은 위, 아래, 좌, 우 (상하좌우)에 적용이 됩니다.

 

한 방향에만 설정해 주고 싶을 경우에는  "margin/padding-방향"의 형태 입니다.

예시

{margin-top: 10px;}
{padding-left: 2em;}
{paddingL 25px 20px 15px 10px} //상하좌우