멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 7 (텍스트 레벨 요소, 테이블 관련 요소, 임베디드 요소)

 

목차

• 프레이징 요소
• 인용문
• 텍스트 레벨 요소
• 테이블 관련 요소
• address 요소
• 임베디드 요소
• 오늘 하루를 돌아보며

 

프레이징 요소

문장이나 텍스트와 관련된 요소로, 문서의 텍스트를 단락 내에서 마크업하는 데 사용한다. 즉, 문장이나 텍스트의 일부를 의미적으로 표시하거나 스타일을 적용하는 데 사용되는 태그들을 가리킨다.

• <strong> 요소는 텍스트의 중요성을 강조할 때 사용한다. 스타일 기본값은 bold다.
  
• <em> 요소도 텍스트를 강조할 때 사용하지만 strong이 중요도가 더 높다. 스타일 기본값은 italic이다.
• <i> 요소가 텍스트를 기울일 때(italic) 사용하고,
• <b> 요소는 텍스트를 굵게(bold) 강조할 때 사용한다.

strong이나 em의 시각적 모습이 i나 b와 동일하지만 의미가 다르다. strong과 em은 텍스트의 중요성을 강조하고, b는 중요성이나 관련성 없이 다른 글자와 구분하기 위해 사용하고, i는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용한다.

 

인용문

인용문을 표시하는 데 사용하는 요소는 다음과 같다.

• <blockquote> 요소는 문단 전체를 인용할 때 쓰는 블록 인용문이다. 왼쪽 오른쪽 모두 안쪽으로 들여쓰기 된다.
• <q> 요소는 문장 중간에 인용된 내용을 넣을 때 쓰는 인라인 인용구다. 내용을 "" 안에 넣는다.
• cite 속성은 인용의 출처를 명시할 때 사용한다. url이나 isbn 등을 값으로 갖는다.

특수문자가 보이도록 할 때는 entities name이나 entities number로 변환해야 한다. '<'와 '>'는 반드시 eneity name이나 entity number로 변환해야 한다.

• <: &lt; - less than
• >: &gt; - greater than

 

텍스트 레벨 요소 (시멘틱)

• <sub>: 아래 첨자(subscript)를 표현하는 요소
• <sup>: 위 첨자(superscript)를 표현하는 요소
• <abbr>: 약어(abbreviation)나 약칭(acronym)을 나타내는 요소. title 속성을 사용하면 어떤 단어의 약자인지 알려줄 수 있다.
• <time>: 날짜 시간 정보를 표현하는 요소. datetime 속성을 사용하면 기계가 이해할 수 있는 연산 정보를 준다. "YYYY-MM-DDTHH:MM:SS"로 표현한다.
• <s>: 취소선(strikethrough)을 표현하는 요소.
• <small>: 텍스트의 크기를 줄여서 표시하는 요소. 부가적인 정보(저작권 정보, 설명 등)나 주석 등을 나타낼 때 사용한다.
• <mark>: 텍스트에 하이라이트를 표시하는 요소. 기본값으로 노란 배경색이 생긴다.

 

테이블 관련 요소

• <table> 요소는 테이블을 정의하는 기본 요소다. 테이블은 행을 먼저 만든다. table 요소에는 열을 정의하는 요소가 따로 없다. 행 안에 셀이 들어있는 개념이다.
• <caption> 요소는 테이블의 제목을 정의한다.
• <tr> 요소는 테이블 행(table row) 요소다.
• <th> 요소는 테이블의 제목 셀(table head)을 만든다. scope 속성을 사용하여 "col" 또는 "row"의 행제목임을 스크린리더 환경에서 이해할 수 있도록 한다.
• <td> 요소는 테이블의 내용 셀(table data)을 만든다.
• colspan/rowspan 속성을 사용하면 셀을 병합할 수 있다. 나를 포함해서 몇 개의 셀을 병합하는지 숫자값을 입력한다.

 

address 요소

<address> 요소는 연락 가능한 정보를 표현할 때 사용한다. 각 연락처는 디자인을 위해 span 태그로 묶어줄 수 있다.

사이사이 '|'나 ':' 같이 의미 없는 정보는 span으로 묶고 aria-hidden="true" 속성을 줘서 읽지 않게 할 수 있다.

 

 

임베디드 요소(Embedded Element)

1. map과 area 요소

map 요소는 이미지 안에서 클릭할 수 있는 링크 영역(이미지 맵)을 만든다. id 속성이나 name 속성을 사용해서 이미지 맵의 이름을 정의하고, 속성값은 img 요소의 usemap 속성과 연결한다.

area 요소는 클릭할 수 있는 영역을 지정한다.  map 요소 안에 나열한다. a 요소처럼 target과 alt, href 속성을 사용하고, shape 속성으로 클릭 가능한 영역의 모양(rect, circle, poly, default)을 정의하고, coords 속성으로 좌표를 정의한다. 좌표는 shape에 따라 형식이 다르다.

