HTML (19) 썸네일형 리스트형 data-* attribute 일반적으로 HTML tag에는 class나 id처럼 공통적으로 사용할 수 있는 속성(attribute)가 있다. 그리고 각 태그마다 반드시 사용해야하는 속성들도 있다. 예를 들어, a 태그는 당연히 href=""속성이 필요할테고 img 태그는 src 속성이 필요하다. (img 태그에는 alt 속성도 빠지지 않고 넣어주는 게 좋다고 생각한다!) 이렇게 각 태그마다 필요한 속성들, 넣어주면 visual representation에 영향을 주는 속성들이 많이 있다. 그런데, 이렇게 정해진 속성들 말고 내가 HTML 태그에 딱히 visual representation에는 큰 영향을 주지 않지만.. 몇몇 정보를 추가적으로 저장해놓고 싶을 때! data-* 속성을 사용하면 편리하다. data 속성에 대한 간단한 설.. 이미지 (image) 참고 developer.mozilla.org/ko/docs/Web/HTML/Element/img : 이미지 삽입 요소 HTML img 요소는 문서에 이미지를 넣습니다. developer.mozilla.org src - 필수 속성. - 포함하고자 하는 이미지 절대/상대 경로를 넣어준다. alt - alt 필수는 아니지만 항상 값을 넣어줄 것! - 이미지 컨텐츠를 간단 명료하게 설명하는 텍스트 (이미지 유/무, 파일 이름 그 자체를 넣어서는 안됨) - 스크린 리더가 alt의 값을 읽어 사용자에게 이미지 설명 => 접근성을 높을 수 있음 - 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌. - alt 속성을 아예 적어주지 않으면. '이미지가 콘텐츠에서.. 링크(anchor) 사용자가 링크를 클릭하면 현재 있는 페이지의 다른 부분으로 이동하거나 아예 다른 페이지를 보여주고 싶을 때 !반드시 사용해야할 속성: href (hypertext reference) - hypertext는 html 문서, 웹 페이지를 의미 - reference는 주소값. - 즉, 새로 띄우고자 하는 웹 페이지의 주소를 넣어주면 된다. href 속성(attribute)에 들어갈 값(value) 1. 다른 웹페이지 URL SEARCH 2. 내가 작성하고 있는 다른 html문서 ABOUT 3. 특정 id 값을 가지고 있는 웹페이지 내의 섹션 hello 섹션으로 이동 4. 메일쓰기 메일쓰기 5. 전화걸기 전화걸기 * 새 탭에서 열기 새 탭에서 열기 제목, 문단, 강조 제목(heading): h1~h6 문단(paragraph): p 강조(emphasis): em, strong - 둘 중에서 쓰고 싶은 것 사용. -브라우저에게 "여기는 중요한 파트야~"라는 메시지를 준다. - 스타일은 나중에 CSS로 바꾸면 된다. HTML Tag 공부의 시작 ⛳ 목표 자주 사용되는 태그(tag)의 종류와 각 태그가 필요로 하는 속성(attribute)를 기억한다. 14. Video Player 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 브라우저얌.. 알아서 재생 가능한 비디오로 틀어죠 13. Music Player 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 1. 애플 뮤직 같은 경우는 영어로 서비스 되니 html에는 lang="en"으로 주었지만 다른 곳에 한글이 사용된다면 해당 태그에 lang="ko"를 넣어주면 된다. 2. Duration 04:09 .. 12. Gmail Inbox (feat. 테이블...을 사랑해보자) 이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다. 출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4 김버그의 HTML&CSS는 재밌다 - 구름EDU HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎 edu.goorm.io 📸 Screenshot 📝 메모 0. 테이블... 그렇읍니다.. 테이블.... 그냥...네 ..모..... 그르타그여... 왜냐하면 단순히 한 가지 항목만 반복적으로 나열되는 것이 아니라 그 안에 아이콘, 보낸사람, 제목, 보낸 시간.. 이전 1 2 3 다음
