Single-page Application, SPA란?

기존 웹 방식과는 다르게, 페이지 요청 시 완전히 새로운 페이지를 불러오는 것이 아닌, 동적으로 페이지를 다시 작성해 '사용자와 소통' 하는 웹 애플리케이션 or 웹 사이트를 뜻함.

→ 처음 로드 하고 난 뒤, 새로고침이 없는 것이 특징이다.

장점이 뭐야?

연속적인 페이지 간의 사용자 경험의 간섭을 막아준다.

→ 기존 형태의 웹이 주던 딱딱하고 끊기는 느낌을 사용자에게 주는 것이 아니라. 애플리케이션처럼 부드럽고 자연스러운 사용자 경험 (UX)을 느끼게 해 준다.

→ SPA의 최대의 목적은 뛰어난 사용자 경험을 준다는 것이다.

필요한 리소스만 부분적으로 로딩

→ 페이지의 모든 정보를 가져오는 것이 아닌, 화면 구성에 필요한 정보만 동적으로 요청을 해서 화면을 변경하는 방식으로 사용한다.

→ 필요한 부분만 요청하는, 데이터를 적게 사용하는 방식이기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.

서버의 연산 부담을 클라이언트로 분산

→ 최초의 http 요청을 통해 딱 한 번만 http, Css, javascript를 로딩. 이후 데이터를 받아 올 때만 서버와 통신.

→ 통신된 데이터를 통해 기존 페이지의 내부를 수정해서 보여주는 방식.

컴포넌트로 나누어서 개발함으로 관리적 용이성

→ 모던 웹 들은 계속 다채로워지고 화려해지고 있다. ( 점점 복잡해진다!)

→ 많은 컴포넌트 ( 홈페이지에서 각각의 아이템들이라고 생각하면 편하다. 메뉴창, 내비게이션 바 등..)를 분리해서 관리를 함.

→ 데이터 변경이 있어 화면을 재 구성해야 하는 경우 전체를 바꾸는 것이 아닌, 컴포넌트 단위로 화면을 갱신.

단점이 뭐야?

초기 구동 속도가 느리다.

→ SPA의 단점 이라기보다 SPA구조 상 어쩔 수 없는 상황이다. SPA는 초기에 웹에 필요한 대부분의 리소스를 다운로드한다.

→ 이러한 손해를 감수하고도 얻고자 하는 것은 전체적인 속도 , 반응성, 사용성을 추구하기 위함이다. 하지만 우리는 어찌 되었든 메인 페이지는 빠르게 뜨길 원한다면?

1. Lazyload
   • 많은 양의 코드 (초기 다운로드)를 작은 양의 개별 작업으로 분할시켜 제공하는 방법.
   • Code splitting.
   • Route-based code splittig

검색엔진 최적화(SEO)가 어렵다.

→ 이 문제는 js기반 비동기 연동 모델로 작동되는 모든 웹 환경에서 문제가 생긴다.

→ SPA가 극단적으로 js를 사용하다 보니 더욱 부각되는 것뿐이다.

→ 대부분의 서치 봇 들이 html을 파싱 해서 정보를 만든다. 그렇기 때문에 SPA와 같이 html의 뼈대 위에 js 비동기 통신 모듈을 통해 내용을 채우는 방식을 사용하면, 서치 봇이 제대로 감지를 못하는 상황까지 이른다.

—> 이를 해결하기 위해서 SSR (Server SIde Rendering)이라는 방식으로 사용되고 있다.

그래서 SPA는 좋은 거야?

이에 대한 정답은 없다고 생각한다. 어떠한 기술을 바라볼 때, 항상 좋은 점만 있는 것은 아니다.

SPA와 기존 고전 웹의 특징을 잘 비교 한 뒤 본인이 만들 웹 페이지에 기획과 콘셉트에 맞게 스스로 고민하고 선택하는 것이 중요하다고 생각한다.

Why grid layout

• 행과 열을 구분하는 데 있어서 추가 개발 없이 css로 2차원 레이아웃을 설계할 수 있다.
• 고정 크기를 가지는 요소들을 넓이에 유연하게 사용할 수 있음.
• 깔끔한 레이아웃을 외부 도움 없이 구현 가능.

