[스파르타코딩 무료강의] 2022년도 덕담 공유 패키지 완강 도전! (8강) -제목 채우기

조하! 조이 하고 싶은 것 다하는 블로그입니다!

제가 예전부터 해보고 싶고 도전해보고 싶던 코딩에 처음으로 입문을 합니다! 첫 입문으로는 스파르타코딩에서 진짜 찐! 무료강의로 진행되는 2022년도 덕담 공유 패키지에 도전을 하고자 합니다! 실은,, 제가 2021년도에도 수강신청을 했는데 완주를 못해서 다시 재도전입니다! 응원 부탁드립니다 >_< ! 

 

08. 제목 채우기

• 1. 제목 div 구상하기
  <aside> 💡 먼저, 무얼 어떻게 만들지 전략을 세워봅시다!
  • 만들 것 보기 & 전략 세우기
  • 
  • 빨간색 큰 div로 묶고, 그 사이에 작은 것들을 위치시키면 어떨까요?→ 그리고 가운데 정렬은? display:flex 를 써보겠습니다.
  • → div, h1, p, span 태그를 써 볼거예요!
• </aside>
• 1. 제목 div 만들기
  1. div 구조 잡기
  2. <div class="title"> <h1>덕담 하나 주면 안 잡아먹지!</h1> <p>범규 님이 받은 덕담: <span>2개</span></p> </div>
  3. 꾸며볼까요? - title부터
  4. .title { background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 5vh; }
  5. h1 : 덕담 하나 주면 안 잡아먹지! 배경이 있는 글자를 만들어볼까요?
  6. .title > h1 { font-size: 22px; background-color: white; padding: 8px 16px; border-radius: 16px; margin-bottom: 16px; }
  7. p : 받은 덕담을 텍스트로 보여줍시다!
  8. .title > p { font-size: 18px; } .title > p > span { font-size: 22px; }
  9. 마지막으로 배경색을 없애고, 글씨색을 더하면 끝!
     • [코드스니펫] 글씨색
     • #3f3732

     .title {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     
         padding-top: 5vh;
     
         color: #3f3732;
     }
     

  10. 완성!

 

span으로 따로 한 번 더 꾸며주기! 

tab으로 줄 마추기! 

 padding-top : 5vh; > 보는 사람에 따라 5% 띠우겠다! 

.title > h1 의미 = tilte 안에 있는 h1을 지정해서 꾸며준다! 

            padding:8px 16px; -> 첫 번째 쓰면 위아래, 오른쪽 쓰면 오른쪽 왼쪽! 

            border-radius: 16px; -> 라운디드한 사각형

꼭..! 에어팟 당첨되고 싶다!

태어나 처음듣는 문과생의 코딩무료수업추천! 

조하! 조이 하고 싶은 것, 코딩 도전기!