[멋쟁이사자처럼] 프론트엔드스쿨 7기 - 13일차 기록 및 복습

---

목차

1. form 관련 동적 가상 선택자

2. HTML 구조 잡기

3. 로그인 페이지 만들기

4. 검색 엔진 최적화

---

1. form 관련 동적 가상 선택자

<form> 태그는 사용자에게 입력 받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다.

하지만 별도로 사용자 입력 정보를 제출할 필요가 없다면 form 태그를 사용하지 않아도 된다.

 

1-1. 동적 가상 선택자 ( : 으로 시작)

- : enabled, : disabled  활성활/비활성화

- :read-only, :read-write 편집 가능/불가능

- :checked  유형이 check-box/radio 로 선택된 상태

- :required 필수 입력값

 

1-2. 가상 요소 ( :: 으로 시작)

- ::placeholder 입력에 대한 추가 정보가 있을 경우

2. HTML 구조 잡기

2-1.  구조잡기 (10분)

- 연차가 쌓일수록 구조를 잡고 코드 작업에 들어가는 습관이 중요하다. 구조 분석과 작업의 일관성이 생긴다.

- 반복되는 요소를 파악하며 구조를 분석하고, 논리적 마크업 순서를 고려하며 작업 순서를 계획한다.

원본 디자인

구조 분석 결과

3. 로그인 페이지 만들기 : 두근두근 비밀일기

3-1. 구조 분석하기

- <a> 는 단순이동, <button> 는 JavaScript 와 연동해서 데이터를 다루는 기능을 한다.

- (많이 만들어 보시라) 10 page 만드는 사람 보다, 100 page 만드는 사람이 많은 기본기와 메모리가 쌓인다.

- 사용자와 상호작용하면 form 태그로 묶어준다.

원본 디자인

구조 분석 결과

 

3-2. HTML/CSS 만들기 (30분)

- 이미지에 아래 공백이 생기는 이유는 inline 요소이기 때문에, text (vertical-align)는 baseline 기준으로 정렬되어 있기 때문이다. 그래서 보통 img 태그는 초기값으로 vertical-align: top; 으로 초기화해서 많이 사용한다.

inline 요소의 vertical-align 기준

- 폰트 적용후 개발자도구 (계산됨) 제일 아래서 랜더링된 글꼴을 확인할 수 있다.

- icon 을 스크린 리더에게 인식될 필요없고, 이미지가 변경될 일이 거의 없으면 이미지를 background로 넣는다.

- 이미지 액(스)박(스) 뜨는 것을 고려해서 요류를 감추려면  img 태그 대신 CSS background 요소로 넣는다.

- <img> 태그는 저장소의 경로가 잘못되면 액박이 뜬다.

- 파비콘(Favoriate icon, 즐겨찾기 아이콘) 을 이용해  웹 브라우저 상단에 있는 탭에 표시한다.

로그인 화면 결과물 (+ 파비콘 적용)

See the Pen Untitled by redcontroller (@redcontroller) on CodePen.

 

3-3. 미디어 쿼리 : @media (조건) { ... }

- style sheet 규칙 (@) 으로 반응형 작업을 할 때 사용한다.

- 유형 all : (기본값 유형) 모든 장치를 대상으로 함

- 유형 print : 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경우

- 유형 screen : 모니터나 스크린이 있는 디바이스를 의미

- 유형 speech : 음성 합성장치 대상

- width: 스크롤바를 포함한 뷰포트의 너비

- height: 뷰포트의 높이

- orientation: landscape 가로방향이 길이가 세로 길이보다 클 때

- orientation: portrait 세로방향이 길이가 가로 길이보다 클 때

- aspect-ratio : 뷰포트의 가로세로비

- resolution : 출력장치의 픽셀 밀도 - 단위 dppx (Device pixel ratio)

https://johankj.github.io/devicePixelRatio/

What’s My Device Pixel Ratio?

- min-, max- : 최소 조건, 최대 조건

- 논리연산자 and (조건을 몰두 반족)

- 논리 연산자 not : 조건을 반전하는 경우 (반드시 미디어 유형을 지정해야 함)

- 논리 연산자 ',' : 조건 중 하나라도 만족하는 경우

- 논리 연산자 only : 미디어쿼리르 지원하는 브라우저에서만 작동

 

각 기기별 사이즈와 중단점(break point)이 다르다.

https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Material Design

 

3-4. 미디어 쿼리 실습 (grid / flex)

- grid 를 이용한 실습. 미디어 쿼리를 적용해 뷰포트 크기에 따라 구성 요소의 비치를 유연하게 변경가능하다.

 

4. 검색 엔진 최적화 (SEO)

4-1. SEO (Search Engine Optimization)

<meta name="description" content="제주 ICT 코딩 컴퓨터학원, 연구원, 출판사">

- 검색 엔진 최적화를 위해 위 같은 값들을 지정할 수 있다.

- google 같은 경우 홈페이지 내 youtube 영상을 포함하면 좀 더 상위로 올라간다.

