목록분류 전체보기 (433)
whatisthis?
보호되어 있는 글입니다.
보호되어 있는 글입니다.
보호되어 있는 글입니다.
Project) HTML Twitter Mark-up Challenge - (1)
Header / Nav / Main REFERECE https://developer.mozilla.org/ko/ LECTURE https://edu.goorm.io/learn/lecture/20583 Sectioning Element의 사용법 section article nav aside Section = 단원 이므로 주제, 즉 제목이 필요 반드시 heading태그 필요 (h1등) ___ - 구획 나누기 (논리적으로 관련된 집합체) - 최소한의 기능 / 의미를 갖는 단위로 쪼개기 HTML practice에서 진행했던 것 처럼, 최소한의 기능을 하는 단위로 나누기 전에 먼저 한 페이지를 만드는 것 이므로, 논리적인 단위로 먼져 나눠주자. 1. feed = 글을 작성하는 부분 2. navigator = 좌측..
html_pr14) style.css Code Review
https://mywebproject.tistory.com/130 HTML 훈련 - (14) Video Player Video Player REFERENCE (style.css) https://github.com/rohjs/bugless-101/tree/master/html-practice/14-video-player 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까.. mywebproject.tistory.com @import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css); * { margin: 0; box-sizing: border-box; } html { font-famil..
HTML 훈련 - (14) Video Player
Video Player Video Player video 태그로 마크업 하는 방법. 방법1. 이 방법으로는 만약 해당 파일이 재생이 안된다면, 영상이 재생되지 않는다. 만약 사용자의 브라우저가 mov 형식을 지원하지 않는다면 ? - 재생 안됨! 따라서, 사용자 친화적인 마크업을 위해서는 아래 방법대로 source 태그를 사용한다. 방법2. ** source 태그의 필수 속성 = src / type 오디오든 비디오는 source를 사용할 때는, type을 꼭 명시해야함. 예> 위와 같이 마크업 해주고, 나머지 헤딩과 내용부분을 마크업하자. 주짓수 4주차 롤링 영상 30초 만에 압살 실화인가 그리고, css 적용을 위해서 div로 분할해줌. video 또한 플레이어를 나타나게 하기 위해 controls라는 ..
html_pr13) app.js Code Review
https://mywebproject.tistory.com/124 HTML 훈련 - (13) Music Player Music Player REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/13-music-player 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해.. mywebproject.tistory.com var musicPlayItems = document.querySelectorAll(".music-play-item") musicPlayItems.forEach(function(item) { item.isPlaying = false it..
html_pr13) style.css Code Review
https://mywebproject.tistory.com/124 HTML 훈련 - (13) Music Player Music Player REFERENCE (style.css / app.js) https://github.com/rohjs/bugless-101/tree/master/html-practice/13-music-player 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해.. mywebproject.tistory.com * { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, ..
HTML 훈련 - (13) Music Player
Music Player audio 태그를 이용한 마크업 연습. 마크업을 하기 위해 섹션을 나눠보자. 음악 플레이 '리스트'이므로 리스트로 마크업해야한다. 또한, 이때는 재생되는 순서가 결정되므로 ordered list, 즉 ol을 사용해야한다. html lang="en"으로 하되, 한국어가 들어가는 태그의 속성에 lang="ko"를 적어준다. 위에처럼 alt,즉 대체텍스트에는 한국어로 작성했으므로 lang="ko"를 해주었다. 노래 제목은 제목에 해당하므로, heading 태그로 마크업해준다. 대신, 한글이 들어가므로 span으로 감싸준 후 lang="ko"를 적어준다. 러브 엑스 마키나 Love Ex Machina 더보기 Q. 왜 굳이 h1에 바로 lang="ko"를 하지 않고 span으로 감싸주었을까..