2. HTML 과 CSS
이 책의 2장 HTML과 CSS 부분은 기본적이면서도 필수적인 내용들로 이루어져있다. 두 분야의 구문작성법과 핵심 키워드를 주로 설명하는 것에 주력한다.
정리를 하면서 실무적으로 당연하게 느꼈던 지식들을 정리해 볼 수 있었고, Flex와 같은 CSS 속성을 깊게 알아갈 수 있었다.
2.1.1 - 2.1.3 HTML
HTML 은 Hyper Text Markup Language 의 약어로 마크업에 구성에 많이 사용되는 언어이다.
HTML 요소는 크게 3가지로 나뉜다. Content, StartTag, EndTag 로 나뉜다. HTML 요소를 각 특징에 따라 분류하면 블럭 요소와 인라인 요소로 나눌 수 있다. 두 분류에 따라 지정하는 스타일과 영역 지정법, 정렬법이 다르니 각요소의 특성을 파악해 레이아웃을 작성해야 한다.
HTML 골격을 작성하는것은 문서의 성격과 정보를 정확하게 나타낸다. <DOCTYPE> 은 문서의 타입을 지정한다 명시하지 않아도 되지만 다양한 브라우저에서의 일관된 렌더링을 위해 반드시 명시하는 것이 중요하다. <head> 태그는 문서의 제목과 문서의 인코딩 형식 등을 지정한다. <title> : 문서의 제목을 나타낸다. 사용자 북마크나 검색기능엔진에서 식별하는 기준으로 삼기 사용되기 때문에 작성하는 것이 좋다. <meta> : 메타데이터는 '데이터에 대한 데이터', '어떤 목적으로 만들어진 데이터'를 의미하며 주로 기계가 읽고 이해하는 정보이다. 인코딩방식, 뷰포트 지정뿐 아니라 많은 작업을 수행할 수 있다.
2.1.4 시맨틱(Semantic)
시맨틱하게 문서를 작성하는것은 의미있는 태그를 상황에 맞게 사용하는 것을 의미한다. 이렇게 작성하면 쉽게 의미를 부여할 수 있어, 가독성이 높아지고 유지보수가 쉬어진다.
자주 사용하는 시맨틱 태그 : <h1>~<h6>, <header>, <footer>, <main>, <article>, <section>, <aside>, <nav>
2.1.5 SEO (검색엔진 최적화)
프론트개발자의 몇 가지 노력으로 서비스가 적절한 키워드에 더 많이 노출하도록 할 수 있다. 검색엔진 최적화가 마케팅영역이라 생각할 수 있는데 전혀 그렇지않다. 이 부분은 따로 정리하였다.
2.2 CSS
CSS 는 Cascading Style Sheeets의 약자로 문서를 표시하는 방법을 지정한다. 이 장에서는 CSS 작성방법과 flex를 사용한 레이아웃 작성법 등 기본적인 내용을 설명한다.
작성 방법) 스타일을 작성하는 방법은 매우 단순하다. "A"의 "B"를 "C"로 하겠다. 이 문장에 맞춰 스타일을 지정한다. 외부 CSS파일에 작성된 스타일을 HTML 페이지에 연결할 때는 link태그를 이용한다. href 속성을 통해 CSS파일의 위치를 지정하고 rel 관계를 표현한다.
'FrontEnd > FE-study' 카테고리의 다른 글
| [FE] SPA vs MPA? (0) | 2022.07.31 |
|---|---|
| [FE] SSR과 CSR 이란? (0) | 2022.07.31 |
| [FE] 기초부터 완성까지 프론트엔드 00 - 목차 및 책 소개 (0) | 2022.07.16 |
| [GraphQL] GraphQL / Apollo 는 무엇이고 쓰는 이유? (1) | 2022.06.22 |
| [Typescript] 타입스크립트란? (타입스트립트 사용하기) (0) | 2022.05.31 |
