전체 글294 클릭 이벤트가 상위 요소로 전파되는 것을 방지하는 방법 Calendar June 2023 SUN MON TUE WED THU FRI SAT .calendar { visibility: hidden; position: absolute; top: 31px; width: var(--calendar-width); height: calc(var(--calendar-width) * 1.2); border-radius: 10px; box-shadow: 0 0 20px gray; } .active { visibility: visible; } 현재 '.calendar' 클래스를 가진 요소는 css 에서 visible: hidden 처리를 해두어 보이지 않는 상황이고, Select date라고 적혀있는 input 태그를 클릭하면 '.calendar' 클래스를 가진 요소에 '.a.. 2023. 6. 12. display: contents로 gird 문제 해결하기 위의 사진과 같이 gird를 나누기 위해 아래의 코드를 작성하였다. SUN MON TUE WED THU FRI SAT .calendar-grid { height: 240px; background-color: white; border-radius: 0 0 10px 10px; display: grid; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(7, 1fr); grid-template-areas: 'sun mon tue wed thu fri sat' 'day day day day day day day' 'day day day day day day day' 'day day day day day day day' 'day day day .. 2023. 6. 12. noopener, norenoreferrer, nofollow를 사용하는 이유 a 태그의 rel 속성 값으로 사용되는 noopener, norenoreferrer, nofollow 에 대해 알아보자 a 태그의 rel 속성은 html 문서와 링크된 두 문서간의 관계를 명시해준다. 이때 href 속성이 있어야 rel 속성을 사용할 수 있고 검색 엔진은 이 속성을 통해 링크에 대한 추가 정보를 얻을 수 있다. rel 속성에 사용되는 value 중 noopener, norenoreferrer, nofollow 값은 , , 요소에서 사용되는데, 이 값들은 하이퍼링크를 생성하지는 않지만 저 요소들에 의해 생성된 다른 하이퍼링크의 주석이 되기도 한다. 1. noopener 보통 하이퍼링크를 만들 때 target 속성을 지정하면 새로 열린 브라우저 탭에 이름을 지정하고 보조적인 브라우저 탭을 생.. 2023. 6. 3. element.classList.add()와 element.classList.toggle()의 차이점 특정 클래스의 여부에 따라 네비게이션 메뉴가 열렸다 닫히는 동작을 구현하던 중 이상한 점을 발견했다. function addClass() { nav.classList.toggle('active'); } 나는 화살표를 클릭하면 active 클래스를 추가해주는 함수를 만들어서 네비게이션 메뉴가 열리는 동작을 구현했다. 그런 다음 다시 네비게이션 메뉴를 닫으려면 removeClass 함수를 구현하여 nav.classList.remove('active')를 구현해야 한다고 생각했는데, removeClass 함수를 구현하지 않아도 네비게이션이 닫히는 동작이 이루어지는 것에 이상함을 느꼈다. 혹시 몰라 nav.classList.add()로 함수의 코드를 변경했더니 네비게이션 메뉴가 열리는 것만 동작하게 되었다. a.. 2023. 5. 25. 이전 1 2 3 4 5 6 ··· 74 다음
