22-08-31-TIL

프론트엔드 개발자란?

HTML, CSS, JavaScript 웹 페이지를 만드는 개발자 (모바일, PC 화면 등 포함)

고려할 점?

1. 해상도 고려하기 (잘 보여져야 한다.)
2. 크로스 브라우징 고려 (어떤 브라우저에서든지 문제없이 잘 작동해야 한다.)

태그

<artical> 태그

- 독립적 구분이 가능해야 함
- 따로 떼어내어서 다른 곳에 붙여도 어색하지 않는 부분으로 구성
- 위젯 (간단한 작은 단위의 어플리케이션에서도 사용 - 다크 모드로 보기 등)
- heading (hN 태그) 요소와 함께 사용하는 것을 권장!!
heading + article

<section> 태그

- 연관 콘텐츠로 구성
(다른 곳에 가져다두면 이상함)
- 연관성 있는 제목으로 표시가 가능해야 함 (그룹화 초점)
- heading (hN 태그) 요소와 함께 사용하는 것을 권장!!
heading + section

<h1> - <h6> 태그

- heading : 제목을 지정하기 위해 사용
- 중요도에 따라 사용됨
- 단순 글자 크기, 굵기로 사용 X!!
- 주로 <h1> 태그는 페이지당 한 번만 사용
- 여러 카테고리 구별을 위해 사용
<section>
	<h2></h2>
</section>
- heading 요소를 사용하게 된다면 각 다음 heading 요소 영역까지 브라우저가 임의의 영역으로 본다.
- 페이지 계층구조 쉽게 파악 가능

<nav> 태그

- 링크의 목록, 페이지 탐색
- 보통 메뉴에 많이 사용
- 각 카테고리 별 메뉴에도 사용가능
- 연결된 페이지의 링크가 들어가야 함

<aside> 태그

- 보통 각주/ 보충 설명
- 광고 영역으로 활용
- 양쪽 사이드에 위치할 때 그룹 지을 시 사용
- 문서 흐름을 따르지 않고 별개의 구획 만들 때 사용

<footer> 태그

- 작성자 정보
- 저작권
- 관련된 링크 내용 포함

<address> 태그

- 주로 <footer> 안에 사용되며 연락처 정보를 나타냄

<main> 태그

- 사이트가 담고 있는 핵심적인 내용을 감싸는 부분

Q ) 아직까지 <div> 태그를 사용하는 경우
A ) 호환성 때문에 아직까지 사용하는 경우가 있다.

Q ) 시맨틱한 태그를 사용해야 하는 이유
A ) <div> 태그를 사용할 경우 브라우저 입장에서는 아무 의미 없는 글이지만 시맨틱한 태그를 사용할 경우 정보 수집이 쉬워지며 정보 판단, 제공이 쉬워졌다.
또한 스크린 리더의 경우 프로그램들이 분석하기 쉬워졌다.
!! ) <div> 태그 사용을 자제하고 시맨틱 태그를 사용하도록 노력해야겠다!!

Grouping

<ol> 태그, <ul> 태그, <li> 태그

목록 표현 태그

<ol> -> ordered list : 순서가 있는 목록
<ul> -> unordered list : 순서가 없는 목록
<li> -> list item : 각 항목들 나열한 태그 (<ol>,<ul> 태그 안에서만 사용 가능!!)
<ul>, <ol> 직계 자식으로는 <li>만 사용되어야 한다!!!

<dl> 태그, <dt> 태그, <dd> 태그

정의형 목록

<dl> -> definition list : 정의 목록
<dt> -> definition term : 정의할 용어
<dd> -> definition description : 정의할 단어의 설명

<div> 태그

- 레이아웃 나눌 때 사용하는 태그
- 아무런 의미가 없음
- 디자인적 요소로 사용이 가능
- <article>, <section>, <header>, <nav> 도 <div>와 같은 역할로 하지만 앞 태그들은 의미 부여 가능한 태그들

<figure> 태그, <figcation> 태그

- 이미지 + 설명 이 있는 이미지
- 브라우저에게 둘이 연결되었음을 보여줄 수 있다.
- alt 속성은 반드시 들어가야함!!
(figcaption과 동일할 필요가 없음)

<p> 태그

- 단락 표시하는 태그
- 하나의 완결된 문장/ 문단을 의미
- p 안에 p 사용 불가능
- 줄바꿈으로 사용 X!!! (br 태그로 줄바꿈 사용)

<pre> 태그

- HTML 작성한 내용 그대로 화면에 표현 (컴퓨터 코드 표현)
<pre>
  <code>
  </code>
</pre>

<blockquote> 태그

- 인용 블록
- 여러 줄 표현시 사용
<cite> 태그 : 출처 태그
<q> 태그 : 인용구 (주로 문장 안에서 사용)

<main> 태그

- 문서의 주요 콘텐츠 영역 나타냄
- 핵심 기능/ 주제에 직접 연ㄱㄹ되어 있는 부분 
- 문서의 유일한 내용이 들어가야 함
- IE 지원 X!!

<hr> 태그

- 원래는 가로줄(선) 표현을 위해 사용
- <p> 태그 안에서 사용 X
- 단락 구분할 때 사용
- 장면 전환/ 문단 안 주제 변경 시 적용

Entity (예약어)

- &로 시작해서 ;로 끝나는 문자열
- 보통 문자를 대체하기 위한 용도로 사용