웹개발 1주차 개발일지(2) - 부트스트랩, CSS복습
◎ 부트스트랩
- 예쁜 css를 모아둔 것
●시작템플릿
다른 사람이 미리 작성한 css를 내 HTML파일에 적용한다는 점에서,
부트스트랩 적용은 css파일분리와 원리가 동일하다.
(다만, css파일이 인터넷의 어딘가에 있다는 점이 다름)
https://getbootstrap.kr/docs/5.1/getting-started/introduction/
시작하기
세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.
getbootstrap.kr
본 수업에서는 코드스니펫에 미리 세팅이 되어 그대로 사용했지만,
부트스트랩을 사용하기 위해서는 css링크 스타일시트와 js의 script를 붙여줘야한다.
(나중에 자바스크립트를 사용하기 위해)
<!doctype html>
<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>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
우선 부트스트랩으로 버튼을 하나 가져와보자.
이 버튼 중 하나를 골라 복사 후 붙여넣기를 해보자.
<button type="button" class="btn btn-primary">Primary</button>
css설정을 해주지 않았는데도 파란색버튼이 생겼고 심지어는 클릭도 된다.
안의 텍스트도 바꿀 수 있다.
부트스트랩 페이지를 보면 어려가지의 폼과 컴포넌트를 사용할 수 있고 약간의 수정도 가능하다.
●부트스트랩을 사용하기 전 css복습을 해보자.
먼저 html코드를 작성해주자.
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>css설정을 해주자.
우선 큰 틀을 잡기 위해 배경색을 넣어주고 전체적인 사이즈를 조정해주자.
<style>
.mytitle {
background-color: green;
width: 100%; <!--화면 가득 채워주기-->
height: 250px;
}
</style>
이제 배경 이미지를 넣어주고 글자의 색도 바꾸어준다.
이미지url은 네이버영화에서 가져왔다.
background-image: url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-size: cover;
background-position: center;
color: white;
안의 내용물을 가운데로 가져오자.
내용물의 위치를 정렬할때는 dispaly-flex를 사용한다.
display: flex;
flex-direction: column; <!--가로로 정렬시에는 row-->
justify-content: center;
align-items: center;이제 버튼을 꾸며주자.
버튼을 꾸밀때는 class로 명칭을 붙여서 꾸며도 되지만
버튼이 하나이거나 안에 들어있는 모든 버튼에 대한 설정인 경우에는 .상위명칭 > button으로 지칭해도 된다.
버튼은 배경이 투명하고 양 끝이 반구의 형태이다.
위의 텍스트와의 여백도 띄어주자.
.mytitle > button {
width: 200px;
height: 50px;
border-radius: 50px;
background-color: transparent; <!--배경 투명하게 하기-->
border: 1px solid white;
color: white;
margin-top: 10px;
}
여기서 마우스를 버튼에 올렸을때 테두리가 굵어지도록 하려면 어떻게 해야할까?
.mytitle > button:hover { <!--버튼에 마우스가 올라갈때-->
border: 2px solid white;
}
배경이미지를 자세히 보면 조금 어둡다.
배경이미지를 어둡게 나타내는 방법은 구글링을 하면 알 수 있는데
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 를 배경이미지url앞에 붙여준다.
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");
마지막으로 폰트를 적용하자.
폰트는 코드스니펫을 이용했다.
폰트 링크를 <title>아래에 붙이고 font-family를 <style>아래에 붙여주면 완성.
●부트스트랩 활용하기
부트스트랩에 컴포넌트안에 있는 카드를 가져와 꾸며보자.
하단을 쭉 내리다보면 위와 같은 이미지 카드가 나온다. 이 코드를 복사해오자.
화면에 카드4장을 띄우고싶면 row-cols-md-4로 바꿔주자.
(부트스트랩 설명을 보면 해당 내용에대한 설명이 있다.)
이제 안의 내용물을 바꾸어주자.
포스터이미지는 코드스니펫을 사용했고, 안의 텍스트는 바꿔주었다.
여기에 나중에 쓰일 별점과 코멘트를 추가해야하는데 별점은 이모티콘을 사용해야한다.
https://kr.piliapp.com/facebook-symbols/
페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록
× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원
kr.piliapp.com
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>코멘트부분은 css로 글자색을 회색으로 바꾸었다.
한개의 카드가 완성되었다.
나머지 카드도 같게 해줘야하는데, 방금 꾸민 카드를 다른 카드자리에 붙여준다면 간단하다.
우선 카드가 묶여있는 부분을 접어 지워준 후 만들어둔 카드를 붙여넣기하자.
카드가 화면에 꽉 차게 들어가있다.
여기에 여백을 넣어주자.
먼저 이 카드를 <div>에 넣어 하나로 묶어준 후 여백을 넣자.
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</div> .wrap {
width: 1200px;
margin: 20px auto 0px auto;
}
여기에 포스팅박스를 넣어보자.
우선 들어갈 위치에 <div>로 구역을 나눠주자.
<div class="mypost">
포스팅박스
</div>
이 구역을 꾸며주자.
배경색을 넣어 눈에 보이게한 뒤 크기와 내부 정렬을 정해준다.
.mypost {
background-color: green;
width: 500px;
margin: 20px auto 0px auto;
}박스를 자세히 보면 그림자가 있다. 그림자를 넣어주고 안쪽 여백도 넣어주자.
.mypost {
width: 500px;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
이제 부트스트랩에서 필요한것을 가져와서 필요에 맞게 바꿔준다.
① 영화 url : 플로팅라벨의 이메일 입력박스
② 별점박스 : input group에 custom forms
③ 코멘트url : 플로팅라벨의 textarea
④기록하기, 닫기버튼 : 버튼
버튼은 css로 정렬을 해주어야하므로 명칭을 달아주자.
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>버튼의 상단과 사이 여백을 띄어주고 중앙정렬해주자.
.mybtn {
margin-top: 20px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mybtn > button {
margin-right: 10px;
}
그런데 창을 줄이면 카드박스가 잘려서나온다.
카드의 형태를 그대로 유지하려면 모바일처리를 하면 되는데, 가로넓이의 속성을 조절하는 것이다.
설정한 넓이를 최대넓이로 설정한 후 그 전까지의 넓이를 화면의 95%만 채우게하면 된다.
카드박스와 전체 구역에 설정해주자.
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
모바일버전으로 보고싶다면 우측마우스 클릭 후 검사의 toggle device toolbar를 누르면 볼 수 있다.
