개발 공부 일지/웹
bootstrap(부트스트랩) CSS 모음집
- -
반응형
bootstrap이란?
예쁜 CSS를 미리 모아둔 것으로 미리 완성된 부트스트랩을 가져다 사용하기 좋다.
부트스트랩 컴포넌트 5.0: https://getbootstrap.com/docs/5.0/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
부트스트랩 활용법
index.html 파일을 만들어서 연습하기!
<h1>이걸로 시작해보죠!</h1><button type="button" class="btn btn-primary">나는 버튼이다.</button>첫 번째 h1내용을 지우고 두 번째 button 내용을 붙여 넣기!
부트스트랩 사이트에서 원하는 것을 찾아 복사하여 붙여 넣어 사용하면 된다.
CSS 꿀팁 배우기
위 이미지대로 만들어 보자!
<body>
<div>
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div> <style>
.mytitle {
background-color: green;
width: 100%;
height: 250px;
}
</style>
</head>
background-color를 그린색으로 해서 영역을 확인하고 width, height로 영역을 넓혀주었다.
.mytitle {
background-color: green;
width: 100%;
height: 250px;
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-position: center;
background-size: cover;background-image, background-position, background-size를 이용해 상어 배경을 넣는다.
제목이 검은색이라 알아볼 수 없어 수정을 한다.
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-position: center;
background-size: cover;
color: white;background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 배경을 더 어둡게 하는 설정
h1과 button을 중앙으로 정렬을 해야 하는데 이때 내용물을 정렬하는 손쉬운 방법이 있는데 display: flex를 이용하는 것!
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
button 꾸미는 과정을 해보자.
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>mytitle에 있는 button이라는 친구
.mytitle > button {
}
</style>위처럼 style안에 넣어주고
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 1px solid white;
margin-top: 10px;
}내용을 넣어준다.
.mytitle > button:hover {
border: 2px solid white;
}hover를 추가해주면 button에 마우스 커서를 올리면 button선이 두꺼워지는 효과를 준다.
CSS 꿀팁 폰트 넣기
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style> <style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
반응형
'개발 공부 일지 > 웹' 카테고리의 다른 글
| 포스팅 박스 만들기 (0) | 2022.09.01 |
|---|---|
| 부트스트랩 활용하기 (0) | 2022.09.01 |
| 구글 웹폰트, 주석 처리 알아보자! (0) | 2022.08.31 |
| 자주 쓰이는 CSS 연습해보기(2) (0) | 2022.08.31 |
| 자주 쓰이는 CSS 연습해보기(1) (0) | 2022.08.31 |
Contents
소중한 공감 감사합니다