HTML/개념 (5) 썸네일형 리스트형 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)를 기억한다. 이전 1 다음
