220906 멋사 FE스쿨 3기 TIL - text-level / embedded content

지현·2022년 9월 6일

멋쟁이사자처럼 FE스쿨 3기

목록 보기

2/18

텍스트 레벨 요소의 특징

요소안의 컨텐츠의 크기만큼만 영역을 점유

자식으로 Sections, Grouping Contents를 배치X

`<br>` , `<wbr>`

<br> : 줄바꿈 태그
<wbr>은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄바꿈이 일어나게 하는 역할 white-space : nowrap 해도 줄바꿈 일어난다

<p>
    <!-- 공백병합 -->
    Lorem 
            
                      
    ipsum <br> 
    <br> 
    <br> 
    dolor sit amet
</p>
<p style="word-break:keep-all">풀밭에같지전인노년에게서<wbr>노년에게서청춘의청춘의청춘의</p>
    <!-- CJK언어의 word-break 속성은 기본적으로 break-all로 되어 있습니다. 영어와 차이를 비교해 보세요 :) -->
    <p style="word-break:break-all">Lorem ipsum, dolor sit amet <wbr>consecteturadipisicing elit</p>

word-break 줄바꿈 속성

word-wrap은 비아시아 언어 줄바꿈/ word-break은 CJK(China,Japan,Korea)언어 줄바꿈 할 때 주로 사용
word-break: normal | break-all | keep-all | initial | inherit;

normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈

break-all : 글자 기준

keep-all : 단어 기준

initial : 기본값

inherit : 부모 요소의 속성값을 상속

`<a href="경로">`

<a> 요소는 하이퍼 텍스트 즉, 링크를 만들 때 사용

href 속성을 통해 경로를 지정 href 속성을 사용하지 않고
자바스크립트로 경로를 지정할 수도 있지만 이는 웹 접근성에 위배됨으로 href 속성을 사용하자~

html 문법상 sections, grouping content 요소들은 텍스트 레벨 요소의 자식으로 사용되지 않지만, 앵커 태그만 예외적으로 sections, grouping content 요소를 자식으로 할 수 있다

또한 <a> 요소안의 자식으로는 <a> 요소나 <button> 과 같이 사용자와 인터렉션이 가능한 요소를 자식으로 두지 않는다
<a href="https://www.naver.com">click</a>
<a href="https://www.naver.com" target="_blank">click</a>
//target="_blank" 쓰면 새창에 anchor연결
<a href="./index.html">click</a>
<a href="#three">click</a> 
//id는 section의 이름표, 클릭하면 해당 위치로 이동, 
해쉬링크는 id에만 사용 가능 
<a href="./index.html" download>click</a>
<br>
<a href="./hello.hwp">hwp click</a>
<br>
<a href="./hello.hwp" download="a.hwp">hwp download click</a>
<br>
<a href="./hello.pdf">pdf click</a>
<br>
<a href="./hello.pdf" download="a.pdf">pdf download click</a>
<a href="tel:+82027777777">(02)777-7777</a> /
<a href="mailto:hello@gmail.com">hello@gmail.com</a>

scroll-behavior : smooth

`<b>, <strong>`

<b> 태그는 굵은 글꼴을 표현하고 싶을 때 사용합니다. 별 다른 의미는 없으며 오직 텍스트를 굵은 글씨로 표현하기 위한 용도이기 때문에 더 이상 사용x 쓰지말자..스타일을 위해 만들어진 태그 (css 나오기 전에)

<strong> 태그는 굵은 글꼴에 중요도를 더해 강조
중요도를 더 강조하고 싶을 때에는 strong을 중첩하기도 합니다.
얘는 강조의 의미가 있으니까 시멘틱

`<i>, <em>`

<i> 태그는 기울임 글꼴을 나타냅니다. 이탤릭의 약자 HTML5에서는 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주 언어가 한글이지만 영어로 표기되었을 경우), 소설이라면 등장인물의 생각이 표기되어 있는 부분 등 어떤 이유로 주위와 구분해야 하는 부분을 표현하기 위해 사용합니다. i태그는 의미가 있다~~

