멋사 프론트엔드 스쿨 2기 TIL (03.30)

멋사로고

 

🚀 Text-level semantics

---

<br>, <wbr>

• <br> 태그는 줄 바꿈을 위한 태그
• <wbr> 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄 바꿈이 일어나게 하는 것

 

<a href= "경로">

• 정말 중요한 태그 <a> 요소는 링크를 만들 때 사용!!
• <a>만 sections, grouping content 요소를 자식으로 하는 것이 허용!

  📌  Internet Explorer 는 download 속성을 지원하지 않는다.

 

<b>, <strong>

• <b> 태그는 굵은 글꼴을 표현하고 싶을 때 사용. 지금은 사용하지 않고 CSS 사용!!
• <strong> 태그는 굵은 글꼴에 중요도를 더해줌, 브라우저에서 이 내용이 중요하다는 걸 인식!

 

<i>, <em>

• <i> 태그는 기울임 글꼴을 나타낸다. 주로 전문 용어, 문단에서 주 언어와 다른 언어로 표현된 부분(주언 어가 한글이지만 영어로 표기되었을 경우), 소설의 등장인물의 생각이 표기되어 있는 부분에 사용한다.
• <em> 태그는 같은 기울임 글꼴로 표현되지만 강조의 의미가 있다.

⭐️  strong vs em

strong이 더 높은 강조의 의미를 가짐

 

<dfn>

• 현재 문맥에서 정의하고 있는 용어를 나타낸다.
• 문서에서 최초로 나타났을 때 사용한다.

<dl>
	<dt>WWW</dt>
	<dd>
	    <dfn>WWW</dfn>는 
			인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.
	    - 위키백과
	</dd>
</dl>

 

<abbr>

• <abbr> 태그는 준말, 약자를 나타내고 싶을 때 사용한다. dfn 태그로 감싸주기도 한다.

 

<sup>, <sub>

• <sup> 태그는 윗첨자, <sub> 태그는 아랫 첨자 (ex. <sup> : 제곱, <sub> : 화학식)

 

<span>

• 별다른 의미 없이 보통 줄 바꿈 없이 영역을 묶는 용도로 사용
• div와 마찬가지로 최후의 수단으로 사용!!

 

div로 반성한지 하루 만에 바로 span으로 다시 반성해버리기~~ 이번 기회에 확실하게 코드 습관 바꿔야겠다!!

 

🚀 Embedded content

---

 

<img>

• 이미지를 삽입할 때 사용하는 태그
• src
  • src는 필수 속성
  • 브라우저에게 이미지 파일의 위치 및 파일명 알려주는 역할
  • 경로는 절대경로이거나 상대 경로이어야 한다.
•  alt
  • alt 역시 거의 필수 속성
  • 이미지가 보이지 않을 때 alt 속성에 적힌 텍스트를 보여줌
  • 특히 접근성 차원에서 꼭 필요함!!
  • 또한 이미지에 대한 정보를 브라우저에 전달함으로써 SEO에 도움을 주기도 한다.
• srcset
  • 이건 진짜 신세계였다.
  • x서술자는 화소의 밀도를 나타냄
  • w서술자는 원본 이미지의 넓이를 브라우저에게 알려줌 (px이 아닌 w로 표기하는 것 주의!!)
• sizes
  • 뷰포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에게 알려줌
  • 웹 표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시되어야 한다.
  • 협업할 때는 사전에 반드시 동료들에게 어떤 방식으로 반응형 작업을 할 것인지 얘기해줘야 한다.

<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="a.png"
alt="test">

⭐️  Pixel density: 동일한 면적에 들어가는 화소의 수를 의미, 콘솔 창에서 window.devicePixelRatio 입력해 확인 가능

 

<picture>

• <picture> 요소는 <source> 요소와 <img> 요소를 통해 여러 조건에 따라 맞는 이미지를 보여주는 요소이다.
• srcset이 화면에 따른 이미지의 크기를 조절한다면 <picture> 요소는 이미지 포맷 자체를 변경할 수 있다.
• media 속성
  • media 속성의 값을 통해 조건에 알맞은 이미지를 찾게 된다.
• type 속성
  • 이미지의 포맷 타입을 브라우저에게 알려준다.
  • WebP를 지원하지 않는다면 AVIF를 지원하고 AVIF도 지원하지 않는다면 jpeg을 랜더링 하는 식으로 <picture> 요소와 함께 사용 가능
  • 이러한 방식의 크로스 브라우징 기법을 '점진적 향상 기법'이라고 한다.

⭐️  면접에도 나오는 점진적 향상기법

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

⭐️  면접에 나올 수 있는 이미지 포맷의 종류

1. GIF(Graphics Interchange Format)
256색 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적음
투명은 표현 가능하지만 정도를 조절하는 건 불가, 그림자 표현도 불가
애니메이션 처리 가능

2. JPG/JPEG (Joint Photographic Expert Group image)
매우 화소가 높고, 용량도 적음
투명처리 불가

3. PNG(Portable Network Graphics)
웬만한 컬러는 모두 표현 가능, 투명 영역 처리 가능
용량이 큼

4. SVG(Scalable Vector Graphics)
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능 (주로 Logo에 사용)

5. WebP(Wevb Picture Format)
JPEG 이미지에 비해 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원
투명도 표현 가능, 애니메이션 표현도 가능

6. AVIF(AV1 Image File Format)
WebP처럼 뛰어난 색상 표현, 애니메이션 지원, 투명도 표현 모두 가능
JPEG 이미지의 50% 수준인 용량
하지만 지원하지 않는 브라우저가 많음

 

🦁 간단 과제(레시피 마크업 하기)

---

피자만들기

 

🍓 하루의 회상

---

• 정신없어서 하루 지난 3월 31일 날 작성했음 ㅜㅜ 이것저것 신경 쓸게 많다 후.. 화이탱
• 어제 수업은 정말 시간 가는 줄 모르고 들었다!! 개꿀잼이야 멋사