TIL 03.30

blueprint·2022년 3월 30일
TILhtml
0

멋쟁이사자처럼 프론트엔드 스쿨

목록 보기
3/24

1. Text-level Semantics

Grouping Contents는 전체 너비 사용
Text-level Semantics는 요소를 감싸는 데 필요한 너비만 사용

1️⃣ br, wbr

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

<p style="word-break: break-all;">
    풀밭에 같지 전인 노년에게서 청춘의청춘의청춘의<wbr> 방지. 전인 열락의 풀이 것이다.
</p>

2️⃣ a

<a href="경로"> 형태로 사용
a 태그 하위에 a 태그를 작성하거나 button 태그를 사용하는 경우 웹 규칙에 위반하는 것이므로 사용하지 말 것

<a href="www.google.com">
	<a href="www.naver.com"></a>
</a>

<a href="www.google.com">
	<button></button>
</a>

target="_blank"

링크 클릭 시 새 창으로 연결

  • 없으면 기본 설정인 현재 창에서 이동
<a href="www.google.com" target="_blank"></a>

해쉬링크

해쉬태그를 이용하여 링크 연결 가능

<a href="#one">Text-level Sementics</a>
<a href="#two">Embedded Contents</a>

Text-level Sementics
Embedded Contents

다운로드 기능

download 키워드를 통해 파일 다운로드 기능 구현 가능

<a href="123.pdf" download>click</a>

pdf download

파일을 지정하여 다운로드

<a href="123.pdf" download="123.pdf">pdf download click</a>

pdf download


3️⃣ b, strong

두 태그 모두 css에서 지정할 수 있는 속성이 있기 때문에 HTML에서 굳이 잘 사용하지 않음

<b>: 굵은 글꼴 표현

<p>Lorem ipsum dolor <b>sit amet consectetur adipisicing elit.</b></p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<strong>: 중요도를 표시하기 위해 사용

  • 중첩해서 사용하지 않고, 중요도를 다르게 주고 싶을 경우 heading 태그 사용을 추천하는 편
  • <b> 태그와 디자인적 차이는 없지만 코드로는 중요한 부분이라는 것을 확인 가능
<p>Lorem ipsum dolor <strong>sit amet consectetur adipisicing elit.</strong></p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.


4️⃣ i, em

<i>: 기울임 글꼴 나타냄

<p>Lorem ipsum dolor <i>sit amet consectetur adipisicing elit.</i></p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.

<em>: 기울임 글꼴을 나타내며 강조의 의미도 부여

  • <strong>보다는 약한 강조
<p>Lorem ipsum dolor <em>sit amet consectetur adipisicing elit.</em></p>

Lorem ipsum dolor sit amet consectetur adipisicing elit.


5️⃣ dfn

용어를 정의할 때 사용하는 태그

  • 페이지에서 한 번만 사용함
<dl>
	<dt>HTML</dt>
      <dd>
        <dfn>HTML</dfn>은 프로그래밍 언어가 아닌 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
      </dd>
</dl>

6️⃣ abbr

준말과 약자를 나타낼 때 사용

  • title: 커서를 올렸을때 툴팁이 나오도록 설정
<dl>
	<dt>HTML</dt>
      <dd>
        <dfn><abbr title="Hypertext Markup Language">HTML</abbr></dfn>은 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
      </dd>
</dl>


7️⃣ sup, sub

<sup>: 윗첨자 표시
<sub>: 아랫첨자 표시

<p>H<sub>2</sub>0</p>
<p>x<sup>2</sup>=4</p>


8️⃣ span

줄 바꿈 없이 영역을 묶는 용도

  • 텍스트를 표현해야 하는데 요소가 없다고 생각하는 경우 사용

2. Embedded Contents

1️⃣ img

<img>: 이미지 삽입 시 사용하는 태그

  • 인라인 요소로 여러 개를 한꺼번에 넣으면 나란히 위치

src(source)

이미지 파일의 경로를 나타내는 속성 (img 태그의 필수 속성)

  • /: 루트
  • ./: 현재 위치
  • ../: 현재 위치의 상위 폴더
<img src="http://www.ilyoweekly.co.kr/news/data/20200131/p1065574683899806_104_thum.jpg">

alt(alternative text)

이미지를 표시할 수 없을 때 나타나는 대체 텍스트

  • VoiceOver를 필요로 하는 사람들에게 아주 중요한 요소가 되므로 필수로 채워 둬야 함 (비워 둘 경우 파일명을 읽음)
<img src="http://www.ilyoweekly.co.kr/news/data/20200131/p1065574683899806_104_thum.jpgabcd" alt="space">
2019 천체사진공모전 대상 수상작

2️⃣ srcset

여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줌
같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개 이상 명시
한 개만 쓰려면 src 사용


3️⃣ x서술자, w서술자, sizes 속성

x서술자

화소의 밀도(pixel density)를 나타냄
디바이스의 화소 밀도에 따른 이미지를 로딩하도록 브라우저에 알려 줌

