728x90
<!DOCTYPE html>
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com
/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com
/bootstrap/3.3.2/js/bootstrap.min.js">
</script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="ex1.css">
</head>
<body>
<div>
</div>
<p class="bg-danger img-rounded">
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Quaerat at vitae minus a, quam totam quisquam cumque.
Illo qui impedit hic odit reprehenderit. Quidem voluptates sapiente rerum a non aut?</p>
</body>
</html>div {
width: 200px;
height: 200px;
background-color: orange;
border-radius: 6px
}
p{
width: 200px;
height: 200px;
}
주황색 박스는 CSS로 직접 만든반면에
div {
width: 200px;
height: 200px;
background-color: orange;
border-radius: 6px
}분홍색박스는
<p class="bg-danger img-rounded">간단하게 class 명만 입력하면 금방 만들 수 있었다.
/bootstrap/3.3.2/css/bootstrap.min.css 을 검색한 후
-> min(min은 코드를 압축한 것으로 보기가 상당히 힘들다) 을 지우고 해당 class명을
검색하면 어떻게 적용되어있는지 확인이 가능하다.
직접 검색해보면
.bg-danger {
background-color: #f2dede;
}bg-danger이라는 클래스는 배경색이 적용되어있는 것이 확인가능하다.
728x90
'웹 > 부트스트랩(BS)' 카테고리의 다른 글
| 부트스트랩(BootStrap) 그리드시스템 (0) | 2022.12.25 |
|---|---|
| 부트스트랩(BootStrap) 그리드시스템(grid), 콤포넌트(component), 자바스크립트(JavaScripts) (0) | 2022.12.25 |
| 부트스트랩 영문판, 부트스트랩 한글판링크, 부트스트랩 CDN (0) | 2022.12.24 |