Music Player

실습 화면

피드백

ol 태그를 사용하여 각각 리스트를 생성하자

음악이 총 2개 있길래 그냥 audio 태그를 각각 써서 마크업하는 줄 알았는데 버그님이 이럴 땐 li 태그를 사용하는 게 좋다고 하신다. 순서가 중요한 정보이니 ol 태그를 사용해서 마크업하자!

lang 속성

					<h1 lang="ko">
                        러브 엑스 마키나 Love Ex Machina
                    </h1>
                    <strong lang="ko">
                        MLSL (밀레니엄 살롱)
                    </strong>

전체 문서 속성이 en값으로 되어 있는데 정보의 일부분이 한국어라면 해당하는 태그에 lang 속성값을 ko로 설정하는 걸 잊으면 안된다고 하신다.

sr-only 속성

			<span class="music-playtime">
                    <span class="sr-only">
                        Duration
                    </span>
                    03:33
                </span>

03:33 부분을 그냥 span 태그로만 마크업했는데 이게 어떤 정보인지 전달할 필요가 있다고 하셔서 sr-only 속성을 사용하여 좀 더 시맨틱한 마크업을 하면 좋다고 하신다.