직접 실습! (상황에 맞게 마크업)
1. 내가 강의를 듣지 않고 직접 div로 묶고 CSS에서 적힌 거 참고해서 완성했다. 너무 멋있는 나..⭐
실습 파일01: Self/29/index.html
2. HTML에서 자주 쓰는 엔티티(entities)를 검색하고 찾아서 써봤다. 이것도 내가 직접⭐⭐⭐
- heading 태그라도 그 태그가 어떤 역할을 하는지 생각을 하면서 마크업을 해야 한다.
https://mine-it-record.tistory.com/273
실습 파일: Self/30/index.html
3. 이미지 태그를 썼는데 alt에 할 말이 없다면 비워두는 것이 좋다고 한다!
- 이때 이미지가 어떤 의미를 가지고 있지 않다고 하면 CSS로 꾸며주는 것도 좋다고 한다.(img태그를 사용하지 않고!)
실습 파일: Self/31/index.html
4. 이미지 태그라도 제목 태그 안에 들어올 수 있다!!
실습 파일: Self/32/index.html
5. 이번엔 나의 취약한 부분을 실습했다..!!
- 1페이지, n페이지 이것들을 pagination이라고 부른다. 이때 순서가 중요하기 때문에 ol을 사용한다.
- 누르면 다른 페이지로 이동하기 때문에 각 list는 a 역할을 가지고 있다.
- 이때 누를 수 없는 페이지가 있다면 <button type="button" disabled> 를 사용한다.
- aria-lable은 장애를 가져 앞을 볼 수 없거나 마우스를 사용할 수 없는 분들에게 이 태그가 어떤 태그인지 설명해준다.
실습 파일: Self/33/index.html
6. 뮤직 플레이 리스트이므로 list로 작성해야 한다.
- audio는 가장 마지막에 넣는다. 전체적으로 lang=en이지만 한국어를 사용한다면 그것을 묶어서 lang=ko로 하면 더 정확하고 좋다(안해도 된다)
- audio controls가 안보이기에 controls를 사용하지 않는다.
실습 파일: Self/41/index.html
7. 비디오 플레이를 만들었다.
- video를 div로 묶은 이유는 video 크기를 조절하기 위해서 이다. (이때 mov인 video는 type="video/mp4" 라고 한다.)
직접 search 해봄!!!
- video 태그 안에 source 태그를 했을 때, controls 속성은 video에 사용한다.
실습 파일: Self/42/index.html