HTML/CSS Day 5

그림자 표현하기

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);

폰트 적용하기

fonts.google.com 접속

montserrat 폰트의 regular 400 찾기

HTML에 <link> 활용 or CSS에 @import 사용

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  font-family: 'Montserrat', sans-serif;
}

파일 상단에 붙여 넣기

👉 @import : 구글 폰트를 가져옴

👉 * {} : 문서 전체에 적용

 

body,h1,h2 {
  margin: 0px;
  padding: 0px;
}

 

브라우저마다 간격이 조금 다를 수 있으므로

표준을 맞추기 위해 간격 초기화를 해야 한다.

 

HTML/CSS 개발자 아래에 글 작성

<section>
  <h2>ABOUT ME</h2>
  <p class="about-me-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit atque, perferendis cum culpa nemo temporibus eum labore, eaque placeat non aliquid laboriosam asperiores? Deserunt sed unde sunt, odit ad nisi.</p>
</section>

 

h1 {
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
}

h2 {
  font-size: 20px;
  font-weight: lighter;
  color: #282828;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 5px;
}

 

🗒️ 정리

1. 그림자 표현하기
2. monserrat regular 400 CSS로 적용하기
3. 간격 초기화 하기
4. About Me 섹션과 내용 작성 (h2, p)
   <p>태그 class를 "about-me-text"
5. mainbox의 text-align 삭제
6. h1 : 사이즈 36px, bold, italic
7. h2 : 사이즈 20px, lighter, 글자색 #282828, 밑줄 1px solid #ebebeb
8. h2 태그의 밑줄 간격 5px 줌