지원 범위

Grid Container (부모) 관점

display

• 해당 부모 컨테이너를 그리드를 사용하는 것으로 설정.

1. grid : 블록 레벨의 그리드 생성
2. inline-grid : 인라인 레벨의 그리드 생성

grid-template-columns

grid-template-rows

• 그리드 스타일 을 컬럼인지 로우인지 정한다.

• 값은 트랙 크기를 말함. 그 사이 공간은 그리드 선을 나타냄.

• 그리드 선의 이름을 빈 공간을 두면, 양수와 음수가 자동적으로 생성된다.

.container{
	grid-template-columns : 40px 50px auto 50px 40px;
	grid-template-rows : 25% 100px auto;
}

• 명시적으로 이름을 지어 줄 수 있다.

  → [ ] 대괄호를 사용해서 지정.

  → 하나 이상의 이름을 가질 수 있음.

   

.container{
	grid-template-columns : [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
	grid-template-rows : [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

repeat()

• 반복되는 부분은 간소화 할 수 있다.

.container{
		grid-template-columns : repeat(3,20px,[col-name]);
		/*동일한 코드*/
		grid-template-columns : 20px [col-name] 20px [col-name] 20px [col-name];
}

///////////////////////////////////////////////////////////

.container{
		grid-template-columns : repeat(4, 10px 5px);
		/*동일한 코드*/
		grid-template-columns : 10px 5px 10px 5px;
}

fr 단위

• 전체의 길이에서 여유 공간의 일부를 사용할 수 있다.

/*전체 공간에 1/3씩 나눠서 쓰는 방식*/
.contaier{
		grid-template-columns : 1fr 1fr 1fr;
}

/*50px를 제외한 여유공간을 나눠서 사용하는 방식*/
.contaier{
		grid-template-columns : 1fr 50px 1fr 1fr;
}

grid-template-area

• grid-area로grid-area로 지정한 이름으로 위치를 마음대로 정할 수 있다. (GOOD!)

• 마침표는 빈 셀을 의미한다.

• 그리드의 격자형태를 기준으로 위에서부터 채워진다.

.a{
		grid-area : header;
}

.b{
		grid-area : main;
}

.c{
		grid-area : sidebar
}

.d{
		grid-area : footer;
}

.container{
		display : grid;
		grid-template-columns : 50px 50px 50px 50px;
		grid-template-auto : auto;
		grid-template-areas :
			"header header header header"
			"main main . sidebar"
			"footer footer footer footer"
}

grid-template

• 축약 사용 법

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}



.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
/*동일한 코드*/
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

grid-auto-columns , grid-auto-rows

• 2x2 레이아웃을 설정하고 (4, 1)에 아이템을 지정하게 될 때

  → 즉 지정한 레이아웃을 벗어나게 될 경우 지정하지 않은 간격은 0으로 설정된다.

• 이 상황을 해결하기 위해서 사용.

  → 지정한 간격만큼 암시적으로 늘어난다.

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

• 그리드에 배치를 할 때, 명시적으로 배치한 것을 제외, 자동으로 배치해 줌.

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

/* 1번 이미지 */
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

/* 2번 이미지 */
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

자식 아이템 일괄 정렬

grid-column-gap , grid-row-gap

• 그리드 선의 크기를 정한다. 즉 열과 행 사이의 간격을 정한다고 생각하면 된다.

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

justify-items

• 인라인 컬럼 축을 기준으로 그리드 자식 아이템들을 정렬한다.

.container {
  justify-items: start;
	/* end | center | stretch */
}

align-items

• 인라인 로우 축을 기준으로 그리드 자식 아이템들을 정렬한다.

.container {
  align-items: start;
	/* end | center | stretch */
}

place-items

• align-items + justify-items 축약 설정

.container {
  place-items: start / end
	/* end | center | stretch */
}

justify-content

• 부모 컨테이너의 크기에 상관없이 아이템 크기만큼 레이아웃을 잡고 싶을 때.

• 컬럼 축을 기준으로

.container {
  justify-content: start;
	/* end | center | stretch | space-around | space-between | space-evenly */
}

align-content

• 부모 컨테이너 크기에 상관없이 아이템 크기만큼 레이아웃을 잡고 싶을 때

• 로우 축을 기준으로

.container {
  align-content: start;	
}

place-content

• 축약 설정

Grid Items (자식) 관점

grid-column-start, grid-column-end, grid-row-start, grid-column-end

• 특정 그리드 선을 기준으로 아이템을 배치한다.

• 항목을 겹칠 수 있으며, z-index로 컨트롤할 수 있다.

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

/* 축약 */
.item-a {
  grid-column: 2 / five;
  grid-row: row1-start / 3;
}

grid-area

• grid-template-areas를 통해 지정한, 템플릿에 배치할 수 있다.

.item-d {
  grid-area: header;
}

justify-self

• 아이템 자기 자신의 위치를 컬럼 기준으로 정렬

align-self

• 아이템 자기 자신의 위치를 로우 기준으로 정렬

place-self

• 축약 설정 가능, 1번째 align-self 2번째 justify-self

/* 1번 이미지 */
.item-a {
  justify-self: start;
	/* end | center | stretch */
}

/* 2번 이미지 */
.item-a {
  align-self: start;
	/* end | center | stretch */
}

/* 3번 이미지 */
.item-a {
  place-self: center stretch;
}

[ 참고 ]

A Complete Guide to Grid | CSS-Tricks

예제를 활용한 CSS 그리드 레이아웃 소개

Why FlexBox??

• 데스크톱데스크톱 시대를 벗어나 모바일 시대로 들어가면서 기존 float, position 만으로 대응하기가 어려워짐.

• 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때 효율적인 요소 배치, 정렬, 분산할 수 있는 방법을 CSS단에서 제공.

  → 복잡한 계산 없이 유연하게 배치할 수 있다!

지원 범위

1* 이전 flexbox만 지원, 줄 바꿈 미지원

2* 2012년 구문만 지원

3* flex-wrap, flex-flow, align-content 속성 지원하지 않음

4* 부분적으로 버그가 많음.

[참고]

https://caniuse.com/

flex-container(부모) 관점

Flexbox 기본 개념

• flexbox 인터페이스 내의 아이템 공간 배분과 강력한 정렬 기능을 제공함

• 1차원적인 레이아웃 모델로 설계되었다

  → 가로, 세로 한방향만 지원.

• 간단 구조

<div class="flex-container">
		<div class="flex-item"></div> 
		<div class="flex-item"></div> 
		<div class="flex-item"></div> 
		...
</div>

.flex-container{
		display : flex;
		
		flex-direction : row; /*플랙스 박스 가로 세로를 결정 */
		/* row | row-reverse | column | column-reverse */
		
		justify-content : flex-start; /* 메인축 기준 아이템의 정렬 방식 */
		/* flex-start | center | flex-end | space-between | space-around | space-evenly*/

		flex-wrap : nowrap; /* 아이템 항목들이 열 바꾸는 방식 */
		/* wrap | wrap-reverse | initial | inherit */

		flex-flow : row nowrap; /*flex-direction + flex-wrap 속기형*/
		/*두개의 인자값을 순서 상관없이 사용할 수 있고 각각 생략도 가능*/

		align-items : stretch; /* 아이템의 크기를 정렬과 관계지어 설정 */
		/* flex-end | center | flex-start | baseline */
		
		align-content : flex-start; /* 교차축 기준 아이템의 정렬 방식 */
		/* center | flex-end | space-between | space-around | space-evenly | stretch */
}

display : flex

• 플렉스 구조를 사용하려면 display : flex 인 컨테이너로 감싸주어야 한다.
• 감싸진 모든 아이템들은 플렉스 아이템으로 인식하게 된다.

flex-direction

• 기본은 행을 기준으로 배치된다.
• 속성 변경을 통해 좌, 우 , 상, 하 방향 중 결정할 수 있다.

1. row : 좌 → 우
2. row-reverse : 우 → 좌
3. column : 상 → 하
4. column-reverse : 하 → 상

flex-wrap

1. nowrap : 줄을 바꾸지 않는다,
2. wrap : 줄 바꿈을 할 수 있게 한다.
3. wrap-reverse : 반대 방향으로 줄을 바꿈
4. initial : 기본값 설정
5. inherit : 부모 요소로 부터 상속 값을 받음

justify-content

• 콘텐츠를 정렬하는 것.

1. fix-start : 기본값, 컨테이너 시작위치 (왼쪽)부터 정렬

2. fix-end : 컨테이너 끝 (오른쪽)부터 정렬

3. center : 항목을 중앙에 정렬

4. space-between : 첫 항목을 시작 위치, 끝 항목을 마지막 위치, 남은 아이템은 일정한 간격으로 배치

5. space-around : 아이템을 일정한 간격으로 배치

6. space-evenly : 완전히 균등한 공간으로 배분

7. initial : 기본값 따름.

8. inherit : 부모 요소로부터 값을 상속 받음.

   

align-items

• 아이템의 정렬 축을 기준으로 크기값을 설정한다.

1. stretch : 기본값, 모든 플렉스 항목들이 동일한 높이값을 가지도록 조정
2. flex-start : 플렉스 항목들을 컨테이너의 시작에 위치시키지만, 각 항목의 콘텐츠 양에 따라 결정
3. flex-end : flex-start 와 동일 하지만 컨테이너 끝부터 정렬
4. center : 항목 별로 위 아래 공간이 균일하게 분배
5. baseline : 각 항목의 중심을 기준으로 일정하게 정렬

align-content

• flex-box의 메인 축 (direction) 이 아닌 교차축을 기준으로 정렬하는 방식

1. flex-start : 위쪽부터 덩어리 형태로 배치, 여유 공간은 아래쪽에 위치
2. flex-end : 아래부터 덩어리 형태로 배치, 여유 공간은 위쪽
3. center : 교차축에 대해 수직 방향으로 기준으로 정렬
4. stretch : 컨테이너의 높이가 일정하도록 배치
5. space-between, space-around, space-evenly : justify-content와 동일 하나 기준 축이 교차 축

flex-item(자식) 관점

order

• 플랙스 아이템들의 순서를 정함.
• 모든 값은 기본값인 0 을 가짐.
• 양과 음의 정수를 모두 사용해서 정할 수 있다.

flex-basis

• 플랙스 아이템의 넓이 값을 지정.
• 값을 지정하고 남는 값은 grow / shrink로 재분배된다.
• 기본값 auto

flex-grow

• 플렉스 아이템의 넓이를 늘어나도록 정의해 줄 수 있는 속성.
• flex-basis를 정하게 되더라도 flex-grow의 속성이 우선된다.

flex-shrink

• flex-grow와 반대되는 개념.
• 아이템의 총너비의 합이 컨테이너보다 클 경우, flex-shrink의 기준대로 재 분배된다.

align-self

• flex 아이템 그 자체의 정렬을 바꿔주는 것.
• Container에서 설정 가능한 align-content or align-item은 일괄 적용이라면
• align-self는 아이템 개별로 제어가 가능.

1. stretch
2. flex-start
3. flex-end
4. center
5. baseline

[ 참고 ]

A Complete Guide to Flexbox | CSS-Tricks

모던 레이아웃 - 플렉스 박스(Flexbox)

REST?

• 역사

  • 2000년대 Roy Fielding 박사의 논문에 처음 인용됨.

  Architectural Styles and the Design of Network-based Software Architectures

  • 초간단 요약

    → 웹은 왜 이렇게 성공했고, 왜 이렇게 대규모 시스템이 성립이 된건지 소프트웨어 관점에서 분석하고 하나의 아키텍처 스타일로 정리했는데 이를 REST라 이름 지었다.

  1. 라이브러리를 개발하면서 다른 사람과 작업을 공유하고 싶음. ( 공유의 필요성 )

     • RPC 데몬을 개발. Remote Procedure Call ( 주로 유닉스 사용)
       • 보안 ,리소스 사용 취약함.

  2. 문제점 해결을 하는 동안 프로그래밍 언어, OS 에 상관 없이 해결 하도록 시도.

     • CORBA의 등장!
       • 무겁고 비쌈. ( 2000년대 1억 )
     • RMI - 자바의 RPC 데몬
       • 사내 네트워크에서는 무리 없지만, 방화벽 문제가 생긴다.
       • 기본적 방화벽은 http만 열어줌

  3. 그래서 HTTP를 쓰자!

     • 초기

       • SOAP

         • XML + HTTP 를 결한한 웹 서비스
         • Service-Oriented Architecture → 서비스지향 구조
           • 서비스를 자유자재로 정의할 수 있다 == 복잡하다.

       • ROA의 등장.

         • Resource-Oriented Architecture → 리스소 기반 구조
         • HTTP의 기본 메소드는 CURD와 매핑이 된다

          

  4. 상태값을 전달한다?

     • 결과값에 인터넷에서 발생할 수 있는 상태값을 전달한다.

       → 상태값 코드별로 대응이 가능하다.

       → 상태값 코드만 안다면 누구나 쉽게 이해할 수 있다.

     • State code 일부값

       1. 200 성공
       2. 404 Not Found
       3. 500 내부 서버 오류

     → 결과적으로 REST 구조는 HTTP 프로토콜에서 제공해주는 메커니즘을 그대로 활용한다.

• REST의 장점?

  1. 쉬운 사용
     1. 서버가 어떻게 돌아가는지 알 필요가 없고 해당 URI와 메소드 자체만 독립적으로 이해하면 됨.
  2. 클라이언트와 서버의 명확한 분리
     1. HTTP의 Stateless 한 특징
     2. 다양한 플랫폼에서 원하는 서비스를 빠르고 쉽개 배포 가능.
  3. HTTP header 와 body의 구조
     1. 헤더에 url 처리 메소드 명시
     2. body에는 필요한 데이터로 구성되어 다양한 언어를 사용할 수 있다.
  4. 웹 친화적
     • 방화벽 문제를 해결 가능
  5. 캐싱
  6. 개발자 직관적
  7. 컨텐츠 협상
     • 클라이언트가 영문 → 서버가 한글이여도 컨텐츠 협상을 통해 다르게 응답할 수 있다.

• REST의 단점

  1. 메소드의 형태가 제한적이다.
  2. 표준이 없다
     • 관리의 어려움과 공식화된 API 디자인 가이드가 없다.

구성 요소

1. Resource

   → 유일한 ID를 가지는 Resource가 서버에 존재.

   — id는 일반적으로 url을 사용한다.

   → 클라이언트 → 서버 자원의 상태를 조작하기 위해 요청을 보냄.

2. Method

   → 자원을 조작할 수 있는 것.

   • Get

     → 서버에게 Resource를 보내도록 요청.

     → 사용

     1. 자원을 읽음.

   • Post

     → 서버에 데이터를 보내기 위함.

     → 사용 :

     1. 업데이트
     2. Put과의 차이는 put은 서버 자원에 데이터를 저장 시기키 위함.
     3. Post는 데이터를 보내기 위한 용도

   • Put

     → 자원의 전체 내용을 교체할 때

     → 사용 :

     1. 모든 파라미터 (데이터의) 자원이 교체 되어야한다.

   • Delete

     → 자원을 삭제를 하도록 요청

     → 서버가 무시할 수 있다.

     → 항상 보장 되지 않음.

   • Head

     → Get과 동일하지만 서버에서 body를 주지 않음

     → 사용

     1. 자원이 존재하는지 확인
     2. 리소스 수정 되어 있는지 확인 ( context-length )

   • Connect

     → http connecct 방법.

     → http 프록시 서버에 tcp 연결을 원하는 대상으로 전달하도록 요청.

     → 사용 :

     1. 최초의 연결만 http 연결이고 이후에는 tcp 사용하여 연결함.

   • Options

     → 타겟 서버의 지원 가능한 method 확인.

   • Trace

     → 클라이언트 → Request Packet → (방화벽, Proxy Server, Gateway) → 서버

     → 이 진행 상황중 packet의 변조가 일어날 수 있다.

     → 원본 데이터와 서버 도착 데이터를 서버 응답 body를 통해 확인할 수 있다.

     → 사용

     1. 보안 취약점으로 인해 사용 중지 권장.

   • Patch

     → put과 유사하지만 부분을 바꿀 때 사용한다.

     → 사용 :

     1. 전체를 바꾸는 게 아니라 부분을 바꿀 때 사용.

3. Representation of Resource

   • 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것.

4. URI

   • Uniform Resource Identifier
   • 자원의 주소를 명시한다.

RESTFUL

REST의 제약에 따르고 있고, REST다운 것을 말한다.

필요 최소한으로 지켜야할 5가지 규칙

1. API의 ENDPOINT 가 오직 한개인가?

   • 오직 한개의 URL로 fix
   • 실제 자원에 대한 정보는 body에 전송 하도록 구현

2. 모든 방식은 POST 방식으로만 요청하는가?

   • POST , PUT, GET, DELETE 메소드를 사용해라
   • 잘한 것
     • POST /url
     • PUT /url
     • GET /url
     • DELETE /url
   • 잘못된 것
     • POST /url?cmd=insert
     • POST /url?cmd=update
     • POST /url?cmd=select
     • POST /url?cmd=delete

3. 응답에 대한 메타데이터를 BODY에 포함하는가?

   • 메타 데이터는 Header
   • Body는 오로지 리소스의 순수한데이터만!

4. URL에 동사(VERB)가 포함되어 있는가?

   • URL의 이름은 주소값 → 명사적인 특징을 가진다
   • 동사적 틍직을 가지면 혼돈이 올 수 있다.

5. URL에 RPC 호출 메서드 명령이 있는가?

   • URL에 PRC (Remote Procedure Call )사용하지 마라.

템플릿 엔진?

템플릿을 읽어 엔진의 문법과 설정에 따라서 파일을 HTML 형식으로 변환시키는 모듈.

EJS

1. 설치

npm install ejs

2. 사용

var express = require('express');
var app = express();

app.set('view engine', 'ejs');

Model -> View 로 데이터 전달.

Model에서 사용한 변수명 그대로 사용하면 된다.

..
<body>
	<h1> <%=title %> </h1>
    <ul>
    	<% for(var temp in data){ %>
        <li>
        	<%= data[temp].title %>
        </li>
        <% } %>
    </ul>
</body>
...

참고

https://ejs.co/#docs

Seo란?

-> 검색 엔진 최적화.

Robots.txt

- 검색 엔진이 어느 부분을 크롤링할지 안 할지 정함.

- Robots.txt를 읽는데 오류가 나면, 사이트를 크롤링하지 않음.

Sitemap.xml

- 크롤러가 콘텐츠를 검색하고 색인을 생성하는데 사용할 수 있는 사이트 url

일반적인 실수들

- 데스크톱과 모바일이 탐색 결과가 다른 경우.

- js 기반 , html 에 없는 항목

    - google은 js 를 크롤링 하지만 아직은 부족.

- 기본 페이지로 연결되는 link 

    - link는 크롤러가 새 페이지로 가는 경로.

커스텀 404 페이지

- 기본 404페이지가 아닌, 사이트 검색 또는 연락처 정보 추가.

-> 사이트에서 이탈 할 가능성이 줄어듬.

Google SEO 기본 개념

Title 태그

- 사용자와 검색 엔진에게 특정 페이지의 주제를 알려줌.

     - 검색 결과에 제목으로 반영.

- 참고 할만한 것

     - 페이지의 콘텐츠를 정확하고 명확하게 설명해야 함.

     - 페이지마다 고유해야 함.

     - 간결 및 내용 포함 제목 작성.

Description 태그

- 각 페이지의 요약 정보를 보여줌.

     - 검색 결과에 작은 글씨로 설명이 보여줌.

- 참고할만한 것

     - 너무 짧지도 길지도 않게, 1~2개 짧은 단락으로 설명해야 함.

     - 같은 문구를 반복적으로 사용하지 않을 것

     - 페이지의 내용을 정확하게 설명.

     - 각 페이지마다 내용에 맞는 고유한 설명

Url 구조 간결!

- 사용자, 크롤러를 위해 url을 간단하고 명료하게 만들어라.

     - 사이트 정리가 쉬움.

     - 검색 엔진이 문서를 크롤링하기도 쉬움.

     - 검색 결과에 url이 보인다.

- 참고할만한 것

     - url에 단어를 사용해라.

     - 단순한 디렉터리 구조를 만들어라.

사이트 내에서 이동하기 쉽게 만들어라.

- 사용자, 크롤러에게 사이트 내의 이동은 매우 매우 중요.

- 메인 화면에서 다른 자세한 콘텐츠가 있는 페이지로 이동을 편리하게 해라.

    - 메인 페이지 -> 관련 카테고리 목록 -> 특정 주제

- 참고할만한 것

    - 자연스러운 계층 구조.

사용자가 url을 실수하는 경우

- 커스텀 404 페이지

- 상위 페이지로 이동.

실제 사용자, 검색 엔진 두 종류의 사이트 맵 준비.

<a> 태그

- 이 텍스트는 어떠한 페이지 설명이다.라고 알려줌.

- 참고 사항

    - 이동하는 페이지의 내용을 함축하는 텍스트

    - 간결하게 적어라

    - 링크는 눈에 띄기 쉽게 만들어라.

<img> 태그

- alt 속성

     - 이미지를 표시할 수 없는 경우 대체 텍스트

     - 스크린 리더를 사용할 경우 읽어 준다. 

     - 구글 이미지 검색에 도움을 준다.

- 참고 사항

     - 간결한, 설명적인 파일 이름 및 alt 텍스트.

     - 이미지를 링크로 사용할 때 alt 텍스트 제공

     - 이미지 사이트맵 제공하기.

참고 사이트

https://static.googleusercontent.com/media/www.google.com/ko//intl/ko/webmasters/docs/search-engine-optimization-starter-guide-ko.pdf

- IE , Firefox , Chrome , Safari , Opera 등 여러 브라우저 존재.

- 같은 기본값을 사용하지 않음.

- 동일한 css 적용 했을 경우에도 다른 결과물이 보일 수 있음.

-> body, p, table 등 간격이 미세하게 다름.

- 2019 reset.css 

https://gist.github.com/DavidWells/18e73022e723037a50d6

- 참고

https://aboooks.tistory.com/115

• <article>

  • Section 태그의 하위 개념.
  • 독자적으로 이해할 수 있는 콘텐츠.
  • 웹 사이트의 나머지 부분과 독립적으로 읽을 수 있어야한다.
  • Ex) 포럼 게시물, 블로그 포스트, 신문 기사

• <aside>

  • 본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용.
  • Ex) 사이드바에 사용되며, 배너 광고, 위젯등이 있다.

