[ w3school ์์ ์ ๊ณตํ๋ bootstrap4๋ฅผ ์ด์ฉํด์ ์คํ์ผ ์ฝ๊ฒ ์ ์ฉํ๊ธฐ ]
https://www.w3schools.com/bootstrap/bootstrap_ver.asp
Bootstrap 3, 4 or 5
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
์ฐ์ , ์ ์ฌ์ดํธ์ ์ฌ๋ฌ ์คํ์ผ์ ์ ์ฉํ๊ธฐ ์ํด์ head ๋ถ๋ถ์ ์๋์ ์ฝ๋๋ฅผ ๋ณต๋ถํด์ค๋ค.
<head>
<!--w3school Bootstrap4 CDN-->
<!--ICON-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
๋ถํธ์คํธ๋ฉ์ ํตํด์ ๋ฒํผ์ hover ํจ๊ณผ๋ฅผ ์ฝ๊ฒ ์ฃผ๊ณ ์ถ์๋๋ฐ, ์ํ๋ ์ปฌ๋ฌ๊ฐ ์์๋ค.
์ฐ์ ์๋จ์ ๋นจ๊ฐ๋ฐ์ค์ ํด๋์ค ์ด๋ฆ์ ์ ์ฉํด์คฌ๋ค.
inspect ์ฐฝ์ ์ด์ด๋ณด๋ฉด ์ด๋ค ์์ฑ์ด ์ด๋ค์ญํ ์ ํ๋์ง ํ์ธ์ด ๊ฐ๋ฅํ๋๋ฐ,
btn ํด๋์ค๊ฐ ๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๊ฐ๊ธฐ์ ๋ณด์ด๋ ๋ฒํผ์ด๊ณ ,
btn-light ํด๋์ค๊ฐ ๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๊ฐ์ ๋ ์ฆ hover ์ผ ๋์ ๋ฒํผ์ด๋ผ๋ ๊ฑธ ํ์ธ!
๊ทธ๋์ head ๋ด๋ถ CDN๋ฐ์ style์ฝ๋๋ฅผ ์์ฑํ๋ค.
<style>
.btn {
color: #fff;
background-color: rgb(175, 187, 175);
width: 30%;
height: 60%;
}
</style>
hover ํจ๊ณผ๋ ๊ทธ๋๋ก ์ ์ฉ๋๊ณ , ์ฌ์ด์ฆ์ ์ปฌ๋ฌ๋ง ์ํ๋๋๋ก ๋ณ๊ฒฝ๋์๋ค..!
๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๋ค๋๋ฉด ์๋์ btn-light ํด๋์ค ์คํ์ผ๋๋ก ํ์์ผ๋ก ์์ด ๋ณ๊ฒฝ๋๋ค.
'TIL' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| java ํ๊ฒฝ๋ณ์ ์ค์ (mac m1) (0) | 2022.01.12 |
|---|---|
| Spring Legacy Project ) ํ๋ก์ ํธ ํ๊ฒฝ ์ค์ ํด์ฃผ๊ธฐ (0) | 2022.01.12 |
| Oracle /SQL /๊ธฐ๋ณธ๊ฐ DEFAULT ์ ๊ฑฐํ๊ธฐ (0) | 2022.01.06 |
| String to int / int to String ํ๋ณํ (0) | 2022.01.03 |
| servlet ์์ alert ๋์ฐ๊ธฐ (0) | 2022.01.02 |