30 JavaScript로 배우는 CSS -1

🤔 CSS 더 살펴보기 🤔

이름은 30 JavaScript지만 살펴보면 CSS도 꽤나 활용하고있는 챌린지이므로 CSS도 뜯어보고 가도록 하자.

---

☝ box-sizing

html {
    box-sizing: border-box;
    background: #ffc600;
    font-family: 'helvetica neue';
    font-size: 20px;
    font-weight: 200;
  }

box-sizing MDN문서

 

box-sizing속성은 해당 요소의 크기 설정의 기준을 정하는 속성이라고 보면 되겠다.

 

box-sizing syntax

• content-box : content만을 기준으로 삼는다.
• border-box : content + padding + border까지를 기준으로 삼는다.
• initial : default값으로 설정한다. box-sizing의 디폴트값은 content-box다.
• inherit : 부모요소의 속성을 상속받는다.

content-box와 border-box의 예제를 보자.

.bc {
    width : 100px;
    border : 10px solid black;
    padding : 10px;
}

위와 같은 조건의 .bc라는 클래스를 가진 div가 있다고 가정해보자.

 

border-box의 경우

.bc div는 border, padding의 두께를 포함해서 100px가 되도록 content의 width도 조정된다.

따라서 .bc의 content의 width는 60px밖에 되지않는다.

 

content-box의 경우

.bc div는 border, padding은 무시하고 오로지 content의 크기가 100px이 되도록 조정된다.

따라서 .bc의 전체 width는 140px이 될 것이다.

 

☝☝ :before / :after

  *, *:before, *:after {
    box-sizing: inherit;
  }

:after MDN 문서

 

:after와 :before는 CSS2까지의 표기방법이고, CSS3부터는 가상 선택자와 구별하기 위해 콜론을 하나 더 붙여서 

::after와 ::before로 표기한다고한다.

 

모든 HTML요소, 그리고 해당 요소의 앞 뒤에 붙는 가상 선택자도 전부 box-sizing: inherit속성을 정의해주는것인데, 왜 굳이 이렇게 까지 속성을 정의해준것인지 잘 모르겠다. *만 써도 어차피 모든 요소를 지정할 수 있는데 왜 굳이 가상 선택자도 따로 지정/정의를 한 것일까? reset.css처럼 방어코드를 짜는것일까?

 

검색해보니 *는 가상 선택자에는 영향을 끼치지 못한다고 한다. 여기서는 일종의 방어코드라고 보면 되겠다.

stackoverflow QnA 참조

 

☝☝☝ flexbox

  .panel > * {
    margin: 0;
    width: 100%;
    transition: transform 0.5s;
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .panel.open {
    flex: 5;
    font-size: 40px;
  }

flex MDN 참고

display: flex쪽이 아닌 flex: 1 0 auto; 쪽을 알아보자. 하지만 전제조건이 하나 있다. 부모요소에 display: flex;가 선언돼있어야만 flex 속성을 사용할 수 있다.

flex 속성의 목적은 플렉스 아이템이 해당 아이템의 컨테이너에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다.

 

flex 속성의 구문 용법은 참 다양한데, 

flex : flex-grow | flex-shrink | flex-basis 순으로 띄어쓰기로 구분해서 각각의 속성을 정의할 수 있다.

여기서 값을 하나만 쓸 수도, 두 개 혹은 세 개를 쓸 수도 있다.

 

🧑한 개만 쓸 경우 

   flex : 1 == flex-grow : 1

   flex : 10px == flex-basis : 10px

   flex : 10% == flex-basis : 10%

   flex : initial == flex : 0 1 auto

   flex : none == flex : 0 0 auto

   flex : auto == flex : 1 1 auto

 

💑 두 개만 쓸 경우

   flex : 1 1 == flex-grow : 1, flex-shrink : 1

   flex : 1 10px == flex-grow : 1, flex-basis : 10px

   flex : 1 10% == flex-grow : 1, flex-basis : 10%

   flex : 1 auto == flex-grow : 1, flex-basis : auto

 

 👪 세 개를 쓰는 경우

 위의 구문 용법과 같은 형식이며, 순서는 반드시 지켜야한다.

 

👀 flex-grow | flex-shrink | flex-basis 란?

 flex의 구문 용법을 알았으니 각각의 기능에 대해 간단하게 알아보도록 하자.

 

 🌱 flex-grow

   앞서 30 JavaScript Day5 챌린지 분석에서도 말했듯이 이 속성은 해당 flex-item이 flex-container내에서 차지할 수 있는 공간의 정도를 선언하는 속성이다. 

   형제 요소간의 flex-grow의 비례식처럼 공간을 나눠가진다고 보면 되겠다.

   예를 들어 width가 1000px인 컨테이너 안에 item1 : item2 : item3 = 2 : 1 : 1 과같이 각 아이템에 flex-grow값이 선언되어있다면, item1은 1000px을 4로나눈 값에 2를 곱한 500px, item2와 3은 각각 250px씩 차지하게 되는 식이다.

 

  👴 flex-shrink

   flex-item요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink속성을 사용하여 컨테이너 밖으로 나가지 않도록 해주는 속성.

   flex-shrink는 flex-grow와 반대개념이라고 생각하면 되는데, 이 속성은 크기 계산식이 grow보다 복잡하다. 

   flex-shrink는 보통 0 혹은 1로 선언하는 경우가 많다고 하는데, 그 외의 경우를 보고싶다면 이 링크에서 확인할 수 있다.

 

   🧱 flex-basis

   flex-item의 초기 크기를 지정하는 속성. box-sizing을 따로 지정하지 않으면 item의 크기를 변경.

   이 속성값이 auto가 아닐경우 width 선언이 더 밑에 있더라도 무조건 basis값이 적용된다.