CSS

사이트 상단바, 로고 구현하기

 

/* 노말 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

 

/* 라이브러리 */
.inline-grid {
  font-size:0;
}

.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  box-sizing:border-box;
  vertical-align:top;
}

 

.border-red {
  border:10px solid red;
}

.border-blue {
  border:10px solid blue;
}

 

.border-gold {
  border:10px solid gold;
}

.text-center {
  text-align:center;
}

 

.text-right {
  text-align:right;
}

.block {
  display:block;
}

 

/* 커스텀 */
.top-bar {
  background-color:#232323;
  color:white;
}

.top-bar > div:first-child {
  width:240px;
}

 

.top-bar > div:nth-child(2) {
  width:calc(100% - 240px - 200px);
}

.top-bar > div:last-child {
  width:200px;
}

 

.top-bar__logo {
  font-weight:bold;
  font-size:1.3rem;
  padding:10px;
}