<img src="이미지 경로" usemap="#image-map" alt="대체 텍스트" />
<map id="image-map">
  <area target="_blank" alt="" href="경로" coords="15,15,14" shape="rect" />
  <area target="_blank" alt="" href="경로" coords="65,15,14" shape="circle" />
  <area target="_blank" alt="" href="경로" coords="115,15,14" shape="default" />
</map>

 

 

2. iframe, object 요소

<iframe> 요소는 다른 HTML 문서나 외부 콘텐츠(영상, 맵 등)를 현재 웹 페이지에 삽입할 때 사용한다. inline frame의 약자.

iframe의 주요 속성:

• width, height: 사이즈 지정. px 또는 % 단위 사용
• src: 경로 지정
• title: 스크린 리더가 iframe을 만나면 가상커서가 들어가야 하는데, 나오기 어렵기 때문에 적절한 타이틀을 준다.
• allowfullscreen: 논리 속성(boolean)으로, 최대화 허용

<object> 요소는 다양한 객체를 삽입할 때 사용한다. pdf, 이미지 등의 파일을 보여주는 범용적인 요소다. 하지만 이미지는 img 요소를 사용한다.

object의 주요 속성:

• type: 파일의 종류 지정
• data: 경로 지정. src를 사용하지 않는다!
• width, height: 사이즈 지정. px 또는 % 단위 사용

 

3. video 요소

<video> 요소는 HTML5에 새로 추가된 요소로, 비디오를 삽입하고 재생할 때 사용한다. 이 요소는 비디오 플레이어를 생성하고 다양한 속성으로 비디오를 제어할 수 있다.

• poster: 썸네일
• controls: 논리 속성으로, 재생, 최대화 등의 기능이 보이게 한다.
• muted: 논리 속성으로, 음소거시킨다.
• autoplay: 논리 속성으로 페이지를 로드하면 비디오를 자동으로 재생한다. 접근성 측면에서 스크린 리더를 사용할 때 불편하기 때문에 특정 버전 크롬 브라우저에서는 muted를 사용하지 않으면 동작하지 않는다.

video 요소 안에 source와 track 요소를 사용한다. source 요소로 미디어 파일을 제공하고, track 요소로 자막, 설명, 챕터, 메타데이터 등을 제공한다.

 

4. picture와 source 요소

<picture> 요소는 여러 이미지 소스를 그룹화하고, 브라우저가 조건에 따라 적절한 이미지를 선택할 수 있도록 하는 컨테이너 요소다. picture라는 컨테이너 안에는 1개 이상의 img 요소와 0개 이상의 source 요소를 사용해야 한다.

source 요소에 srcset 속성을 사용해서 여러 개의 소스를 제공한다. 하나의 source에 이미지 하나씩 사용한다. 경로 뒤에 공백으로 구분하여 x 또는 w 디스크립터를 사용한다. x는 디바이스 화면의 픽셀 밀도 값(1x, 2x, 3x)을, w는 이미지의 width 값을 지정한다. w 디스크립터를 사용하면 media 속성에 뷰포트의 최대 지원 width 값(max-width)을 지정한다.

<picture>
  <source srcset="경로 550w" media="(max-width: 500px)" />
  <source srcset="경로 1024w" media="(max-width: 768px)" />
  <source srcset="경로 1600w" media="(max-width: 1280px)" />
  <img src="경로" alt="" />
</picture>

 

반응형 디자인(레이아웃)은 모바일, 태블릿, 와이드 스크린 디바이스에 내가 만든 콘텐츠가 레이아웃은 다를 수 있지만 문제 없이 보일 수 있게 제공하는 디자인이다.

반응형 디자인을 위해서는 반응형 이미지도 필요하다. 필요한 배율의 이미지를 모두 준비해서 디바이스 최적화된 리소스를 제공한다.

 

오늘 하루를 돌아보며

가장 기억에 남았던 거는 네이밍 패턴과 단축키다.

네이밍 패턴

• PC / TC - Pascal Case / Title Case - ex) MainNavigation
• CC - Camel Case - ex) mainNavigation
• KC - Kebab Case - ex) main-navigation - 단어를 꼬치에 꽂은 것처럼
• SC / Under Score - Snake Case - ex main_navigation - 뱀이 땅을 기듯이 언더바 사용

협업할 때 통일할 부분 중 하나!!!

협업할 때 네이핑 패턴이 일관되지 않으면 혼잡해 보이거나 서로의 코드를 읽기 어려울 수 있다. 예를 들어 id는 케밥으로 통일하고, class는 camel로 통일한다든지 할 수 있다. 어떤 사람은 케밥 케이스를 소떡소떡이라고 부른다는 게 웃겼다. 닭꼬치가 더 어울릴지도?

VS Code 단축키

• alt(option) + 방향키: 커서가 있는 곳의 한 줄을 통으로 위나 아래로 옮긴다.
• shift + alt + 방향키: 원하는 방향으로 복제
• ctrl + alt + 방향키 / alt + 클릭: 한 번에 여러 줄에 같은 내용 입력

작업 효율을 높이기 위해서는 단축키를 많이 알고 잘 사용해야 한다. 포스트잇에 적어서 모니터에 붙여놓는 것 추천!