7. Text-level semantics
text-level은 태그가 차지하는 요소가 콘텐츠 영역만큼이다
시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.
style="white-space: normal;"창 크기가 줄어들면 단어 단위로 떨어짐
BUT 한글은 한글자씩 떨어짐.
➡ <p style="word-break:keep-all"> 써주면 단어 단위로 떨어짐
<wbr>: The Line Break Opportunity element
<wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 것.
(쓰면 뒤 txt 통째로 떨어짐)
<a>: The Anchor element
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
<a href="경로">
href 속성을 통해 경로를 지정할 수 있습니다. href 속성을 사용하지 않고 자바스크립트로 경로를 지정할 수도 있지만 이는 웹 접근성에 위배됨으로 href 속성을 사용해주는게 좋습니다.
html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 하는것이 허용됩니다.
또한<a>요소안의 자식으로는 <a>요소나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않기 때문에 주의가 필요합니다.
-> 중복
target="_blank"
<a href="https://www.naver.com" target="_blank">click</a> target="_blank" 를 넣으면 새 창이 열려서 링크로 이동.
ID 지정 기능
<a href="#three">click</a> <!-- a.k.a 해쉬 링크 -->누르면 해당 id가 있는 부분으로 이동!
목차 만들 때 유용하겠다.
download
<a href="./index.html" download>click</a>누르면 href에 해당하는 문서를 다운받을 수 있음
<a href="./hello.hwp" download="a.hwp">hwp download click</a>다운받는 형식을 지정해줄 수 있다. 파일 이름도 지정가능.
🚫 Internet Explorer 는 download 속성을 지원하지 않습니다.
8. Embedded content
<images>
alt (alternative text)
alt 속성은 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 이미지 대신 보여줍니다. 또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함으로써 SEO(Search Engine Optimization)에 도움을 주기도 합니다.
장식적인 이미지에는 alt값 안넣어 됨
alt를 완전 빼면 스크린리더가 파일명을 읽어버리기 때문에 alt값에 그냥 ""빈값 넣는다.
아예 이미지 안읽음. 존재하지 않는 이미지.
❗주의 " " 이렇게 공백 넣어주면 파일명 읽음.
반응형 이미지를 위한 srcset
srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있습니다. srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성입니다.
실무에서 한 번도 안써보셨다고 함
x서술자, w서술자, sizes 속성
✅ x서술자
- x서술자는 화소의 밀도(pixel density)를 나타냅니다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줍니다.
<img
width="200px"
srcset="img/logo_1.png 2x,
img/logo_2.png 3x
src="a.jpg"
alt="test">✅ y서술자
✅ sizes 속성텍스트
❗ css의 미디어쿼리로도 똑같은 기능 구현 가능.
충돌하지 않게 조심.
➡ 협업할 때 사전에 반드시 동료들과 소통하여 어떤 반응형 이미지를 처리했는지 공유
(CSS 스타일이 sizes 속성에 우선함!)
media 속성
위의 코드에서 <source> 요소 안의 media 속성을 볼 수 있습니다.
<picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾게 됩니다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 <img> 태그의 src 에 넣어 화면에 보여주게됩니다. 이러한 구조로 작동하기 때문에 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다는 점에 주의하세요.
<picture> 와 <source> 요소 자체는 이미지를 표현하지 않습니다.
