본문 바로가기

web/CSS

CSS 기본

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

//구글폰트 전체적용
* {
            font-family: 'Gowun Dodum', sans-serif;
        }
        
        
//부트스트랩, 제이쿼리시작
<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>
     
//백그라운드 이미지 
{
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
    background-position: center;
    background-size: cover;
}

//요소를 정 중앙에
{
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


//마진(상 우 하 좌)
{
	margin: 20px 5px 5px 5px;
}

//패딩은 안쪽 간격