프론트엔드/일단 만드는 HTML&CSS

HTML/CSS Day 6

오늘도코딩 2023. 2. 5. 09:13 
section {
  margin-bottom: 24px;
}

👉 각 섹션별 간격을 주어 보기 편하게 한다.

 

.about-me-text {
  font-size: 10px;
  line-height: 16px;
}

👉 line-height는 font-size의 1.6배가 적당

 

.title-text {
  font-size: 11px;
  font-weight: bold;
  color: #282828;
}

.year-text {
  font-size: 11px;
  font-weight: bold;
  color: #282828;
}

👉 float: left or right를 해서 한 줄에 배치한다.

Experience 작성

 

다음 문장이 전 문장을 침범

<div class="float-wrap">
  <p class="title-text">Awesome Programming Company</p>
  <p class="year-text">2020 - Now</p>
</div>
      
      
.float-wrap {
  overflow: hidden
}

👉 overflow: hidden을 사용해 한 줄을 침범하지 못하게 묶음

 

<p class="desc-text">Front-End Web Developer</p>
<p class="desc-subtext">HTML/CSS,JS,React,...</p>

.desc-text {
  font-size: 9px;
  color: #282828;
}

.desc-subtext {
  font-size: 9px;
  color: #282828;
  padding-left: 16px;
}
  1. ABOUT ME 폰트가 lighter 가능하게 적용
  2. name-text 글자 크기:16px, color:#7c7c7c, 두께:bold
  3. about-me-text 글자 크기:10px, 줄 간격:16px
  4. Experience 아래 title과 year의 폰트를 같게
    size: 11px, weight: bold, color: #282828
  5. title과 year를 왼쪽 오른쪽으로 옮기기
  6. 다음 문장이 침범하지 않게 조정
  7. Experience 내용 적기
  8. h2태그 아래 margin 주기