220217 - html

4. Text-level semantics

• Html 요소 내에서 텍스트로 취급되는 요소들
• 텍스트 사이에서 텍스트로 취급되는 요소

### a 요소 - html 내에서 하이퍼텍스트(링크)를 생성할 때 사용하는 요소. Href 속성은 필수가 아님. 활성화/비활성화 상태를 나타낼때 href 속성을 넣었다 뺄 수 있다. A 내부에는 a 태그를 넣을 수 없다.(= 인터렉티브 콘텐츠 내에는 다른 인터렉티브 콘텐츠를 넣어서는 안된다. )

- a 요소의 해시링크 : href 와 id 의 해시링크를 연결해주는 것

<a href=“#title1”>
<a href=“title2”>
<h1 id=title1>
<h2 id=title2>

### em, strong 요소 - 강조를 나타내는 요소

- strong : 조금 더 강한 강조, warning, attention , 꼭 봐야해! 같은 느낌, 주의하세요 느낌

- em : 보편적인 강조.

### q, cite 요소

- q 요소 : 인용구를 나타내는 요소

- cite 요소 : 출처, 실체가 있는 물건이나 사이트 등을 인용할 때

### dfn, abbr 요소

- dfn : 해당 페이지에서 최초로 정의된 용어를 나타낼 때 사용하는 요소

- abbr: 약어. 약어 풀이는 title 속성을 사용하여 풀이한다.

<p>
    <dfn><abbr title=“web hypertext application….”>WHATWG</abbr></dfn>는 웹 표준화 기구입니다.
</p>

### code 요소 - html 문서 내에서 코드를 나타낼 때 사용하는 요소

### span 요소 - 별다른 의미는 없지만 여러개의 텍스트를 감싸야 할 때 사용하는 요소. Div 와 마찬가지로 사용할 태그가 없을 때 사용하는 최후의 요소. Css 를 주기 위해서

### br, wbr 요소 - break 의 약자. Html 문서 내에서 줄바꿈을 일으킬때 사용하는 요소.

- wbr: 특정한 조건에서만 줄바꿈이 발생

<p>안녕하세요. <wbr>강아지 이름은 구름이입니다.</p> // 한줄로 나타낼 수 있을 때에는 1줄노출. 화면폭이 좁아지거나 하여 한줄로 노출시킬 수 없을 때 줄바꿈이 됨.

5. Embedded content

• 외부에 있는 콘텐츠를 가지고 올 때 사용하는 콘텐츠
• 비디오, 이미지, 오디오
• 다른 html 문서(iframe)

### picture, source, img

- picture: img 보다 발전된 요소.

<picture>//미래지향적인 이미지 포멧을 사용할 수 있다.
    <source src=image.webp type=image/webp> // source 를 여러개 사용할 수 있다
    <source src=image.jpg type=image/jpeg>
    <img src=image.jpg alt=“”>
</picture>
<img src=“image.webp alt=“”> // webp 를 지원하는 브라우저에서만 정상적으로 노출됨.

- webp : 구글에서 제작한 이미지 포멧. Jpeg 에 비해 용량이 적고 투명도를 표현할 수 있다. Ie 제외 모든 브라우저에서 지원하고 있음.

### video, source, track

- video: 비디오를 가저오는 요소. 외부에 있는 비디오를 페이지 내로 가지고 올 수 있다. 비디오를 가져와서 보여준다.(꼭 플레이어의 느낌이 아님)

<video preload>
    <source src=video.mp4 type=video/mp4> // source 활용시 브라우저별로 지원하는 비디오 포멧을 적용할 수 있다.
</video>

- video 속성

1. Preload : 미리 비디오를 불러오는 속성. 사용자가 재생하기 전에 미리 로딩해둔다.

2. Playsinline: 비디오를 모바일에서 인라인으로 재생하는 속성.

3. Muted: 음소거

4. Autoplay: 자동재생 -> 접근성 지침에 의하여 autoplay 는 반드시 muted 가 있는 상태에서만 사용이 가능하다. 그게 아니라면 재생 버튼을 눌러서만 사용할 수 있도록 작업해야한다.

