메이커 코스-태극 수련원 2021.9.4

메이커스 시작하기

1.프로젝트 이름:  태극수련원(Taiji Yuan)

2.기능설명: 메인페이지에서 회원로그인 기능설치,상단에 메뉴설치,좌측에 상세내용 버튼 설치

               중심에는 그림,상품설명,가격등 데이터를 입력.

3.참고한 프로젝트/웹사이트가 있다면 링크: 현재 사이트를 찾고있는중

4.(선택) 프로젝트 생김새:

참고로하려는 웹사이트https://www.w3schools.com/.

추가로 페이지의 영문과 한국어 변환까지 있으면 ~

인체구조 ,태극권,기공 등 불가,도가의 도리를 터득케하고 신체를 건강하게 하는 수련

        학과:5행설,주역.

        주:문자,그림,동영상으로 수련자에대한 교학을 진행한다.

이렇게 클릭하면 메인 메뉴로부터 자메뉴가 나타날수있는 기능을 추가해보려는 욕심이 생깁니다.

9월12일 

회원가입기능 및 로그인페이지 작성:

bulma공식 웹사이트에 들어가서 

https://bulma.io/documentation/

https://bulma.io/documentation/

Bulma: Free, open source, and modern CSS framework based on Flexbox

필요한 부분의 각기능을 검색할수있다.

Elements를 클릭하면 아래 화면이 나타나는데 예를 들어 Button을 누르면

이렇게 버튼에 필요한 모든 요소들이 나타난다.

우선 template languages에서 기본설정 None을 jinja2로 설정해준다.

 

일단 Button 선택:Rounded buttons

9월13일

참고 블로그:https://dlgkstjq623.tistory.com/354

게시판 검색기능 구현: https://velog.io/@jsw4215

HTML 색상 사이트:https://wepplication.github.io/tools/colorPicker/

이미지 참고 사이트:https://bulma.io/documentation/elements/image/

메인페이지 미완성

 

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360008056019--Cannot-resolve-file-but-files-exist-in-folder-marked-as-resource-root

파이참에서 static폴더에 이미지 파일을 넣고 실행해봤지만 이미지가 뜨지 않는 문제에 대하여 

https://intellij-support.jetbrains.com/hc/en-us/community/posts/206368229/comments/360000101264

9월14일

video 코드 사용방법이 많고하여 하나씩 파이참에 붙여넣고 실행해보았으나 정상적으로 돌아가지 않는다.

원인 파악을 진행하는 동시에 회원가입,로그인 수강내용을 첨부터 한번 보면서 실천해본다.

일단 오늘은 6강까지~

 

9월15일

참고 웹페이지:https://dictionary.cambridge.org/ko/

Colors RGB:https://www.w3schools.com/colors/colors_rgb.asp?color=rgb(0,%20191,%20255)

CSS에서 body 전체를 아래와 같은 색깔로 설정한다.

body {
background-color: RGBA(232, 52, 78, 0.2);
min-height: 100vh;
}

질문답변 웹사이트:

QA STACK:https://qastack.kr/

body 높이를 브라우저 높이의 100%로 설정.

html {

      height: 100%;

}

body {

      min-height: 100%;

}

또한 min-height: 100vh; 로 설정할수도 있다.

뷰포트(View port) 높이 설정은~

body {

height: 100vh;

padding: 0;

}

혹은

body {

min-height: 100vh;

padding: 0;

}

사람마다 사용하는 방법이 다르므로 일단 참고 페이지로 이동:https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height/25829844#25829844

 

color: #e8344e !important;

여기서 !important 사용방법:https://www.codingfactory.net/10372

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다.

 

9월16일

로그인 페이지에서 배너 html.css만들기

로그인/회원가입 토글기능 만들기

로그인 페이지

여기서 is-hidden이라는 클래스를 이용하여 보이는 요소는 안보이게,안보이는 요소는 보이게하는 역활을 하게한다.

즉 회원가입 페이지만 보이고 회원에 가입한후 로그인 페이지가 열리게 하는것이다.

회원가입페이지

is-hidden 클래스와 조건문으로 해결하는 방법

한 번에 토글할 수 있는 함수를 만들어 회원가입하기 버튼과 취소 버튼에 연결해주면 됨!

