News Grid (3) Basic CSS

:root {
  --primary-color: #c72727;
  --secondary-color: #f99500;
  --light-color: #f3f3f3;
  --dark-color: #333;
  --max-width: 1100px;
}

.category {
  --sports-color: #f99500;
  --ent-color: #a66bbe;
  --tech-color: #009cff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  background: var(--light-color);
}

a {
  color: #333;
  text-decoration: none;
}

ul {
  list-style: none;
}

p {
  margin: 0.5rem 0;
}

img {
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Staatliches", cursive;
  margin-bottom: 0.55rem;
  line-height: 1.3;
}

 

 

/* Utility */
.container {
  max-width: var(--max-width);
  margin: auto;
  padding: 0 2rem;
  overflow: hidden;
}

 

 

#main-nav{
    background:#fff;
    position:sticky;
    top:0;
    z-index:2;
}

position:sticky;

top:0;

-> 상단부에 고정

 

z-index:2;

-> 나중에 설명

 

 

#main-nav .container{
    display:grid;
    grid-template-columns: 6fr 3fr 2fr;
    padding:1rem;
    align-items:center;
}

display:grid; 선언 후

logo는 6fr 

sns 아이콘들은 3fr

메뉴들은 2fr;

 

컨테이너 패딩을 1rem씩

container 속 아이템들을 수직 중앙에 배치

 

 

#main-nav .logo{
    width:180px;
}

로고 이미지가 너무 커서 width를 180px만큼

 

 

#main-nav ul {
  justify-self: end;
  display: flex;
}

 

ul은 원래 grid에서 2fr을 차지하고 있었다.

거기에에 justify-self:end를 해주면 ul이 왼쪽에서 오른쪽 끝으로 이동.

 

그리고 ul속 li들은 굳이 grid로 하기에는 메뉴가 2개밖에 없기 때문에

display:flex;를 줬다.

 

 

#main-nav ul li a {
  padding: 0.75rem;
  font-weight: bold;
}

메뉴 ul 속 li 말고 a에 스타일을 주어야 한다!!!!!!

패딩도 조절하고 font도 두껍게 만들었다.

 

#main-nav ul li a.current {
  background-color: var(--primary-color);
  color: #fff;
}

 

current 페이지인 경우에는 버튼 배경이 이 웹페이지의 primary color를 줬다.

 

#main-nav ul li a:hover {
  background-color: var(--light-color);
  color: var(--dark-color);
}

 링크에 hover over했을 때, 배경은 light-color로 글자는 dark-color로

 

 

 

#main-nav .social{
    justify-self:center;
}

이렇게 하면 social div가 grid 안에서도 중앙에 배치된다.

 

 

#main-nav .social i {
  color: #777;
  margin-right: 0.5rem;
}

social 아이콘 색깔 바꿔주고, 아이콘들 사이에 갭을 주기 위해서 margin-right:0.5rem; 

 

 

 

 

 

완성된 nav