웹개발 12

HTML 이미지에 링크 걸기

기존 배경 이미지 작성 방법: css의 background-image에 링크를 걸고 싶었지만 css에서는 링크를 걸 수 없음! 메인 #이미지에 넣을 때 target="_blank" #새 창에서 열기 링크 밑줄 css text-decoration: none; #선 없음 text-decoration-line: none; #선 없음 text-decoration-line: underline; #밑줄 text-decoration-line: overline; #윗줄 text-decoration-line: line-through; #취소선 text-decoration-color: ; #색 바꾸기 #밑줄 모양 바꾸기 text-decoration-style: solid; text-decoration-style: doub..

웹개발/HTML 2023.03.07

비밀번호 암호화 HASH

DB에 저장하는 비밀번호의 암호화 HASH 함수 Hash 👉 단방향 암호화 기법으로 복호화가 불가능. 임의의 길이를 갖는 비트열을 입력받아, 정해진 길이의 비트열을 반환하는 함수. (양방향 암호화 기법으로는 Encryption이 있다. Encryption은 복호화가 필요한 데이터나 Https처럼 통신(송수신)에 있어 사용될 수 있다.) SHA-256으로 여러 해시 알고리즘을 통해 암호화 테스트를 해볼 수 있다. https://emn178.github.io/online-tools/sha256.html SHA256 Online emn178.github.io MD5, SHA-1, HAS-180은 사용하면 안 되고, SHA-256, 512가 권장된다. 512가 더 보안이 좋다. Hash의 한계 👉 동일한 메시지..

웹개발/HTML 2023.03.07

window location / button onclick

페이지를 이동하기 위한 방법 window location window.location.href = '~' 새 페이지로 이동 - 속성 주소 히스토리가 기록됨 window.location.replace('~') 기존 페이지를 새 페이지로 변경 - 메서드 주소 히스토리가 기록되지 않음 window 함수 정리 EX) https://papago.naver.net/website?locale=ko window.location 👉 https://papago.naver.net/website?locale=ko 현재 페이지의 href(URL) 반환 window.location.href 👉 https://papago.naver.net/website?locale=ko 현재 페이지의 href(URL) 반환 window.locat..

웹개발/HTML 2023.03.06

웹개발 5주차 개발일지_Sparta Coding Club

✅ 5주차 수업 목표 1. Flask 프레임워크를 활용해서 API를 만들 수 있다. 2. '버킷리스트' 를 완성한다. 3. EC2에 내 프로젝트를 올리고, 자랑한다! ✅ 나의 버킷리스트 웹개발 5주차_나의 버킷리스트 프로젝트 연습 ✅ 프로젝트 세팅 sparta → projects → bucket 폴더에서 시작! ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, static, templates 폴더, templates > index.html 파일, app.py 파일 생성 ✔ 패키지 설치하기 👉 Flask와 DB sw-ing.tistory.com ✅ 준비하기 ✔ 파일질라 다운로드 https://filezilla-project.org/download.php ✔ 가비아 접속하기 https://www.gabia..

웹개발/수업 2023.03.06

html _ 클래스(class)와 아이디(id)의 차이