아래와 같이 취소를 누르면 다시 회원가입 화면으로 돌아오는 과정을 만든다.

 

모바일 네비게이션 토글메뉴 (참고):

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=floormw&logNo=220931374142 

모바일 네비게이션 토글 메뉴(드롭다운 메뉴)

https://homnay.tistory.com/entry/Javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%86%A0%EA%B8%80-%EB%B2%84%ED%8A%BC-%EB%A9%94%EB%89%B4-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84

[Javascript] 자바스크립트 토글 버튼 - 메뉴 버튼 구현

자바스크립트로 토글버튼 만들기

9월17일

아이디, 비밀번호 정규표현식

이 정규표현식은 사람이 읽을수있는 표현식이 아니라 컴퓨터한테 규칙을 알려주는 것

닉네임 부분:/^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;

소괄호안에 대괄호 부분은 소문자a~z까지 대문자 A~ Z까지 의 문자를 사용해야하며

대괄호중:빼기, 소문자 a~z까지,대문자 A~Z까지,0~9수자,언더바,점을 포함해서 2자부터 10자사이를 규칙으로 정한다.

패스워드 부분:소괄호 안에 부분은 필수 포함.

/d를 수자를 표시한다.기타 부분은 닉네임과 같음.

정규표현식 참고사이트:https://blogpack.tistory.com/560

                              https://www.nextree.co.kr/p4327/

                              https://hamait.tistory.com/342

HTML특수문자 코드표:http://egloos.zum.com/keep/v/1030642

회원가입 페이지 기능만들기:

로그인 페이지 기능만들기:

@app.route('/sign_in', methods=['POST'])
def sign_in():
    # 로그인
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']

    pw_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    result = db.users.find_one({'username': username_receive, 'password': pw_hash})

    if result is not None:
        payload = {
         'id': username_receive,
         'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')

        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

9월18일

좌측 메뉴설정 참고 코드:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<style>
#topMenu { // topMenu의 ID를 가진 태그의 스타일 지정
height: 30px; // topMenu의 높이를 30px로 설정(제대로 설정 안하면 아래 내용이 깨짐)
width: 850px; // topMenu의 넓이를 850px로 설정(제대로 설정 안하면 브라우져 넓이가 좁아지면 깨짐)
}
#topMenu ul li { // topMenu의 ID를 가진 태그 안에 <ul> 태그 안에 <li> 태그의 스타일을 지정
list-style: none; // <li> 태그는 위의 이미지처럼 목록을 나타내는 점을 없앤다
color: white; // 글씨 색을 흰색으로 설정
background-color: #2d2d2d; // 배경색을 진한 회색(RGB(2D,2D,2D)으로 설정
float: left; // <li>태그들이 왼쪽에 흐르게 설정(그러면 아래있는 내용은 오른쪽으로 옴)
line-height: 30px; // 글씨가 가운데로 오도록 설정하기 위해 한줄의 높이를 30px로 설정
vertical-align: middle; // 세로 정렬을 가운데로 설정(위의 line-height와 같이 설정 필요함)
text-align: center; // 글씨 정렬을 가운데로 설정
}
#topMenu .menuLink { // topMenu 아이디를 가진 태그 안에 있는 menuLink 클래스 태그들의 스타일 설정
text-decoration:none; // 링크(<a> 태그)가 가지는 기본 꾸밈 효과(밑줄 등)을 없앰
color: white; // 폰트색을 흰색으로 설정
display: block; // 링크를 글씨가 있는 부분 뿐만아니라 전체 영역을 클릭해도 링크가 걸리게 설정
width: 150px; // 메뉴링크의 넓이 설정
font-size: 12px; // 폰트 사이즈 12px로 설정
font-weight: bold; // 폰트를 굵게
font-family: "Trebuchet MS", Dotum, Arial; // 기본 폰트 적용, 시스템 폰트를 종류별로 순서대로
}
#topMenu .menuLink:hover { //topMenu 아이디를 가진 태그 안에 menuLink클래스를 가진 태그에 마우스가 over되면 스타일 설정
color: red; // 글씨 색을 붉은색으로 설정
background-color: #4d4d4d; // 배경색을 조금 더 밝은 회색으로 설정
}
</style>
</head>
<body>
<nav id="topMenu" >
<ul>
<li><a class="menuLink" href="#">About us</a></li>
<li><a class="menuLink" href="#">Ministries</a></li>
<li><a class="menuLink" href="#">Community</a></li>
<li><a class="menuLink" href="#">Locations</a></li>
<li><a class="menuLink" href="#">Blog</a></li>
</ul>
</nav>
</body>
</html>

 

