Bulma : 우리가 써봤던 Bootstrap과 비슷하게, 미리 정해진 모습의 클래스를 가져다쓸 수 있는 무료 CSS 프레임워크
- Bootstrap은 jQuery을 써서 웹사이트에서의 상호작용을 쉽게 구현할 수 있는 반면, Bulma는 순수한 CSS 프레임워크이기 때문에 기능을 직접 구현해야하지만 대신 더 자유롭게 커스터마이징이 가능해요.
- Bootstrap은 커뮤니티가 커서 테마나 플러그인 등이 개발이 많이 되어있고 질문에 대한 답이나 예시 등을 찾기 쉽고, Bulma는 문법이 직관적이고 Flexbox 등 최신기술을 많이 써요!
개인적으로 가장 중요한 이유 벌마의 기본 모양이 부트스트랩보다 더 예쁨.
https://bulma.io/documentation/
Bulma: Free, open source, and modern CSS framework based on Flexbox
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
bulma.io
<패키지설치>
flask, pymongo, pyJWT
설정-언어 및 프레임워크-템플릿언어-Jinja2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bulma 쓰는 법 연습하기</title>
<!-- Bulma CSS 링크 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
</body>
</html>
구역을 나눠주는 게 보통 div지만 워낙 많이 쓰다보니 확실하게 나눠줄 수 있는 게 section
열심히 코드스니펫 복붙해서 실행했는데 강사랑 다른 화면이 떴다.
파이썬 터미널에도
jinja2.exceptions.TemplateNotFound: login.html
라고 떠서 구글링
세상 쉬운 문제인지 한글 블로그도 있네ㅎ
https://exchangeinfo.tistory.com/64
jinja2.exceptions.TemplateNotFound 해결법
jinja2.exceptions.TemplateNotFound 웹도 처음 손대봤는데 처음 보는 flask로 뭔가를 하려니 하나도 안된다.. 하하하핳 저 에러로 검색해보면 가장 먼저 뜨는게 stackoverflow 글이다. 누군가 친절히 링크를 해.
exchangeinfo.tistory.com
나 왜 html들 templates에 안 넣었느뇨..ㅎㅎㅎ
해결! 오오 구글링..❤️
function is_nickname(asValue) {
var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
return regExp.test(asValue);
}
function is_password(asValue) {
var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
return regExp.test(asValue);
}()안이 필수포함, []가 선택 포함, {글자수최소, 글자수 최대}
일반적으로 많이 쓰는 정규식(아이디, 패스워드, 휴대전화 확인 등)은 인터넷에 많이 있어서 인터넷에서 가져다 쓰면 됨.
조건 빼거나 길이 바꿀 땐, 위 설명 참고.
<css파일을 따로 만들 때 넣어줄 코드>
<link href="{{ url_for('static', filename='mystyle.css') }}" rel="stylesheet">static 안에 mystyle만들고 주의할 점은 위 css 파일 링크는 벌마css보다 아래에 위치해야 함.
우리는 이미 bulma css가 정의 되어있고 그걸 계속 수정하는 방향이기 때문
<모달>
모달은 항상 3가지 구조로 되어있다.
모달 백그라운드, 모달 content, 모달 close
<div class="modal" id="modal-post">
<div class="modal-background" onclick='$("#modal-post").removeClass("is-active")'></div>
<div class="modal-content">
<div class="box">
<article class="media">
<div class="media-content">
<div class="field">
<p class="control">
<textarea id="textarea-post" class="textarea"
placeholder="무슨 생각을 하고 계신가요?"></textarea>
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
</div>
<div class="level-right">
<div class="level-item">
<a class="button is-sparta" onclick="post()">포스팅하기</a>
</div>
<div class="level-item">
<a class="button is-sparta is-outlined"
onclick='$("#modal-post").removeClass("is-active")'>취소</a>
</div>
</div>
</nav>
</div>
</article>
</div>
</div>
<button class="modal-close is-large" aria-label="close"
onclick='$("#modal-post").removeClass("is-active")'></button>
</div>
let class_heart = ""
if (post["heart_by_me"]) {
class_heart = "fa-heart"
} else {
class_heart = "fa-heart-o"
}를 '조건부 삼항 연산자(ternary operator)'를 이용해 한 줄로 나타내기
let class_heart = post['heart_by_me'] ? "fa-heart": "fa-heart-o"?앞이 조건. True일 때:False일 때
static 안에 자바스크립트파일을 만들어 <script>안의 내용을 가져오면(js안에서 <script></scipt>는 필요 없음.)
그리고 저 script가 필요한 파일마다 아래 코드를 head에 넣어주면 된다.
<script src="{{ url_for('static', filename='myjs.js') }}"></script>
og(Open graph)태그란 링크를 보냈을 때 뜨는 미리보기 이미지. 메타태그의 종류 중 하나로 '제목, 설명, 이미지, 링크, 타입' 등을 넣을 수 있다.
<meta property="og:title" content="스위터 - 세상을 달달하게"/>
<meta property="og:description" content="mini project for Web Plus"/>
<meta property="og:image" content="{{ url_for('static', filename='ogimg.png') }}"/>
favicon.ico(아이콘 파일 확장자)이란 상단 탭에 보여지는 아이콘으로 즐겨찾기 등록시에도 사용됨. 적용 안된 사이트는 브라우저 고유의 아이콘으로 뜸.
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
'항해99 > 웹개발종합반PLUS' 카테고리의 다른 글
| 웹개발종합반PLUS 4주차-스위터 완성본 (0) | 2022.09.22 |
|---|---|
| 웹개발종합반PLUS 2주차 -(3) (0) | 2022.09.20 |
| 웹개발종합반PLUS 2주차 -(2) (0) | 2022.09.20 |
| 웹개발종합반PLUS 2주차 -(1) (2) | 2022.09.20 |
| 웹개발종합반PLUS 1주차 (0) | 2022.09.19 |