✏️ 오늘 배운 내용
- FE 개발자의 영역은 어디까지인가?
- HTML 요소 살펴보기
- sectioning contents
- grouping contents
- 기타
📖 FE 개발자의 영역은 어디까지인가?
- 보편적인 의미의 FE 개발자
- 개발언어: HTML, CSS, JS
- 웹브라우저에서 동작할 수 있는 언어를 이용하여 사용자가 이용하는 페이지를 만든다.
- FE 개발자들은 무슨 일을 하는 가?
- 해상도 고려하기
• 아이패드와 아이폰의 해상도와 스크린 사이즈가 모두 다르다.
- 크로스 브라우징
• 어떤 브라우저이든, 내가 만든 웹 사이트가 잘 보여져야 한다.
• 회사에 가면 테스트 핸드폰이 20개 이상은 된다고 함웹 페이지를 만들면, 하나씩 만들면서 테스트한다.
레이아웃이 깨지지는 않는지…
- 성능 측정(애니메이션 퍼포먼스, 서버와의 통신시간, 지연시간)
- 웹 렌더링(브라우저의 작동방식을 파악해 렌더링 성능 최적화)
- 웹 접근성(스크린리더, 명도 채도 등을 이용해 장애인 분들도 사용할 수 있도록 & 웹 에이전트 고려)
- 웹 표준 준수
- 검색엔진최적화
- 레거시 브라우저 대응(IE Android, IOS)
- R&D (미래 기술에 대한 대비)
- 디자이너와 기획자 납득시키기 등등…
- 안드로이드나 아이오에스는 운영체제가 있다.
- R&D … 새로운 기술이 계속 나온다.
- 번들러? 내가 만드는 어플리케이션이 복잡해질 수록 여러 파일의 CSS 를 이용하는데,
이것을 보기좋게 합쳐주는 것이 모듈 번들러(ex. 웹팩. 인데 이것마저 점점 끝나가려한다고 함…)
📖 HTML 요소 살펴보기
<head>
- 사용자에게 보여지지 않는 부분이다.
- meta 태그 등 브라우저에 영향을 미치는 부분
<body>
- 사용자에게 보여지는 부분으로, 현재 우리가 보고 있는 웹사이트이다.
📖 Sectioning contents (구조)
- section은 단원을 의미한다. 그렇기 때문에 그에 맞는 제목인 heading 요소 적어주는 것을 권장한다.
- 그 중에서도 <section> 과 <article>에 적어주기를 권장한다.
<section> - heading 요소 권장
- 독립적인 내용이 아닌, 사이트 내 연관 컨텐츠에 주로 사용한다.
- 내용을 각각 제목이 있는 주제별로 나누거나 묶어주는 역할을 한다.
- heading 요소(<h1~6>)를 이용해여 영역에 대한 설명을 표시한다.
예) 웹 사이트에 '스포츠 섹션'이 있으면 heading 태그로 '스포츠 카테고리 목록' 이런 내용 적어 주기
<article> - heading 요소 권장
- 섹션으로 구분이 가능한 요소 중 독립적으로 배포가 가능한 완결형 콘텐츠.
- 독립적으로 사용해도 좋으며, 재사용 가능하다.
- 똑 떼어 다른 페이지에 붙여 넣어도 어색하지 않는 것이 특징이다.
- 주로 사용하는 형태: 위젯, 날씨, 기사, 본문, 댓글 등
- heading 요소(<h1~6>)를 이용해여 영역에 대한 설명을 표시한다.
<nav>
- 해당 사이트의 주된 탐색 메뉴.
- 다른 페이지와의 링크를 보여주는 구획을 나타낸다.
- 시멘틱한 gnb를 만들 때, nav > ul > li 로 사용하기
- sectioning 요소 안에도 nav 태그를 각각 사용 가능하다.
- Tab 영역에는 nav 태그를 잘 사용하지 않는다.
<aside>
- 문서의 주요 맥락과 상관 없는 부수적인 영역이다.
- 보통 웹페이지의 양쪽 사이드에 위치하는 요소를 그룹 지을 때 사용한다.
- 주로 사용하는 형태 : 각주, 광고 영역 등
<header>
- 웹 사이트나 특정 컨텐츠의 시작 부분을 나타내는 요소이다.
- 일반적으로 구역의 제목을 포함한다.
- 문서 전체 페이지 또는 각 section에 가장 최상단부에서 제목 등을 담당한다.
<footer>
- 웹 페이지의 제일 하단에 위치한다.
- 가장 가까운 구획의 작성자 정보, 저작권, 관련 링크 등의 내용을 담는다.
📖 Grouping contents (그룹화)
<div>
- division, 그룹핑 하기 위한 요소이다.
- 특정 컨텐츠에 스타일이나 스크립트를 부여하기 위해 사용한다.
- 딱히 가지고 있는 의미는 없다.
- 컨텐츠가 의미를 갖고 있다면, <div> 요소를 사용하는 것은 추천하지 않는다.
<main>
- 문서의 주요 콘텐츠로, 웹 페이지에서 한번만 사용할 수 있다.
- 메인 요소 안에 들어가는 내용은 다른 곳과 반복되지 않고 유일해야 한다.
- 다른 페이지나 섹션에서 반복적으로 표시되는 정보(예를 들어 사이트 로고, 검색 폼, 저작권 정보)를 포함하지 않는다.
- <main>은 가장 밖에서 사용된다. (body > main)
- <main>은 sectioning elements 가 아니기 때문에 안에 <h1~6>을 반드시 사용하지 않아도 된다.
<p>
- paragraph, 문단을 의미한다.
- 하나의 완결된 문장일 때 사용하는 것이 좋다.
- 단순히 디자인 적 줄바꿈을 이유로 하는 사용은 비추한다.
<address>
- 보통 <footer> 요소 안에 사용한다.
- 사용하는 형태: 주소나 연락처와 같은 정보
<ul>
- unorder list, 순서가 없는 정의 목록이다.
- 직계 자식으로 <li> 요소를 갖는다.
- 사용하는 형태: 웹페이지의 메뉴 등에 사용된다.
<ol>
- order list, 순서가 있는 정의 목록이다.
- 직계 자식으로 <li> 요소를 갖는다.
- 사용하는 형태: 실시간 검색어, 음식 레시피, 조립 설명서 등
<li>
- list item을 의미한다.
- <ul> 또는 <ol> 요소의 직계 자식으로 사용된다.
<dl>
- description list, 정의형 목록
- 사전과 같은 형태로, 용어와 용어 설명을 묶어주는 경우에 사용한다.
-안에 <div> 사용이 가능하다.
<dt>
- description term, 정의할 용어의 제목
- 정의할 용어의 제목을 나타낼 때 사용한다.
<dd>
- description data, 용어 설명
- 정의한 용어에 대한 설명을 적을 때 사용한다.
- <dt> : <dd> 요소는 1 : 1 이나 1 : n 이나 n : 1 형태로 사용가능하다.
<figure>
- 이미지, 비디오, 오디오 등을 포함할 수 있다.
- 이미지와 이미지에 대한 설명을 묶어줌
- figure 요소에 포함된 콘텐츠에 캡션을 제공하고자 할 때 사용할 수 있습니다.
<figcaption>
- figure 요소에 대한 설명을 적는 요소이다.
<figure>
<img src="" alt="">
<figcaption>이미지에 대한 설명</figcaption>
</figure>
<blockquote>
- 인용 블록이다.
- 긴 인용문을 담을 때 <p> 요소와 함께 사용한다.
- cite 속성으로 인용한 글의 URL을 지정할 수 있다.
- 함께 사용 가능한 요소로 <cite>가 있다.(속성의 cite와 다름)
<q>
- <blockquote> 요소 안에 사용하며, 짧은 인용문을 닮을 때 사용한다.
- 제목 관련 요소
<h1~6>
- heading 요소라고 부른다.
- Tab 버튼은 heading 태그의 순번에 따라 이동된다.
- h1~6로 작은 숫자일 수록 중요도가 크다.
- <h1>요소는 페이지당 1번만 사용하기를 권장한다.(→ 사이트 로고)
- <h2>요소는 페이지의 큰 섹션의 타이틀에 사용한다.
- heading 요소를 사용하면 익명 영역(anonymous section)을 생성한다.
(living standard에 sections에 해당 태그가 들어가 있으나, 이해를 돕기 위해 글자 태그로 그룹핑 했다.)
- 그외
<hr>
- 이야기의 장면전환, 문단 안에서 주제가 변경 됐을 때, 구분하기 위해 사용
- 단락 구분 시에 사용하기 때문에, <p> 요소 안에서 사용하지 않는다.
<hgroup>
- 잘 사용하진 않지만, heading 요소를 소 그룹으로 묶을 수 있다.
✏️ 질문
Q1. 만약에 <header> 에 들어갈 내용이 사이드에 위치해야 하는 경우라면, <aside>요소 안에 <header>요소를 작성해도 괜찮나요?
A1. 그렇습니다. 모두 같은 sectioning 태그이기 때문에 상관은 없습니다.
Q2. 시멘틱 태그를 쓰는 이는 무엇인가요?
A2. 웹 세상을 정리하기 위함입니다. 웹은 수많은 문서가 있는 거대한 도서관입니다.
시멘틱 태그가 나오기 전엔 정리가 제대로 이루어지지 않아 혼돈 그 자체였지만
지금은 브라우저 검색 엔진들이 시멘틱 태그를 통해 해당 문서의 목적이 무엇인지 구별하고 정리 할 수 있게 되었습니다.
HTML에서 시멘틱한 태그를 작업할 수록 검색 엔진 최적화의 성능을 높일 수 있고, 스크린 리더에도 효과적입니다.
Q3. 시맨틱적인 면에서 본다면 <div id="header"></div> 에 clsaa나 id를 지정해서 사용하는 것과 전용 태그를 사용하는 것에 차이는 없나요?
A3. 차이가 있습니다. <div> 요소 는 아무런 의미가 없기 때문이죠. 하지만 네이버나 다음과 같은 대형 포털 사이트는 브라우저 접근성을 높이기 위해 시멘틱 태그를 사용하는 것보다, 다양한 기기에서 접속이 가능하도록 호환성을 높이는 것이 더 중요하기 때문에 <div> 요소를 사용합니다.
Q4. 포탈 사이트와 구글 검색 엔진의 차이
'🦁 멋쟁이사자처럼 > TIL' 카테고리의 다른 글
| [220905] HTML태그별 사용 용도 / 마크업 시 알아둘 것 (0) | 2022.09.05 |
|---|---|
| [220902] CSS 초기값 / 사용자 정의 스타일 등등 (3) | 2022.09.03 |
| [220901] git과 GitHub의 차이 / git 명령어 등등 (0) | 2022.09.03 |
| 220830 TIL (0) | 2022.09.03 |
| 멋쟁이사자처럼 FE school 3기 시작 (1) | 2022.08.30 |