언어변환 참고 코드:

function change() {
const english = document.getElementsByClassName('english')[0]
english.style.display = "flex";
const korean = document.getElementsByClassName('korean')[0]
korean.style.display = "none";
}

 

9월19일

언어전환:

09/12/21 김준태(튜터) to 김영수(메이커 코스) 1. 언어 전환 1. 언어 전환: 언어별로 각각 작성한 뒤에 display: none 을 자바스크립트를 써서 전환시키는 방식 2. 로그인: set_cookie 기능 활용

select 관련 참고 블로그:

https://www.jqueryscript.net/blog/best-multiple-select.html

10 Best Multiple Select Plugins In JavaScript (2021 Update) | jQuery Script

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/select

요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.

 

https://select2.org/getting-started/basic-usage

Basic usage | Select2 - The jQuery replacement for select boxes

 

홈페이지 메뉴 상단에 배치하는 방법:

https://ironsky.tistory.com/21

부트스트랩3(Bootstrap) 메뉴(navbar) 색상을 바꾸는 방법:

http://www.nuno21.net/bbs/board.php?bo_table=bootstrap&wr_id=1 

부트스트랩3bootstrap-메뉴navbar-색상을-바꾸는-방법

 

참고내용	참고 사이트 web site link
HTML/Video 동영상 삽입하는 태그	https://www.codingfactory.net/11877
메뉴바 상단에 고정 시키기	https://www.daleseo.com/css-position-fixed-navigation/
html/css/float 속성.메뉴상단 만들기	https://ironsky.tistory.com/21
가로형 메뉴 만들기	https://iwbtbitj.tistory.com/128

9월20일

오렌지색부분:

모달에 입력된 값을 불러오고 이 포스트가 언제 작성되었는지를 기록한다.

녹색부분:위의 두 값을 서버에 요청하는 부분이다.

옅은 황색부분:요청에서 성공했다면 모달 포스트에 is-active라는 클래스를 없애버린다.

여기서 is-active는 모달을 닫는다는 뜻이다.

그리고 새로고침을 해준다.

태극권 이미지

 

<div></div>태그 보다 <figure></figure>태그를 사용하면 text나 image 크기가 줄어든다.

9월21일

웹개발플러스 수강내용 듣고 프로필 기능 (작성,편집) 작성

9월22일

이하 기능을 추가해보려는 욕심을 부려봅니다.

 

9월24일

비밀번호 암호화하는 코드 (Decode & Encode)

JSON Web Token implementation in Python

https://pyjwt.readthedocs.io/en/stable/#:~:text=Edit%20on%20GitHub-,Welcome%20to%20PyJWT,-PyJWT%20is%20a

https://pyjwt.readthedocs.io/en/stable/

RS256,HS256 차이

https://hwannny.tistory.com/72

로그인 디자인 만들기:

 

네이버 로그인 화면	https://github.com/lucidmaj7/frontend_study/commit/ed410c21076f858f39f38fc893323eec13e09f3c
	https://github.com/lucidmaj7/frontend_study
[JS/jQuery]$(document).ready(function(){});이란?	https://ratseno.tistory.com/68

9월29일

인코더와 디코더	https://docs.python.org/ko/3/library/json.html
[Flask][jsonify] 많은 데이터들을 json형태로 보내주는 API서버 만들기	https://growingsaja.tistory.com/299

Color 관련 참고 사이트:

Converting Color	https://convertingcolors.com/
Color late	https://colorate.azurewebsites.net/

나중에 추가할 동영상 일부:https://www.youtube.com/watch?v=ya9GI1QatEY&list=RDCMUCQH_AXSKJ5qUp1CXW3044sg&start_radio=1&rv=ya9GI1QatEY&t=11

9월30일

https://github.com/danger/danger

주역에 대한 간단한 설명:

https://www.krpia.co.kr/viewer?plctId=PLCT00005204&tabNodeId=NODE03756581&nodeId=NODE03756583 

주역 점법(周易占法) - krpia