![]()
1️⃣ 연산자산술 연산자(Arithmetic Operator)+ - * / % : 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지console.log(1 + 2) // 덧셈, 3console.log(5 - 7) // 뺄셈, 2console.log(3 * 4) // 곱, 12console.log(10 / 2) // 나눗셈, 5console.log(7 % 5) // 나머지, 2 할당 연산자(Assignment Operator)a = a + 1 // a += 1a = a - 1 // a -= 1a = a * 1 // a *= 1a = a / 1 // a /= 1 비교 연산자(Comparison Operator)=== : 일치(type + 값)하면 true!== : 일치(type + 값)하지 않으면 true>, = : 초..
![]()
🔟 고정 이미지 배경.pick-your-favorite { background-image: url('../images/favorite_bg.jpg'); background-repeat: no-repeat; background-position: center; /* scroll시 배경화면이 멈춰있도록 하는 속성 => Parallax */ background-attachment: fixed; background-size: cover;}background-attachment를 통해 배경이미지를 viewport를 기준으로 출력하도록 설정한다.background-attachment: fixed로 설정하면, 스크롤시 배경화면이 멈춰있도록 스타일링할 수 있다.(Parallax) 1️⃣ 3D 애니메이션메달..
![]()
6️⃣ 순차적 애니메이션 - 전역 버튼 스타일Sementic Tag의 사용Sementic Tag란?sementic이란 의미론적, 의미론적인을 뜻한다.즉, sementic tag란 의미를 부여하기 위한 역할의 태그라고 할 수 있다.이전에 header 영역을 작업할 때에도 태그가 아닌 태그를 사용한 것 처럼, 의미가 없는 대신 해당 영역이 하나의 문서(컨텐츠 그룹)라는 의미를 부여하기 위해 이라는 태그를 사용하였다. ... ... 아래 MDN문서를 참고해보면 시멘틱 태그에는 와 말고도 다양한 의미를 부여할 수 있는 태그들이 존재한다는 것을 알 수 있다. Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MD..
![]()
3️⃣ 헤더와 드롭메뉴 - 검색Input이 blur될 경우 스타일링 하기box-sizing: border-box; 를 통해 테두리를 기준으로 크기를 정한다.width: 36px;로 설정해서 blur되었을 때 input의 크기를 최소화한다.transition의 width값만 변경되었을 경우 0.4초로 default easing function인 ease로 애니메이션 처리를한다. transition - CSS: Cascading Style Sheets | MDNThe transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-functi..
![]()
🏁 스타벅스 예제 시작하기favicon.ico 프로젝트 루트경로에 favicon.ico있으면 브라우저가 자동으로 인식하여 브라우저 탭의 아이콘으로 설정한다. reset.css 브라우저의 기본 스타일을 초기화 하기 위한 css코드이다.reset.css을 구글링하면 다양한 브라우저 초기 스타일링을 제거하는 코드들을 찾아볼 수 있다. jsDelivr - A free, fast, and reliable CDN for JS and Open SourceOptimized for JS and ESM delivery from npm and GitHub. Works with all web formats. Serving more than 150 billion requests per mont..
![]()
🎯 주제 [Feature]: Better search idea · Issue #796 · react-icons/react-icons Describe When you search for a new icon if you add any spaces it will not work because no icons have a space in its name, like when you want to search for a clip board icon you will need to type 'c... github.com 이전 issue에서 사용자가 입력한 검색에 공백이 있을 경우 아이콘 검색이 안나오는 경우가 발생하는 오류가 있었다. 때문에 사용자의 입력을 처리하여 더 낫은 검색 방식을 제공하자는 issue가 나왔지만..
