[SSAC 3기] - 2주차-(1)

🙋‍♂️정렬

---

웹 문서에서 특정 요소를 이용해서 가로,세로 가운데 정렬하기

이걸 할줄 알면 "CSS 할줄 아네~" 정도의 소리를 들을 수 있다는 학계의 정설
그 이유는 웹 브라우저가 세로길이 계산을 못하기 때문!!!!!
그러므로 부모태그에 사이즈를 박아(?!)버리면 된다.

1. WORST 방식 (라떼 is Hourse)
   • 아래와 같이 마구잡이로 작성
   • 오직 PC에만 적용되고, 반응형엔 적합하지 않은 방식으로 작성

<!--index.html-->
<style>
  ```css
html, Body {
	height : 100vh;
    position : absolute;
}
</style>
<div style = "top: 50%; 
              left: 50%; 
              width: 20%; 
              hight: 200px;
              margins-left: 100px;
              margin-top: 100px;"
     class = "bg-info
              position-absolute">가로세로가운데
</div>

2. BEST방식 (트랜디한건 아님)
   • 위와 대비해서 한결 깔끔
   • 반응형에 적합함으로써 창의 크기와 모니터의 크기에 상관없이 적용

<style>
  html, Body {
  	height: 100vh;
  }

  #container {
  	width: 100%;
    height: 500vh;
  }
</style>
	<div id="container" 
         class="d-flex justify-content-center align-items">
    	<div class="bg-info p-1">
        	<div class="bg-warning">1번자식</div>
            <div class="bg-primary">2번자식</div>
        </div>
    </div>

💻레이아웃 (LayOut)

---

웹문서의 레이아웃 실습

프론트앤드 개발자는 웹페이지의 레이아웃을 기본적으로 다룰 줄 알아야한다.
그러므로 css, bootstrap을 활용하여 여러 레이아웃을 반복 실습!!!!!

. Bootstarp Grid
- container : container가 감싸고 있는 contents를 가운데 정렬
- row : column을 감싸주는 역할
- col (column) : row에 들어가는 content
-> 한줄을 12칸으로 나눴을때 몇칸을 차지할 것인지 숫자로 옵션을 줌

<div class="container">
	<div class="row-6">
		<div class="col-3"> 1/4 </div>
		<div class="col-3"> 2/4 </div>
		<div class="col-3"> 3/4 </div>
		<div class="col-3"> 4/4 </div>
	</div>

	<div class="row-6">
		<div class="col-3"> 1/4 </div>
		<div class="col-3"> 2/4 </div>
		<div class="col-3"> 3/4 </div>
		<div class="col-3"> 4/4 </div>
	</div>     	
<div>

• m (margins) : 바깥쪽 여백
• p (padding) : 안쪽 여백
  -> 숫자로 여백을 나타냄 (0~5, 5가 가장 넓게 띄우고 1이 가장 좁게 띄움)

   <div class="container"> 
       <div class="m-5">가장 많이 띄움</div> 
       <div class="m-4">...</div>
       <div class="m-3">...</div> 
       <div class="m-2">...</div> 
       <div class="m-1">가장적게띄움</div> 
   </div>

2. Bootstrap Flex
   • 시작
     • d-flex
   • 수직정렬
     • justify-content-start
     • justify-content-end
     • justify-content-center
     • justify-content-between
     • justify-content-around
   • 수직정렬
     • align-items-start
     • align-items-end
     • align-items-center
     • align-items-baseline
     • align-items-stretch

📚과제

---

1. 아래와 같이 레이아웃 작성
   

2. 아래와 같이 레이아웃 작성
   

🦈수업후기

---

CSS의 꽃인 Grid, Flex를 대충, 어레짐작해서 그때그때 임기응변식으로 사용했었는데, 오늘 수업을 들으면서 이해가 됬다.
또한 bootstrap을 개인적으로 부정적으로 생각하고 있었는데 그 색안경이 벗겨지고, 오히려 js나 다른 기능들에 집중할 수 있으면서 완벽한 레이아웃 및 디자인등을 구현할 수 있겠다 라는 생각을 가지게 되었다.
그리고 자신있게 코드리뷰 하는 학습환경이 굉장히 마음에 들었으나,
시간에 쫒겨하는 강사님과 교육생들의 모습이 조금 ,,,,크흠