썸네일 1주차 - HTML 태그 구역 나누기 문단 나누기 위 태그를 쓰면 줄 바꿈 효과가 있다 , , 은 목록을 만드는 태그다 ul 태그는 unordered list로 순서 없는 목록을 만들고 bullet point를 생성한다 ol 태그는 ordered list로 순서 있는 목록을 만든다. li 태그는 ul 혹은 ol 안에서 목록을 만든다. ol태그의 type으로는 1, A, a,I,i 가 있고, 1은 숫자, A, a는 각각 알파벳 대문자와 소문자, I, i는 각각 대문자와 소문자 로마 숫자로 넘버링한다. start로 넘버링을 시작할 숫자를 넣어줄 수도 있다. dl 태그는 definition list로 용어를 설명하는 목록을 만든다 dl 태그 안에 와 가 들어가는데 dt에는 용어의 제목이 들어가고 dd에는 용어 설명이 들어간다. 은 가..
썸네일 4주차 - FLASK 시작하기 - 서버, 클라이언트 파일 만들기 FLASK 시작 코드 app.py 파일을 만들고 아래 코드를 넣는다 (통상적으로 flask 서버를 돌리는 파일은 app.py라고 이름 짓는다). 아래 코드에서 'app'은 이 파일명을 지칭한다. from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' @app.route('/mypage') def mypage(): return 'This is My Page!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) 주의할 점은 URL 별로 함수명이 같거나, route('/') 등의 주소가 같으면 안된다. Flask 시작하기 -..
썸네일 3주차 - 파이썬 패키지 사용 & 크롤링 가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경 입니다. 앱을 설치할 때 앱스토어/플레이스토어를 가듯이, 새로운 프로젝트의 라이브러리를 가상환경(공구함)에 설치하려면 pip(python install package) 를 이용하게 된다. 파이썬 패키지 설치 방법 1. 파일 - 설정에서 해당 프로젝트의 Python Interpreter 클릭 -> +클릭 -> ok 클릭 2. 패키지명 입력 후 Install Package 클릭, 패키지 성공 메세지가 뜬다 3. 설치 완료 후 설치된 패키지와 설치된 버전, 해당 패키지의 최근 버전을 볼 수 ..
썸네일 2주차 - JQuery, Ajax jQuery란 편리한 Javascript를 미리 작성해둔 라이브러리다. 따라서 쓰기 전에 import 가 필요하다. import code: CSS에서는 선택자로 class를 썼듯 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킨다. 보이기 / 숨기기 기능 // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다. $('#post-box').hide(); // id 값이 post-box인 곳을 가리키고, show()로 보이게 한다. $('#post-box').show(); 이미지/텍스트 바꾸기 기능 - 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);` - 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");..
썸네일 1주차 - HTML, CSS 폰트 1. 구글 폰트 검색 2. language korean 선택, 원하는 폰트 클릭 3. 우측상단 Selected Family 클릭 4.
썸네일 웹개발 종합반 1주차 숙제: 팬명록 메인 페이지 만들기 빈첸(Vinxen) 팬명록 닉네임 응원댓글 응원 남기기 앨범 너무 멋져요! id1 빈첸 너무 멋져요! id2 GOOOOD!!! id3 CSS에서 이미지 자르기 강의에서는 자세히 다루지 않아 이 사이트를 참고해서 원하는 사진의 원하는 부분을 사용하는 방법을 배워야겠다 https://uploadcare.com/blog/how-to-crop-an-image-in-css/ How to crop an image in CSS | Uploadcare Blog The article describes all the possibilities to crop images that CSS provides in 2021. You no longer need hacks! uploadcare.com