Weekly I Learned (1주차)

1주 차 CSS📢

• 웹 페이지에서 이미지나 글씨 가운데로 배치하는 방법 (난 이게 그렇게 헷갈렸는데 세트로 같이 다닌다)

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

• 별 모양은 css의 모든 곳에 적용시켜주는 방법이다.

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

• 백그라운드 이미지도 이렇게 세 개가 세트로 같이 다닌다.
• 여기서 이미지의 url이랑 linear-graient를 같이 사용할 수 있는지 몰랐는데 아주 좋은 방법인 것 같다.

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("");
background-position: center;
background-size: cover;

bootstrap이란?

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

bootstrap 사이트 링크

• 이 부분을 복사하여 meta속성 아래에 복붙해준다!

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

난 부트스트랩을 사용해 보고 싶었는데 같이 따라 해보면서 사용해 보니 너무너무 편하더라.. 여태 하나하나 만들었는데..

1주 차는 쉽기도 하고 알던 내용들이 많아 즐겁게 배웠다!
점점 어려워지겠지? 지금을 즐기자!!!