본문 바로가기

전체 글282

2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 CSS 테두리 선과 색상 표현 border: 선-두께(width) 선-종류(style) 선-색상(color) 요소의 테두리 선을 지정하는 단축 속성. 요소의 크기가 커짐 ★기본값: medium none(선의 종류가 없어서 출력되지 않음) black border-width 요소 테두리 선의 두께(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌) 두께는 상대적이기 때문에 정확한 수치를 통해서 특정한 단위로 명시하는 것을 권장 medium: 중간 두께(★기본값) thin: 얇은 두께 thick: 두꺼운 두께 단위: px, em, % 등 단위로 지정 border-style 요소 테두리 선의 종류(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌) none: 선 없음(★기본값) solid: 실선 (일반 선).. 2023. 1. 2.
2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 CSS 속성 - 개요 박스모델: HTML 요소의 기본적인 모양을 만들어내는 기본적인 속성 글꼴, 문자: 글꼴은 폰트라고 말하는 서체를 의미 또한 모든 문자를 제어 배경: 요소의 배경으로 색상을 집어넣거나 혹은 이미지 삽입 배치: 어떤 특정한 요소를 원하는 위치에다가 가져다 놓음 플렉스(정렬): 일반적으로 HTML에 요소는 수직(위에서 아래로)으로 쌓이는 개념을 가지고 있는데 여러요소를 수평으로 순서대로 수평정렬을 하는 것. 옛날에는 띄움을 이용했지만 현재는 플렉스를 이용 전환: 요소의 전상태와 후상태 중간과정을 자연스럽게 애니메이션 처리 해주는 것(전환효과). 즉 전환은 요소의 전후상태를 애니메이션 처리하는 개념 변환: 요소를 회전하거나 이동시키거나 크기를 조절해주는 요소의 변화를 주는 CSS 특성. 2.. 2023. 1. 1.
2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 CSS 기본문법 선택자: 스타일(CSS)을 적용할 대상(Selector) 속성: 스타일(CSS)의 종류 (Property) 값: 스타일(CSS)의 값(Value) {: 스타일 범위의 시작 }: 스타일 범위의 끝 CSS 선언방식 내장방식 의 내용(Contents)으로 스타일을 작성하는 방식. 별도의 CSS파일을 따로 만들지 않아도 HTML파일내에서 바로 CSS내용을 적용할 수 있지만 CSS내용이 많아지면 HTML파일내에서 다 처리하기가 길어짐 프론트엔드개발할때는 HTML, CSS, JS파일을 구별해서 관리하는 것이 장점이 많음 그래서 내장방식은 단점이 많음. 권장하지 않는 방식(내장방식은 직접 코드를 작성하는 것이 좋은 방법이 아니기 때문) 프로젝트를 번들(한데 묶어서 서버에서 올리는 방식)할때 번들하는 .. 2022. 12. 30.
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.

티스토리툴바