프론트엔드 로드맵 스터디 #2 #HTML

so ez·2021년 12월 13일
0

HTML

🌼 기초 배우기

html이란?

HTML은 HyperText Markup Language의 약자이다.
웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.

html 태그

HTML을 구성하는 태그는 디자인이나 기능을 결정하는데 사용된다.

<tag> //시작 태그
  내용
</tag> //종료 태그

태그는 이런식으로 꺽쇠 괄호로 감싸져있는데, 같은 이름이되 종료태그 앞에는 슬래시가 붙는다.
태그에 따라 시작태그만 있고 종료태그가 없는 경우도 있지만(img, br, hr 등),
react에서는 종료태그를 엄격하게 감시하므로

<tag />

이런식으로 시작태그 안에서 종료를 선언해주기도 한다.
html 태그는 너무도 많아서, 각 태그에 대한 설명은 여기서 읽도록 하자~!
(html을 꽤 많이 다뤄봤다고 생각했는데 처음보는 태그가 정말 많다..)

태그는 스윽 읽고 넘기고, 실용적인 태그는 아래 의미론적 html작성에서 내일의 나와 알아보자😉

html 버전


버전은 위와 같이 구분되는데, html 선언 상단에 DOCTYPE 선언 방식의 차이가 있는듯하다.
(나는 실무에서 html5만 썼는데 XHTML 1.0 본거같기도;)

🌼 의미론적(Semantic)인 HTML 작성

html의 시맨틱 태그란?

이름 자체만으로도 의미를 전달할 수 있는 태그를 의미한다.
non-semantic 태그인 <div>는 태그만으로 의미를 파악할 수 없지만
sementic 태그인 <header>, <nav>, <img> 등의 태그는 이름만 보더라도 의미를 유추할 수 있다.

시맨틱 태그는 알겠고, 이걸 써야하는 이유는 뭘까?

시맨틱 태그를 써야하는 이유

  1. 웹 브라우저의 가독성을 높여준다.
    웹 브라우저가 html의 소스 코드만 보고 어느 부분이 제목인지(<header>), 어느 부분이 네비게이션인지(<nav>), 그리고 보여주고자 하는 내용은 무엇인지(<section>, <article>) 등을 쉽게 알아낼 수 있게된다.
    그럼으로써 글을 소리로 알려주는 스크린 리더기등을 사용하는 시각장애인이 사이트의 구조를 소리로 구분하여 듣는데도 도움이 된다. (웹접근성을 높임)

  2. 검색엔진의 색인에 도움을 준다.
    검색엔진이 검색을 수행할 때 html 태그를 분석하는데, 시맨틱 태그를 적극 활용한다면 검색엔진 입장에서 구분이 쉬워진다.
    결과적으로 검색의 노출을 높이고 정확한 검색결과를 제공할 수 있다.

  3. 코드 가독성이 높아지고 유지보수가 쉬워진다.
    처음보는 html 문서이더라도 시맨틱 태그로 작성되어있다면 각 요소들이 무엇을 목적으로 작성되었는지 빠르게 파악할 수 있다.

대표적인 시맨틱 태그

<header>
문서의 header를 나타낼 때 사용하고 사이트 로고, 글로벌 링크, 소개 등을 넣음

<nav>
문서의 navigation을 나타낼 때 사용하고 보통 메뉴 영역으로 사용함
브라우저가 네비게이션 영역을 알 수 있게되면, 검색엔진 색인에 도움을 줄 수 있음

<main>
해당 페이지의 main 콘텐츠를 나타냄
main 요소는 한 페이지에서 한번만 사용 가능함

<section>
관심사 그룹에 따라 구획을 구분하기 위해 사용하는 요소
section요소는 문법상 반드시 <h1>~<h6>태그를 가져야 함
섹션의 관심사가 무엇인지 검색로봇에 알려줌

<article>
관심사에 따라 글을 작성하기 위해 사용하는 요소
article 태그 내용이 독립적으로 존재해도 되는 경우에 쓰임
반드시 <h1>~<h6>태그를 가져야 함
article안에 section이 있어도 되고 그 반대도 가능함

<aside>
본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용함
주로 사이드바, 배너광고, 위젯 등으로 이용함

<footer>
문서의 footer를 나타낼 때 사용하고 주소나 연락처, 저작권 등을 넣음
문서 내에서 한번만 사용되지만, 분리되어있는 section이나 article의 해당 영역에 대한 footer로 사용할 수 있음

🌼 폼과 유효성 검사

