패스트캠퍼스 환급챌린지 21일차 미션 (2월 21일) : 프론트엔드개발 강의 후기
오늘은 수요일
오늘은 본격적으로 스타벅스 예제 사이트를 만들기 시작했다.
후하 너무 어렵고 헷갈렸는데 막상 또 따라하기 시작하니 할만하다.
일단 메타 태그? 에 대해서 처음 알게 되어서
메타 태그에 대한 정보를 간단하게 정리해보았다.
<meta> 태그
<meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다.
이러한 <meta> 요소는 언제나 <head> 요소 내부에 위치해야 한다.
만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며,
반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록
name 속성에 viewport 속성값을 제공하고 있다.
-
1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제
<meta name="keyword" content="HTML, meta, tag, element, reference">
2) 웹 페이지에 대한 설명(description)을 정의하는 예제
<meta name="description" content="HTML meta tag page">
3) 문서의 저자(author)를 정의하는 예제
<meta name="author" content="starbucks">
4) 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제
<meta http-equiv="refresh" content="5;url=http://www.starbucks.com">
5) 모든 장치에서 웹 사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제
<meta name="viewport" content="width=device-width, initial-scale=1.0">
그래서 내가 사용한 메타 태그는 아래와 같았다.(title도 바꿈)
그리고 진행중인 코드 html 내용 중 일부 메타태그 내용(스타벅스 사이트 기준이다._오픈된 소스 사용)
오늘은 우선 여기까지 쓰고 내일 추가로 본격적인 강의를 듣고 이어서 글을 써야겠꾼!!!
오늘은 잔다!! 후하
그래도 예제 하면서 재미를 찾은 프론트엔드 병아맇ㅎㅎㅎ
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
#패스트캠퍼스 #직장인자기계발 #직장인공부 #환급챌린지 #패스트캠퍼스후기 #오공완 #프론트엔드
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr