코딩/HTML\CSS\JS

[CSS] MDN 과제: 기본적인 CSS이해

낫띵온미 2023. 2. 3. 17:50 
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fundamental CSS comprehension</title>
    <link href="assessment.css" rel="stylesheet" type="text/css">
</head>
  <body>

  <section class="card">
    <header>
      <h2>Chris Mills</h2>
    </header>
    <article>
      <img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p>50 My Street<br>
         The Town<br>
         Gray Peach<br>
         UK<br>
         ZO50 1MU<br>
        <strong>Tel</strong>: 01234 567 890<br>
        <strong>Mail</strong>: chris@nothere.com</p>
    </article>
    <footer>
      <p>Editing, writing, and web development services</p>
    </footer>
  </section>

  </body>
</html>
/* General styles - put these straight into your stylesheet */

  body {
    margin: 0;
  }
  
  html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
  }

  .card  {
    width: 35em;
    height: 22em;
    margin: 5em auto;
    background-color: red;
    border: 0.2em solid black;
    border-radius: 1.5em;
  }
  
  .card header h2, footer p{
    margin: 0;
    line-height: 1.5;
    padding: 0.5em;
  }
  
  .card h2{
    font-size: 2em;
    height: 1em;
  }

  .card article{
    height: 12em;
    background-color: rgba(0,0,0,0.3);
  }

  .card article p{
    margin: 0;
    padding: 1em;
    color: white;
  }
   
  .card article img  {
    max-height: 100%;
    float: right;
  }

  .card header,footer{
    height: 5em;
    /* padding: 3em; */
  }

  .card header {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
    border-radius: 1.5em 1.5em 0 0;
  }

  .card footer {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
    border-radius: 0 0 1.5em 1.5em;
  }

  .card footer p{
    font-size: 1.5em;
    line-height: 2.5;
  }