본문 바로가기

💬

(50)

패스트 캠퍼스 챌린지 10일차 🍟 10일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 10. 스타벅스 예제 Ch 10. 스타벅스 예제 주제 시작하기 헤더와 드롭다운 메뉴 주요 내용 https://github.com/parkYoungWoong/starbucks-vanilla-app GitHub - ParkYoungWoong/starbucks-vanilla-app: 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus. Contribute to ParkYoungWoong/starbucks-vanilla-app development by creating an account on GitHub. github.com 🔗 Google Fonts 🔗..

패스트 캠퍼스 챌린지 9일차 🐳 9일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 9. JS 선행 Ch 9. JS 선행 주제 표기법 JS 기초 문법 DOM API 메소드 체이닝 주요 내용 🔗 표기법 dash-case: HTML, CSS snake_case: HTML, CSS camelCase: JS PercelCase: JS(new 생성자) 🔗 자료형 undefined: 값이 할당되지 않은 상태를 나타낸다. null: 어떤 값이 의도적으로 비어있음을 의미한다. 🔗 변수 let: 재할당 가능 const: 재할당 불가능 🔗 함수 익명함수 => 대부분 데이터로써 활용 🔗 DOM API: 자바스크립트로 HTML 요소를 제어할 때 사용하는 명령들 https://devjindev.tistory.com/55?catego..

패스트 캠퍼스 챌린지 8일차 🐱‍👤 8일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 8. CSS 속성 Ch 8. CSS 속성 주제 변환 새롭게 알게 된 내용 🔗 perspective(n): 원근법(거리) => 3d(rotateX/Y 등) 변환할 때 무조건 같이 사용해야 함 px 단위 원근법 함수는 제일 앞에 작성해야 한다. 물체와 가까워 질수록(원근법 거리가 짧을수록) 더 왜곡이 심하게 일어난다. perspective 속성과 함수 차이점 적용 대상 기준점 설정 속성 perspective: 600px; 관찰 대상의 부모 perspective-origin 함수 perspective(600px); 관찰 대상 transform-origin backface-visibility: hidden; // 3d 변환으로 회..

패스트 캠퍼스 챌린지 7일차 🍒 7일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 8. CSS 속성 Ch 8. CSS 속성 주제 플렉스(정렬) 전환 주요 내용 justify-content: 주 축의 정렬 방법 align-content: 교차 축의 여러 줄 정렬 방법 => 교차 축이 한 줄일 때 사용하면 동작하지 않는다. align-items: 교차 축의 한 줄 정렬 방법 item에 적용 order: flex item의 순서 (숫자가 작을수록 앞에 정렬) flex-grow: flex item의 증가 너비 비율 (기본값 0) flex-shrink: flex item의 감소 너비 비율 (기본값 1) flex-basis: flex item의 공간 배분 전 기본 너비 (기본값 auto) 🔗 transition htt..

패스트캠퍼스 챌린지 6일차 6일차 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 8. CSS 속성 Ch 8. CSS 속성 주제 글꼴, 문자 배경 배치 주요 내용 🔗 글꼴, 문자 font-weight: 400(regular), 700(bold) 가장 많이 사용 line-height: 2; // 글자 크기의 2배 => 이 방식(배수) 사용하는 것을 권장! 🔗 position 기준 -> 위치 static: 기준 없음 relative: 요소 자신을 기준 absolute: 위치 상 부모 요소를 기준 fixed: 뷰포트(브라우저)를 기준 sticky: 스크롤 영역 기준 새롭게 알게 된 내용 font-family: 글꼴1, "글꼴2", ..., 글꼴계열; // 앞부터 순서대로 해당 폰트를 적용할 수 없으면, 뒤에꺼를 적용..

패스트캠퍼스 챌린지 5일차 [5일차 강의명] Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 8. CSS 속성 Ch 8. CSS 속성 주제 CSS 속성 박스 모델 주요 내용 margin => 요소의 크기가 늘어나지 않음. padding, border => 요소의 크기가 늘어남. border-radius: 10px; // 반지름 10px인 원만큼 모서리를 깎아냄. box-sizing: content-box; // 요소의 내용(content)으로 크기 계산 box-sizing: border-box; // 요소의 내용 + padding + border로 크기 계산 => 결과적으로 내용의 크기는 작아짐. display block: 상자 요소 => 크기를 지정할 수 있다. inline: 글자 요소 inline-block..

패스트캠퍼스 챌린지 4일차 [4일차 강의명] Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 7. CSS 개요 Ch 7. CSS 개요 주제 CSS 기본 문법 CSS 선택자 선택자 우선순위: 아이디(#) > 클래스(.) > 태그 > 전체(*) 내용 CSS 선언 방식 내장 방식 의 내용으로 스타일을 작성하는 방식 CSS 내용이 많아지는 경우에 HTML 파일 하나에 모든 것을 처리하기 힘들다. HTML/CSS/JS 파일들을 각자 다른 파일에서 작업하는 것이 가장 좋다. 인라인 방식 요소의 style 속성에 직접 스타일을 작성하는 방식 (CSS 선언 방식 중에) 우선순위가 너무(?) 높기 때문에 수정 및 유지보수에 악영향을 끼칠 가능성이 크다. 링크 방식 로 외부 CSS 문서를 가져와서 연결하는 방식 => 병렬로 연결..

패스트캠퍼스 챌린지 3일차 [3일차 강의명] Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트 Ch 5. HTML 개요 Ch 6. HTML 핵심 정리 Ch 5. HTML 개요 내용 HTML 기초 인라인과 블록 새롭게 알게된 내용 나는 HTML 중에서 HTML5만 공부해봤고, 대부분 vscode 자동완성(?) 기능을 사용해서 대부분 HTML 코드를 작성 했었기 때문에 빈태그에 대해서 깊게 생각을 안 해봤다. 강의를 들으면서 생각해보니 대부분 빈태그는 형식으로 사용했던 거 같다. 강의해주시는 분 말씀으로는 이 방법이 태그가 종료했다는 것을 명시해주기도 하고, 일반 HTML 에서는 상관없지만 vue 에서는 를 사용하기도 해서 (vue를 사용 해보지 않아서 몰랐음) 보다는 방식을 권장하신다고 한다. Ch 6. HTML 핵심 ..

이전 1 ··· 3 4 5 6 7 다음

티스토리툴바