폼(Form)

form이란 html 태그로, 사용자가 정보를 입력하고 서버로 데이터를 전송할 때 사용한다.
form 자체의 속성(이름을 지정하는 name, 전송 경로를 지정하는 action, 전송 방식을 지정하는 method 등)과 서버에 넘길 데이터 값을 입력받는 컨트롤 요소(control elements)로 구성된다.

<form action="처리할 페이지 주소" method="get (또는) post">//form 의 속성
	컨트롤 요소
</form>

* form 속성
name
폼 이름을 지정한다. 스크립트에서 폼을 참조할 때 필요하다.

action
입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.
해당 주소로 전달된 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

method
action에 명시된 위치로 데이터를 서버에 전달되는 방식을 결정하는 속성이다.

  • get : 이 방식은 주소에 데이터를 추가해 전달한다.
    따라서 데이터가 주소 입력창에 그대로 나타나 보안성이 취약하고, 데이터 크기 또한 제한적이다.
    검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 떨어지는 정보를 보낼 때 주로 사용한다.
  • post : 이 방식은 데이터를 별도로 첨부해 전달한다.
    보안성 및 활용성이 GET보다 높다.

accept-charset
승인된 문자 세트(accepted character set encoding)을 지정한다.
일반적으로 HTML 문서에 적용된 문자 세트가 적용된다.
그런데 폼에 입력된 문자를 문서 전체에 적용된 문자 세트로 표현할 수 없는 경우도 있을 수 있다.
이럴 때 accept-charset 속성을 사용하여 적절한 문자 세트를 적용시킬 수 있다.

enctype
인코딩 타입(encoding type)을 지정한다.
이 속성에 의해 브라우저는 입력된 데이터를 서버로 보낼 때 어떤 타입으로 인코딩해야 하는지 알 수 있는데 인코딩 타입은 다음과 같이 세 가지 중 하나를 지정한다.
- enctype="application/x-www-form-urlencoded" : 서버에 보내기전에 모든 문자를 인코딩하는 방식이며 폼에 텍스트 데이터를 포함했을 때 지정한다(기본값).
- enctype="multipart/form-data" : 파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용된다.
- enctype="text/plain" : 일반 텍스트로 인코딩된다.

novalidate
HTML5에 새롭게 추가된 속성으로서, 유효성 미확인을 지정한다.
이 속성을 지정하면 폼에 입력된 데이터를 서버로 보낼 때 데이터를 체크하지 않는다.

* 컨트롤 요소(control elements)
input 텍스트 입력값을 받음
textarea 텍스트 영역 필드
radio 여러 항목중 하나를 선택값으로 받음
checkbox 여러 항목에 대하여 개별적으로 선택하며 여러개의 선택값을 받을 수 있음
select 드롭다운 형태의 선택목록에서 하나의 항목에 대한 선택값을 받음
등이 있음

유효성검사

form에서 서버로 데이터를 넘길 때 모든 입력값들이 올바른 형식이고 설정된 제약조건 내에서 작성되었는지 (최소값 최대값의 범주, null값 확인, checkbox 확인) 확인하는 과정을 유효성 검사라고 한다.
서버에 넘기기 전 검사하는 것을 클라이언트 측 form 유효성 검사라고 하며,
서버에서 수행되는 유효성 검사는 서버 측 form 유효성 검사라고 한다.
유효성 검사를 통해 데이터가 불필요하게 왕래하며 발생하는 지연시간을 줄일 수 있으며 잘못된 데이터로 인해 프로그램이 손상되는 것을 방지할 수 있다.

🌼 컨벤션과 모범 사례(Best Practice)

컨벤션이란?

코딩 컨벤션은 읽고, 관리하기 쉬운 코드를 작성하기 위한 코딩 스타일 규약(작성 표준)이다.
회사, 팀마다 규약을 정하는 것이기 때문에 컨벤션은 매번 다를 수 있다.

여러명이 협업할 때 컨벤션을 빛을 발한다.
특히 다른 언어에 비해 유연한 문법구조를 가진 언어일수록(예를 들면 자바스크립트) 개발자 간 통일된 규약이 없다면 코드의 의도를 파악하거나 오류를 찾기 어려우며 유지보수 비용이 늘어난다.
그러나 컨벤션을 지키면 가독성이 높아져 소스 코드를 처음 접하는 사람들도 빠르고 쉽게 이해할 수 있어지므로 협업이 쉬워지고 유지보수에 유용하다.

모범사례

