웹 표준
- W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
- 운영체제나 브라우저에 상관없이 어떤 환경에서도 이용할 수 있는 웹 페이지를 만들기 위한 제작기법
- 웹 개발에 사용되는 언어인 HTML(구조), CSS(표현), JavaScript(동작) 등의 기술을 다룸.
웹 표준의 장점
1. 유지 보수의 용이성
- 웹 표준으로 HTML, CSS, JavaScript 등의 사용 방법을 정리하기 이전에는 구조, 표현, 동작이 뒤섞인 코드도 많았다.
- 각 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 생겼다.
2. 웹 호환성 확보
- 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 상관없이 항상 동일한 결과가 나오도록 할 수 있다.
3. 검색 효율성 증대
- 웹 표준에 맞춰 웹 사이트를 작성하는 것 만으로도 검색 엔진에서 더 높은 우선 순위로 노출될 수 있다.
- 적절한 HTML 요소의 사용, 웹 페이지에 대한 정확한 정보 작성 등 검색 효율성과 관련된 내용도 웹 표준에서 다루고 있기 때문.
4. 웹 접근성 향상
- 브라우저의 종류, 운영 체제의 종류, 기기의 종류 등 웹에 접근할 수 있는 환경은 매우 다양. 또한 웹을 사용하는 사람들도 다양.
- 이러한 다양한 환경과 사용자가 웹 페이지를 접근할 수 있도록 해준다.
Semantic HTML (시맨틱 HTML)
👉🏽 의미를 가진 HTML
- semantic : 의미의, 의미가 있는
- HTML : 화면의 구조를 만드는 마크업 언어
시맨틱 요소로 구성한 화면
<div>와<span>만으로 화면을 구성했을 때와 비교하면, 각 요소의 이름만 보고도 어떤 역할인지, 어떤 내용이 담겨있는지 명확하게 알 수 있다.
semantic HTML의 필요성
1. 개발자간 소통
- 협업 시 페이지 구조와 기능을 파악하는데 드는 시간과 노력을 줄일 수 있다.
2. 검색 효율성
- 검색 엔진은 HTML 코드를 보고 문서 구조를 파악한다.
- 시맨틱 요소를 사용하면 검색 결과 상단에 더 자주 뜨는 효과를 볼 수 있다.
3. 웹 접근성
- 나이, 성별, 장애 여부, 사용 환경을 떠나서 동일한 수준의 정보를 제공할 수 있다.
- 예를 들면 시각장애인이 스크린 리더를 이용해서 웹 페이지에 접근할 때 시맨틱 요소로 구성돼 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있다.
자주 사용되는 시맨틱 요소
<header>
- 페이지나 요소의 최상단에 위치하는 머릿말 역할의 요소입니다.
<nav>
- 메뉴, 목차 등에 사용되는 요소입니다.
<aside>
- 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소입니다.
<main>
- 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소입니다.
<article>
- 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소입니다.
- 각각의
<article>을 구분하기 위한 수단이 필요하며, 보통 제목(<hgroup>)을 포함하는 방법을 사용합니다.
<section>
- 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용합니다. 제목(<
hgroup>)을 포함하는 경우가 많습니다.
<hgroup>
- 제목을 표시할 때 사용하는 요소로,
<h1>~<h6>요소가<hgroup>입니다.
<footer>
- 페이지나 요소의 최하단에 위치하는 꼬릿말 역할의 요소입니다.
자주 틀리는 마크업
1. 인라인 요소 안에 블록 요소 넣기
- 인라인 요소는 항상 블록 요소 안에 들어가야 한다.
- 블록 요소는 인라인 요소 안에 들어가면 안된다.
// h1, div 요소는 블록 요소이고, // a, span 요소는 인라인 요소입니다. <a href=""> <h1>나쁜 예시 1</h1> </a> // ❌ <span> <div>나쁜 예시 2</div> </span> // ❌
2. <b>, <i> 요소 사용하기
- 시맨틱하지 않은
<b>,<i>요소보다<strong>요소와<em>요소 사용
하기
<b>글씨를 두껍게</b> // ❌ <i>글씨 기울이기</i> // ❌ <em>콘텐츠 기울여서 강조하기</em> // ✅ <strong>콘텐츠 매우 강조하기</strong> // ✅
3. <hgroup> 마구잡이로 사용하기
<hgroup>요소들은 콘텐츠의 상하 관계를 표시하기 위해서 사용 (목차의 역할)- 그냥 시각적으로 글자 크기를 표현하기 위해 (스타일 속성처럼) 사용해서는 안됨. (잘못된 구조 정보를 전달하게 됨)
// ❌ <h1>엄청 큰 글씨</h1> <h3>적당히 큰 글씨</h3> <h2>큰 글씨</h2> <h6>엄청 작은 글씨</h6> <h4>그냥 글씨</h4> // ✅ <h1>제목</h1> <h2>큰 목차</h2> <h3>작은 목차</h3> <h3>작은 목차</h3> <h2>큰 목차</h2> <h3>작은 목차</h3> <h4>더 작은 목차</h4> <h4>더 작은 목차</h4>
4. <br /> 연속으로 사용하기
<br />은 텍스트의 줄 바꿈을 해주기 위해 사용하는 요소.- 요소 사이에 간격을 만들기 위해
<br />을 연속으로 사용해서는 안됨.
// ❌ 요소 사이에 여백을 주고싶을 때 <br /> <br /> 이렇게 하시면 안 됩니다. // ✅ 예1) <p>요소 사이에 여백을 주고싶을 땐</p> <p>아예 별도의 단락으로 구별하세요.</p> // ✅ 예2) //HTML 파일 <p class="margin">요소 사이에 여백을 주고싶을 땐</p> <p class="margin">CSS 속성으로 여백을 설정해주세요.</p> //CSS 파일 .margin { margin: 10px }
5. 인라인 스타일링 사용하기
- 웹 표준으로 HTML, CSS, JavaScript 영역을 분리.
- HTML 요소 안에 인라인으로 스타일링 속성을 설정하는 것은 기껏 분리한 영역을 다시 합치는 것과 같다.
- 웹 표준을 지키기 위해서는 HTML과 CSS 코드를 분리해서 작성.
//HTML 파일 <head> <style> h1 { color : "red" } </style> </head> (O) <h1>스타일링 속성은 CSS로 작성해주세요.<h1> (O) <h2>style 요소를 사용해도, CSS 파일을 따로 작성해도 괜찮습니다.<h2> (X) <h3 style="color: blue">이렇게 인라인 스타일링으로는 사용하지 마세요.</h3> //CSS 파일 h2 { color : "yellow" }
크로스 브라우징
- 웹 사이트에 접근하는 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
- '동일한'이 아니라 '동등한' 수준의 정보와 기능을 제공
(브라우저들의 렌더링 엔진이 각자 다르므로 완전히 동일한 화면을 만드는 것은 불가능)
- 크로스 브라우징의 가장 큰 걸림돌이었던 故 Internet Explorer
크로스 브라우징 워크 플로우
1. 초기 기획
- 필요한 콘텐츠와 기능 파악 + 디자인
- 타겟 고객층의 브라우저와 기기 파악
👉🏽 이에 맞는 기술을 사용해서 개발할 수 있도록 기획
2. 개발
- 사용할 코드가 각 브라우저에서 호환성이 어떤지 파악하고 사용
코드 호환성 확인하기
3. 테스트 / 발견
- 기능 구현 후 테스트 하기
- 안정적인 데스크톱 브라우저(크롬, 엣지, 파이어폭스, 오페라, 사파리 등)에서 테스트
- 휴대폰 및 태블릿 브라우저(삼성 인터넷, 사파리, 안드로이드 기기의 크롬 등)에서 테스트
- 그 외 초기 기획 단계에서 목표했던 브라우저에서 테스트
- Window, Linux, Mac 등 다양한 운영 체제에서도 테스트
- 자동 테스트 도구 이용할 수도 있다. (TestComplete, LambdaTest, BitBar 등의 크로스 브라우징 테스트 툴)
4. 수정/반복
- 테스트 단계에서 발견한 버그 수정
- 버그 발생 위치(브라우저)를 최대한 좁혀서 특정하고, 버그 발생하는 특정 브라우저에서의 해결 방법 정하기
- 섣불리 코드를 수정했다가 다른 부라우저에서 버그가 발생할 수 있으므로, 조건문을 작성해 해당 브라우저에서 다른 코드를 실행하게 하는 방식으로 고쳐나가는 것이 좋다.
- 수정이 완료되면 3번 과정부터 반복.
SEO
- Search Engine Optimization, 검색 엔진 최적화
- 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업
On-Page SEO
- 말 그대로 페이지 내부에서 진행할 수 있는 SEO
- 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법.
Off-Page SEO
- 웹 사이트 외부에서 이루어지는 SEO
- 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법
- 웹 페이지 내용이나 구조와는 관계가 없다.
SEO 예시
<meta>요소와<title>요소에 검색 키워드(프론트엔드,부트캠프) 넣기
SEO에 영향을 미치는 요소
1. <title> 요소
- 검색 결과창에서 제목에 해당하는 요소
<head>요소의 자식 요소로 작성<title>요소에 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있음
2. <meta> 요소
<head>요소의 자식 요소로 작성
SEO를 위한
<meta>요소
- 검색 결과창에서 제목 밑에 따라오는 설명글
name속성 사용
<meta name="속성값" content="내용" />주요 속성값 (
name의 값)
description: 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용keywords: 웹 페이지의 관련 키워드들을 나열할 때 사용author: 콘텐츠의 제작자를 표시
공유를 위한
<meta>요소 (= 오픈 그래프(Open Graph))
- 링크 공유 시 뜨는 미리보기 관련 정보
<property>속성 사용 (공유하기 위해 사용)- 각 속성값 앞에 오픈 그래프를 뜻하는
og가 붙음.- 링크를 통해 해당 페이지에 방문자 수가 많아지면 검색 시 상위에 노출될 확률이 올라간다.
<meta property="속성값" content="내용" />주요 속성값 (
property의 값)
og:url: 페이지의 표준 URLog:site_name: 사이트의 이름og:title: 콘텐츠의 제목입og:description: 콘텐츠에 대한 간략할 설명. 검색 결과에서 제목 밑에 뜨는 내용og:image: 미리보기로 표시될 이미지og:type: 콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등의 유형을 표시할 수 있다.og:locale: 리소스의 언어로, 기본값은 en_US. 한국은 ko_KR.
3. <hgroup> 요소
- 콘텐츠의 제목을 표시하는 용도의 요소이기 때문에 검색엔진도 중요하게 취급.
4. 콘텐츠
개성있는 브랜딩
- 겹치지 않는 이름과 아이디어
복붙 금지
- 타 사이트를 복붙하면 검색 엔진은 중복 문서로 판정해 검색 결과에서 생략해버리기도 한다.
- 그렇지 않더라도 먼저 작성된 글이 먼저 뜰 확률이 높다.
간결한 제목과 설명글
- 같은 키워드 반복하면 스팸 요소 있는 사이트로 분류될 가능성도 있다.
최대한 글자로 작성하기
- 글자를 이미지로 만들어 작성하지 않기. (검색 엔진은 이미지의 글자를 읽을 수 없다)
- 이미지를 넣어야 한다면
alt속성을 사용해 해당 이미지에 대한 설명을 텍스트로 작성하기 (but 너무 길면 스팸 요소로 인식할 수 있음)
<img src="코드스테이츠_로고.png" alt="코드스테이츠 로고" /> // ✅ <img src="코드스테이츠_로고.png" alt="프론트엔드 백엔드 블록체인 프로덕트매니지먼트 인공지능 데브옵스 등 다양한 커리어 전환 부트캠프를 진행하는 코드스테이츠 로고" /> // ❌
