분류 전체보기 190

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

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

웹개발/HTML 2023.03.05

조별 버킷리스트 만들기 팀프로젝트 첫번째

1팀 : 5명 팀원분의 반려 앵무새 이름을 딴 핑핑이집사단 3-9시 스터디 계획 1️⃣ 3시 출석체크 2️⃣ 6시 & 8시 생존신고 3️⃣ 8시 40분 오늘 진도 현황 및 내일 계획 회의 목표 ▶ 내배캠의 5개월 위시리스트 페이지 만들기 ▶ 백그라운드 컬러 : 노랑, 주황, 초록 ▶ 총 3 페이지 [1] 메인 페이지 [2] 조 생성 페이지 [3] 각 조의 위시리스트 페이지 내가 맡은 역할 [2] 페이지의 프론트엔드 등록하기 : 조 등록 돌아가기 : [1] 페이지로 돌아감 위시리스트 조 만들기 조 이름 : 팀장 닉네임 : 비밀번호 : 돌아가기 등록하기

웹개발 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

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

✅ 2주차 수업 목표 1. Javascript 문법에 익숙해진다. 2. jQuery로 간단한 HTML을 조작할 수 있다. 3. Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다. ✅ 단축키 모음 콘솔창 줄바꿈 : Shift + Enter 코드 정렬 : Ctrl + Alt + L(Windows), Option + Command + L(macOS) 들여쓰기 : Tab 들여쓰기 취소 : Shift + Tab 주석 : Ctrl + /(Windows), Command + /(macOS) ✔ Javascript 복습 - 홀짝 판별 onclick 함수 만들어보기 ✔ jQuery 란? HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리. 전문 개발자들이 짜둔 코드를 가져와..

웹개발/수업 2023.02.23

엑셀보다 쉬운 SQL 1주차 개발일지_Sparta Coding Club

✅ 필수 프로그램 설치 : DBeaver Download | DBeaver Community ✔ 데이터베이스(DB)란? 여러 사람들이 같이 사용할 목적으로 데이터를 담아두는 통 C(Create) : 데이터의 생성 R(Read) : 저장된 데이터를 읽어오는 것 U(Update) : 저장된 데이터를 변경하는 것 D(Delete) : 저장된 데이터를 삭제하는 것 ✔ 데이터베이스(DB)와 SQL이 왜 필요할까? 많은 양의 데이터를 효과적으로 저장/수정/사용하기 위해서 ✔ SQL이 왜 필요할까? Structured Query Language의 약자. 데이터베이스에 요청(Query)을 날려서 원하는 데이터를 가져오는 것을 도와주는 언어라는 의미! 저장된 데이터를 읽어오는 과정인 R(Read)를 편하게 만들어 주고 ..

SQL/수업 2023.02.22

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

Window / PyCharm 2022.2.1 ✅ 1주차 수업 목표 1. 서버와 클라이언트의 역할에 대해 이해한다. 2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다! 3. Javascript 기초 문법을 익힌다. ✅ 필수 프로그램 설치 스파르타코딩클럽을 통해, 연 10만원 상당의 PyCharm Professional 버전을 4개월 간 무료로 사용. 강의 5주차에 배포를 위해 필요한 AWS에 미리 회원가입을 하는데 (개인에게 클라우드 환경의 가상서버를 제공) EC2(기본 사양의 서버)를 1년 동안 무료로 사용 가능. ✅ 단축키 1. 코드정렬 : Ctrl + Alt + L 2. 들여쓰기 : Tab 3. 들여쓰기 취소 : Shift + Tab 4. 주석 : Ctrl + / ✅ ..

웹개발/수업 2022.08.25