<em> 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있습니다.

`<dfn>`

현재 문맥에서 정의하고 있는 용어

문서에서 최초로 나타났을 때

dfn의 가장 가까운 부모가 <p> 혹은 <dt><dd> 쌍, <section> 요소일 경우 그 컨텐츠를 dfn의 정의에 대한 설명으로 간주

`<abbr>`

<abbr> 태그는 준말, 약자를 나타내고 싶을 때 사용합니다. 보통은 홀로 쓰이고 dfn 태그로 감싸주기도 합니다.

`<sup>, <sub>`

<sup> 태그는 윗첨자, <sub> 태그는 아랫첨자.

작은 글자를 표현하는 용도로는 사용하지 않으며 화학기호나 수학공식 등 첨자 기호를 이용해야 하는 곳에서만 사용하기

`<span>`

별다른 의미가 없음 보통 줄 바꿈 없이 영역을 묶는 용도로 사용

div와 용도 일치 , 디자인적으로 묶어야할때 div태그와 차이는 줄바꿈이 되느냐 안 되느냐

여러 요소를 묶어 컨트롤하기 위한 영역으로 id를 주거나 클래스를 사용하기도 한다

div와 마찬가지로 앵간하면 쓰지말기

Embedded content

`<img>`

<img src="jeju.jpg" alt="">
 
<img src="jeju.jpg">

<img src="jeju.jpg" alt="이미지">

alt는 최대한 상세하게 쓰자 스크린리더가 읽어도 무슨 사진인지 알 수 있도록!

srcset

srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩

srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성

이미지/폰트 저작권에 대해

이미지

상업적 용도 사용가능

출처 안 밝혀도 됨

사업적 용도로 사용하여 돈을 벌었는지가 주요 쟁점

사용을 안하는 것을 권고
폰트

무료폰트(개인 무료 폰트, 상업 용도 무료폰트)

대기업 무료폰트 (한글은 제외, 내용증명 날라온다~)

폰트는 저작권 확인하고 써야한다

절대경로와 상대경로

절대경로 : 절대적인 경로 (내 파일이 어디있는지 상관x)
ex) 이미지 주소(https://www.~~~) or C:\Users\j****\*****\바탕 화면\지현\개발개발\멋사FE\수업\HTML\jeju.jpg <<내 파일이다 ㅎㅎ
상대경로 : 현재 내 위치 기준

./ 현재 폴더

../ 상위폴더

ex) ../img/jeju.jpg 하면 상위폴더의 img폴더의 jeju.jpg 파일

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

x서술자는 화소의 밀도(pixel density)를 나타냅니다. 디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려줍니다.
<img
width="200px"
srcset="img/logo_1.png 2x,
      img/logo_2.png 3x"
