강의 내용
- 구조 디자인 (HTML)
- 메타데이터
- 제목과 단락
- 이미지와 피규어
- 비순차, 순차 목록
- 섹션 관련 요소
- 컨테이너 요소
- 깃 별칭 바꾸기
HTML5 Category 출처 : HTML Living Standard
HTML 5의 카테고리(Category)에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content, Palpable Content, Script-supporting Elements, Transparent Content 등의 그룹이 있으며, 하나의 요소가 여러 그룹에 속해 있을 수도 있고, 그렇지 않을 수도 있습니다.
검색 엔진 최적화(SEO)
검색엔진최적화(Search Engine Optimization)는 웹사이트와 웹페이지를 검색엔진이 쉽게 발견(디스커버리)하고, 읽어가서(크롤링), 색인하고(인덱싱), 상위 노출(랭킹)시켜 자연 유입되는 트래픽의 양과 질을 높일 수 있도록 관련 검색 알고리즘의 특성을 고려해서 웹사이트의 구조나 콘텐츠를 개선하는 일련의 작업을 말합니다.
또 다른 표현으로 SEO를 정의하면 운영 중인 웹사이트를 통해 유입을 기대하는 보다 많은 키워드의 검색 결과 페이지에서 기업이 제공하는 웹콘텐츠가 보다 높은 순위로 노출되어 결과적으로 보다 많은 트래픽을 유도할 수 있도록 콘텐츠 작성과 웹사이트 구축에서 지켜야하는 일정한 가이드라인 이라고도 할 수 있습니다.
위 내용은 국내 검색 관련 전문 기업인 어센트 코리아의 SEO 소개 페이지에서 발췌한 내용입니다.
SEO는 페이지 제목이나 문서 제목, 메타 정보, 백링크(backlink) 그리고 로딩 속도 및 사용자 경험도 영향을 미칩니다. 특히 사용자 경험의 경우 구글 웹 바이탈에서 사용자 경험의 품질을 최적화하는 것은 웹 사이트의 장기적인 성공의 핵심이라고 말하고 있습니다.
메타데이터
<!-- HTML5 charset 설정 방식 -->
<meta charset="UTF-8" />
<!-- 반응형 디자인을 위한 viewport meta tag 선언 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SEO를 위한 제작자, 키워드, 설명 등 정보를 명시 -->
<meta name="author" content="이듬(EUID) - 김진주"/>
<meta name="keywords" content="웹표준,웹접근성,HTML5"/>
<meta name="description" content="멋쟁이 사자처럼과 이듬이 함께하는 프론트엔드 개발 스쿨"/>
<!-- 30초 후 새로고침 시도 -->
<meta http-equiv="refresh" content="30"/>
<!-- OG 정보 선언 -->
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" />
<!-- 기준 URL 설정 및 파비콘 선언 -->
<!-- 파일의 기준 설정 / _blank ==> 새창 띄우기 -->
<base target="_blank" href="./favicon/" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />제목과 단락
<!-- MS IE의 호환성 보기 설정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<h1>카페 W</h1>
<h2>매장 찾기</h2>
<p>카페 W를 가까이에서 경험해보세요.</p>
<p>고객님과 가장 가까이 있는 매장을 찾아보세요!</p>
<ul>
<li>리저브 매장</li>
<li>드라이브 스루 매장</li>
<li>커뮤니티 매장</li>
</ul>태그 올바른 사용법
- h1 → h3 이렇게 바로 넘어가면 렌더링이 안되지는 않지만 문법적으로 오류 발생!
h1 → h2 → h3... 이런식으로 사용하는 것이 올바른 사용법- h1 태그는 한 번만 사용할 수 있을까?
- ❌ h1은 가장 높은 수준의 제목을 나타내기 때문에 한 번만 사용해야 할 것 처럼 느껴지지만 동등한 위계라면 중복해서 사용이 가능하다!- ul태그 안에 p태그를 사용할 수 있을까?
- ❌ 사용할 수 없음!
랜더링은 정상적으로 되지만 html5 카테고리에 의해
검사할 때 문법적으로 에러가 발생함!
ul 태그 안에 들어올 수 있는 속성은
밖에 없다.
이미지와 피규어
<body>
<h1>
<!-- alt에 이미지, 로고, 등등 부연설명 빼기, 음성엔진 고려 -->
<!-- alt에는 'naver'처럼 사전에 없는 내용은
텍스트리더가 알아들을 수 있게'네이버'로 작성-->
<!-- 'webcafe'는 'wed cafe'로 작성 -->
<img src="./images/webcafe-logo.png" alt="web cafe" />
</h1>
<figure>
<img src="./images/likelion-black.png" alt="" />
<!--figcaption으로 alt대신 사진의 내용을 설명 -->
<figcaption>Like Lion</figcaption>
</figure>
<figure>
<img src="images/rwd.jpg" alt="" />
<figcaption>
<p>
<strong>Responsive Web<br />Design Strategies</strong>
<span>반응형 웹디자인 전략</span>
</p>
<a href="/">강의정보</a>
</figcaption>
</figure>
</body>비순차, 순차 목록
<ol>은 Ordered List(순서가 있는 목록)
<ul>은 Unordered List(순서가 없는 목록)
섹션 관련 요소
<!-- 네이티브 요소 -->
<header>본문 헤더</header>
<nav>내비게이션</nav>
<main>
<section>
<header>섹션 헤더</header>
<footer>섹션 푸터</footer>
</section>
<article>
<header>섹션 헤더</header>
<footer>섹션 푸터</footer>
</article>
</main>
<aside>부가 콘텐츠</aside>
<footer>본문 푸터</footer>
<!-- 컨테이너 요소 -->
<div role="banner">본문 헤더</div>
<div role="navigation">내비게이션</div>
<div role="main"></div>
<div role="contentinfo">본문 푸터</div>컨테이너 요소와 섹션 관련 요소는 웹 페이지의 구조를 나타내는 데 사용되는 요소이지만 섹션 관련 요소를 사용하는 것이 좀 더 명확하고 의미론적인 이점을 제공한다.
컨테이너 요소 대신 섹션 관련 요소를 사용해야 하는 이유
- 의미 전달: 섹션 관련 요소는 웹 페이지의 구획을 명시적으로 표현할 수 있다. <section> 요소는 논리적인 섹션으로 분할된 컨텐츠를 그룹화하고, <article> 요소는 독립적인 컨텐츠를 나타내는 데 사용된다. 이러한 요소들을 사용하면 웹 페이지의 의미를 더 명확하게 전달할 수 있다.
- 검색 엔진 최적화(SEO): 섹션 관련 요소를 사용하면 검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있다. 검색 엔진은 섹션 관련 요소를 통해 페이지의 구조를 파악하고, 컨텐츠의 의미를 인식하여 인덱싱하는 데 도움을 받을 수 있다. 이는 검색 결과에서 페이지의 가시성과 검색 엔진 최적화를 향상시키는 데 도움이 된다.
- 웹 접근성: 섹션 관련 요소는 웹 접근성을 개선하는 데에도 기여시키고 요소들을 사용하면 스크린 리더와 같은 보조 기술을 사용하는 사용자가 웹 페이지의 구조를 더 잘 파악할 수 있다. 또한, 웹 접근성 지침에 부합하는 페이지 구조를 제공하여 사용자 경험을 향상시킨다.
- 유지 보수와 재사용성: <div>보다 섹션 관련 요소를 사용하면 가시성이 좋아져 웹 페이지의 구조를 명확하게 표현할 수 있어 유지 보수와 재사용성을 개선할 수 있습니다. 페이지의 특정 섹션을 수정하거나 재사용할 때, 해당 섹션 요소를 찾기 쉽고 수정하다.
따라서, 컨테이너 요소보다 섹션 관련 요소를 사용하는 것이 웹 페이지의 구조와 의미를 명확히 전달하고, 검색 엔진 최적화와 웹 접근성을 개선하는 데에 더 유용하다.
컨테이너 요소
<body>
<div>
<span>E</span> <span>U</span> <span>I</span> <span>D</span>
</div>
</body>컨테이너 요소로는 div와 span 요소가 있는데
<div>: <div>는 블록 수준 요소로서, 웹 페이지에서 구획을 나누거나 그룹화하기 위해 사용된다. <div>는 특정 스타일링이나 클래스를 적용하여 스타일링 및 레이아웃을 제어하는 데에 주로 사용된다. 예를 들어, 여러 요소를 감싸서 스타일을 적용하거나, 레이아웃을 구성하는 데에 유용하다.
<span>: <span>은 인라인 수준 요소로서, 특정 부분의 스타일을 지정하거나 텍스트를 감싸기 위해 사용된다. <span>은 주로 특정 텍스트에 스타일을 적용하거나 JavaScript를 통해 특정 요소를 조작하기 위해 사용된다. 예를 들어, 특정 텍스트를 강조하기 위해 <span>에 스타일 클래스를 적용할 수 있습니다.
<div>와 <span>은 둘 다 유연하게 사용될 수 있으며, 웹 페이지의 구조와 스타일을 제어하는 데에 도움을 준다. <div>는 주로 레이아웃을 구성하는 데에 사용되고, <span>은 주로 텍스트 스타일링이나 강조를 위해 사용된다.
오늘 깃사용법 정리
깃클론 후
git checkout -t origin/training 원격브래치 복제하기
원격저장소 바꾸기
복제 받은 곳별칭 바꾸기 오리진은 원본이름 업스트림은 바꿀 이름
git remote rename origin upstream
선생님이 한 거 보고싶을때
https://emmet.io/
쉬프트+알트 +화살표 아래 ==> 한줄 복사
키워드는 공백 제거하고 하는게 좋음 ==> 공백을 포함해서 검색해야 나올 수 있음
<meta property="og:title" content="콘텐츠 제목" />
<meta property="og:url" content="웹페이지 URL" />
<meta property="og:type" content="웹페이지 타입(blog, website 등)" />
<meta property="og:image" content="표시되는 이미지" />
<meta property="og:title" content="웹사이트 이름" />
<meta property="og:description" content="웹페이지 설명" /> 머지취소
<!-- 파일의 기준 설정 / _blank ==> 새창 띄우기 -->
<base target="_blank" href="./favicon/" />X-UA-Compatible 찾아보기
