프론트엔드/HTML

display? 그냥 연습해본 거.

민밥통 2023. 10. 18. 12:38

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="il.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
      </ul>
    </nav>
  </body>
</html>
/* .container {
  width: 300px;
  height: 300px;
  background-color: red;
} */
.container .item {
  width: 100px;
  height: 100px;
  /* margin: auto; */
  background-color: orange;
  display: inline;
  border: 6px solid rgb(100, 50, 0);
  /* border-top-width: 10px;  
  border-top-style: solid;
  border-top-color: rgb(234, 222, 206);
  border-bottom-width: 5px;
  border-bottom-color: darkblue;
  border-bottom-style: dashed; */
}

.container .item:first-child {
  padding: auto;
}

.container .item :first-child {
  border: 4px solid red;
  padding: 20px;
  box-sizing: border-box;
}

#img {
  width: 200px;
  height: 200px;
  border-radius: 50px;
}