[Web] CSS 기초 + Bootstrap

CSS

Cascading Style Sheets의 약자로 HTML로 만든 웹페이지를 꾸며주는 역할

사용 방법

HTML에 지정된 이름이나 태그로 선택자를 구분하여 지정

• id : #으로 식별 (ex. #tag)
• class : .으로 식별 (ex. .tags)
• 특정 태그 하위 태그 : (ex. .tags > button)

<!-- HTML -->
<div id="tag">
    Id
</div>
<div class="tag-group">
    Class
    <button>클릭</button>
</div>

/* CSS */
#tag {
    background-color: red;
}
.tag-group {
    background-color: green;
}
.tag-group > button {
    background-color: yellow;
}

 

 

자주 사용하는 CSS 속성

배경

/* 배경색 */
background-color: green;

/* 배경이미지 */
/* linear-gradient : 그라데이션,  url("링크") : 이미지 URL */
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-size: cover;

/* 배경위치 */
background-position: center;

크기 및 서식

/* 크기 (너비, 높이) */
width: 100%;
height: 250px;
/* 최대 너비 */
max-width: 500px;
width: 95%;

/* 색상 */
color: white;
/* 그림자 */
box-shadow: 0px 0px 3px 0px gray;

정렬 및 레이아웃

/* 반응형 정렬 */
display: flex;
flex-direction: column; /* 또는 row */
justify-content: center;
align-items: center;

/* 레이아웃 */
margin: 20px auto 0px auto;
padding: 20px;

---

Bootstrap

공통적으로 사용하는 CS 코드의 묶음
https://getbootstrap.com/docs/5.0/getting-started/introduction/

5.0 시작하기

아래 코드를 추가해주면 바로 사용 가능

CSS

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

JS - Bundle

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