아래와 같이 문서로 세세하게 규칙을 정하여 하는 방법이 모범사례일 수 있겠다.
NHN 코딩 컨벤션 문서

모범사례같이 하기는 힘들더라도, 당장 회사에서 프로젝트를 진행하며 네이밍에 대해 약속하고 진행하는것(폴더와 파일 네이밍, html, css에서의 id와 class 네이밍)도 컨벤션이라고 할 수 있으며,
같은 코드정리 툴(예를들면 prettier)을 사용하여 들여쓰기 등을 맞추는 것도 컨벤션이라고 할 수 있겠다.

🌼 접근성

접근성이란?

한국 웹 접근성 인증평가원에서는 웹 접근성에 대해서 다음과 같이 설명하고 있다.

정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.

비장애인과 동등한 경험을 보장하는것이 웹 접근성이라고 요약할 수 있다.

웹 접근성 준수 고려사항

한국 웹 접근성 인증평가원에서는 네가지 고려사항을 제시한다.

1. 시각
실명, 색각 이상,다양한 형태의 저시력을 포함한 시각 장애
2. 이동성
파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로
인한 근육 속도 저하,
근육 제어 손실로 말미암아
손을 쓰기 어렵거나 쓸 수
없는 상태
3. 청각
영상, 음성 콘텐츠에 자막, 원고, 수화등의 대체수단 부제로인한 인식이 불가능한 상태
4. 인지
문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애(난독증, 난산증 등)

보조과학기술

우리가 이미지 alt 값 등을 넣어 웹 접근성을 준수하면,
다음과 같은 기술이 접근을 도와준다.

1. 스크린 리더 소프트웨어
2. 화면 확대 도구
3. 음성 인식
4. 키보드 오버레이

사담을 하자면, 며칠 전 제주도에 놀러 온 친구가 추천해 준 어플이 있다.
'Be my eyes' 라는 어플이다.
어플 이름과 같이 시각장애인을 돕는 어플인데,
시각장애인이 도움(지금 불이 켜져있는지 꺼져있는지, 유통기한이 얼마나 남았는지, 횡단보도를 건너는 일, 고지서 종류와 금액 등을 물어보는 등의 일)을 요청하면 어플을 다운로드받은 주변 지원자들에게 영상통화가 간다.
직접 가서 도와줄 수도, 통화로 알려줄 수도 있다.
이상하게 눈물이 났다.
첫 번째로 아이디어와 기술로 한층 따뜻한 세상을 만든 기획자와 개발자에게 감동해서(그리고 부러워서),
두 번째로 어플리케이션에 가입한 시각장애인보다 훨씬 많은 수의 자원봉사자들을 보고 상승하는 인류애에.
웹 접근성 파트를 공부하다 위의 기억이 떠올랐고, 다짐하게 됐다.
우리는 미래를 예측 할 수 없다.
우리 모두가 웹 사이트를 불편하게 경험하는 상황(혹은 전혀 이용하지 못하게 되는 상황)에 언제 놓이게 될 지 모른다.
당장 홈페이지를 만들 때 내가 할 수 있는 최선을 다 해 접근성을 지키자.

🌼 기본 SEO

SEO란?

search engine optimization의 약자로, 검색 엔진 최적화을 의미한다.
검색 엔진 최적화란 검색 엔진으로부터 웹사이트(웹페이지)에 대한 트래픽의 품질과 양을 개선하는 과정이다.
쉽게 말해 검색을 했을 때 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 의미한다.

구글은 검색하는 사람들에게 긍정적인 사용자 경험을 선사하는 것이 목표이기 때문에 가능한 한 최고의 정보를 제공하길 원한다.
따라서, 특정 검색어에 대해 나의 콘텐츠를 주요한 정보로 인식하도록 하는 과정에 포커스를 맞추어야 한다.
구글에서의 기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다.
구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하기 때문에 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화한다.

하지만 네이버 등 한국의 포털 사이트의 경우, 검색 엔진의 우선순위 배치에 해외와 다른 기준을 적용하고 있으며 보편적인 SEO를 적용시 경우에 따라 오히려 스팸으로 분류될 수 있다.
이는 자사 블로그에 노출 우선 순위를 두었기 때문이며, 한국의 검색 엔진에 노출되기 위해서는 사이트 콘텐츠가 웹문서가 아닌 블로그 포스트로 등록되는 방향으로 최적화해야 한다.

profile
여기 프론트엔드 개발자 죽어가요

0개의 댓글