CSS: Styling(dreamcoding_home)

/* Global */

:root {

  /* Color */

  --color-white: #ffffff;

  --color-light-white: #eeeeee;

  --color-dark-white: #bdbdbd;

  --color-pink: #fe918d;

  --color-dark-pink: #ff6863;

  --color-dark-grey: #4d4d4d;

  --color-grey: #616161;

  --color-light-grey: #7c7979;

  --color-blue: #73aace;

  --color-yellow: #fff7d1;

  --color-orange: #feb546;

  --color-black: #000000;

 

  /* Font size */

  --font-large: 48px;

  --font-medium: 28px;

  --font-regular: 18px;

  --font-small: 16px;

  --font-micro: 14px;

 

  /* Font weight */

  --weight-bold: 700;

  --weight-semi-bold: 600;

  --weight-regular: 400;

 

  /* Size */

  --size-border-radius: 4px;

}

 

/* Universal tags */

* {

  box-sizing: border-box;

  /* 패딩을 줬을 때 높이와 너비가 그 패딩을 포함

  했을때도 동일한 높이와 너비가 되도록 만듬 */

}

 

body {

  font-family: "Roboto", sans-serif;

  margin: 0;

  cursor: default; 커서가 해당위치에 이동하면 기본값(화살표 모양)

}

 

a {

  text-decoration: none;

  color: var(--color-white);

}

 

ul {

  list-style: none;

  padding-left: 0; /*padding 없애줌*/

}

 

/* Typography*/

h1 {

  font-size: var(--font-large);

  font-weight: var(--weight-bold);

  color: var(--color-black);

  margin: 16px 0px;

}

 

h2 {

  font-size: var(--font-medium);

  font-weight: var(--weight-semi-bold);

  color: var(--color-black);

  margin: 8px 0;

}

 

h3 {

  font-size: var(--font-regular);

  font-weight: var(--font-regular);

  color: var(--color-black);

  margin: 8px 0;

}

 

p {

  font-size: var(--font-regular);

  font-weight: var(--font-regular);

  color: var(--color-black);

  margin: 4px 0;

}

 

/* Navbar */

#navbar {

  display: flex;

  justify-content: space-between;

  background-color: var(--color-pink);

  align-items: center; /* 센터로 정렬*/

  color: var(--color-white);

  padding: 16px;

}

 

.navbar__menu {

  display: flex;

}

 

.navbar__logo {

  font-size: var(--font-medium);

  font-weight: var(--weight-semi-bold);

}

 

.navbar__menu__item {

  padding: 8px 12px;

  margin: 0 4px;

  cursor: pointer; 커서 손가락 모양으로

  border-radius: var(--size-border-radius); 둥그스름한 모양으로 바뀜(item.active와 item.hover에 둘다 공통으로 들어가서 여기다가 넣었다)

}

 

.navbar__menu__item.active {

  border: 1px solid var(--color-white);

}

 

.navbar__menu__item:hover {

  background-color: var(--color-dark-pink);

}