본문 바로가기

전체 글

 (166)
JS - lodash 라이브러리 어떤 html파일에서 한 이벤트를 실시할 시 함수가 작동됩니다. 해당 파일이 이런 이벤트나 함수가 많아질 수록 페이지가 버벅거릴 수 있습니다. 흔히, 무거워졌다고 표현하죠. 이 대, lodash 라이브러리를 사용하면 문제 해결됩니다. lodash cdn 페이지 링크 lodash 라이브러리 원리 lodash 라이브러리 사용 전 후 비교 scroll이벤트가 발생하면 scoll!! 를 출력하는 함수를 작동한 js코드입니다. 보시면 scroll할 때마다 출력이 되므로 짧은 시간 안에 출력된 값을 많이 쌓였습니다. lodash 라이브러리 사용 후, 함수를 실행한 횟수가 현저히 낮아졌습니다. 여기서 _.throttle메소드를 이용하며, 뒤에 300은 300ms마다 함수 실행하겠다는 뜻입니다. _.throttle(함..
스타벅스 클론(4) - 헤더와 드롭다운 메뉴(2) - 전역배지(GSAP) 배지부분을 자세히 보시면 두 덩어리로 나눠져 있으며 일정 영역까지 스크롤하면 없어집니다. 배지 html부분은 간단해서 설명 생략하겠습니다. css부분을 살펴보겠습니다. .badges는 배치하려고 하니 부모요소인 header에도 position값을 넣어야하는 점 잊지마세요. 보통 relative값을 주는데 이번에는 fixed를 넣었습니다. 스크롤이 생겨도 header부분이 계속 보여야하기 때문입니다. 여기서 주의할 점, width 속성 추가입니다. position속성에 relative, fixed 값이 지정되면 해당 요소가 너비를 최소한을 사용하는 경향이 있습니다. 즉, 뷰포트를 축소/확대하면 해당 요소가 화면 전체를 차지지 않습니다. 이미지 모서리가 둥글게 나오니까 border-radius를 추가했고, ..
HTML 클래스 속성의 작명법 - BEM BEM(Block Element Modifier) HTML 클래스 속성의 작명법입니다. 요소__일부분식으로 underscore(Low dash) 기호로 요소의 일부분을 표시합니다. 요소--상태식으로 Hyphen(Dash) 기호로 요소의 상태를 표시합니다. 예시를 보시면 왼쪽에는 div자식요소들 중 name이 두 개가 존재합니다. 물론 보기에는 깔끔하고 간략하지만 css혹은 js파일에서 name클래스를 지정할 때 지정하기 힘듭니다. 왼쪽 btn 클래스 뒤에 따라오는 상태도 btn과 관련이 없어 보입니다. 오른쪽으로 수정한 후 한 눈에 확인할 수 있어서 편리합니다.
스타벅스 클론(3) - 헤더와 드롭다운 메뉴(2) - 메인메뉴 메인메뉴 부분에 마우스를 대면 드롭다운 효과가 나온 것을 제작해보겠습니다. 일단 구조상 분석하면 드롭다운 부분은 전에 inner 너비와 같습니다. 또한 드롭다운이 위 아래 두 부분으로 정리할 수 있어요. html 파일입니다. items__name은 밑줄 2개가 있습니다. 여기서 주의할 점은 inner은 전에 header부분도 사용했습니다. 이거는 header부분의 inner 서로 영향주지 않게 css를 좀 수정해야 됩니다. 페이지 열어보면 coffe, menu, store등등 총 6개로 나뉘졌습니다. item클래스인 li태그도 6개를 만들어야됩니다. 반복되는 거라 여기서 따로 캡처 안 하겠습니다. COFFEE에 마우스 대면 또 크게 위 아래 두 덩어리로 나눠집니다. 그래서 이부분은 contents__me..
스타벅스 클론(2) - 헤더와 드롭다운 메뉴(1) - 로고, 서브메뉴, 검색 우선 작업할 부분은 헤드 부분입니다. 위에 표시된 거처럼 로고, 서브메뉴, 메인메뉴 3개 큰 덩어리로 나눌 수 있습니다. 이 중 서브메뉴는 검색까지 포함됩니다. 이 글에서 로고, 서브메뉴, 검색을 제작할 예정입니다. 로고 body영역에서 위 이미지처럼 만들어봤습니다. 기본적인 구조는 나왔고 css파일로 넘어가서 예쁘게 꾸며주면 됩니다. 우선 body영역에 내용에 대해 먼저 꾸밀겁니다. 클래스 이름 대신 태그 이름으로 값을 부여하는 거라 body영역에 해당 태그들은 모두 영향을 받을 겁니다. 그래서 주석 COMMON으로 처리했습니다. body 태그 중, color은 별도 지정하지 않으면 기본값이 검정색입니다. 여기서 좀 있어보이게 #333 넣었습니다. font-size도 기본값이 보통 16px인데 혹여 나..
스타벅스 클론(1) - 시작하기 오늘부터 스타벅스 홈페이지 클론 포플을 만들어보겠습니다. 프젝 진행할 때 작업 순서대로 캡처해서 올릴 예정이고 어려운 부분이나 주의해야할 점은 표시하겠습니다. 프로젝트 시작 준비를 해보겠습니다. 기본적으로 lang="ko", 언어를 ko로 변경하고 title부분에도 프젝맞게 변경했습니다. 그리고 중요한 것 작업하기 전에 css 초기화하기! 왼쪽 폴더 보면 이번 프젝 필요한 모든 이미지, 그리고 파비콘 파일들 준비했습니다. favicon은 위 이미지처럼 탭에 나타난 로고입니다. 일반적으로 favicon.ico파일과 html파일이 같은 폴더, 즉 루트폴더 안에 있으면 html파일 head부분에 링크 따로 걸 필요없이 바로 적용이 됩니다. 간혹 ico파일 해상도가 떨어지면 png파일로 대체해야 되는데 이때 h..
JS DOM API DOM API (Document Object Model, Application Programming Interface) 여기서 Document란 HTML 문서를 지향하며, Object Model은 div, span등 태그를 지향합니다. DOM API는 JS로 HTML 제어하는 여러 명령들입니다. HTML 제어 명령을 위 예시처럼 작성해봤습니다. 정상적으로 작동되면, .box인 클래스의 내용을 모두 console에 출력해야 됩니다. 위에 예시는 HTML head부분에 js파일을 연결해줬습니다. 보시다시피 결국에 null 값을 반환했습니다. 하지만, HTML body 부분에 js 파일을 연결해주면 정상적인 값을 나옵니다. 이 이유는 바로 HTML파일은 위에서부터 분석하고 작동하는 방식을 지니고 있기때문입니다..
JS 함수, 조건문, 메소드 체이닝 함수(function) 함수는 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)입니다. 함수를 선언할 때 맨 앞에 function 를 작성하고 함수이름을 작성합니다. 위 예시처럼 함수에서 특정한 값을 반환(return)할 수 있습니다. 위 예시처럼, 함수 안에 사용하는 어떤 데이터를 받아내는 변수를 매개변수(parameters)로 불리며, 그 변수가 받아줄 특정 데이터를 인수(arguments)로 불립니다. 가명 함수 & 익명 함수 함수들은 이름을 안 지어지면 활용할 수 없어서 변수에 담고 사용합니다. 이게 익명 함수입니다. 이름이 있는 함수는 함수 선언이라고 하며, 이름이 없는 함수는 함수 표현이라고 합니다. 객체 데이터 내부에서 속성 부분에 함수 데이터를 할당하는 것을 메소드라고 불립니다. 조건문..
JS 변수, 예약어 변수 변수는 데이터를 저장하고 참조(사용)하는 데이터의 이름입니다.var, let, const 가 있습니다.var은 되도록 사용 안 하시는 게 권장합니다. let let 변수는 재사용이 가능합니다. let 변수의 값이 재할당 가능합니다. const const 변수는 재할당 불가합니다. 예약어(Reserved Word) 예약어는 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어입니다. 자주 사용된 것들은 익숙해서 자연스럽게 외워지고, 프로그램에서도 에러제시할 테니 외울 필요는 없습니다. JS 예약어 참고하시면 될 것 같습니다.
JS 데이터 종류(자료형) JS 데이터 종류는 String, Number, Boolean, Undefined, Null, Object, Array로 나눠집니다. String string형은 2개의 방법으로 표시됩니다. 1. 따옴표 2. 백틱 따옴표로 string 자료형 표시 큰 따옴표던 작은 따옴표던 상관 없으나 끝에 세미콜론을 붙여야 합니다. " 문자 "; ' 문자 '; 백틱으로 string 자료형 표시 이 방법은 보간법이라고도 불립니다. ` 문자 ${ 변수 } ` 문자 사이에 다른 데이터를 넣으려고 하면 이 방법으로 추천합니다. 다른 데이터는 변수에 할당한 후 ${ }로 감싸줘야 합니다. 변수는 추후 다루겠습니다. Number 숫자 데이터는 정수 및 부동소수점 숫자를 모두 표기할 수 있습니다. Boolean 불린 데이터는 tr..

티스토리툴바