TIL 22.11.01. 2일차

5w31892p·2022년 11월 1일

내일배움캠프 스파르타코딩클럽

Dev.TIL

목록 보기

2/66

Today I Learned

미니프로젝트 개인페이지

개인페이지

1. 그리드 구현

개인 소개 페이지를 사진과 문자로 나누고 싶어 이전에 생활코딩에서 배운 그리드를 찾아서 보고 적용했음

 .mypost {
 	width: 95%;
    max-width: 950px;     
    height: 10%;
    margin: 30px auto;
    display: grid;
    grid-template-columns: 200px 1fr;
 }

2. 웹개발 팬명록, 스파르타피디아 적용

화면 어둡게

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("");

그림자효과

box-shadow: 0px 0px 3px 0px black;

flex set

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

방명록 숨기기, 보이기

function open_box() {
  $('#guest').show()
}
function close_box() {
  $('#guest').hide()
}

POST & GET

DB 저장 : POST
DB 불러와서 웹페이지에 붙히기 : GET
삭제기능 :POST

삭제 기능에서 많이 헤맸다.

예전 웹개발 강의 들을 때에는 index.html을 그대로 뼈대 붙히기로 해서 
그냥 대충 넘겼던 부분이였는데 앞으로는 꼭 혼자서 또 보기!

삭제 기능은 onclick 이벤트에 해당 삭제 함수명을 적고 괄호 안에 POST에서 정한 input의 id를 적어야함 꼭!!

이렇게 보면 간단한 내용인데 이전 강의를 강의만 듣고 혼자 강의자료보면서 생각을 안하면서 생긴 문제인 것 같음


꼭 보면서 이해됐더라도 혼자 강의자료든 다른 페이지를 만들 때 적용하면서 익히는 습관 갖자!