HEADER + BODY = HTML

HEADER

사용자가 눈으로 보는 정보가 들어있는게 아니라 웹사이트의 정보를 기재!

open graph 속성

• SNS에 링크를 보낼 때 미리보기 이미지나 그 링크에 대한 설명,제목을 표사하기 위한 태그

<!-- open-graph -->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="사이트 이름">
    <meta property="og:title" content="사이트 제목">
    <meta property="og:description" content="사이트 설명">
    <meta property="og:image" content="미리보기 이미지">
    <meta property="og:url" content="사이트 url">

favicon 설정하기

<link rel="icon" type="image/png" href="imgs/favicon.png" />

BODY

사용자가 눈으로 볼 수 있는 모든 정보들이 BODY 태그 내에 존재

HTML element란?

<h1>재미있는 코딩<h1/> <h1>~</h1> 태그가 열고 닫히는 모든 부분을 일컫는다.

HTML 태그

• <h1> ~ <h6> 숫자가 낮을수록 중요도 up!
• <p> 하나의 문단 (paragraph)
• <b> 시각적 강조 ( 굵게 )
• <strong> 브라우저한테 진짜 중요하다 알려준다(웹 접근성 측면에서 중요 )
• <i>,<em> 도 위와 같은 측면
• <ol> ordered list
• <ul> unordered list
• <li> ol , ul 안에 하위 리스트
• <div> block 요소 (width,height,margin,padding 설정 가능)
• <span> inline 요소 (width,height 설정 불가, margin,padding 좌우만 가능)