TIL_04_html 과 css 004

26793 단어 CSShtmlCSS

링크텍스트

<html>
  
  <head>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Potta+One&display=swap" rel="stylesheet">
  </head>
  
  <body>
    <h1>Project Showcase</h1>
    <p>I've been learning to create web pages with
    <a href="https://www.codeclub.org.uk">Code club</a>.
    I'm using the <a href="https://trinket.io">trinket</a> editor.</p>
    
    <ol>
      <li><a href="#birthday">Happy Birthday</a></li>
      <li><a href="#story">Tell a Story</a></li>
      <li><a href="#wanted">Wanted</a></li>
      <li><a href="#recipe">Recipe</a></li>
      <li><a href="#letter">Mystery Letter</a></li>
    </ol>
    
   <h2 id="birthday">Happy Birthday</h2>
  <p>My <a href="https://trinket.io/html/7b48a1a13b?runMode=autorun">Happy Birthday project</a>.</p>
  <iframe src="https://trinket.io/html/7b48a1a13b?runMode=autorun" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  <a href="#top">Top</a>
   <h2 id="story">Tell a Story</h2>
  <p>The <a href="https://trinket.io/html/ac3f8b8cc0?runMode=autorun">Tell a story project</a>.</p>
  <iframe src="https://trinket.io/html/ac3f8b8cc0?runMode=autorun" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  <a href="#top">Top</a>
   <h2 id="wanted">Wanted</h2>
  <p>The <a href="https://trinket.io/html/e19b46da03?runMode=autorun">Wanted project</a>.</p>
  <iframe src="https://trinket.io/html/e19b46da03?runMode=autorun" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  <a href="#top">Top</a>
  <h2 id="recipe">Recipe</h2>
  <p>The <a href="https://trinket.io/html/1899ec12aa?runMode=autorun">Recipe project</a>.</p>
  <iframe src="https://trinket.io/html/1899ec12aa?runMode=autorun" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  <a href="#top">Top</a>
 <h2 id="letter">Mystery Letter</h2>
 <p>The <a href="https://trinket.io/html/88c7c5e9e2?runMode=autorun">Mystery Letter</a>.</p>
 <iframe src="https://trinket.io/html/88c7c5e9e2?runMode=autorun" width="100%" height="400" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
 <a href="#top">Top</a>
  </body>
</html>
body {
  font-family: 'Lobster', cursive;
}

"h" 태그에 "id"를 부여하여, "a href=" 태그를 통해 호출(?) 하는 방법을 배웠다. "a href="#top"" 태그를 통해 페이지의 상단부분으로 올라가게 하는 것도 배웠다.
"iframe" 태그를 통해, html 웹 문서 안에 또 다른 웹 문서를 넣어보았다. +뮤비나 동영상도 가능.

-참고사이트 링크텍스트

좋은 웹페이지 즐겨찾기