본문 바로가기
study

3일차_폰트 적용

by natty_dev 2021. 9. 10.

h1 {
    color: rgb(0, 69, 134);
    text-shadow: 1px 1px 2px rgb(255, 255, 255), 0 0 30px rgb(235, 253, 76), 0 0 5px rgb(218, 253, 60);
}
h3 { color: rgb(89, 0, 131); }
h2{margin-left: 39px;}

/* h2 옆에 공간을두고싶어 처음엔 html으로 직접  을 이용해서 뛰어쓰기를 하였지만 css margin을 이용해서 공간을 만드는게
더 나은것같아 구글신께 물어보고 마진으로 공간을 만들었다.*/
.asd{border-bottom: 1px solid gray;}

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@700&display=swap');

body{ font-family: 'Nanum Gothic Coding', monospace;}
 /*구글 폰트에서 보여지는 폰트 이미지랑 내가만든 사이트에서 보여지는 폰트랑 뭔가 다른거같다.*/
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>모각코 3일차!_Bin</title>
   <link rel="stylesheet" href="./style.css"/>
</head>

<body>
   
    <h1>모각코 3일차!_Bin</h1>
</br> 
</br> 
 
    <h2>html 오늘 배운 위키</h2>
    <div class="asd"></div>
  
</br>
    
<p>
  <ul>
     <h3>✅&lt;!DOCTYPE html&gt;</h3>
     <li>▶ html 이 html5 버전임을 알려주는 코드이다.+ html5가 가장 최근에 진화하고,가장 많이 사용되는 버전이다.</li>
  </ul>
   
  <ul>
     <h3>✅ &lt;html&gt; ~~~ &lt;/html&gt;</h3>
     <li> ▶ 모든 html 문서는 html 태그로 감싸져 있습니다.</li>
  </ul>
  <ul>
     <h3>✅ &lt;head &gt;~~~ &lt; /head&gt;</h3>
     <li>html 문서의 메타데이터를 모아놓는 부분입니다.</br></li>
     <li>쉽게 말해, 웹사이트에 표시되진 않지만 웹사이트의 정보/데이터를 담아놓는 부분입니다.</li>
     <li>많은 분들이 놓칠 수 있는 아주 중요한 부분이죠!</li>
     <li>▶ head 안에 적는 주요한 태그로는 &lt;meta&gt; 태그, &lt;title&gt; 태그, &lt;style&gt; 태그, &lt;script&gt; 태그 등이 있습니다.</li>
  </ul>
  <ul>    
     <h3>✅ &lt;body&gt; ~~~ &lt;/body&gt;</h3>
     <li> ▶ 1편에서 배웠던 디자인/기능을 가지고 있는 태그들(h1, h2, ul, div, p 등등)을 사실 body 안에 넣어야 합니다.</li>
  </ul>
</p>

<!--
    <> 를 웹페이지에 표현하고 싶었는데 태그로 인식해서  어떻게 해결할까 고민하다 구글신께 물어본 결과
    <는 &lt >는&gt 로 표현 할 수 있다는걸 알게 됐다.
     다른 특수문자들도  html에서는 깨지는 경우가 발생 할 수 있어서
    이럴땐 특수문자의 경우 위 처럼 치환해서 사용한다고 한다.
-->

</body>
</html>