250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

부트스트랩을 이용해서 만든것과 CSS를 이용해 직접 만든 것의 차이 확인해보기 본문

웹/부트스트랩(BS)

부트스트랩을 이용해서 만든것과 CSS를 이용해 직접 만든 것의 차이 확인해보기

개린이9999 2022. 12. 25. 00:12
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
'웹/부트스트랩(BS)' Related Articles more