Code States
Front-end boost camp
Today
I
Learned
🌧️ 6월인데 벌써 장마? ㅠㅠ 습한 월요일 52일차 시작,,
🌧️ 인터넷? 웹?
- 인터넷은 웹 기반으로 작동한다? -> 정답은 X
-- 인터넷이 웹보다 좀 더 포괄적인 개념
-- 인터넷 : 전 세계적으로 연결되어 있는 컴퓨터 네트워크 통신망, 웹을 포함해 온라인 게임, 모바일 앱, 이메일 등 다양한 서비스 모두 호팜
-- 웹 : 문서, 이미지, 영상 등 다양한 정보를 여러 사람들과 공유할 수 있는 공간
🌧️ 웹 표준
- W3C(World Wide Web Consortium)에서 권고하는 '웹에서 표준적으로 사용되는 기술이나 규칙'
- 크롬, 엣지, 사파리 등 최신 웹 브라우저들은 모두 웹 표준을 지원한다.
- 웹 표준의 장점
-- 1. 유지 보수의 용이성
-- 2. 웹 호환성 확보
-- 3. 검색 효율성 증대
-- 4. 웹 접근성 향상
🌧️ 시멘틱 HTML
-
div, span을 활용한 화면 구성 예 ▼
-
시멘틱 요소를 사용한 화면 구성 예 ▼
-
시멘틱 요소 : 요소가 어떤 내용을 담게 될지, 어떤 기능을 하게 될지 확실하게 의미를 가지고 있는 요소
-
시멘틱 요소를 적절하게 사용하여 구성한 HTML을 시멘틱 HTML이라고 한다
-
시멘틱 HTML의 필요성 :
-- 개발자 간 소통
-- 검색 효율성
-- 웹 접근성 -
시멘틱 요소의 종류
🌧️ 자주 틀리는 마크업
-
인라인 요소 안에 블록 요소 넣기
-- 예시 : h1, div는 블록요소
-- 예시2 : label, span 요소는 인라인 요소 -
b 요소와 i 요소 사용하기
-- 텍스트 볼드, 기울기 요소
-- 하지만 웹 표준을 준수하기 위해서는 사용하지 않는게 좋음!
-- strong, em 사용
<b>글씨를 두껍게</b> -- 대체하기 --> <strong>콘텐츠 매우 강조하기</strong>
<i>글씨 기울이기</i> -- 대체하기 --> <em>콘텐츠 강조하기</em>- 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>- br 연속으로 사용하기
// 나쁜 예시
요소 사이에 여백을 주고싶을 때
<br />
<br />
이렇게 하시면 안 됩니다.
// 좋은 예시 1
<p>요소 사이에 여백을 주고싶을 땐</p>
<p>아예 별도의 단락으로 구별하세요.</p>
// 좋은 예시 2
//HTML 파일
<p class="margin">요소 사이에 여백을 주고싶을 땐</p>
<p class="margin">CSS 속성으로 여백을 설정해주세요.</p>
//CSS 파일
.margin { margin: 10px }- 인라인 스타일링 사용하기
//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" }🌧️ 크로스 브라우징
- 웹 사이트에 접근하는 브라우저의 종류에 상관없이 동등한 화면과 기능을 제공할 수 있도록 만드는 작업
- 동일한 -> X, 동등한 -> O
- 크로스 브라우징 워크 플로우 :
-- 초기기획 -> 개발 -> 테스트/발견 -> 수정/반복
🌧️ SEO
- Search Engine Optimization
- 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해 주는 작업
- SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있도록!
- On-page SEO : 페이지 내부에서 진행할 수 있는 SEO, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML요소 사용법 등을 이용하는 방법
- Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법, 웹 페이지 내용 또는 구조와는 관계 없음
🌧️ SEO에 영향을 미치는 요소
✔️ title 요소
- 검색 결과창에서 제목에 해당하는 요소로, heae 요소의 자식 요소로 작성함
- title 요소에 어떤 내용을 작성하는가에 따라서 검색 후 유입까지 유도할 수 있음
-- 제목이 너무 길거나 짧아서 사용자가 제목으로 사이트를 파악하기 어려워지면 유입률이 떨어짐 - title 요소에 핵심 키워드가 포함되면 상위에 노출될 확률이 높아짐
-- 그렇다고 같은 키워드를 반복하면 검색 시 불이익을 받을 수 있으므로 핵심 키워드는 한 번만 포함시킬 것!
✔️ meta 요소
- 해당 웹 사이트에서 다루고 있는 데이터가 무엇인지에 대한 데이터
- meta 요소도 head 요소의 자식 요소로 작성
// SEO를 위한 meta 요소
<meta name="속성값" content="내용" />-> SEO 주요 속성값? ▼
// 오픈 그래프
<meta property="속성값" content="내용" />-> 오픈 그래프 주요 속성값? ▼
- 오픈 그래프가 SEO와 전혀 연관이 없는 것은 아니다!
-- 해당 페이지에 방문자 수가 많다면 검색 시 상위에 노출될 확률이 높아지기 때문!
-- 오픈 그래프를 잘 작성하면 링크 공유를 통해 방문자 수를 늘릴 수 있는 방안이 될 수도 있다.
즉, SEO가 목적이라면 name 속성을 사용하는 meta 요소에 더 중점을 두되 오픈 그래프도 잘 작성할 것!
✔️ hgroup 요소
- 콘텐츠 제목을 표시하는 용도인 만큼 핵심 키워드를 포함하고 있을 가능성이 높다
- 따라서 검색 엔진도 해당 요소의 내용을 중요하게 취급
- 핵심 키워드를 의식해서 hgroup 요소에 넣어주는 것도 도움이 됨
- 하지만 똑같은 키워드 반복은 역효과, 이미 사용한 핵심 키워드는 배리에이션 하여 비슷한 키워드로 대체하거나 관련 키워드로 대체
✔️ 콘텐츠
- 개성 있는 브랜딩
- 복사 붙여넣기 금지
- 간결한 제목과 설명글
- 최대한 글자로 작성할 것
[무엥일기] 무엥,,, 내가 머쨍이 개발자가 될 수 이쓰까,,,