<!-- 'ts'라는 가상의 프로젝트를 진행할 경우를 예시로 든다 -->

<header class="tsHeader">
  <!-- 재사용 가능한 블록 영역 -->
  <h1 class="tsHeader__logo"><a href="#" class="tsHeader__logoLink">Shop!</a></h1>
  
  <!-- *블록은 블록을 포함할 수 있다 -->
  <nav class="tsNav">
    <ul class="tsNav__list">
      <li class="tsNav__item">
        <a href="#" class="tsNav__link">
          HOME
        </a>
      </li>
      <li class="tsNav__item">
        <a href="#" class="tsNav__link">
          Best
        </a>
      </li>
      <li class="tsNav__item">
        <a href="#" class="tsNav__link">
          FAQ
        </a>
      </li>
    </ul>
    
    <div class="tsNav__shortcut">
      <button type="button" class="btn__icon"><span class="heart-solid icon"></span></button>
      <button type="button" class="btn__icon"><span class="shutdown icon"></span></button>
    </div>
  </nav>
</header>

<section class="tsContainer">
  <div class="tsContents">Contents Area . . .</div>
  <div class="tsBottom">
    <button type="button" class="btnBasic">cancel</button>
    <button type="button" class="btnBasic--submit">submit</button>
  </div>
</section>
.tsHeader{
  padding:10px 20px;
  background:#eee;
  &__logo{
    display:inline-block;
    vertical-align:top;
  }
  &__logoLink{
    display:block;
    padding:5px 10px;
    box-sizing:border-box;
    background:blue;
    border-radius:50%;
    box-shadow:3px 5px 5px rgba(0,0,0,.3);
    text-decoration:none;
    font-size:30px;
    color:#fff;
  }
}

.tsNav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 10px;
  border:1px solid #222;
  &__list{
    display:inline-block;
    vertical-align:top;
    margin:0;
    padding:0;
    &:after{
      content:'';
      display:block;
      clear:both;
    }
  }
  &__item{
    float:left;
    margin:0 10px;
    list-style:none;
  }
  &__link{
    text-decoration:none;
    font-size:14px;
    color:#555;
    &:hover{
      text-decoration:underline;
      text-underline-position:under;
    }
  }
  &__shortcut{
    float:right;
  }
}

.btn__icon{
  position:relative;
  width:30px;
  height:30px;
  border:0;
  background:none;
}

.tsContents{
  padding:10px 20px;
  box-sizing:border-box;
  height:100px;
  background:pink;
}

.tsBottom{
  margin-top:20px;
}


[class^="btnBasic"]{
  display:inline-block;
  vertical-align:top;
  padding:0 8px;
  box-sizing:border-box;
  height:30px;
  border:1px solid #999;
  background:#fff;
  border-radius:5px;
}
.btnBasic{
  &--submit{
    border-color:blue;
    background:blue;
    color:#fff;
  }
}



/* icon css - 출처 : https://cssicon.space/#/icon/heart-solid */
.shutdown.icon {
  color: #000;
  position: absolute;
  top:6px;
  left:6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: solid 1px currentColor;
}

.shutdown.icon:before {
  content: '';
  position: absolute;
  left: 3px;
  top: -2px;
  width: 1px;
  height: 8px;
  border-left: solid 3px white;
  border-right: solid 3px white;
  background-color: currentColor;
}
.heart-solid.icon {
  color: #000;
  position: absolute;
  top:8px;
  left:8px;
  width: 9px;
  height: 9px;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  background-color: currentColor;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.heart-solid.icon:before {
  content: '';
  position: absolute;
  top: -5px;
  left: -1px;
  width: 8px;
  height: 5px;
  border-radius: 5px 5px 0 0;
  border-top: solid 1px currentColor;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
  background-color: currentColor;
}

.heart-solid.icon:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-radius: 0 5px 5px 0;
  border-top: solid 1px currentColor;
  border-right: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  background-color: currentColor;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.