5. Poster: 썸네일 이미지

6. Controls: 비디오 플레이어로 활용할 때 사용.

- track요소 : 자막을 넣을 때 사용하는 요소

<track kind=subtitles src=video.en.vtt srclang=en label=English> 

- webvtt(=vtt) : 웹에서 비디오에 자막을 나타내는 표준자막스펙

### audio, source 요소 : 오디오를 가지고 오는 요소, 오디오를 가지고 오는 요소이지 플레이어가 아니다. 오디오도 비디오와 마찬가지로 접근성 이슈로 muted 상태에서만 autoplay 가 가능하다. 오디오에선 track 을 사용하진 않는다. 비디오에서 사용하는 preload, muted 등의 속성을 오디오도 지원한다.

<audio src=music.mp3></audio> // 가능

<audio>
    <source src=music.mp3 type=audio/mp3>
</audio>

### iframe 요소 : html 문서 내에서 외부 html 문서를 가지고 올 때 사용하는 요소.

- 내부의 문서를 내부로 가지고 올 수 있지만 불필요한 렌더링 비용을 유도하기 때문에 가급적이면 사용하지 않는 것이 좋다.

- 외부의 문서만 가지고 오는 것이 좋다.

- iframe 요소와 부모 요소 사이는 격리되어있다. Iframe 내부를 제어하는 것은 어려움이 있다.

- ex) 유튜브의 동영상을 내 문서 내에서 보여주고 싶을 때 사용.

<iframe
  width="560"
  height="315"
  src="[https://www.youtube.com/embed/bjJ4PgApkYI](https://www.youtube.com/embed/bjJ4PgApkYI)"
frameborder="0" // iframe 보더 제어
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

- allow: iframe 콘텐츠에서 api들을 허용할지 말지 결정하는 속성.

- allowfullscreen : 풀스크린 지원 속성

- allowpaymentrequest : 결제모듈 지원 속성

- width/height : width와 height 지정이 중요하다. 외부 문서를 가지고 오는 것이기 때문에 직접 뷰포트를 지정해서 가지고 와야 지정 사이즈만큼 문서가 노출 된다.

### image best practices

- picture 를 활용하면 여러개의 이미지 포멧을 사용할 수 있다.

- 픽셀밀도 대응이 가능하다. Srcset 속성을 사용하면 다양한 해상도에 따라 다양한 이미지를 지원할 수 있다.

- 브라우저 크기에 따라 다른 이미지를 불러오고 싶은 경우에도 srcset 활용이 가능하다.

<picture>
    <source src=“image.webp” srcset=“[image@2x.webp](mailto:image@2x.webp) 2x, image@3x.webp 3x” type=image/webp> // 픽셀 밀도에 따라서 1배율, 2배율, 3배율 이미지 적용이 가능하다.
    <source src=image.jpg srcset=“image@2x.jpg 2x, image@3x.jpg 3x” type=image.jpeg>
    <img src=image.jpg srcset=“image@2x.jpg 2x, image@3x.jpg 3x” alt=“”> //srcset 은 이미지 태그에서도 사용이 가능하다
</picture>

<picture>
    <source scr=small.webp type=image/webp media=(max-width: 400px)> // 400px 미만일 때 불려오는 이미지
    <source scr=medium.webp type=image/webp media=(min-width: 400px)> // 400px 이상일 때 불려오는 이미지
    <source scr=large.webp type=image/webp media=(min-width: 1000px)> // 1000px 이상일 때 불려오는 이미지
    <img src=“medium.jpg alt=“”> // 풀백이미지 source 이미지가 모두 불려오기 실패시에 노출된다
</picture>

- alt 속성: alternative text 의 약자. 대체 텍스트. 이미지를 설명해주는 텍스트를 넣어준다. 시각장애인 혹은 검색 로봇이 alt 속성을 읽는다. 빈값이 아닌 의미있는 텍스트를 넣어준다.

 

---

초보자를 위한 HTML 강의 정리

 

https://inf.run/drB2

초보자를 위한 HTML 기초 - 인프런 | 강의