본문 바로가기
[HTML & CSS]

[HTML & CSS] 간단한 화면 만들기

by 북방바다코끼리표범 2023. 8. 15.

LE MONOCHROME

YVES KLEIN

LE MONOCHROME

GALERIE RIVE DROITE

EXPOSITION JUSTQU'AU 13 NOV 1960

위의 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LE MONOCHROME</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Noto+Sans+KR&family=Rajdhani:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="quiz4.css">
  </head>
  <body>
    <h1 class="artist">YVES KLEIN</h1>
    <h2 class="title">LE MONOCHROME</h2>
    <div class="ikb"></div>
    <div class="info">
      <p class="location">GALERIE RIVE DROITE</p>
      <p class="date">EXPOSITION JUSTQU'AU 13 NOV 1960</p>
    </div>
  </body>
</html>

 <style>
  html {
  font-size: 16px;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  margin: 40px 0;
  text-align: center;
}

.artist {
  font-family: Rajdhani;
  font-weight: 700;
  letter-spacing: 8px;
  margin: 0;
  color:rgb(0, 47, 167);
  font-size: 3rem;
}

.title {
  color: #747780;
  font-weight: 400;
  font-size: 1.25em;
  margin: 0 0 24px 0;
}

.ikb {
  height: 320px;
  width: 320px;
  margin: 2.5em auto;
  background-color:rgb(0, 47, 167);
}

.info {
  font-size: 24px;
}

.location {
  font-size: 24px;
  margin: 8px 0;
}

.date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  margin: 8px 0;
  color:rgba(0, 0, 0, 0.5);
}
.artist {
  font-family: Rajdhani;
  font-weight: 700;
  letter-spacing: 8px;
  margin: 0;
}
    </style>