웹플러스 수업에서 일기장, 단어장, 맛집지도 등 혼자만을 위한 서비스들을 만들어왔지만, 사실 주소만 알면 누구나 추가/수정/삭제가 가능했고, 이를 방지하기 위해 비밀번호를 입력해야만 내용을 볼 수 있게 만들어 본다.
하지만 만약 여러 사람이 한 서비스를 이용해야한다면? 전체에게 공개된 내용과 개인이 볼 수 있는 내용이 다르다면? 이럴 때는 로그인 기능이 필요! 로그인 기능로그인 후 화면_SNS프로필 수정, 로그아웃 기능
01. Bulma로 웹사이트 꾸미기
Bulma란? : Bootstrap과 비슷하게, 미리 정해진 모습의 클래스를 가져다쓸 수 있는 무료 CSS 프레임워크입니다.
Bulma 공식문서 살펴보기 Bulma: an alternative to Bootstrap - Bootstrap은 jQuery을 써서 웹사이트에서의 상호작용을 쉽게 구현할 수 있는 반면, Bulma는 순수한 CSS 프레임워크이기 때문에 기능을 직접 구현해야하지만 대신 더 자유롭게 커스터마이징이 가능
- Bootstrap은 커뮤니티가 커서 테마나 플러그인 등이 많은 개발 및 질문에 대한 답이나 예시 등을 찾기 쉽고, Bulma는 문법이 직관적이고 Flexbox 등 최신기술을 많이 쓴다.
Bulma 써보기 - 코딩 시작하기를 위한 새 파이참 프로젝트 만들기 1. File > New Project...에 가서 project04 폴더 열기 2. Project Interpreter에서 가상환경에 필요한 패키지 설치하기(flask, pyjwt, pymongo) 3. Template Language를 Jinja2로 설정하기 4. project04 폴더 안에 templates, static 폴더 만들기 5. templates 폴더 안에 prac_bulma.html 파일 만들기 prac_bulma - bulma를 쓰기 위해서는 딱 한 줄만 추가해주면 됩니다!
Bootstrap과 Bulma비교 : Bulma는 직관적으로 태그명과 같은 클래스명을 쓰고 각 기능을 모듈화하여 적용하고 싶은 CSS를 하나 씩 얹는 방식으로 추구 - Bootstrap <button class="btn btn-outline-primary btn-lg">Primary</button> - Bulma <button class="button is-primary is-outlined is-large">Primary</button> 👍각각의 요소를 다른 클래스로 구별해놔서 실제로 원하는 결과물까지 도달하기까지 훨씬 편해짐
예제 살펴보기 1. hero hero는 화면 전체 너비를 채우는 배너 클래스입니다. 자식인 hero-body 안에 내용을 넣어줄 수 있어요. 클래스를 중첩해서 색과 그래디언트, 높이 등을 바꿔줄 수 있습니다.
2. section body 태그 안에 바로 넣어서 구역을 나누어줄 때 씁니다. Bulma의 클래스에 CSS를 추가해줄 수도 있습니다.
3. box 와 media
