【HTML practice note_02】
Product Card
반드시 콘텐츠 내용 순서대로 markup하지 않아도 된다.
가장 중요한 정보인 '제목'이 콘텐츠 상 중간에 위치하더라도 markup 할 때 유기적인 흐름을 나타내기 위해 가장 먼저 작성해도 된다. (css에서 순서 조정 가능)
strong 태그는 단순히 글자를 굵게 표시하기 위한 기능보다, '정보로서 가치'를 따졌을 때 해당 내용이 중요한 정보(핵심!강조!) 일 때 p, span 태그 대신 사용한다.
aria-hidden 속성은 (일반적인 스타일 요소로 나타낸) 내용이 스크린 리더가 읽지 않아도 되는 정보인 경우 속성값으로 true를 작성한다.
aria-label 속성은 눈에 보이는 것과 다르게 읽히기를 원할 때 정확한 정보를 제공할 때 사용한다.
img에도 사용할 수 있으나 aria-label의 역할도 하면서 대체 텍스트 역할까지 하는 alt가 있으니 굳이 aria-label을 사용할 필요가 없다.
(일반인들에게 단순하고 명확하게 보이기 위해 기호로 나타냈다면, 스크린 리더 사용자들에게 단순히 기호만 읽히기 보다 해당 기호가 '무엇을 의미하는지까지 읽히게 작성' 한다.)
aria attribute를 많이 활용하면 더 나은 markup을 할 수 있다.
웹 접근성을 고려하는 웹페이지 만들기!👍
Instagram User Profile
○○는 ○○다. 'key: value' 형태는 dl(definition list)태그를 사용해 나타낼 수 있다.
dl의 자식요소는 dt, dd, div만 가능하다.
dt(definition term) 태그 : 용어(key)
dd(definition data) 태그 : 정의(value)
div : dt와 dd를 묶어주는 (css로 스타일 적용을 위한) 태그
markup 할 때는 '의미있게' 작성하여 '논리적으로 전달' 하는 것에 중점을 두고,
콘텐츠에 맞게 처리해야 하는 스타일적인 요소들은 css로 처리할 수 있다.
➕추가로 markup 유의할 점!
1) img 태그 작성 시 src 속성값이 길어지는 경우 'enter'를 눌러서 내려줘도 된다. 그러나 한 번 enter를 사용하게 되면 나머지 속성들까지 모두 엔터처리해주어야 한다.
∴ 태그에 한번 엔터를 사용하면 영원히 사용해야 한다!
<img
src="..."
alt="..."
class="image"
/> 2) lang 값으로 여러 언어(en, ko)를 동시에 설정이 불가능하다.
대신 기본 언어를 html 태그 lang으로 설정하고 별도로 다른 언어를 사용하는 요소에는 lang을 따로 설정해주면 된다.
<! DOCTYPE>
<html lang="ko">
...
<body>
<h1> 잘할거 아닙니다. 놀다 옵시다. </h1>
<p lang="en"> My day. Happy kay. </p>
...
</body>
</html>Receipt
div 태그를 이용해 비슷한 요소들을 하나로 묶는 것은 스타일 처리를 하기 위함이다. (css 선택자를 이용해 스타일 입히기)
우리가 눈으로 보고 쉽게 이해할 수 있는 단위 기호(L, cm) 등은 스크린 리더 사용자들을 위해 aria-label 속성이 필요하다. (litter, centimete 정보 제공)
Github Dropdown Menu
문서 내 이미지는 '클릭하면 dropdown이 열리고 닫히는(toggle) button' 역할과 'user-image'의 역할을 하고 있음을 파악한다.
해당 UI 요소가 무엇을 의미하는지 UI 요소 안에서 제목 역할을 하는 요소에 'heading'태그를 부여한다.(강사님 스타일)
'.dropdown'에 relative로 설정하고 '.dropdown-menu'에 absolute로 설정하고, top(위로부터 100% 떨어진 위치)과 right(오른쪽으로부터 0% 떨어진 위치)로 위치를 지정한다.
=> 'dropdown'이 부모 요소가 되어, 부모 기준으로 'dropdown-menu'는 top, right의 위치 이동한다.
➕추가로 CSS 가상요소 선택자
- before : 요소 앞에 가상의 내용(속성값) 삽입
- after : 요소 뒤에 내용(속성값) 삽입
주로 요소 앞/뒤에 문구를 삽입하기 위해 'content' 속성과 함께 사용한다!
이미지 삽입도 가능하다.
":"는 가상 클래스 선택자(pseudo class)
// html
<p>
가상 클래스
</p>
<style>
p:hover {
color: teal;
}
</style>"::"는 가상 요소 선택자(pseudo element)
// html
<div>DIV</div>
<style>
div::before {
content: "<";
}
div::after {
content: ">";
}
</style>👩🏫먼저 생각하고 항상 유념해야할 사항!🌞
콘텐츠 내용의 순서 상관없이 '제목의 역할을 하는지' 한다면 가장 위에 작성할 수 있고, '정보로서의 가치가 있는지', 'bold체가 아니더라도 내용의 중요한(강조) 역할을 하는지', '특정 문자나 기호가 누구나 동일한 정보로 이해할 수 있는지' 등을 정확히 파악하고 markup에만 집중하자.
