220831 TIL

Today I Learned

• FE란 무엇인가
• 성능 고려
• 시멘틱태그를 왜 사용해야 하는가?
• Section
• Grouping Content

---

FE란 무엇인가

웹 브라우저에서 동작 할 수 있는 언어를 사용하여 사용자가 이용하는 웹 페이지를 만드는 작업

웹브라우저는 최근 다이나믹한 UI로 구성되기에 FE개발의 역할이 중요해짐

---

성능 고려

크로스 브라우징 (해상도를 고려하라) : 어떠한 환경에서도 내가 만든 웹페이지가 잘 나올 수 있게 고려해야함

---

시멘틱 태그를 왜 사용해야 하는가?

시멘틱태그 사용시 컴퓨터가 작성한 코드의 구조를 이해하기 쉽고 더 빠르게 받아 들인다. 
시멘틱태그를 사용하지 않고 작성하는 코드의 경우, 컴퓨터가 이해하기에 의미없는 div 덩어리일 뿐이다.

---

Section

head - 페이지에 대한 metadata를 포함, 사용자에게 공개되지 않는 부분 (페이지에 표시X)

body - 실제 사용자에게 보여지는 문서의 컨텐츠

article - 독립적으로 구분하거나 재사용 가능한 구획을 나타냄 (FacebooK 게시글의 경우 잘라서 보더라도 독립적임)

section - article이 독립적 컨텐츠라면 section은 사이트 내 연관 컨텐츠이다. heading요소와 함께 사용 하는것이 권장된다. 
        - section을 사용하지 않는 경우 heading사용시, 다음 heading의 전 부분까지 heading의 내용이라 인지함.
        (section 설정을 하는 경우 heading을 줘야함)

h1 - 제목을 지정하기 위해 사용되며 <h1~6>까지 설정 가능. h1요소는 페이지당 한번만 사용할 것을 권장 
   - hgroup을 이용하면 대제목, 소제목을 나눌 수 있음.

nav - 현재 페이지 내, 또는 다른 페이지 링크를 보여줌.(메뉴에 사용) 

aside - 문서의 흐름을 따라가지 않는 별개의 박스에 사용함. (광고영역, 양쪽 사이드에 위치해야 하는 요소를 그룹화 할 때)

---

Grouping Content

ol(ordered list) - 순서가 있는 목록 (실시간 검색어 순위)
ul(unordered list) - 순서가 없는 목록
li(list item) - 각 항목들을 나열, li요소는 ol, ul 요소 내에서만 사용 되어야 한다. 

dl(definition list) - 정의 목록
dt(definition term) - 정의할 용어
dd(definition dscription) - 용어 설명
위 세가지 모두 목록을 정의할때 사용. 하지만 사전처럼 정의할 경우에 사용됨.

div - 레이아웃을 분리할 때 사용되는 태그. 의미가 없고 하위요소를 감싸기 위해 존재하는 요소

figure - 이미지요소 삽입
figcaption - 이미지 요소에 캡션을 추가하기 위해 사용

p - 단락을 표시하는 태그. 완결된 문단을 의미하기에 자식으로 사용되거나, 줄바꿈을 용도로 사용하면 안된다.

pre - HTML에 작성한 내용 그대로 화면에 출력한다. 주로 컴퓨터 코드를 사용할 떄 사용됨. 

blockquote - 인용구를 사용할 때 사용됨.

main - 문서의 주요 컨텐츠를 나타냄. 다른 페이지나 섹션에서 반복적으로 표시 될 수 있는 정보, 메인요소 안에 들어가는 내용은 문서의 
유일한 내용이어야 한다.

hr - 이야기 내 장면 전환, 문단 안에서 주제가 변경되었을 때 그 구별을 위해 사용함. 따라서 p태그 내 사용은 웹 표준에 어긋남.

Entity - 예약어. 보통 코딩 할 때 &과 같은 기호를 사용하는 경우가 생기게 됨. 따라서 예약어로 사용하는 문자를 대체하기 위해 사용.