src="jeju.jpg"
alt="test">```
w서술자는 원본 이미지의 넓이가 차례대로 300px, 600px, 700px 임을 브라우저에게 알려줍니다. px이 아닌 w로 표기하는것에 주의
<img
width="200px"
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
		img/logo_1.png 300w"
src="jeju.jpg"
alt="test">
💡 w서술자와 x서술자는 동시에 사용할 수 없습니다. 또한 src 속성을 유지하는 것은 필수입니다. srcset 을 사용할 수 없는 브라우저(Internet Explorer)를 대비해 사용하는 이미지입니다.

sizes 속성은 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려준다!!
<img
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
			 (min-width: 620px) 150px,
			 300px"
src="jeju.png"
alt="test">
html에 적용한 size 속성과 css의 size 속성이 충돌할 수 있기 때문에 주의!

`<picture>`

<picture> 요소는 <source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소입니다. <img> 요소의 srcset 이 화면에 따른 이미지의 크기를 조절한다면 <picture> 요소는 이미지 포맷 자체를 변경 할 수 있습니다.

css media쿼리 이용할 수도 있는데 html 마크업 내에서 picture을..? 흠 🤔 나라면 css에서 ... 하고싶다.... 그래도 알아야지.....~!....

점진적 향상 기법

위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음 <source> 요소로 넘어갑니다.
--> 만약 모든 <source> 요소의 이미지 사용이 불가능하면 최후에 <img> 요소의 이미지를 랜더링 합니다.
때문에 WebP나 AVIF 와 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋습니다.
이러한 방식의 크로스브라우징 기법을 ‘점진적 향상기법’이라고 합니다.

💡 점진적 향상기법
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공하는 방법

`<iframe>`

iframe은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용

iframe은 width 혹은 height 속성으로 크기를 조절

따로 값을 설정하지 않는다면 기본값 height는 150px, width는 300px
<iframe src="링크"></iframe>

속성값
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" 
frameborder="0" 
allow="accelerometer; 
autoplay; encrypted-media; 
gyroscope; p
icture-in-picture" 
allowfullscreen>
</iframe>
frameborder : 테두리를 그려줄지 결정합니다. 0 혹은 1의 값을 가집니다. 이제 사용 x CSS의 border 속성쓴다..~

allow : iframe 에서 허용할 기능들을 지정

allowfullscreen : 전체화면을 지원

`<video>`

<video src="batman.mp4" controls autoplay loop 
       width="450" height="300"></video>
속성값

src : 브라우저에게 비디오 파일의 위치 및 파일명

controls : 영상 파일을 재생하는데 필요한 컨트롤러

autoplay : 로딩이 완료되면 자동으로 영상 파일을 재생

loop : 영상이 종료되면 다시 반복해서 재생

<크로스브라우징 할 때 유용한 속성값>

preload (기본 값은 브라우저마다 다름
- none : 비디오 파일을 미리 로딩X 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라집니다.
- metadata : 비디오 파일을 미리 로딩하지 않지만 파일의 메타데이터(예를 들어서 영상의 길이)를 미리 가져오도록 합니다.
- auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비합니다.
-poster : 영상이 로딩 중 일 때 대신해서 화면에 보여줄 이미지

지현

이전 포스트

220831 멋사FE스쿨 3기 TIL - 시멘틱 태그

다음 포스트

220906 멋사 FE스쿨 3기 TIL - text-level / embedded content

멋쟁이사자처럼 FE스쿨 3기

텍스트 레벨 요소의 특징

`<br>` , `<wbr>`

word-break 줄바꿈 속성

`<a href="경로">`

`<b>, <strong>`

`<i>, <em>`

`<dfn>`

`<abbr>`

`<sup>, <sub>`

`<span>`

Embedded content

`<img>`

`srcset`

이미지/폰트 저작권에 대해

절대경로와 상대경로

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

`<picture>`

점진적 향상 기법

`<iframe>`

`<video>`

220831 멋사FE스쿨 3기 TIL - 시멘틱 태그

220902 멋쟁이사자처럼 FE스쿨 3기 TIL

0개의 댓글

220906 멋사 FE스쿨 3기 TIL - text-level / embedded content

멋쟁이사자처럼 FE스쿨 3기

텍스트 레벨 요소의 특징

<br> , <wbr>

word-break 줄바꿈 속성

<a href="경로">

<b>, <strong>

<i>, <em>

<dfn>

<abbr>

<sup>, <sub>

<span>

Embedded content

<img>

srcset

이미지/폰트 저작권에 대해

절대경로와 상대경로

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

<picture>

점진적 향상 기법

<iframe>

<video>

220831 멋사FE스쿨 3기 TIL - 시멘틱 태그

220902 멋쟁이사자처럼 FE스쿨 3기 TIL

0개의 댓글

`<br>` , `<wbr>`

`<a href="경로">`

`<b>, <strong>`

`<i>, <em>`

`<dfn>`

`<abbr>`

`<sup>, <sub>`

`<span>`

`<img>`

`srcset`

`<picture>`

`<iframe>`

`<video>`