-
웹이란?
➡️ 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간
인터넷이란?
➡️ 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망, 웹뿐만 아니라 온라인 게임, 모바일 앱, 이메일 등 네트워크 사용하는 다양한 서비스들
웹 표준
➡️ W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 (언어: HTML, CSS, JavaScript 등)
웹 표준의 장점
- 유지 보수의 용이성
- 웹 호환성 확보
- 검색 효율성 증대
- 웹 접근성 향상
Semantic HTML
웹 표준에서 HTML을 시멘틱하게 작성하는 것의 중요성을 강조함
- 개발자 간 소통
- 검색 효율성
- 웹 접근성
시멘틱 요소의 종류
요소 종류 설명 <header> 페이지나 요소의 최상단에 위치하는 머리말 역할의 요소 <nav> 메뉴, 목차 등에 사용되는 요소 <aside> 문서와 연관은 있지만 직접적인 연관은 없는 내용을 담는 요소 <main> 이름 그대로 문서의 메인이 되는 주요 콘텐츠를 담는 요소 <article> 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미하는 요소. 각각의 <article>을 구분하기 위한 수단이 필요하며 보통 제목(<hgroup>)을 포함하는 방법 사용 <section> 문서의 독립적인 구획을 나타내며 적합한 의미의 요소가 없을 때 사용. 제목(<hgroup>)을 포함하는 경우가 많음 <hgroup> 제목을 표시할 때 사용하는 요소 <h1> ~ <h6> 요소가 <hgroup> <footer> 페이지나 요소의 최하단에 위치하는 꼬리말 역할의 요소
자주틀리는 마크업
1. 인라인 요소 안에 블록 요소 넣기
HTML 요소는 표시 방법에 따라 인라인 요소, 블록 요소로 나뉨.
인라인 요소 : 콘텐츠가 차지하는 만큼. 대표 <span>, 항상 블록 요소 안에 들어가야함 (반대로 절대 x)
블록 요소 : 가로로 넓게 화면 영역을 차지. 대표 <div>
// h1, div 요소는 블록 요소이고, // label, span 요소는 인라인 요소입니다. <label> <h1>나쁜 예시 1</h1> </label> <span> <div>나쁜 예시 2</div> </span>2. <b>, <i> 요소 사용하기
<b>, <i> 요소는 각각 글씨를 굵게 만들 때, 글씨를 기울일 때 사용. 웹 표준 준수를 위해 사용하지 않는 것이 좋음 <strong> 요소나 <em> 요소를 사용하는 것이 좋음
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong> <i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>3. <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 /> 연속으로 사용하기
쭉 이어지는 텍스트 흐름에 줄 바꿈을 해주기 위해 사용하는 요소. 간격이 필요한 경우에 단락으로 구별하거나 CSS 속성을 주어 여백을 조정하는 것이 좋음
5. 인라인 스타일링 사용하기
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" }
크로스 브라우징 (Cross Browsing)
➡️ 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
SEO (Search Engine Optimization, 검색 엔진 최적화)
- On-Page SEO : 내부에서 진행할 수 있는 SEO로 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법으로 웹 페이지 내용이나 구조와는 관계가 없음
SEO에 영향을 미치는 요소 중 On-Page에서 통제할 수 있는 요소
1. <title> 요소
검색 결과창에서 제목에 해당하는 요소이며 <head> 요소의 자식 요소로 작성함.
<title> 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있음, 핵심 키워드가 포함되면 상위에 노출될 확률이 높아짐
2. <meta> 요소
메타 데이터를 담는 요소이며 메타 데이터란 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터이다.
<head>요소의 자식 요소로 작성하는 것이 일반적
제목 밑에 따라오는 설명글이 <meta> 요소안에 들어있으며 해당 웹 페이지가 어떤 데이터를 다루고 있는지 설명하는 메타 데이터가 들어있음을 알 수 있음. 소셜 미디어나 채팅 애플리케이션에서 링크를 공유했을 때 뜨는 링크 미리보기에도 들어가있음
검색했을 때의 목적은 name 속성을 사용하며 SEO를 위해서 사용하는 것이 목적이지만 공유하기 위한 목적은 property 속성을 사용하며 오픈 그래프(Open Graph)라고 한다.
➡️ SEO를 위한 meta 요소
<meta name="속성값" content="내용" />name 속성값 설명 description 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용 keywords 웹 페이지의 관련 키워드들을 나열할 때 사용 author 콘텐츠의 제작자를 표시 오픈 그래프 (Open graph)
<meta property="속성값" content="내용" />property 속성값 설명 og:ul 페이지의 표준 URL og:site_name 사이트 이름 og:title 콘텐츠 제목 og:description 콘텐츠에 대한 간략한 설명. 검색 결과에서 제목 밑에 뜨는 내용 og:image 미리보기로 표시될 이미지 og:type 콘텐츠 미디어의 유형. 기본값은 website로 video, music등의 유형을 표시할 수 있음 og:locale 리소스의 언어로 기본값은 en_US이며 한국은 ko_KR 3. <hgroup> 요소
콘텐츠의 제목을 표시하는 용도인만큼 핵심 키워드를 포함하고 있을 가능성이 높음. 검색 엔진도 <hgroup> 요소의 내용을 중요하게 취급함. 콘텐츠 작성할 때 요소를 넣어주면 SEO에 도움됨 (반복해서 넣는 것은 역효과)
4. 콘텐츠
- 개성있는 브랜딩
- 복사 + 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성
'FE' 카테고리의 다른 글
Web standards web accessibility (0) 2023.06.28 웹 접근성 (0) 2023.06.27 Cmarket Redux (0) 2023.06.23 Redux (0) 2023.06.22 [React] 상태관리 (0) 2023.06.21