자주 쓰는 CSS

요소의 여백 설정

<style>
	.class명 {
		<!-- 요소의 바깥 부분 여백을 담당 -->
		<!-- top right bottom left -->
		margin: 1px 1px 1px 1px;
        
        <!-- 요소의 안쪽 부분 여백을 담당 -->
		<!-- top right bottom left -->
		padding: 1px 1px 1px 1px;
    }
</style>

(배경 등의)이미지 설정

<style>
	.class명 {
		background-image: url('img URL');
        background-position: center;
        background-size: cover;
    }
</style>

요소를 가운데 정렬 설정

<style>
	.class명 {
		display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

구글 폰트 설정

<style>
		<!-- 해당 폰트 URL -->
        <!-- 아래 폰트는 Noto Sans Korean -->
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

        * {
            font-family: "Noto Sans KR", sans-serif;
        }
    </style>

부트스트랩 설정

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
...
</style>