class와 id. 둘 다 불러올 때 쓰는 친구들 같은데 왜 어떨 때는 class를 사용하고, 어떨 땐 id를 사용하는 걸까? 그 차이점을 살펴보자! 클래스(class) 클래스를 불러올 때는 앞에 마침표(.)를 찍어준다. .mypic > h1 { font-size: 30px; } 클래스는 중복 사용 가능 동일한 클래스명을 페이지의 여러 곳에 사용 가능! 한 요소에 여러개의 클래스명이 적용 가능 즉, 여러가지 스타일링을 한꺼번에 적용하거나, 한 페이지에서 반복적으로 사용되는 스타일을 정의할 수 있다. 아이디(id) 아이디(id)를 불러올 때는 앞에 샵(#)을 찍어준다. CSS에서 사용하는 경우는 다음과 같다. #mybutton { color: deeppink; } 또한, 아래는 부트스트랩에서 가져온 라벨인..

웹개발/HTML 2023.03.05

웹개발 5주차_나의 버킷리스트 프로젝트 연습

✅ 프로젝트 세팅 sparta → projects → bucket 폴더에서 시작! ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, static, templates 폴더, templates > index.html 파일, app.py 파일 생성 ✔ 패키지 설치하기 👉 Flask와 DB 연결 [설정] - [프로젝트] - [Python 인터프리터] - [+] - [flask, pymongo, dnspython 패키지 설치] ✅ POST 연습 - 기록하기 1. 요청 정보 : URL= /bucket, 요청 방식 = POST 2. 클라(ajax) -> 서버(flask) : bucket 3. 서버(flask) -> 클라(ajax) : 메시지를 보냄(기록 완료!) 단! 서버에서 한 가지 일을 더 해야합니다. -> 완..

웹개발/수업 2023.03.03

웹개발 4주차 개발일지_Sparta Coding Club

✅ 4주차 수업 목표 1. Flask 프레임워크를 활용해서 API를 만들 수 있다. 2. '화성에 땅사기' API를 만들고 클라이언트에 연결한다. 3. '스파르타피디아' API를 만들고 클라이언트와 연결한다. ✅ Flask 시작하기 - 서버 만들기 Flask 프레임워크 : 서버를 구동시켜주는 편한 코드 모음 ✔ 패키지 추가 설치하기(flask) [설정] - [프로젝트] - [Python 인터프리터] - [+] - [flask 패키지 설치] ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, ▶ static 폴더 👉 이미지, css 파일을 넣어둠 ▶ templates 폴더 👉 html 파일을 넣어둠 ▶ app.py 파일 👉 통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름을 짓는다 ✔ fla..

웹개발/수업 2023.03.02

웹개발 4주차_스파르타피디아 프로젝트 연습

sparta → projects → movie 폴더에서 시작! ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, static, templates 폴더, templates > index.html 파일, app.py 파일 생성 ✔ 패키지 설치하기 👉 Flask와 DB 연결 [설정] - [프로젝트] - [Python 인터프리터] - [+] - [flask, pymongo, dnspython 패키지 설치] ✔ 패키지 설치하기 👉 크롤링 준비 [설정] - [프로젝트] - [Python 인터프리터] - [+] - [requests, bs4 패키지 설치] ✅ meta 태그 메타 태그는, 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들. ✔ 크롤링 기본 코드 import requ..

웹개발/수업 2023.02.27

웹개발 4주차_화성땅 공동구매 프로젝트 연습

sparta → projects → mars 폴더에서 시작! ✔ flask 기본 폴더 구조 프로젝트 폴더 안에, static, templates 폴더, templates > index.html 파일, app.py 파일 생성 ✔ 패키지 설치하기 👉 Flask와 DB 연결 [설정] - [프로젝트] - [Python 인터프리터] - [+] - [flask, pymongo, dnspython 패키지 설치] ✅ POST 연습 1. 요청 정보 : URL= /mars, 요청 방식 : POST 2. 클라(ajax) -> 서버(flask) : name, address, size 3. 서버(flask) -> 클라(ajax) : 메시지를 보냄(주문 완료!) 1) 클라이언트와 서버 연결하기 ✔ 서버 코드(app.py) @ap..

웹개발/수업 2023.02.27

웹개발 3주차 개발일지_Sparta Coding Club

✅ 3주차 수업 목표 1. 파이썬 기초 문법을 안다. 2. 원하는 페이지를 크롤링 할 수 있다. 3. pymongo를 통해 mongoDB를 제어할 수 있다. ✅ Python 윈도우 다운로드 https://www.python.org/ftp/python/3.8.6/python-3.8.6-amd64.exe 주의) Add Python 3.8 to PATH 에 체크! ✔ gitbash 다운로드 Git (git-scm.com) ✅ Python 맥 다운로드 https://www.python.org/ftp/python/3.8.2/python-3.8.2-macosx10.9.pkg 👉 파이썬을 설치한다는 것은? 일종의 번역팩을 설치하는 것이다. 파이썬 문법으로 된 것을 컴퓨터가 알아듣는 언어로 변환해줄 수 있도록, 번역 ..

웹개발/수업 2023.02.25