22-09-06-TIL

Text-level semantics

텍스트 레벨 : 요소 안 컨텐츠 크기 만큼만 영역 점유
자식으로 sections, grouping contents 배치가 불가능

<br>, <wbr>

<br> 태그 -> 줄바꿈 태그
<wbr> 태그 -> 텍스트 박스에서 한 줄로 모두 표시가 안될 때 줄바꿈 일어나게 하는 역할
(부모 영역보다 더 길어지는 경우에 사용)

한글 : 한글자씩만 break
영어 : 기본적으로 단어 단위로 break됨

<a href="경로">

링크를 만들 때 사용
a 태그를 통한 페이지와 페이지 연결

href 속성 -> 경로 지정
href 속성 미지정 -> 검색 엔진의 경우 자바스크립트 쪽은 읽지 않아서 판단하기 어려움

<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>
<!--target="_blank" 속성 -> 새로운 탭으로 페이지 열기!!-->


<a href="#three">click</a> <!-- 해쉬 링크 --> 
<!--(페이지 안에서 이동하고 싶을 때 사용) (내부 링크)-->
<!--id="three" -> three 아이디 가진 부분으로 이동하게 됨 (내부 링크)-->


<a href="./index.html" download>click</a>
<!--- 파일이 다운로드 됨-->
<a href="./hello.hwp" download="a.hwp">hwp download click</a> 
<!---  파일 명으로 다운 됨-->


<a href="tel:+82027777777">(02)777-7777</a> 
<!--- 맥북 경우 -> facetime이 열림
전화번호라고 인식을 함 -->
<a href="mailto:hello@gmail.com">hello@gmail.com</a>

<b>, <strong>

<b> 는 굵은 글꼴을 표현하고 싶을 때 사용
-> 더 이상 사용하지 않음
-> 시멘틱 태그가 나오기 이전에 만들어짐

<strong> 굵은 글꼴에 중요도를 더함
-> 중요도를 더 강조하기 위해 중첩 가능
heading 태그 쓰기 애매한 경우에 사용

<i>, <em>

<i> 기울임 표시
	'이탤릭' 약자
    주 언어와 다른 언어로 표현된 부분
    인물의 생각

<em> 기울임 표시
	강조의 의미
    

<dfn>

define, 현재 문맥에서 정의하고 있는 용어를 나타낼 때
문서에서 최초로 나타났을 때 (한번만) 사용
<dfn>의 가장 가까운 부모 (<p>, <dt>, <dd>, <section> )

<abbr>

준말, 약자
<dfn> 태그로 감싸주기도 함
마우스 올리면 설명이 나옴

<sup>, <sub>

<sup> : 윗첨자 
<sub> : 아랫첨자
주로 화학기호, 수학 공식 등에 사용

<span>

의미 없으며 줄 바꿈 없이 영역을 묶는 용도로 사용
(div 태그와 비슷 - 디자인적으로 묶어야할 때 사용)
span - 줄바꿈 안됨
div - 줄바꿈 됨

마크업 과제

article

특정한 기능을 가진 위젯인가? 독립적인가?
다른 페이지 중간에 들어가도 어색하지 않은가?

time

시간 정보 표현

제목 표시

무조건 크다고 제목이 아니라 그 부분을 대표적으로 나타내는 것을 제목이라고 판단하기

Embedded content

<img>

<!-- 스크린 리더가 비어있는 경우는 읽지 않는다. -->
    <img src="a.jpg" alt="">
    <!-- 스크린 리더가 파일명을 읽는다. -->
    <img src="a.jpg" >
    <!-- 스크린 리더가 이미지라고 읽는다. -->
    <img src="a.jpg" alt="이미지">

src (source)

브라우저에게 파일 위치 및 파일명 알려줌

절대 경로: 현재 파일 위치와 관련없이 열 수 있는 경로
상대 경로: 나(지금 열려 있는 파일) 기준 (./)

alt

스크린 리더의 접근성을 고려함
이미지가 보이지 않을 때 텍스트를 대신 보여줌

srcset

반응형 이미지
여러 해상도에 대응

x서술자, w서술자, sizes 속성

x서술자 : 화소의 밀도
w서술자 : 원본 이미지 넓이 알려줌
sizes 속성 : 뷰포트의 조건에 따라 이미지가 UI에서 차지할 사이즈를 알려줌

<picture>

<source> 요소와 <img> 요소를 통해 각 디바이스 조건에 맞는 이미지를 보여줌

media 속성

<source> 요소 안에 media 속성이 존재하는데 <picture> 요소가 media 속성 값을 통해 알맞은 이미지를 찾는다.

<iframe>

현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶은 경우

느낀점

오늘 수업 생각보다 어려웠다.
이미지도 img만 생각했었는데 x서술자 등 여러가지 부분들을 배웠더니 너무 어려웠다.!!!
그래서 이번 주말에 다시 이 부분들을 살펴보면서 좀 더 공부해볼 예정이다. 🤔