CSS란?
구조만 있는 HTML 텍스트에 스타일을 입혀주는 언어
ex) html - 사람, css - 옷
- HTML 문서에 'style' 태그 안에 삽입할 수도 있고
- 별도의 파일로 분리하는 것도 가능
css 선택자 우선순위
id > class > tag
박스 모델(Box Model)
- content : 텍스트, 내용
- padding : 텍스트와 테두리의 공간
- border : 테두리
- margin : 요소 바깥의 외부 공간
🔎 CSS 사용해보기
1. 외부 CSS 파일 연결해서 사용해보기
1) style.css 파일 생성
2) head 태그 안에 아래와 같은 코드를 추가하여 사용<link rel="stylesheet" href="style.css">2. 내부 head > style 태그 안에서 사용해보기
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 사용해보기</title>
<style>
/* 스타일 추가 */
body {
font-family: 'Chiron GoRound TC';
background: rgb(255, 254, 246);
color: rgb(21, 20, 20);
}
</style>
</head>Bootstrap이란?
CSS가 옷을 직접 만들고 코디해서 입는 거라면
Bootstrap은 이미 만들어져 있는 옷을 코디해서 입는 거라고 이해했다.
🔎 부트스트랩 사용해보기
별도의 설치 없이 CDN으로 바로 사용 가능
-
부트스트랩 홈페이지 접속 > Docs 페이지에서 CDN 링크 복사
https://getbootstrap.com/docs/5.3/getting-started/introduction/
-
아래 코드와 같이 head 태그 안에 링크 붙여넣기
*참고 : rel="stylesheet"가 없으면 브라우저가 이게 CSS 파일인지 몰라서 적용을 안 해서 추가해 줘야 함<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"> </head>
-
부트스트랩에서 사용하고 싶은 컴포넌트 복사 후 body 태그 안에 붙여 넣으면 사용 가능
<body> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button> </body>
-
결과
