Menu Slider & Modal (3) - Style Header & Main Section

본 포스트는 udemy.com에 올라온 Brad Traversy의 20 Web Projects With Vanilla JavaScript 강의 중 하나를 정리한 내용입니다.

https://www.udemy.com/course/web-projects-with-vanilla-javascript/ 

20 Web Projects With Vanilla JavaScript

 

 

가장 위 Header 부분 꾸미기.

 

 

 

 

 

 

header {
  background-color: var(--primary-color);
  color: #fff;
  font-size: 130%;
  padding: 40px 15px;
  text-align: center;
  position: relative;
}

background-color는 primary 색으로, 글자는 흰색 #fff

font-size: 130%해서 크게

padding 주고

text-align:center해서 다 중앙에 배치

position:relative한 이유는

나중에 toggle Button을 position:absolute 줘서

toggle Button이 이 헤더를 기준으로 배치되게.

 

header h1 {
  margin: 0;
}

header p {
  margin: 30px 0;
}

 

header에 있는 h1과 p 마진 조정

 

 

button,
input[type='submit'] {
  cursor: pointer;
  background-color: var(--secondary-color);
  color: #fff;
  padding: 8px 12px;
  border: 0;
  border-radius: 5px;
}

button:focus {
  outline: none;
}

<button> 과 <input> 중 타입이 submit인 elements들의 공통 style

cursor:pointer로 바꿔서

그 버튼 위로 cursor가 가면 클릭할 수 있다는 시그널을 줌.

배경색과 글자색 넣어주고 padding 넣어서 크기 키워준다.

기본 border을 없애고, border-radius:5px;을 줘서 모서리를 부드럽게 만든다.

 

button의 경우 클릭을 하면 outline이 생기는데, 그걸 없애준다.

 

 

 

.toggle {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 20px;
  left: 20px;
}

드디어 toggle Button

아까 위에서 기본 배경색을 줬지만, 얘는 검정색으로 배경색으로 override 시킨다.

position:relative를 준 <header>를 기준으로 배치하기 위해

position:absolute를 주고 top:20px left:20px을 줘서

header 기준 위로는 20px 왼쪽으로는 20px 간 위치.

 

 

 

 

.cta-btn {
  padding: 12px 30px;
  font-size: 20px;
}

Header 안 Sign Up이라고 적힌 call to action button에

패딩을 주고 font-size를 조절해서 크기를 바꿔준다.

 

 

 

---

 

 

.container {
  padding: 15px;
  margin: 0 auto;
  max-width: 100%;
  width: 800px;
}

main section은 특별할 게 없다.

padding을 주고 margin: 0 auto;해서 모든 걸 다 중앙에 배치

width:800px을 주고 max-width:100%를 주면

화면 크기를 막 늘려도 width:800px을 유지하고 거기를 꽉 채워서 쓴다.