반응형
CSS 란?
- Cascading Style Sheets의 약자로 HTML 문서를 디자인하기 위해 사용하는 언어
CSS 예제
화면에 버튼을 3개 만들기 (기본 스타일)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>버튼 페이지</title>
</head>
<body>
<div>
<h2>버튼 꾸미기</h2>
<button>버튼1</button>
<button>버튼2</button>
<button>버튼3</button>
</div>
</body>
</html>
버튼에 직접 style 입혀서 버튼1 꾸미기
<button style="background-color: yellow; width: 100px; height: 50px; border-radius: 20px;font-size: x-large; font-weight: bolder; ">
버튼1</button>
- 이런 식으로 하나씩 꾸며준다면 코드의 중복이 많아져, 코드가 복잡해지고 길어짐
style 태그를 사용해 따로 스타일들을 지정해주고, 버튼에서 id나 class를 통해 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>버튼</title>
</head>
<body>
<div>
<h2>버튼 꾸미기</h2>
<button class="buttonStyle1">버튼1</button>
<button class="buttonStyle1 buttonStyle2">버튼2</button>
<button class="buttonStyle1" style="background-color: skyblue;">버튼3</button>
<button id="button4" class="buttonStyle2">버튼4</button>
</div>
</body>
</html>
<style>
#button4 {
background-color: red;
width: 100px;
height: 50px;
font-size: x-large;
font-weight: bolder;
}
.buttonStyle1 {
background-color: yellow;
width: 100px;
height: 50px;
font-size: x-large;
font-weight: bolder;
}
.buttonStyle2 {
background-color: orange;
border-radius: 20px;
}
</style>- id는 '#id명' class는 '.class명'으로 지정
- id는 중복 사용이 안되지만, class는 중복 사용 가능
- 버튼2에는 buttonStyle1, buttonStyle2를 적용했는데 오랜지 색이 됨 => style태그에서 buttonStyle2가 나중에 나오기 때문, class 적용할 때의 순서는 상관 없음
- 버튼3에는 buttonStyle1을 적용하고 style을 따로 써줘서 하늘색으로 적용했는데 하늘색이 됨 => 태그안에 있는 style이 우선순위를 가짐
- 버튼4에는 id와 class를 이용해 스타일을 적용했는데 빨간색 + 테두리 변경이 됨
=> class보다는 id가 우선순위를 가짐
CSS 파일로 따로 빼기
- 위와 같이 한 HTML 파일에 스타일들을 정리하면, 다른 HTML 파일에서는 저 스타일들에 접근할 수 없음
- 프로젝트가 커졌을 때, 스타일을 일관성있게 유지하기 힘들기 때문에 CSS 파일을 따로 생성해서 접근하며 사용
- css 폴더를 만들고 MyCSS.css 파일 생성
- 이 css 파일에 사용할 스타일들을 정리해 놓고 Main.html에서 MyCSS 파일을 불러와서 사용하면 됨
/* MyCSS.css */
#button4 {
background-color: red;
width: 100px;
height: 50px;
font-size: x-large;
font-weight: bolder;
}
.buttonStyle1 {
background-color: yellow;
width: 100px;
height: 50px;
font-size: x-large;
font-weight: bolder;
}
.buttonStyle2 {
background-color: orange;
border-radius: 20px;
}<!--Main.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/MyCSS.css">
<title>버튼</title>
</head>
<body>
<div>
<h2>버튼 꾸미기</h2>
<button class="buttonStyle1">버튼1</button>
<button class="buttonStyle1 buttonStyle2">버튼2</button>
<button class="buttonStyle1" style="background-color: skyblue;">버튼3</button>
<button id="button4" class="buttonStyle2">버튼4</button>
</div>
</body>
</html>Bootstrap 이란?
- 홈페이지 개발할 때 필요한 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 미리 만들어놓은 프레임워크
- Bootstrap을 사용하면 위에서 했던것처럼 일일이 스타일을 만들어 줄 필요없이 만들어져있는 스타일을 적용시키며 웹페이지를 만들면 됨
- Bootstrap은 웹페이지에서 사용하는 대부분의 요소들을 내장하고 있고, 매우 다양한 스타일들이 있어 필요한 스타일을 골라쓸 수 있어 시간을 절약할 수 있고, 퀄리티를 쉽게 높일 수 있으며, 재사용성도 좋다는 장점이 있음
- 하지만 유연한 개발에는 제한이 있을 수 있다는 단점도 존재함
Bootstrap 설치 방법 - 1. 파일 직접 설치
- 위 홈페이지에 들어가서 원하는 버전의 파일을 다운 받음
- 압축 해제 후 css 파일에 있는 'bootstrap.css' 파일 혹은 'bootstrap.min.css' 파일을 내 프로젝트에 가져옴 ( 둘의 내용은 같지만 bootstrap.css 파일이 용량이 더 크지만, 눈으로 보기에는 편함 )
- HTML의 head 태그안에 다음 태그 추가 ( href에는 자신이 저장해 놓은 경로를 적어주면 됨 )
<link rel="stylesheet" href="css/bootstrap.css">Bootstrap 설치 방법 - 2. jsDelivr을 통한 CDN
- 위의 설치 과정 없이 아래의 코드를 head 태그에 넣어주면 됨
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">- integrity와 crossorigin 속성은 보안 문제로 인해 추가된 속성들 => 개인 프로젝트 진행 시, 굳이 안 써줘도 됨
- 이 코드 또한 위 홈페이지에서 다운로드 페이지에 같이 기록되어 있으니 원하는 버전을 복붙해오면 됨
Bootstrap 사용 방법
- 이제 설치는 끝냈지만 어떤 스타일이 있는지 다 알 수는 없음
- 공식 홈페이지 문서에 원하는 스타일 검색 후 사용
- 공식 홈페이지 문서 : https://getbootstrap.com/docs/
Bootstrap 사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 부트스트랩 css 사용 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<!--<link rel="stylesheet" href="css/bootstrap.css"> -->
</head>
<body>
<div class="container" style="width: 500px">
<h2 class="py-5 text-center">부트스트랩을 이용한 버튼꾸미기</h2>
<button class="btn btn-primary" style="background-color: red">버튼 1</button>
<button class="btn btn-dark btn-lg w-auto">버튼 2</button>
<button class="btn btn-outline-success disabled">버튼 3</button>
</div>
</body>
</html>결과
반응형
'기타' 카테고리의 다른 글
| [Fiddler] Fiddler 사용법 (네이버, 유튜브 검색) (0) | 2022.09.13 |
|---|---|
| [기타] Port Kill (window/mac) (0) | 2022.06.20 |
| [IntelliJ] 디버깅 예제 (window/mac 단축키) (0) | 2022.05.12 |
| [Tistory] 티스토리 글 작성 시 스크롤 이동 및 링크 이동 (0) | 2022.04.15 |
| [Postman] Postman 사용법 (0) | 2021.12.01 |