강의30 패스트캠퍼스 챌린지 14일차 - Part 1. 스타벅스 예제(2) 5. 헤더와 드롭다운 메뉴 - 로고 : 특별한 기능은 없지만 헤더라는 뜻의 태그 이미지 요소는 인라인 요소기 때문에 글자 밑의 baseline 공간이 생김. → img{ display: block; }으로 해결 header .logo{ height: 75px; position: absolute; top: 0; bottom: 0; margin: auto; } top의 0 지점, bottom의 0 끝점을 찍어놨기 때문에 margin: auto로 자동으로 계산해서 가운데 배치→ 상하가운데정렬 : height 지정 / position: absolute / top:0 bottom:0 margin auto 6. 헤더와 드롭다운 메뉴 - 서브메뉴 a 태그에 링크가 아직 준비되지 않았을 경우 7. 헤더와 드롭다운 메뉴.. 2023. 3. 5. 패스트캠퍼스 챌린지 13일차 - Part 1. 스타벅스 예제(1) JS 선행 8. 메소드 체이닝 const a = 'Hello!'; // split : 문자를 인수 기준으로 쪼개서 배열로 반환 // reverse: 배열 뒤집기 // join: 배열을 인수 기준으로 문자로 병합해 반환 const b = a.split('').reverse().join(''); // 메소드 체이닝 console.log(a); //Hello! console.log(b); //!olleH 명령들을 나눠서 작성하는게 아닌 붙여서 사용하는 것 스타벅스 예제 1. 시작하기 - 프로젝트 시작, 스타일 초기화, 파비콘 root경로에 favicon.ico를 자동으로 가져가서 파비콘으로 사용 // 파비콘 따로 설정 2. 시작하기 - 오픈그래프와 트위터 카드 오픈 그래프(The Open Graph proto.. 2023. 3. 4. 패스트캠퍼스 챌린지 12일차 - Part 1. JS 선행(2) 3. 변수, 예약어 변수 : 데이터를 저장하고 참조(사용)하는 데이터의 이름 var, let, const // 재사용 가능 // 변수 선언 let a = 2; let b = 5; console.log(a + b); // 7 // 값(데이터)의 재할당 가능 let a = 12; console.log(a); // 12 a = 999; console.log(a); // 999 (재할당) // 값(데이터)의 재할당 불가!! const a = 12; console.log(a); // 12 a = 999; console.log(a); // 999 TypeError: Assignment to constant variable. 대부분의 경우 const로 사용 → 재할당이 필요한 경우 let 사용 예약어 : 특별한 의미.. 2023. 3. 3. 패스트캠퍼스 챌린지 11일차 - Part 1. JS 선행(1) 1. 개요 표기법 dash-case(kebab-case) : HTML CSS snake_case : HTML CSS camelCase : JS ParcelCase : JS (특수경우) Zero-based Numbering 특수한 경우를 제외하고 0부터 숫자를 시작 let fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); console.log(new Date('2021-01-30').getDay()); // 6, 토요일 console.log(new Date('2021-01-30').getDay()); // 0, 일요일 console.log(new Date('.. 2023. 3. 2. 이전 1 2 3 4 5 6 7 8 다음
