본문 바로가기

전체 글294

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.
[제로베이스]프론트엔드 스쿨 두 달차 요약 다음주면 프론트엔드 스쿨이 시작한지 두 달차가 된다. 5월은 HTML/CSS 미션을 하느라 초반 시간이 훅 지나가버려서 인지 미션이 끝나도 시간이 빨리 가는 것 같다고 느꼈다. 프론트엔드 스쿨 두 달차에는 코딩 테스트를 시작했고 자바스크립트 진도를 나가고 있다. 일주일에 한 번씩 코딩 테스트를 보면서 공부할 수 있는건 좋지만 초보자가 하기엔 문제의 난이도가 높다고 느꼈다. 물론 총 5개의 문제 중 2개 정도는 어려움 없이 풀 수 있지만 나머지 문제는 이해조차 되지 않아 여기저기 검색해보고 답을 작성하여 제출해야 한다는 점이 아쉬웠다. 나는 처음부터 난이도가 높으면 실력 향상에 도움이 된다고 생각하지 않아서 쉬운 문제부터 차근차근 난이도를 높여갔으면 더 좋았을거란 아쉬움이 든다. 그런 문제는 자바스크립트 .. 2023. 5. 24.

티스토리툴바