어쩌다 보니 이 책을 빌린거에 대하여 방치를 해두었다... 반납 예정까지 2일 남았지만 조금이나마 읽어보고 다시 대여를 해서 읽어야 겠다. (이미 예약도서 걸려있지만 ^^,,)
프런트 엔드 개발이란?
클라이언트 영역에서 서비스 사용자와 대화하는 인터페이스(UI)를 개발하는 것이며, 다음과 같은 작업들을 포함한다.
-
사용자가 입력한 데이터를 비즈니스 로직에 따라 처리한다.
-
서버와 통신해 가져온 데이터를 출력한다.
-
디자인을 적용하여 스타일링한다.
-
클라이언트는 서비스를 이요하는 사용자 또는 사용자의 디바이스를 의미한다.
지금은 프론트엔드 개발자를 향해 하나씩 공부를 하고 있지만 결국에는 서비스를 이용하는 사용자의 접근성과 편의성 증진을 위해 고민하고 목표를 가져야 겠다.
책에서는 기본기(HTML / CSS / JS 특히 JS)를 튼튼히 다져야 한다고 거듭 강조하고 있다.
프론트엔드 개발자의 역할
- 요구 사항 분석 : 개발 항목을 구체화하고 기술적 방향성을 정해야 한다.
- 설계 : 기능, 모듈 크게는 서비스 전반에 사용될 세부 기술들을 검토하고 적용해 구조를 설계한다.
- 개발 : 디자인, 기획서를 바탕으로 기능이나 모듈을 개발하며, 백엔드와 독립적으로 개발하도록 환경을 만들어 개발한다.
- 배포 : 실 서비스 배포 전에 테스트 환경을 구성해 QA 과정을 반복하고, 자동화된 배포 전략을 도입해 애플리케이션을 배포한다.
HTML & CSS
HTML
Hyper Text Markup Language 문서의 서식이나 구조를 표현하는 부가적인 정보를 markup이라고 부르는데, 이 markup 구성에 가장 많이 사용되는 언어이다.
Start Tag & End Tag
Void 요소
End Tag가 없는 태그들 또한 존재한다. Start Tag 만 입력하거나 <input / > 처럼 작성하는 이를 Self-closing 이라한다.
Content & Element
content 는 start tag와 end tag 사이의 내용을 의미. start tag, end tag, content를 모두 합친게 element
Attributes(속성)
태그의 동작을 제어하도록 사용자가 지정하는 값을 의미
인라인 요소와 블록 요소
- 인라인 요소 (inline) : 태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지. 높이나 너비를 지정 할 수 없으며 줄 내부 어디서든 시작, span, button, img 태그가 대표적
- 블록 요소( block) : 태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작. 너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며 왼쪽에서부터 오르쪽으로 확장, div, article, form 태그가 대표적
contents model
Metadata Content
나머지 콘텐츠의 표시나 동작을 설정하거나 문서와 다른 문서와의 관계를 설정하는 요소
Flow Content
본문에 사용되는 대부분의 요소는 Flow Content로 분류된다.
Sectioning Content
아웃라인을 정의하며 각 Heading(제목) 요소와 Footer(바닥글) 요소의 범위(Scope)를 정한다. article, aside, nav, section 태그
Phrasing Content
문서 내의 텍스트를 의미하며 단락을 형성하는 요소이다.
Heading Content
섹션의 헤더를 정의하는 요소
Embedded Content
외부의 자원을 가져오거나 삽입할 때 사용하는 요소
Interactive Content
유저와 상호작용을 위해 특별히 설계된 요소
HTML 태그의 카데고리는 크게 위 처럼 볼수 있겠다아..
SEO( Search Engine Optimization)
시맨틱하게 HTML을 작성하자
의미에 맞는 태그를 사용해 문서를 작성하는 것
title 태그를 놓치지 말고 적절하게 작성하자
meta name="description" 을 이용해 페이지 설명을 남기자
meta charset="UTF-8"/ 를 사용해 인코딩 방식을 지정하자
여러 브라우저에서 통일된 인코딩 방식으로 노출시킨다.
open graph, twitter 태그를 사용해 외부 사용자를 유인하자
og(open-graph) 태그는 페이스북에서 만든 프로토콜이며 여러 상황에서 동일한 메타 정보를 쉽게 표시하도록 만들어졌다.
CSS
선택자(A) {
프로퍼티(B) : 값(C);
}
"A" 의 "B"를 "C"로 하겠다.
eg
h1 {
front-size: 14px;
}
"h1"의 폰트 사이즈를 14px로 하겠다.상속
width, height, margin, display, border 등은 상속되지 않는 프로퍼티 또한 존재한다.
반면에 상속되는 프로퍼티지만 HTML 요소의 종류에 따라 상속되지 않기도 한다. 대표적으로 button 태그가 있음.
만약 프로퍼티와 요소의 종류에 영향받지 않고 부모 요소의 프로퍼티를 상속받고 싶다면 명시적으로 inherit 값을 지정한다.
전체 선택자
* {
/* 모든 요소의 pdding이 0이 됩니다. */
padding: 0;
}타입 선택자
div {
padding: 10px;
}
모든 div 요소에 padding을 10px로 설정id 선택자
<div id="id-name"> id가 id-name인 div 요소 </div>
<style>
#id-name {
padding: 10px;
}
</style>
id가 id-name인 요소에 padding을 10px로 지정하고 싶다면 / id는 페이지당 하나만 가지는 단일값으로 정확하게 일치하는 단일 요소에만 지정하고 싶을 때 #을 붙여 사용 한다. class 선택자
class 속성은 id와 다르게 여러 요소에 같은 class값을 지정해 동일한 스타일을 지정할 수 있다. 속성(attribute) 선택자
"요소 이름[속성명(연산자) 값]"의 형태를 갖는다.마지막에 작성된 스타일 적용된다.
명시도(Specificity)가 높은 선택자의 스타일이 적용된다.
