[멋쟁이 사자처럼 프론트엔드 스쿨] 9일차 TIL - 웹 폰트, 레이아웃, 네이밍 방식

🍰 CSS 진도를 나갔다. 

🍴 Web Fonts(웹 폰트)

• 웹 페이지에서 사용되는 폰트
• 컴퓨터에 미리 설치된 기본 폰트 이외의 글꼴 사용 시 웹 서버에서 로드하여 사용해야 함

🍴 font-family

• HTML에 적용되는 폰트 제어
• 웹 브라우저 표시 시 브라우저는 실행 중인 시스템에서 사용 가능한 폰트 찾을 때까지 font-family 값 목록을 살펴봄

body{
 font-family: "Noto Sans KR", sans-serif;
 }

🍴 SOP(Same Origin Policy)

• 다른 출처의 리소스 사용을 제한하는 보안 방식

🍴  CORS(Cross Origin Resource Sharing)

• 애플리케이션 통합을 위한 메커니즘
• 한 도메인에서 로드 되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 애플리케이션에 대한 방법 정의

🍴 User agent style 없애는 방법

1. reset.css - https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

2. mini reset - https://jgthms.com/minireset.css/

minireset.css

3. normalize - https://necolas.github.io/normalize.css/

Normalize.css: Make browsers render all elements more consistently.

🍴 웹 페이지 만들기

• 전체 레이아웃 관점에서 나누기 - 연관성 있는 그룹끼리 나누기
• 3단 구조 - header, main, footer ( nav bar가 header에 포함됨)
• 4단 구조 - header, navigator, main, footer
• 시맨틱 태그 사용
• div 사용 시 role 지정 필수

🍴 CSS 네이밍 방식

• 이름만 봐도 어떤 정보가 들어 있는지 알 수 있게끔. 남도 이해하는 개발 하기.
• PC/TC (Pascal Case / Title Case) - 단어 두 개 이상 연결 될 때 첫 글자를 대문자로. ex) MainContent
• kC (kebab-case) - 모든 단어 소문자, 단어 사이 -(하이픈) 사용. ex) main-content
• SC (snake_case) - 모든 단어 소문자, 단어 사이 _ 사용. ex)main_content
• camelCase - 첫 단어 소문자로 시작, 이후 단어 첫 글자는 대문자. ex) mainContent

🍴 논리 특성 - 요소의 의미나 역할 설명에 사용되는 특성(attribute). 다음과 같은 목적으로 사용됨.

1. 의미 부여: 요소에 의미 부여하여 더 명확하게 페이지 구조 표현. ex) <header>, <nav>, <main>, <footer>
2. 접근성 향상: 논리 특성 사용 시 스크린 리더 및 보조 기술 사용자의 웹 페이지 이해 및 탐색을 도움
3. SEO(검색 엔진 최적화): Search Engine Optimization. 웹 페이지 내용을 이해하고 색인화하는 데 논리 특성 활용. 의미 있는 요소/특성 사용 시 검색 엔진이 페이지를 더 잘 이해, 관련 검색 결과에 표시될 가능성이 높아짐.