2022. 10. 31. 12:38ㆍHTML
> 그렇게 말하는 부트스트랩이란 뭔가요?
bootstrap(부트스트랩)이란, 예쁜 CSS 모음집이다 라고 생각하시면 됩니다.
즉, 부트스트랩은 이미 누군가가 예쁘게 디자인해서 만들어 놓은 웹 개발용 객체들을 모아둔 곳이라고 보시면 됩니다.
무료로 제공되므로,
아래의 링크를 클릭해서 들어가서 한번 구경해 보시는 것도 좋습니다.
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
어떤가요?
굉장히 다양하게 제공되고 있지요?
부트스트랩에서는 이와 같이, 웹페이지를 꾸밀 수 있도록 여러가지 미리 디자인 된 객체를 제공합니다.
단, 부트스트랩의 활용을 극대화하기 위해서는 기본적으로 아는 CSS 지식으로 웹페이지를 어느 정도 꾸며두고,
거기에 부트스트랩을 추가 사용해야 예쁜 웹페이지를 제작할 수 있다고 합니다.
자 이제, 다시 예제가 등장했습니다.
부트스트랩을 활용해서 아래와 같은 웹 페이지를 하나 만들어 보기 입니다.
[Tip 1]
<div>태그를 통해 박스로 묶인 객체들, 또는 내용물을 가운데로 정렬하는 손쉬운 방법은 다음과 같습니다.
- display: flex
- flex-direction: column (row로 하면 나란히 나옴)
- justify-content: center
- align-items; center
위 4가지를 세트로 활용합니다. (절대 외울 필요없이, 4가지가 세트로 다니니까 그대로 복붙해서 쓰면된다고 합니다.)
[Tip 2]
이름표 'mytitle' 로 지정된 <div>에 포함된 특정 객체만을 지칭해서 명령을 주고 싶을 때는 아래와 같이 쓰면 됩니다.
- .mytitle > button ----> 이러면 'mytitle' 로 지정된 <div>안에 포함된 'button'에 대해서 직접 명령을 줄 수 있습니다.
[Tip 3]
버튼 위에 커서가 가면, 버튼이 강조되는 효과를 주려면 아래와 같이 하면 됩니다.
- .mytitle > button:hover 를 사용해서 커서가 버튼 위에 있을 때의 행동을 명령하면 됩니다.
- 기존의 경계선 색깔을 강조하는 방법등을 사용하면 됩니다. border: 1px =>> 2px로 설정
[Tip 4]
폰트는 구글 폰트 사용방법에 따라 하면 됩니다. (앞선 포스팅 1주차 5번째 내용을 참고해주세요)
https://finestreet-greenzone.tistory.com/59
[스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(1)
CSS를 활용하여 로그인 페이지 만들어보기의 예제가 제공되었습니다. 본격적으로 더 다양한 태그들을 활용하여 웹페이지를 꾸며보는 시간~ 대상은 바로 아래, (This is) 스파르타! (1) '박스'란 무
finestreet-greenzone.tistory.com
[Tip 5]
배경그림의 밝기 조절은 아래와 같은 명령을 이미지 링크(url) 앞에 붙여서 사용하시면 됩니다.
- linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))
꽤나 복잡한 것 같죠?
예제 코딩 풀이법은 아래에 적어두었습니다.
예제 풀이
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Gowun Dodum', sans-serif;
}
.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;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.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;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>
</html>
외우는게 아니라고 했는데 맞는 것 같습니다.
너무 새로운 게 많이 나와서 외우기가 어렵네요. ㅎㅎ
익숙해질 때까지 계속 써보는게 답인 것 같습니다.
'HTML' 카테고리의 다른 글
| [스파르타코딩클럽] 1주차 9번째 - 포스팅 박스 완성하기 (0) | 2022.10.31 |
|---|---|
| [스파르타코딩클럽] 1주차 8번째 - 본격적으로 부트스트랩 써보기 (0) | 2022.10.31 |
| [스파르타코딩클럽] 1주차 6번째 - 폰트, 주석, 파일분리 (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(2) (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(1) (0) | 2022.10.30 |