[학습 기록] Day3: CSS(flexbox), Bootstrap

 

배운 내용 요약 정리

 

• CSS: w3schools 문서 기반
• Flexbox 학습하기: Froggy Game으로 https://flexboxfroggy.com/#ko
• Bootstrap 프레임워크

CSS: 기억해두고 싶은 내용 위주로

z-index 속성
- 요소끼리 겹치게 배치할 수 있는 속성
- z-index 속성은 요소의 스택 순서(어떤 요소를 다른 요소보다 앞이나 뒤에 배치해야 하는지)를 지정
- 양수 또는 음수의 값을 가질 수 있다.
- z-index 없이 겹쳐지는 경우, HTML 코드에서 가장 마지막의 요소가 위로 배치된다.

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

clearfix Hack
플로팅된 요소가 containing element보다 높이가 길면, 컨테이너 밖으로 overflow가 일어난다.
이때 clearfix hack을 이용할 수 있으며, 아래의 코드는 다수의 웹사이트에서 실제 쓰이고 있다.

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

float을 사용해 반응형 웹 만들기
https://www.w3schools.com/css/tryit.asp?filename=trycss_website_layout_grid

Basic Dropdown 만들기
- 작은 화면에서도 스크롤이 가능하도록 overflow: auto를 추가해야 한다.

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

 
Flexbox 학습하기:Froggy Game으로https://flexboxfroggy.com/#ko
flexbox의 다양한 속성에 대해 빠르게 실습하고 연습할 수 있는 게임이다!

 
Bootstrap

Bootstrap 5는 반응형 모바일 웹사이트를 만드는 데 가장 인기 있는 HTML, CSS, JavaScript 프레임워크다.

Get Started
css와 js링크를 문서에 복붙해서 시작할 수 있다.

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>​

Container
Bootstrap 5에는 사이트 콘텐츠를 래핑하는 컨테이닝 요소도 필요하다.
선택할 수 있는 컨테이너 클래스는 두 가지가 잇다.
▶ .container: 반응형 고정 너비 컨테이너를 제공
▶ .container-fluid: 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공

부트스트랩을 잘 이용하려면 컨테이너를 잘 이해하는 게 중요한 것 같다.

Grid System
부트스트랩은 flexbox를 기반으로 구축되었으며 페이지 전체에 최대 12개의 열을 허용한다.
이 그리드 시스템은 화면 크기에 따라 열이 자동으로 다시 정렬되는 뛰어난 반응성을 갖는다.
https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php

 
 

회고

하루하루 부족한 점만 느껴진다! 그래서 좋다.
html과 css만 겨우 알던 나는...
현재 과제로 만들고 있는 자기소개 페이지도 순수 css로 엄청 노가다해서 레이아웃을 배치했다.
그렇기에 반응형으로 만들기는 너무 복잡해서 무리였다. 
무엇보다 미디어 쿼리를 잘 이해하지 못했었다.
 
그런데 오늘 부트스트랩을 접하고 나니 너무 신세계라 충격적이다 ㅋㅋㅋㅋㅋㅋ
내 코드가 굉장히 하찮아 보였다.
반응형 웹사이트를 누구보다 깔끔하게 만들어주더라........
 
그리고 오늘은 처음으로 다른 수강생 분들의 자기소개 웹페이지가 올라왔다.소개란을 보니 기억으로는 한분빼고 다 전공자이셨고, 레이아웃부터 나같은 초보자가 만든거랑 급이 다른 느낌이었다!
그치만 절망적이라기보다는 엄청난 자극 ...
뒤쳐지지 않게 열심히 해야겠다.밥 먹고 얼른 내 자기소개 페이지도 만들어줘야겠다 ㅎㅎㅎㅎ
 
그리고 공식문서, mdn 같은 웹 문서를 기반으로 공부하는 게 얼마나 좋은지 요즘 느끼고 있다.
나는 아무래도 경영대학을 나왔고...문과 공부방식에 익숙하다보니 교재 기반으로 차근차근 나가는 걸 좋아했다.
근데 코딩은 그렇게 공부해선 안되는 거 같다.
어제 받은 교재로 공부하는 30분보다 웹 문서 기반으로 공부하는 30분이
훨씬 실무에서 쓰이는 코드를 파악하기도, 직접 실행 결과를 보면서 이해하기도 용이했다.
이제라도 깨달았다는 점에 감사한다.
 
그리고 항상.....부족한 나를 응원해주시는 영준님 덕분에 힘이 난다.
보고계시나요 영준님? 샤라웃 했습니다^^