분류 전체보기
-
스타벅스 클론코딩-3 (전역 배지 및 VISUAL)프로젝트/스타벅스 클론코딩 2021. 5. 9. 22:44
HEADER - 전역 배지 클론코딩 예제 배지 특징 - 화면에서 스크롤을 일정 부분 내리면 천천히 사라짐, 올리면 다시 천천히 보여짐 /* CSS */ header { width: 100%; position: fixed; top: 0; } header .badges { position: absolute; top: 132px; right: 12px; } header .badges .badge{ border-radius: 10px; overflow: hidden; margin-bottom: 12px; /* 그림자 추가 */ box-shadow: 4px 4px 10px rgba(0,0,0,.15); cursor: pointer; } // 자바 스크립트 // 배지 요소 변수에 저장 const badgeEl = ..
-
스타벅스 클론코딩-2 (HEADER)프로젝트/스타벅스 클론코딩 2021. 5. 7. 01:55
HEADER 영역 로고 삽입 및 배치 header .inner { /* 가로 너비 */ width: 1100px; /* 세로 너비 */ height: 120px; /* 외부 여백, 가운데 정렬 효과 */ margin: 0 auto; position: relative; } header .logo { /* 결과적으로 header 영역 가운데에 수직으로 배치 */ height: 75px; /* 부모 요소를 기준으로 로고를 배치 */ position: absolute; top: 0; bottom: 0; margin: auto; } /* - 가운데 수직 정렬 방법 - 부모 요소에 기준점(position: relative) 존재 - position: absolute 선언 - height(높이값),top과 botto..
-
스타벅스 클론코딩-1 (HTML <head> 작성)프로젝트/스타벅스 클론코딩 2021. 5. 6. 23:00
HTML 작업 - 문서의 정보를 작성 - 웹 브라우저가 해석해야 하는 페이지 제목, 설명, 사용할 파일의 위치, 스타일, 보이지 않는 정보를 작성 Starbucks Coffee Korea Favicon(favorites icon) - 윕페이지를 나타내는 아이콘으로 파비콘이라고 부른다 - 웹페이지의 로고를 의미하며 대부분의 경우 루트 경로에 favicon.ico 파일을 위치하면 자동으로 설정된다 - favicon.png 파일을 사용하려면 태그를 작성 오픈 그래프와 트위터 카드 오픈 그래프(The Open Graph protocol) - 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정 og:type - 페이지의 유형(E.g, website, video.movie) og:si..
-
JS 메소드 체이닝JavaScript/JavaScript 2021. 5. 5. 01:07
메소드 체이닝(Method Chaining) const a = 'Hello JS'; const b = a.split('').reverse().join(''); // 메소드 체이닝 console.log(a); // 출력 결과: Hello JS console.log(b); // 출력 결과: SJ olleH // split - 문자를 인수 기준으로 쪼개서 배열로 반환 // reverse - 배열을 뒤집기 // join - 배열을 인수 기준으로 문자로 병합해 반환 console.log(a.split('')); // 출력 결과: ["H", "e", "l", "l", "o", " ", "J", "S"] console.log(a.split('').reverse()); // 출력 결과: ["S", "J", " ", "..
-
JS 맛보기 (DOM API)JavaScript/JavaScript 2021. 5. 3. 22:02
DOM API Document Object Model, Application Programming Interface - JavaScript에서 HTML을 제어하는 여러가지 명령들 // HTML 요소(Element) 1개 검색/찾기 const 변수명 = document.querySelector(CSS선택자); // HTML 요소에 적용할 수 있는 메소드 변수명.addEventListener(); // 인수(Arguments)를 추가 가능 변수명.addEventListener(1, 2); // 1 - 이벤트(Event, 상황) 변수명.addEventListener('click', 2); // 2 - 핸들러(Handler, 실행할 함수) 변수명.addEventListener('click', function (..
-
JS 맛보기 (조건문)JavaScript/JavaScript 2021. 5. 3. 21:37
조건문 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 // 조건문 (if) // 조건문은 조건이 참일 경우에만 내용을 실행 if (조건) { 내용; } let a = true; let b = false; if (a) { console.log('aaa'); // 출력 결과: aaa; } if (b) { console.log('bbb'); // 조건이 거짓이면 실행되지 않음 } // 조건문 (if else) if (조건) { 내용 // 조건이 참이면 실행 } else { 내용 // 조건이 거짓이면 실행 } let a = flase; if (a) { console.log('aaa'); } else { console.log('bbb'); // 출력 결과: bbb }
-
JS 맛보기 (변수와 함수)JavaScript/JavaScript 2021. 5. 2. 20:37
변수(variable) 데이터를 저장하고 참조(사용)하는 데이터의 이름 변수 선언 방법 - var - let - const let // 재사용이 가능 // 변수 선언 let 변수명; // 선언, 값에는 "undefined" 저장 let 변수명 = 값; // 선언과 초기화 let a = 2; let b = 1; console.log(a + b); // 출력 결과: 3 console.log(a - b); // 출력 결과: 1 a = 3; // 값(데이터)의 재할당 console.log(a + b); // 출력 결과: 4 const // 재사용이 가능 // 변수 선언 const 변수명 = 값; // 처음 선언할 때 반드시 초기화를 해야함 const a = 2; const b = 1; console.log(a ..