• <details>

  • 사용자가 보거나 숨길수 있는 추가적인 세부 정보
  • Ex) 더보기, 상세보기

• <figcaption>, <figure>

  • 이미지에 시작적 설명을 추가하는 곳.

<figure> 
	<img src="" alt ="img1">
	<figcaption>
    	Img1 is cool
	</figcaption> 
</figure>

• <footer>

  • 문서 또는 섹션의 바닥 글을 지정한다.
  • 포함된 요소에 대한 정보를 포함해야함.
  • 여러개가 있을 수도 있다.
  • Ex) 작성자, 저작권 정보, 이용 약관 링크, 연락처 정보등이 포함됨.

• <footer>

  • 문서 또는 섹션의 바닥 글을 지정한다.
  • 포함된 요소에 대한 정보를 포함해야함.
  • 여러개가 있을 수도 있다.
  • Ex) 작성자, 저작권 정보, 이용 약관 링크, 연락처 정보등이 포함됨.

• <header>

  • 문서 또는 섹션 헤더를 지정한다.
  • 한 문서에 여러 요소가 있을 수도 있다.
  • Ex) 사이트 로고, 글로벌 링크(회원가입, 언어셋), 소개 등..

• <main>

  • 문서의 주가 되는 컨텐츠 정의

• <mark>

  • 참조나 하이라이트 표시가 필요로하는 문자를 정의

• <nav>

  • 탐색 링크의 집합을 정의한다.

• <section>

  • 일반적으로 제목이 있는 주제별 콘텐츠 그룹.
  • 문서의 section을 의미한다.
  • 내부에 header, footer 가 올 수 있는데, 이 때 사용 되는 태그는 해당 영역에 대한 제목, 꼬리말로 사용된다
  • Html5 시맨틱 태그의 주요한 부분

• <summary>

  • details에 대한 보이는 요소를 정의.

• <time>

  • 날짜 / 시간 정의