코코아 클론 Day 3

6383 단어 htmlhtml
<!DOCTYPE html>
<html>
    <head>
        <title> Welcome to my website!! </title>
    </head>
 <body>
     <h1>
         It's h1
     </h1>
 </body>   
</html>
  • html 문서는 항상 <!DOCTYPE html> 로 시작해야한다.
  • html 안에는 head와 body가 있다.
  • head안에는 meta태그가 있다.
<link rel="shortcut icon" sizes="16x16 32x32 64x64" href="/m.png">

탭에서 웹사이트 제목 옆 아이콘 지정


<title>노마드 코더 Nomad Coders – Clone Startups. Learn to Code.</title>

웹사이트의 title지정


<meta name="description" content="코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요!">

meta 태그의 description attribute


<meta property="og:image" content="https://d1telmomo28umc.cloudfront.net/media/seo/home2.jpg">

카카오톡에서 공유될 때 썸네일 사진 지정


  • tip: html tag검색시 mdn사용하는 것이 좋다.
<p>
         you can use <abbr title="it's title">abbr title</abbr>
         blaabla <abbr title="it's title">HTML</abbr>.
</p>

abbr 태그: 커서를 갖다대면 title attribute 를 보여준다.

  • id는 고유식별자로서 태그 한개당 한개만 가능하고 전체 코드에서 고유한 값을 가져야 한다. (css에서 특정 지점을 찾아줄 때 쓰인다.)

Non semantic tag
ex) div, span(짧은 문장에 쓰이는 태그)

Semantic tag
ex) header, main, footer,

semantic tag는 content를 구분해주는 태그로서, 깔끔한 코드작성에서 매우 중요하다.

좋은 웹페이지 즐겨찾기