자바스크립트에 익숙해지려고 간단한 프로젝트감을 찾아보면서 Frontend Mentor사이트에서 제공하는 챌린지 과제를 해보게 되었다.
프로젝트에 대한 간단한 소개는 깃허브 페이지에다가 올려놓았고, 프로젝트를 진행하면서 자잘하게 배웠던 것들에 대한 정리를 해두려고 한다.
CSS -> 자식 선택자
#body > li.read > span:nth-child(2) > span.readDot {
display: none;
}- 특정 요소의 직접적인 Child만 선택하게 해주는 선택자
- (좋은 방법이라고 생각하지는 않지만) 프로젝트에서는 읽음 여부를 표시하는 붉은 점만을 선택하기 위해 사용
JS -> for문 간의 차이
function allRead() {
const listSet = document.querySelectorAll('li');
for(let list of listSet){
addReadClass.call(list);
}
checkNum ();
}내용이 길어서 따로 글로 정리해두었다. nodelist에서는 for..in문을 쓰면 length같은 속성까지 반복해버리기 때문에 오류가 발생하게 된다.
링크 : https://velog.io/@nhs075241/for-of
Accessibility report
Images must have alternate text
<img src="asdf.png" alt="이미지를 설명하는 텍스트">- 이미지를 설명하는 텍스트 내용을 alt속성을 통해 적용시켜야함
Document should have one main landmark
<body>
<header> <!-- landmark -->
<nav> <!-- landmark -->
...
</nav>
</header>
<aside> <!-- landmark -->
</aside>
</body>- 시맨틱 태그를 활용하라는 의미
- 깊이 생각해보지 않았는데, 시맨틱 태그들에 대해 학습을 해야겠다
Page should contain a level-one heading
- 페이지에
<h1>태그는 반드시 포함되어 있어야 함
Element p not allowed as child of element span in this context.
<body>
<span>
<p>
</p>
</span>
</body>- 다음처럼 span태그 내부에 p태그를 child로 두어서는 안됨
냐아아아아아아아아앙