클래스(1)

<div class="header header-1">
  
</div>

<div class="header header-2">
  
</div>

:root {
  --header-width:600px;
}

.header {
  width:var(--header-width);
  height:100px;
  background-color:red;
  margin-top:100px;
}

.header-2 {
  width:calc(var(--header-width) + 50px);
}

실행 화면

 

<header class="top-bar con-min-width">
  <div class="con">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae dicta assumenda a vero cum quis, nihil ullam eveniet, sapiente accusantium ab facere corrupti suscipit illum voluptate numquam nam! Quaerat, quidem!
  </div>
</header>

body {
  margin:0;
}

:root {
  --site-width:1200px;
}

.con {
  margin-left:auto;
  margin-right:auto;
}

.con-min-width {
  min-width:var(--site-width);
}

.con {
  width:var(--site-width);
}

.top-bar {
  background-color:black;
  color:white;
}

실행 화면

 

<div style="font-family:돋움, 바탕; font-size:10rem;">
  안녕
</div>

<h1 class="font-lottemartdream">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, odit! Recusandae consectetur illo doloribus ut eveniet quibusdam culpa, obcaecati soluta aliquam sint sapiente officia velit, nihil exercitationem veritatis quos reiciendis!
</h1>
<div>
  안녕하세요.
</div>

@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
}
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 700;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
}
@font-face {
  font-family: 'LotteMartDream';
  font-style: normal;
  font-weight: 300;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
}
html {
  font-family: 'LotteMartDream', sans-serif;
}
div {
  font-size:5rem;
  font-weight:700;
}

실행 화면

cf. 폰트

https://noonnu.cc/