웹 표준
: W3C (World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’
→ 어떤 환경(운영체제, 브라우저 등)에서도 이용할 수 있는 웹 페이지를 만들기 위해
→ 웹 개발에 사용되는 언어인 HTML, CSS, JavaScript 등의 기술을 다룬다.
웹 표준의 장점
- 유지 보수의 용이성 (코드의 경량화)
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
(참고) 인터넷 ⊃ 웹
- 인터넷 : 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망
- 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간
Semantic HTML
(semantic : 의미의, 의미가 있는)
- 필요한 이유?
1. 개발자간 소통 2. 검색 효율성 3. 웹 접근성
- 자주 사용되는 시멘틱 요소
| 요소 종류 | 설명 |
| <header> | 페이지나 요소의 최상단에 위치하는 머릿말 |
| <nav> | 메뉴, 목차 등에 사용되는 요소 (보통 링크를 달고 있음) |
| <aside> | 문서와 연관은 있지만, 직접적인 연관은 없는 내용을 담는 요소 |
| <main> | 주요 콘텐츠를 담는 요소 |
| <article> | 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분. 각각의 <article>을 구분하기 위해 보통 <hgroup>을 이용한다. |
| <section> | 문서의 독립적인 구획. 딱히 적합한 의미의 요소가 없을 때 사용 |
| <hgroup> | 제목을 표시할 때 사용하는 요소. <h1> ~ <h6> |
| <footer> | 페이지나 요소의 최하단에 위치하는 꼬릿말 |
[ 자주 틀리는 마크업 ]
1. 인라인 요소 안에 블록 넣기 X
- 블록 요소 : 가로로 넓게 한 줄을 차지 (ex. <div>, <h1>)
- 인라인 요소 : 콘텐츠가 차지하는 만큼만 영역을 차지 (ex. <span>, <a>)
2. <b>, <i> 요소 사용 X
- 글씨를 두껍게 만들고 싶을 땐 → <b> 대신 <strong> 쓰기
- 글씨를 기울이고 싶을 땐 → <i> 대신 <em> 쓰기
3. <hgroup> 마구잡이로 사용 X
시각적인 차이가 필요할 땐 CSS를 이용하자!
4. <br /> 연속으로 사용 X
쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해 사용하는 태그이다.
마찬가지로 시각적인 차이를 주고 싶을 땐 CSS를 이용하자.
5. 인라인 스타일 X
웹 표준을 지키기 위해서는 HTML과 CSS 코드를 분리하여 작성하는 것이 좋다.
크로스 브라우징
: 브라우저의 종류에 상관 없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업.
cf. 동일한 화면이 X
- 호환성을 확인할 수 있는 사이트 : MDN, Can I Use(https://caniuse.com/) 등
- 크로스 브라우징 테스트 툴 : TestComplete, LambdaTest, BitBar 등
SEO (Search Engine Optimization, 검색 엔진 최적화)
: 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업
(참고)
- On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법. 웹 페이지의 내용이나 구조와는 관계가 없다.
1. <title> 요소
검색 결과창에서 제목에 해당하는 요소로, <head>요소의 자식 요소로 작성한다.
사용자가 파악하기 쉬운 제목, 핵심 키워드를 포함하는 것이 좋다. (반복 X)
2. <meta> 요소
메타 데이터, 즉 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터를 담는 요소로, 역시 <head> 요소의 자식 요소로 작성한다. 검색 결과창에서 제목 밑에 따라오는 설명글이 <meta>요소안에 들어있는 내용이며, name 속성을 사용한다.
<meta name="속성값" content="내용" />
// 주요 속성값
// description : 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용.
// keywords : 웹 페이지의 관련 키워드들
// author : 콘텐츠의 제작자를 표시
>> 오픈 그래프 (open graph)
링크를 공유했을 때 미리보기에 뜨는 내용들. property 속성을 사용한다.
<meta property="속성값" content="내용" />
// 주요 속성값
// og:url : 페이지의 표준 URL
// og:site_name : 사이트의 이름
// og:title : 콘텐츠의 제목
// og:description : 콘텐츠에 대한 간략할 설명. 검색 결과에서 제목 밑에 뜨는 내용.
// og:image : 미리보기로 표시될 이미지
// og:type : 콘텐츠 미디어의 유형. 기본 값은 website로, video, music 등의 유형을 표시할 수 있다.
// og:locale : 리소스의 언어. 기본값은 en_US 이며, 한국은 ko_KR 이다.
- og:title 속성은 <title> 요소보다 우선되어 표시된다.
- og:image 속성은 <img> 요소보다 우선되어 표시된다.
- og:description 속성이 없으면 description 속성이 있더라도 미리보기 설명이 표시되지 않는다.
3. <hgroup> 요소
검색 엔진도 <hgroup>요소의 내용을 중요하게 취급하므로 핵심 키워드로 잘 작성해 주는 것이 좋다.
4. 콘텐츠
개성 있는 브랜딩, 오리지널리티한 내용(복붙 인용을 많이 하면 중복 문서로 판정되어 검색 결과에서 아예 생략되어 버릴 수 있다.), 간결한 제목과 설명글, 최대한 글자로 작성(검색 엔진은 이미지에 적힌 글을 읽을 수 없다.) 등이 검색 엔진 최적화에 도움을 줄 수 있다.
( + ) 참고할 만한 사이트
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko
SEO 기본 가이드: 기본사항 | Google 검색 센터 | 문서 | Google Developers
검색엔진 최적화의 기본사항에 관한 지식만으로도 눈에 띄는 효과를 얻을 수 있습니다. Google SEO 기본 가이드에서 기본적인 검색엔진 최적화에 관해 간략히 알아보세요.
developers.google.com
https://searchadvisor.naver.com/guide
웹마스터 가이드 - 네이버 서치어드바이저
네이버 검색을 위한 웹마스터 가이드 입니다. 웹마스터 가이드 라인은, 네이버 검색이 콘텐츠를 발견하고 색인할수 있도록 웹사이트에 필요한 기본 요소들을 다룹니다. 모든 웹사이트는 다릅니
searchadvisor.naver.com
( + ) 카카오톡 공유 링크 초기화하는 법 (공유 디버거)
https://developers.kakao.com/tool/debugger/sharing
'22.12.15 ~ 23.06.08 코드스테이츠' 카테고리의 다른 글
| [네트워크] 심화 (0) | 2023.03.06 |
|---|---|
| [사용자 친화 웹] 웹 접근성 (0) | 2023.03.03 |
| [React] Custom Component(2) (0) | 2023.02.21 |
| [React] Custom Component(1) (0) | 2023.02.20 |
| [사용자 친화 웹] UI/UX (0) | 2023.02.15 |
댓글