[스파르타코딩 무료강의] 2022년도 덕담 공유 패키지 완강 도전! (5강)

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

제가 예전부터 해보고 싶고 도전해보고 싶던 코딩에 처음으로 입문을 합니다! 

첫 입문으로는 스파르타코딩에서 진짜 찐! 무료강의로 진행되는 2022년도 덕담 공유 패키지에 도전을 하고자 합니다! 

실은,, 제가 2021년도에도 수강신청을 했는데 완주를 못해서 다시 재도전입니다! 응원 부탁드립니다 >_< ! 

 

05. 오늘 쓰일 CSS 공부하기

• 1. CSS 응용
  • 오늘 쓸 CSS만 공부해도, 원하는 모양을 만들 수 있습니다!</aside>
    1. 우선 example2.html 파일을 만들고, 기본 html 구조를 잡읍시다
       1. 우선 div로 구역을 나눠주고 실습할게요!

       <div class="box">
           <div>첫 번째 구역</div>
           <div>두 번째 구역</div>
       </div>
       

       1. 눈에 보이지 않았던 '구역'에 사이즈를 주고, 색을 칠해줍니다!

       .box {
           background-color: green;	
       	  width: 800px;
       	  height: 800px;
       		color: white;
       }
       

       1. 첫 번째 구역(red)과 두 번째 구역(blue)에도 사이즈를 주고 색을 칠해볼게요!

       .first {
           background-color: red;
       		width: 300px;
       		height: 300px;
       }
       .second {
           background-color: blue;
       		width: 400px;
       		height: 400px;
       }
       

    2. 한걸음 더 나가볼까요?
       1. 배치도 살짝 바꿔보고, (display: flex)

       .box {
           background-color: green;
           color: white;
       
           width: 800px;
           height: 800px;
       
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }
       
       .first {
           background-color: red;
       
           width: 300px;
           height: 300px;
       }
       
       .second {
           background-color: blue;
           width: 400px;
           height: 400px;
       }
       

       1. margin으로 둘 사이의 간격을 살짝 띄어주면 끝!
  • <aside> 👉 반복해서 알려드립니다 - 외우지 마세요! 코딩은 찾아보면서 하는 것!

내가 직접 정리하는 덕담 공유 패키지 5강 

 

중앙정렬!

  display:flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

 

 display:flex;

        flex-direction: row;

        justify-content: center;띄

        align-items: center;

간격 띄우기 (바깥으로) top, left, right도 활용가능! 

        margin-bottom: 10px;

 

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

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

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