<img
width="200px"
srcset="img/logo_1.png 2x,
        img/logo_2.png 3x
src="a.jpg"
alt="test">

본인 컴퓨터 화소 밀도가 알고 싶은 경우 window.devicePixelRatio로 콘솔에서 확인 가능
macOS의 Retina 디스플레이는 대체적으로 2

w서술자

원본 이미지의 넓이를 브라우저에게 알려 줌 (300, 600, 700 순서로 전달)

  • 단위: w (px 쓰지 않음)
<img
width="200px"
srcset="img/logo_3.png 700w,
        img/logo_2.png 600w,
				img/logo_1.png 300w"
src="a.jpg"
alt="test">

w서술자와 x서술자는 동시에 사용할 수 없음
추가로 src 속성 유지는 필수

sizes

뷰 포트의 조건에 따라 이미지가 UI안에서 차지하게 될 사이즈를 브라우저에 알려 주는 역할

  • 뷰 포트의 최소 크기가 960 이상일 경우 이미지 넓이를 500px로 설정
  • 뷰 포트의 최소 크기가 960 미만 620 이상일 경우 이미지의 넓이를 300px로 설정
  • 어느 범위에도 속하지 않을 경우 900px로 설정
<img srcset="./rabbit_500.png 500w, ./rabbit_300.png 300w, ./rabbit_150.png 150w"
    sizes="(min-width:960px) 500px, (min-width:640px) 300px, 900px" src="./rabbit_150.png" alt="rabbit">


4️⃣ picture

각기 다른 디스플레이에 따라 조건에 맞는 이미지를 보여주는 요소

  • img 태그는 필수(없으면 아예 나타나지 않음)
<picture>
    <source srcset="mars.jpeg" media="(min-width:960px)">
    <source srcset="saturn.jpeg" media="(min-width:620px)">
    <img src="mars_small.jpeg" alt="화성">
</picture>

type

이미지의 포맷 타입을 브라우저에게 알려 줌

  • 코드는 첫 번째 두 번째에도 속하지 않는 경우 jpeg를 쓴다는 뜻
  • 포맷 타입을 둘 다 지원하는 경우 첫 번째를 우선으로 알려 줌
  • img 태그가 있음에도 picture를 사용하는 이유는 포맷 때문
<picture>
    <source srcset="mars.webp" type="image/webp">
    <source srcset="saturn.avif" type="image/avif">
    <img src="mars.jpeg" alt="화성" type="image/png">
</picture>

📌 면접에 나올 수 있는 개념

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

위의 코드에서는 img가 구식 기술 환경에서 사용할 수 있는 기본 기능, webp와 avif는 최신 기술 환경에서 사용할 수 있음


✔️ 이미지 포맷의 종류

  1. GIF(Graphics Interchange Format)
    256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듦
    투명 표현 가능하나 정도를 조절하는 건 불가능, 그러므로 그림자 표현도 불가능
    애니메이션 처리 가능
  1. JPG/JPEG (Joint Photographic Expert Group image)
    매우 화소가 높고, 용량도 적지만 투명 처리 불가능
  1. PNG (Portable Network Graphics)
    왠만한 컬러는 모두 표현 가능하여 투명 영역 처리 가능하지만 용량이 큼
  1. SVG (Scalable Vector Graphics)
    SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링 가능
  1. WebP (Web Picture Format)
    JPEG 이미지보다 약 70% 용량이 낮지만 더 뛰어난 색상을 지원
    그럼에도 불구하고 PNG 처럼 투명도 표현 가능, GIF 처럼 애니메이션 표현도 가능한 만능 포맷
  1. AVIF (AV1 Image File Format)
    WebP 처럼 뛰어난 색상 표현, 애니메이션 지원, 투명도 표현 모두 가능
    JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷
    아직 지원하지 않는 브라우저가 많으므로 주의

3. 실습

시맨틱 태그 이용해서 간단한 레시피 작성

  1. '알리오올리오 만들기'가 제목이기 때문에 <h2> 태그를 통해 적당한 크기로 맞춰 주었다.
  2. 이미지를 srcset으로 묶어 뷰 포트의 크기에 따라 크기가 변형되도록 반응형으로 제작했다.
  3. 레시피의 순서는 굳이 번호 매김 없이도 자동으로 붙어 나오는 순서가 있는 태그인 <ol> <li> 태그를 사용했다.
  4. 참고 사이트는 인용이기 때문에 <cite> 태그를 사용했다.

💡 재현 님 피드백

  • 전체를 하나의 <section>으로 묶으면 더 좋을 것
    만약 본문 내에서 다른 독립적인 내용이 담긴다면 <article>로 세분화도 가능, 의미 없이는 마음대로 나누지 말 것
    (ex, 동물이라는 주제 안에 소분류로 파충류, 포유류 등이 존재하는 경우)
  • 순서가 없는 설명이라면 <p> 태그를 사용하는 것이 더 적절
profile
blueprint
이전 포스트

TIL 03.29

다음 포스트

TIL 03.31

0개의 댓글