해적단 수업 Lv2 수업을 시작했다. 수업 신청하고 1주동안 전에 SQL을 공부한다고 시작하지 못 하다가 한발 늦게 시작했다...
이번 1주차에 만들어 본것은 간단한 등록 조회기능이 가능한 투두리스트였다.
이전에 했던것들 복습이 많았으나 나에겐 지금 새로운 기능보다 복습이 더 좋은 공부가 됐던것같다.(역시 계속 해보는것 만큼 좋은 공부가 없....)
html로 뼈대를 잡고 -> CSS로 꾸미고 -> javascript로 기능을 넣고 -> flask로 서버를 만들어 연결한다. -> mongoDB데이터베이스를 연결해 데이터를 관리한다.
위 과정으로 투두리스트를 진행했다.
이번에 배운것은 앞서 배운 웹트랙과 같았으나 Lv.2에선 CURD를 모두 해보고 캘린더 기능까지 결합된 TodoList를 만든다고하니 기대된다.
이번 1주차에 만든 결과물의 모습이다. 다시 해보니 역시 프론트 부분에서 부족함을 많이 느꼈다.
새롭게 배운 부분은
- 체크박스 크기를 키우기 위해 zoom : 1.5 코드를 넣는 부분
- background-color가 없는건 background-color : transparent;
- border를 점선으로 표시할 땐 dashed를 이용해 border : 1px dashed gray;와 같이 표현
- 기능에 나타나고 사라지는 show, hide에서도 show를 했을 때 flex로 정렬해뒀던 item들이 정렬이 어긋나는 오류가 있었는데, 이것도 flex가 block으로 설정되기 때문이란걸 알았다. $('#id이름').css('display','flex')와 같이 이용해서 display를 바꿀 수 있다.
- Confirm기능 버튼을 눌렀을 때나 기능을 실행할 때 사용자에서 다시한번 물어볼 수 있도록 만들어준 기능
- :focus기능 사용자가 선택했을 때 할 수 있는 것들을 컨트롤 할 수 있다. ex)
.add-form > input:focus-visible{
outline: none;
}- flex-row와 flex-col으로 미리 선언을 해두고 편하게 쓸 수도 있었다.
.flex-row{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.flex-col{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#붙여준 class이름 뒤에 같이 선언해 줄 수 있었다.
이렇게 정리하고도 아직도 헷갈리는 부분도 많고 까먹은 것도 많다...
앞으로 더 반복하고 익숙해져야할 숙제인듯 싶다..
