style.css 2.56 KB
<style>
  body
  {
    margin:0;
  }
  h1
  {
      text-align:center;
      color:"black";
      margin:0;
      padding:20px
  }
  a
  {
      color:"black";
      text-decoration: none;
    }
  ol
  {
      border-right:1px solid gray;
      width:150px;
      margin:50px;
      padding:20px;

    }

  .image
    {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom:10px;

    }
  .saw
  {
    color: black;
    text-decoration: none;
  }

  #grid
  {
      display: grid;
      grid-template-columns: 250px 1fr;
      border-top:1px solid gray;

  }
  #grid ol
  {
      padding-left: 40px;
      margin:0;
      font-size: 15px;
  }
  #grid li
  {
      padding-top: 10px;
      padding-bottom: 10px;
      font-size:15px;
  }
  #grid #article
  {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 20px;
      /*grid안에 #article */
  }

    @media (min-width:300px) and (max-width:480px){
      #grid
        {
            display: block;
        }
        h1
        {
            text-align:center;
            color:"black";
            margin:0;
            padding:20px
        }
        ol
        {
            border-right:none;
        }
        #category
          {
              border-bottom: 1px solid gray;
          }

        #grid ol
          {
              padding-left: 40px;
              margin:0;
              font-size: 15px;
          }
        #grid li
          {
              padding-top: 10px;
              padding-bottom: 10px;
              font-size:15px;
          }
          #grid #article
          {
              padding-top: 10px;
              padding-bottom: 10px;
              padding-left: 20px;
              /*grid안에 #article */
          }
  }

    @media (min-width:480px) and (max-width:800px){
        #grid
        {
            display: block;
        }
        h1
        {
            text-align:center;
            color:"black";
            margin:0;
            padding:20px
        }
        ol
        {
            border-right:none;

        }
        #category
        {
            border-bottom: 1px solid gray;
        }

        #grid ol
        {
            padding-left: 40px;
            margin:0;
            font-size: 15px;
        }
        #grid li
        {
            padding-top: 10px;
            padding-bottom: 10px;
            font-size:15px;
        }
        #grid #article
        {
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            /*grid안에 #article */
        }

    }
</style>