✔️ 메뉴 버튼 누르기 전
✔️ 메뉴 버튼 누른 후
이번 프로젝트의 핵심은 이름에서도 알 수 있듯이 회전하는 속성을 배우는 것이다.
👀 회전하는 애니메이션 속성에는 무엇이 있을까?
- 회전
transform: rotate(20deg)- 애니메이션
transition: transform 0.5s linear
✨ HTML
<i> 태그
<i> 태그는 이탈릭 체를 나타내기 위한 태그로 외국어 단어, 기술 용어, 또는 다른 텍스트와 구별해야 하는 정보를 나타낼 때 사용된다
라고만 알고 있었는데 !!
❗️ 폰트 기반 아이콘(예: Font Awesome)과 함께 <i> 태그가 자주 사용된다고 한다.
과거에는 아이콘을 이탤릭체로 표시하는 역할이 있었으나, 현재는 단순히 아이콘을 위한 컨테이너로 사용된다.
밑의 예시에서도 폰트 기반 아이콘 사용을 위한 컨테이너로 사용된 것이다.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
/> ➡️ 폰트 기반 아이콘을 사용하기 위한 링크 (주의: html에서 사용!!)
<button id="open">
<i class="fas fa-bars"></i>
</button>❗️주의할점
HTML의 시맨틱 태그는 스타일을 위해서가 아니라 의미가 있을 때 사용하는 것이다.
<i> 태그도 시맨틱 태그이므로 의미적 구별을 위한 목적이 있을 때 사용한다.
script 태그
html 속 태그들이 먼저 정의된 후 js 파일에 보내야 js 파일에서도 사용이 가능하므로
<script src="main.js"></script>는 body 태그의 마지막에 사용하는 것이 좋다.
✨ CSS
폰트 적용
@import url("https://fonts.googleapis.com/css?family=Lato&display=swap");z-index
z-index는 position이 static이 아닌 요소일 때 사용할 수 있는 속성이다.
position이 설정된 두 속성들 사이에서는 z-index 값에 따라 우선 순위가 결정된다.
👀
position이 설정된 요소와position이 지정되지 않은 속성을 비교하면 어떨까?
position이 설정된 요소는 z-index 값에 따라 우선순위가 결정될 수 있지만, static 요소와는 우선순위 비교가 불가능하다.
➡️ 따라서 position이 설정된 요소는 항상 static 요소보다 위에 표시된다!
transform-origin
transform-origin: top left;CSS에서 요소의 변형(Transform)이 발생하는 기준점(원점)을 설정하는 속성이다.
이 속성은 transform 속성과 함께 사용되어, 요소를 회전하거나 크기 조정, 기울이기 등의 변형을 할 때 그 기준이 되는 지점을 지정한다.
기본 값은 center center 인데 이 프로젝트에서는 가운데를 기준으로 회전하는 것이 아니라 왼쪽 상단이 기준으로 회전하기 때문에 이 속성을 바꿔줘야 한다.
❗️ 회전을 할 때는 이 속성을 사용하여 기준점까지 고려하자!
background
background: transparent 값을 이용하면 배경화면을 투명으로 설정할 수 있다.
position: fixed
스크롤바를 내려도 한 위치에 고정이 되는 속성이다.
이 때도 position: static이 아니므로 z-index 설정이 가능하다.
✨ Javascript
getElementByID vsquerySelector
| 특성 | getElementById | querySelector |
|---|---|---|
| 선택 기준 | 요소의 ID | CSS 선택자 (ID, 클래스, 태그, 속성 등) |
| 반환 요소 | 일치하는 첫 번째 요소 (ID는 유일해야 함) | 일치하는 첫 번째 요소 |
| 지원하는 선택자 | 오직 ID | 다양한 CSS 선택자 |
| 선택자 형식 | document.getElementById('id') | document.querySelector('#id'), .class, div |
| 성능 | 매우 빠름 | 유연하지만 성능은 약간 느림 (거의 차이 없음) |
classList
open.addEventListener("click", () => {
container.classList.add("show-nav");
});
close.addEventListener("click", () => {
container.classList.remove("show-nav");
});
원하는 곳에 클래스를 추가하고 삭제할 수 있다.
css에 미리 클래스에 대한 스타일링을 해놓은 다음 버튼을 누르거나, 이벤트가 실행될 때 클래스를 추가하여 그 스타일링이 실행되도록 사용한다.
