2022-12-28 TIL (2)

CSS 응용

:root {
  --primary-color: #047aed;
  --secondary-color: #1c3fa8;
  --dark-color: #002240;
  --light-color: #f4f4f4;
  --success-color: #5cb85c;
  --error-color: #d9534f;
}


 /* 색에 대해서 변수명을 저장하였음! */
  background: var(--primary-color);

또한 body등 모든 항목에 대해선 기본적인 margin,padding값들이 있는데 이를 초기화하고 작업

/* 각 태그들의 기본 마진/패딩을 초기값 0으로 하고 박스모델 기준을 보더-박스로 한다. */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

아이콘 link를 통해 넣기

fontawesome.com 에서 원하는 아이콘 선택,

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />링크를 넣고
 /* 아이콘이지만 글자처럼 취급. */
<i class="fas fa-stroopwafel"></i> 을 넣으면 된다.

flex, grid 조합하여 화면 구성.

/* 네브바 메뉴 */
.navbar {
  background-color: var(--primary-color);
  color: #fff;
  height: 70px;
}

.navbar ul {
  display: flex;
}

.navbar a {
  color: #fff;
  padding: 10px;
  margin: 0 5px;
}

.navbar a:hover {
  border-bottom: 2px #fff solid;
}

.navbar .flex {
  justify-content: space-between;
}

/* Cli */
.cli .grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.cli .grid>*:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}