기초45 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트5 HTML 핵심 요소 정리 오늘의 날씨 중부 집중호우, 남부는 열대야 : 블록(상자) 요소. 특별한 의미가 없는 구분을 위한 요소. 레이아웃을 작업할때 사용 : 블록(상자) 요소. 제목을 의미하는 요소. h1 ~ h6까지 있음(숫자가 커질수록 글씨는 작아짐) : 블록(상자) 요소. 문장을 의미하는 요소. 문장 구분할때 사용 : 인라인(글자) 요소. 이미지를 삽입하는 요소. src(경로)와 alt(이름) 속성이 필수 속성임. 사과 딸기 복숭아 : 블록(상자) 요소. 순서가 필요없는 목록의 집합을 의미 : 블록(상자) 요소. 목록(list) 내 각 항목(item) 과 는 하나의 세트로 생각해야함 NABER Google : 인라인(글자) 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. href는.. 2022. 12. 29. 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트4 화면에 이미지 출력하기 - 하나의 프로젝트로 관리할 때 프로젝트 가장 최상위 경로에 index.html파일이 존재해야지만 브라우저가 자동으로 찾아서 투영할 수 있음 img을 쓴채로 Tab을 누르면 자동으로 쓰여짐. src에 경로를 작성하고 alt에 대체 텍스트를 쓰면 됨 alt는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부름. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하면 됨 상대 경로와 절대 경로 상대경로: 누구의 주변인지 기준에 따라 상대적으로 바뀜. (./)는 생략이 가능해서 (./)가 없어도 주변에서 찾음. (../)는 상위폴더에서 찾게 됨 절대경로: (/)가 의미하는 것은 최상.. 2022. 12. 27. 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 Doctype(DTD) 브라우저가 기본적으로 프로젝트 단위로 화면이 출력될 때 index라는 이름을 가지고 있는 HTML파일을 우선적으로 찾아서 열게 됨. : 문서(페이지)의 HTML버전을 지정. DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도 현재 HTML5가 표준 우리가 브라우저로 접속하는 각 웹 페이지는 기본적으로 하나의 HTML 파일이 동작하는 것이기 때문에, HTML(특히 index.html)을 하나의 페이지로 이해할 수도 있음 → 2022. 12. 24. 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 특수 문자 용어 ` : 백틱, 그레이브 # : 샵, 넘버, 우물 정 & : 엠퍼센트 = : 이퀄, 동등 ~ : 틸드, 물결표시 $ : 달러 * : 에스터리스크, 별표 " : 쿼테이션 마크, 큰 따음표 ' : 아포스트로피, 작은 따음표 % : 퍼센트 - : 하이픈, 대시, 마이너스 ! : 엑스클러메이션, 느낌표 @ : 앳, 골뱅이 ^ : 캐럿 _ : 언더스코어, 로대시, 밑줄 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, 닷, 점, 마침표 ? : 퀘스천, 물음표 / : 슬래시 | : 버티컬 바 \ : 백슬래시, 역 슬래시 : 앵글 브래킷, 꺽쇠괄호 () : 퍼렌서시스, 소괄호, 괄호 {} : 브레이스, 중괄호 [] : 브래킷, 대괄호 오픈소스 라이선스 오픈소스란 어떤 제품을 개발하는 과.. 2022. 12. 23. 3주차_서버 만들기3 파이썬 패키지 관리 방법 프로젝트를 하다 보면 패키지 버전이 맞지 않아 문제가 생길 수 있음 내가 원하는 패키지를 내가 원하는 프로젝트 단위로 설치할 뿐만 아니라 활성화 할 수 있도록 함 즉 원하는 패키지를 프로젝트 별로 관리할수 있음 python -m venv venv venv폴더 가상공간 즉 가상환경을 만듬 .\venv\Scripts\activate.bat 가상환경 활성화 활성화되면 (venv) C:\User···하고 앞에 (venv)가 붙음 pip install 원하는패키지 원하는 패키지 다운 venv폴더 안에 Lib폴더 안을 살펴보면 원하는 패키지가 생긴것을 볼 수 있음 .\venv\Scripts\deactivate.bat 가상환경 비활성화 앞에 (venv)가 사라짐 웹 스크래핑 selector에.. 2022. 12. 21. 3주차_서버 만들기2 파이썬 패키지 살펴보기 https://pypi.org/ python 패키지를 발표(공개)하는 곳 PyPI · The Python Package Index The Python Package Index (PyPI) is a repository of software for the Python programming language. pypi.org 웹 스크래핑(크롤링) 크롤링: 프로그램을 이용하여 특정 사이트에 접속해 데이터를 수집하는 것 사람이 하는것보다 훨씬 빠르고 많이 접속할 수 있기 때문에 서비스사이트들이 부담이 갈 수 있음. 크롤링 코드를 작성할때는 무분별하게 접속하지 않게 해야함 - 즉 스크래핑과 같은 데이터 수집 기술은 수집대상 서비스에 부하를 주는 행위이니 빈번한 사용을 자제해야 함 import .. 2022. 12. 19. 1주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 강의 개요 프론트엔드 개발: HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 그것으로 사용자와 상호 작용할 수 있도록 하는 것. 사용자는 자신이 사용하는 컴퓨터를 가지고 있고 컴퓨터에는 웹페이지를 볼 수 있도록 여러 프로그램들을(크롬, 폭스, 엣지 등) 통해서 특정사이트에 접속하게 되고 접속한 사이트를 사용자가 보는 구조 프론트엔드는 사용자의 앞에 보이는 웹사이트 웹사이트를 프론트 엔드만으로는 만들 수 없기 때문에 실제로 보안을 요구하는 여러 데이터들이나 기타 비즈니스 로직(웹 사이트가 동작하는데 필요한, 핵심 처리를 수행하는 알고리즘 등) 등은 백엔드에서 개발이 됨 프론트 엔드를 개발하는 사람을 프론트 엔드 개발자, 백엔드를 개발하는 사람을 백엔드 개발자, GUI.. 2022. 12. 1. 3주차_서버 만들기 데이터 다루기_ 배울 것들 웹사이트에 글을 쓰고 저장버튼을 누르면 저장이 됨. 다음에 웹사이트에 돌아왔을때 쓴 글이 남아 있음 글이 남아 있다는 것은 결국 어딘가에 그 글이 저장되어 있다는 것 저장 버튼을 눌렀을 때 입력한 정보들을 백엔드 라고 부르는 프로그램으로 전달해줌 여기서 백엔드는 python으로 작성되어 있음 백엔드 코드는 제목, 내용 등의 정보를 전달하게 되면 전달된 값을 확인하고 데이터베이스라는 공간에다가 저장 나중에 화면에 다시 들어왔을 때 데이터베이스에서 데이터를 꺼내서 보여주는 코드도 백엔드에 작성이 됨 HTML, CSS, JS 코드들은 화면 구성만 할 수 있는 코드이고 데이터에 대한 코드를 작성할 때는 백엔드 프로그램을 작성해야함 데이터 다루기_Python 기본 Python 기본: 변.. 2022. 11. 30. 2주차_서버와 통신하기 3 jQuery indicator 심화 전체선택자("*"): 모든 요소를 선택 클래스 선택기(".class"): 주어진 클래스의 모든 요소를 선택 요소선택기("element"): 주어진 태그 이름을 가진 모든 요소를 선택 ID 선택자("#id"): 주어진 id 속성을 가진 단일 요소를 선택 다중 선택기("selector1, selector2, selectorN"): 지정된 모든 선택기의 결합된 결과를 선택 즉 선택기가 하나라도 만족하면 해당되는 것 여러개의 선택기를 모두 만족하게 하는 indicator을 작성하고 싶다면 $("selector1selector2")로 이어쓰면 됨 class속성은 css을 태그에 적용할때 이름을 이용해서 사용(태그에 스타일을 지정할때 사용) id는 태그에 고유한 값을 지정할때 사.. 2022. 11. 30. 이전 1 2 3 4 5 다음
