TIL_02_html 과 css 002

JIEUN·2021년 1월 7일
1
post-thumbnail

링크텍스트

<html>
  
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <h1>Iced Latte</h1>
    <img src="data:image/jpeg;base64,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">
    <h3>Ingredients:</h3>
    <ul>
      <li>1 shot espresso</li>
      <li>1 cup milk</li>
      <li>ice cubes</li>
   </ul>
   
   <h3>Method</h3>
  <ol>
    <li>Add the milk and ice cubes to the cup</li>
    <li>Add 1 shot espresso</li>
    <li>Drink!</li>
  </ol>
  
  <hr>
  </body>
  
</html>

body {
  font-family: Impact;
  font-size: 14pt;
  color: SaddleBrown;
  background: Wheat; //#F5DEB3 or rgb(245,222,179)
}

img {
  width: 250px;
  border: 7px dotted white;
  padding: 5px;
}

hr {
    height: 3px;
    border: none;
    background-color: Peru;
}

ul {
    list-style-type: square;
}

Red can be written as:
red (obviously!)
rgb(255,0,0) (loads of red, no green and no blue)
#ff0000
Olive can be written as:
olive
rgb(128, 128, 0) (a bit of red and green, and no blue)
#808000
font-family: Arial / Comic Sans MS / Courier / Impact / Tahoma;

0개의 댓글