티스토리 뷰

Frontend/Html&CSS

CSS Flexbox

AlgoRoot 2022. 1. 4. 11:05
반응형

 

(220104_화)

유투버 엘리님이 알려주신 사이트를 참고해 공부했는데 확실히 게임을 하면서 하니 이해도 잘되고 재밌었다. 

이제 막 공부하시는 분들께 강력 추천한다. 

 

https://flexboxfroggy.com/#en

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

 

총 24문제인데 헷갈리거나 모르는 경우에는 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

이곳에서 참고하며 풀어보는 게 좋을 것 같다.

 

나의 경우에는 24번 빼고는 다 풀었는데 24번에서 놓쳤던 부분은 아래와 같다. 

 

조금 고민하다가 답을 참고하였다. 재밌기는 하지만 나는 배울게 너무 많기 때문에 이런 것에 괜한 오기를 가지고 붙들고 싶지 않았다. 

 

#pont {

display: flex;

flex-flow: column-reverse wrap-reverse;
align-content: space-between;
justify-content: center;

}

 

wrap-reverse 부분이 가장 고민했던 부분이었는데 알게 됐으니 머릿속에 새겨놓겠다. 

justify-content: center;은 충분히 내가 할 수 있었는데 놓친부분 같아서 앞으로 코딩할 때도 당연히 알았던 부분도 놓치지 않고 기억해야겠다(사실 기억하고 싶다..)는 생각이 들었다. 

 

 

공부하면서 느끼는 건데 정말 많이 응용을 해봐야 될 것 같다는 생각이 든다. 

 

 

 

Flexbox

(220103_월)

어렵다.. 연습을 더 해야할 것 같다. 

 

1. container. 박스에 적용되는 속성 값과 각각의 아이템

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- div.container>div.item.itme${$}*10-->
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>

 
  

    
   </div>   
  </body>
</html>

 

/*
100% vs 100vh
부모에 상관없이 보이는 viewport에 height에 
꽉 채우고 싶으면 100%

그 컨테이너 안에만 채우려면 100%*/


body,html {
  height: 100vh;
}

.container {
  background: beige;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
/*  flex-flow: column norap; 두 개 합한 것*/
  
  justify-content: space-between; /* main axis 중심축에서 아이템을 어떻게 배치하는지 결정*/
  align-items: baseline; /* 중심축의 반대축에서 정렬 결정 */
  align-content: space-between;
}
  
  /* 왼쪽에서 오른 쪽으로  반대는 flex-end
  * reverse 와 다른 점은 숫자는 그대로, 그냥 방향이 바뀌는 것 뿐*/



.item {
  width: 40px;
  height:40px;
  border: 1px solid black;
  
}


.item1 { 
  background: #9ccc65; 
  flex-grow: 2;
  flex-shrink: 2;
  
  flex-basis: 60%;
  align-self: center;
} 

.item2 { 
  background: #f48fb1; 
  flex-grow: 1;
  flex-shrink: 1;
  
  
  flex-basis: 30%;
} 
.item3 { 
  background: #ce93d8; 
  
  flex-basis: 10%;
} 

.item4{ 
  background: #b38ddb; 
} 
   
   
.item5 { 
  background: #90caf9; 
} 

.item6 { 
  background: #a5d6a7; 
} 
.item7 { 
  background: #fbc02d; 
} 

.item8{ 
  background: #18ffff; 
} 


 .item9{ 
  background: #3949ab; 
} 
   
   
.item10 { 
  background: #8d6e63; 
}

 

 

반응형

'Frontend > Html&CSS' 카테고리의 다른 글

html, css Responsive header 역시나 오늘도 있었던 issue  (0) 2022.01.04
CSS display, position  (0) 2022.01.03
CSS selector  (0) 2022.01.03
Html, CSS Tag, 유효태그 유무 확인 사이트  (0) 2021.12.15