WEB🔨/HTML 6

태그해부학 <img>와 이미지포맷

정의와 사용방법 image의 줄임말로 말 그대로 사진을 넣을 때 사용하는 태그이다. 필수 속성으로는 사진의 위치를 넣는 src(source), 대체 텍스트를 넣는 alt(alternate)가 있다. alt속성은 해당 이미지가 별 의미 없는 이미지라면 값을 비워놓아도 된다. 하지만 웹 표준을 위해 꼭 속성은 써줘야 한다. 그리고 alt속성은 아래와 같은 상황이어서 이미지를 불러올 수 없을 때 나타나는 텍스트이다. 이미지를 보지 못하는 시각장애인 분들을 위해 스크린리더가 읽어주는 텍스트이기도 하다. src 속성이 비었거나 null임. src의 URL이 현재 사용자가 보는 페이지의 URL과 같음. 지정한 이미지가 손상돼 불러올 수 없음. 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, 요소의 속성에..

WEB🔨/HTML 2020.06.11

태그해부학 <ol>, <ul>, <li>

정의 및 사용방법 ol은 ordered list ul은 unordered list li는 list item의 약자이다. 목록을 나타내고 싶을 때 사용하는 태그이다. 순서가 중요한 목록이라면 을 사용하고, 중요하지 않다면 을 사용한다. 예를 들어, 조리법의 목록은 순서가 중요하므로 을 사용한다. 그리고 필요한 쟤료는 순서가 중요하지 않으므로 을 사용한다. 과 의 자식으로는 만 올 수 있다. 속성은 reversed, start, type이 존재한다. type속성을 사용해서 숫자를 로마숫자로 변경할 수도 있다. type의 값으로는 1, a, A, i, I가 있다. 위와 같이 중첩해서 사용할 수도 있다.

WEB🔨/HTML 2020.06.11

태그해부학 <h1> - <h6>

정의 및 사용 방법 - 문서의 제목을 표현한다. - h1부터 순차적으로 써야한다. - h1은 가장 중요한 제목이므로 한 번만 사용하는 것이 좋다. (스크린리더와 SEO에도 좋다.) Beetles External morphology Head Mouthparts Thorax Prothorax Pterothorax Heading elements Summary Some text here... Examples Example 1 Some text here... Example 2 Some text here... See also Some text here... 주 탐색창 하단 탐색창 위의 예제에서 스크린 리더는 두 개의 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다..

WEB🔨/HTML 2020.06.10

html4, html5 기초 태그

이 글은 리베하얀님의 유튜브 강의 "HTML4 기초"와 "HTML5 기초"를 보고 정리한 것입니다. 특징 1. 현재 위치에 대한 정보를 알려준다. 2. 화면 낭독기가 가장 먼저 읽어주는 요소이다. 팁 * 페이지 마다 title이 따로 있는 것이 좋다(페이지를 이동할 때마다 title 변하도록) * 사이트명 - 현재 위치보다는 현재 위치 - 사이트명이 사용자 입장에서 더 편하다. (탭이 많을수록) 네이버는 사이트명 현재 위치로 되어있고 카카오는 현재위치 | 사이트명으로 되어있다. 특징 1. 제목 (+블록 요소) 2. 인라인 요소와 텍스트만 표현할 수 있다. 3. 계층구조를 준수해야 한다. (h1 -> h2 ->... -> h6 순서대로!) 4. h1요소는 한 페이지에 한 번만 제공해야 한다. 5. 굵은 글..

WEB🔨/HTML 2019.10.29