1. 학습내용
CSS를 쉽게 쓰고, 홈페이지를 좀더 쉽고 예쁘게 만들수 있는 라이브러리에 관해 배웠다.
- 부트스트랩
해당 홈페이지로 들어가서 기본 코드를 복사해 아래와 같이 붙여놓고 써도 되고, 관련 파일을 다운받아 파일 링크를 걸고 작업하면 된다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html> <!--20220527 기준-->스타일을 별도로 적용하고 싶은 것들이 있으면 html 해당 태그에 홈페이지에서 안내하는 클래스명을 적어주면 된다.
내가 쓴 스타일시트를 적용시켜주고 싶다면 부트스트랩 링크 밑에 CSS파일을 링크 써주면 된다.
컨테이너를 구상할때는 아래와 같이 쓰고, 최대 폭은 아래 표를 참조 할수 있다.
.container-fluid 라고 쓰면 해상도에 따라 화면에 꽉차게 자동으로 가로 길이가 늘어나거나 줄어든다.
<body>
<div class="container-fluid">
<h1>Hello, world!</h1>
</div>
저 위의 표에 적힌대로 중단점의 길이가 얼마 이하이면 100%로 가득차게 클래스명을 바꿀수도 있는등.. 여러가지 본인이 원하는 데로 해당되는 콘텐츠의 스타일에 맞춰 클래스명을 적어주면 된다.
또한 그리드도 12열까지 만들 수 있다.
마찬가지로 해상도에 따라 줄거나 늘일수도 있고, 열의 수를 늘이거나 줄일 수도 있다.
2. 어려웠던 점 및 해결방안
그리드 항목중에 아래가 이해가 안되서 보니, 해상도에 따라 auto클래스를 주면 자동으로 열의 크기를 조절해 주는것으로 해석했다.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
자동으로 준다는 말이 무슨말인지 이해가 안됐는데, 그리드를 CSS로 따로 줄 경우 auto에 관해 구글링을 해보았다.
..모든 행의 높이를 같게 만들기 위해서 grid-template-rows 속성을 추가하면, 그 속성에서 정의된 행만 높이가 같아집니다. 행의 개수가 정해진 상태가 아니라면, 즉 행의 개수가 더 늘어날 수도 있다면 CSS를 계속 고쳐야 한다는 문제가 생깁니다...
..이를 해결해주는 속성이 grid-auto-rows입니다. 행의 개수가 늘거나 줄어도 일정한 값을 적용받게 해줍니다...
출처: https://www.codingfactory.net/12431
즉 행의 갯수가 늘어날때 마다 비율조절을 일일히 할 필요 없이 정해진 값대로 자동으로 조절해 주는 것을 의미 했다.
3. 학습소감
CSS 스타일 관련 라이브러리를 공부해 보니, 익숙해지면 처음부터 끝까지 내가 스타일을 적어주는 것보다 시간이 훨씬 절약될 것으로 보였다. 물론.. 해당 스타일을 적용하기 위해 일일히 클래스를 처음에 홈페이지에서 찾아보아야 된다는 불편함이 있지만. 익숙해 진다면 수치값을 내가 일일히 보면서 조절하는 것 보다는 훨씬 좋을 것 같았다.
추가로 부트스트랩을 이용해 만든 무료, 유료 템플릿도 인터넷 상에 검색하면 많이 나오니 그런것도 참조하면 좋을것 같다.