- SEO 정책의 기조는 검색 포털별로 다르며, 매번 달라진다. (대행해주는 업체가 있음)

 

4-2. 검색엔진 가이드

- 검색엔진이란 웹이나 컴퓨터 시스템에 저장된 정볼ㄹ 찾아주는 프로그램으 의미한다.

- 구글 검색, 네이버 검색, 다음 검색 등이 우리가 흔히 사용하는 검색 엔진을 사용한다.
- naver 가이드 : https://searchadvisor.naver.com/guide/

- 다음 가이드 : https://cs.daum.net/faq/15/15649.html#31070

- 구글 가이드 : https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko

- 검색엔진에 우리가 젲가한 사이트가 얼마나 빠르게 얼마나 상위에 노축되는가가 중요한 화두로 떠올랐고 이런한 방법들을 모아 웹사이드에 적용한 것을 검색엔진 최적화라고 한다.

 

4-3.  황금 삼각형 (아이트레킹 결과)

- 상위 검색 결과만을 확인한다.

2005년&nbsp;google 검색창 아이트레킹 연구 결과

4-4. 검색엔진 가이드

- URL 가이드

 (1) 언더바 사용 금지. 단어 구분은 대쉬(-) 를 사용 (구글 검색 엔진이 하이픈을 단어 구분자로 취급)

 (2) 최대한 짧지만 해당 페이지를 유추할 수 있는 단어로 구성 (url 주소 자체에 키워드를 포함하기)

 (3) depth 는 2-4 정도, 6이하 (example.com/depth1/depth2/depth3/depth4/)

 (4) 대표 url 설정하기 (canoical 캐노니컬 태그)

<link rel="canonical" href="https://example.com/"/>

- <title> 태그를 통해 정확한 페이지 제목 명시. 짧고 간결한 제목 (60자 이내). 사용자의 피로도를 낮추기 위해 페이지 제목을 먼저, 그리고 사이트의 제목을 적어주는 것이 좋다.

- <meta> 태그 description 속성에 페이지가 담고 있는 내용을 요약하여 서술 (약 250자 이내, 너무 많은 키워드 반복은 스팸으로 의심됨)

- <og> 태그: (The Open Graph protocol) 표준은 아니지만 중요하다. 많은 링크들이 가르키는 페이지는 중요한 페이지로 판단되며, 중요한 페이지로 판단되면 페이지 순위가 높아진다. sns는 간접적인 트래픽을 유발하고 방문자를 일으키는 좋은 수단이다. 때문에 좀 더 보기 좋은 링크를 만들어 방문을 유도하는것은 SEO에 매우 중요하다. 일반적인 공유 프로토콜로 Meta, Twitter, Discord 같은 SNS 에 주로 사용된다. (카드형태의 공유 프로토콜)

- 마크업 웹 표준 규약 준수

https://validator.w3.org/

The W3C Markup Validation Service

(1) 제목 태그(h1~h6) 를 사용하여 중요한 텍스트 강조

(2) <img> 태그의 alt 로 대체 텍스트 넣기

(3) strong, em 등을 사용하여 키워드 강조

(4) <a> 태그 내에 의미있는 링크 텍스트 작성하기

- robot.txt 파일 작성 : 사이트에서 크롤러 액세스를 제어할 수 있다.

- sitemap.xml 파일 작성 : 웹 사이트 내 모든 페이지의 목록을 나열한 파일. 검색엔진에게 사이트 내 모든 페이지 목록을 제공하여 크롤링되고 색인 될 수 있게 도와준다.

- 페이지 링크가 잘 연결되는지, 깨진 링크가 없는지 체크

https://www.brokenlinkcheck.com/

Free Broken Link Checker - Online Tool

- 도메인 권위도 체크 : 권위도가 높은 사이트에 링크가 맣이 연결될수록 좋다.

https://smallseotools.com/domain-authority-checker/

- 사이트 속도 측정

https://pagespeed.web.dev/?utm_source=psi&utm_medium=redirect 

PageSpeed Insights

- 키워드 밀도 높이기

https://www.internetmarketingninjas.com/tools/keyword-density/

Keyword Density Analysis Tool

- Lighthouse : 웹 페이지 품질 개선을 위해 제공되는 자동 검사 도구

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko 

Lighthouse

- 파비콘 만들기 :

파비콘이란 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지이다.

즐겨찾기 아이콘((favorite icon) 의줄임말로주로 웹 브라우저 상단에 있는 탭에 표시된다. 그 외에도 브라우저의 북마크바나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 한다. 파비콘은 사이트의 SEO 에 직접적인 영향을 주지는 않는다. 하지만 브라우저에서 사이트가 돋보일 수 있도록 해주기 때문에 전반적인 사용자 경험을 향상시킬 수 있다.

이미지 파일을 웹에 업로드하면 ico 파일로 변환해준다.

https://convertico.com/#google_vignette

ConvertICO.com - Convert PNG to ICO and ICO to PNG files