[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 4일차 - HTML
10주 완성 프로젝트 캠프
4일차에는 HTML 수업을 진행했다.
기존에 알고있던 내용이 있어서 내가 찾아본 내용위주로 정리하고자 한다.
HTML 학습
<meta> 태그
meta는 어떤데이터가 있으며, 그 데이터를 설명하는 데이터를 메타데이터라고 한다
태그도 어찌보면 메타데이터라고도 할 수 있다
<head>
<meta charset="utf-8" />
<meta name="description" content="생활코딩의 소개자료">
<meta name="kewwords" content="코딩,coding,프로그래밍,html,css,js">
<meta name="author" content="egoing">
<meta http-equiv="refresh" content="30">
</head>- 코드는 결국 문자열이다
이 문자열을 어떤 방식으로 저장하고 읽어올지charset속성으로 작성 - 페이지가 어떤 내용을 담고있는지
description속성으로 작성 - 페이지가 담고있는 내용을 단어로 나누어서
kewords속성에서 콤마로 구분지어 작성 - 페이지의 저자를
author속성으로 작성 http-equiv=refresh로 몇 초마다 새로고침 할 지 작성
<a> vs <button> (버튼 UI)
디자인 시안을 보고 버튼처럼 생겼다고 해서 습관적으로 button태그를 사용하는 것은 위험하다
<a>
앵커태그는 '페이지의 이동'을 의미한다
페이지 내부에서 어떤 구획으로의 이동을 의미할 수도 있고, 아예 다른 사이트로의 이동을 의미할 수 있다
그러니 '이동'이 이루어지는 요소라면 앵커태그를 사용해야 한다
<button>
버튼태그는 '사용자의 액션'을 의미한다
전송이나 혹은 알림받기 등, 해당 버튼을 클릭하면 어떠한 액션이 발생한다면 버튼태그를 사용해야 한다
Open Graph Protocol (:og)
간혹 우리가 어떤 링크를 카카오톡 등에서 공유할 때, 미리보기 사진이나 제목들을 볼 수 있다
이러한 미리보기 영역까지 고려한다면 훨씬 좋은 사이트가 될 수 있다
이를 나타내기 위해서는 오픈그래프 프로토콜을 이용한다
메타 태그로 작성해야한다
<meta property="og:title" content="미리보기-제목">
<meta property="og:description" content="미리보기-짧은요약">
<meta property="og:image" content="미리보기-이미지경로">위와 같이 메타태그로 property="og:종류" content="..."로 작성해주면 우리의 사이트의 미리보기가 완성된다
과제
요구사항
(구)세이프홈즈 랜딩페이지의 Figma 시안을 보고 클론코딩 실시
특이사항: HTML만을 사용해서 구조만 잡기
코드
-
h1태그는 한 페이지에 하나만 담아야 한다
-
의미별로 구획을 나누어 마크업한다
서비스의 전체 내용을 말해주는 h1 태그는 나중에 숨김 텍스트 처리하여서 스크린 리더만 읽게 해준다
의미를 파악하여 구획을 나눈후, 해당 구회마다 주석을 달아준다 -
구획별로 제목을 나타내는 heading태그가 있어야 한다(숨김텍스트처리)
<section>
<h2>내 집 보증금, 경매로 날아가면 어떻게 하지?</h2>
...
</section>구획별로 heading 태그를 반드시 두고, 리스트의 내용에도 h3를 활용하여 heading 태그를 사용해준다
- 대체 텍스트를 고려해야 한다
<img src="./assets/logo.svg" alt="세이프홈즈로고이미지" />이미지를 삽입하는 경우 어떠한 이미지를 넣었는지 대체텍스트를 반드시 작성한다
- 서비스의 내용과 연관없는 의미를 가진 이미지를 pseudo element로 처리한다
- 수정보완이 필요한 부분에는 주석을 달자
<!-- TODO: 화살표모양(>)는 pseudo el로 처리하기 -->
<a href="#"><span>지금 걱정 해결하기</span></a>위의 예시는 단순히 꺽쇠로도 표현이 가능하지만, 간단하 다른 이미지라고 상상(?)을 하고 굳이 의미가 있는 이미지가 아니므로 슈도 엘리먼트를 활용해보자
또한, 아직 완전한 구현이 되지 않았으므로 코드를 유지 보수하기 쉽게 TODO라는 문구를 붙여서 주석을 작성한다
- 버튼 UI의 의미를 고려하여 태그를 선택한다
위에서 기술한것처럼, 버튼모양을 관습적으로 버튼태그를 쓰지 않도록 유의한다
결과
참고자료
생활코딩-meta
드림코딩-HTML 태그들, 헷갈리는거 정리해 보았다 🥳
The Open Graph Protocol
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
