웹개발 종합반 0 - 1주차 - HTML/CSS/JS/부트스트랩

HTML/CSS/JS(기초)

부트스트랩(CSS)

https://getbootstrap.com/docs/5.0/components/card/

 

부트스트랩 & JQuery 추가하는 코드

    <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>

 

 

구글폰트

<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

// style 파트에 추가
* {
            font-family: 'Gowun Dodum', sans-serif;
        }

CSS 배경이미지 어둡게

size와 position은 배경이미지를 항상 따라다닌다고 생각하기

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

CSS Display: flex

이렇게 4줄도 콤보

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

CSS box 그림자

box-shadow: 0px 0px 5px 0px grey;

CSS PC/모바일에서도 화면 비율 일정하게 맞추는 방법

max-width: 500px;
width: 95%;