[CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box)

코딩/HTML\CSS\JS

[CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box)

낫띵온미 2023. 2. 3. 19:10

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Cool box</title>
    <link href="assessment.css" rel="stylesheet" type="text/css">
  </head>
  <body>
      <p>This is a cool box</p>
  </body>
</html>

html {
    font-family: sans-serif;
  }
  
  /* Your CSS below here */
  p {
    /* box */
    width: 200px;
    height: 200px;
    margin: auto;   /* 좌우 가운데 설정 */

    border-radius: 10px;
    border: 1px solid darkred;

    background-color: red;
    background-image: linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.2) 100%);

    box-shadow: inset 2px 2px 3px rgba(255,255,255,0.6),
    inset -2px -2px 3px rgba(0,0,0,0.6),
    2px 2px 5px black;


    /* text */
    line-height: 10;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 2px black;

    /* font size, default=16px */
    font-size: 1.1rem;
  }

박스 그림자 참고 : https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-finished/style.css