CSS 21.03.15

in Dev on CSS


  • wire frame : 단순하게, 레이아웃과 제품의 구조를 보여주는 용도. 큰 틀에서 영역을 나누고 각 영역을 태그와 셀렉터로 표현

  • Hard coidng : 원하는 HTML 출력을 하나하나 입력. 각 영역에서의 주요 태그들을 간단하게 메모하는 형식으로 설계. 여러 태그를 하나의 div 또는 semantic tag로 감싸줘야한다.

Atomic CSS 방법론 : 클래스 이름과 구현을 1:1로 일치시키는 CSS 작성 기법
  • ex code
<div id="container">
  <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w70">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

.w70 { width: 70%; }
.h40 { height: 40%; }
CSS 작성 전 추가해야할 기본 사항
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
<body> tag는 약간의 여백을 가지고 있기 때문에

Flex

flex는 부모 박스에 display: flex를 적용해줌으로, 자식 박스의 방향과 크기를 결정하는 레이아웃. 기본적으로, flex가 적용된 부모 박스의 자식 박스는 왼쪽으로 차례대로 붙게 됩니다.

  • syntax
<section id='parents'>
    <article class='child'>article 1</article>
    <article class='child'>article 2</article>
    <article class='child'>article 3</article>
</section>

/* article 1,2,3의 레이아웃을 정하기 위해서는 부모 tag인 section에 display:flex 적용 필요 */
#parents {
    display: flex;
}

/* flex 태그를 각 자식들에게 적용하여 비율을 결정할 수 있다. */
.child {
    flex: 1 1 auto;
}
flex attribute
  • flex-direction : 레이아웃 방향을 결정
#parents {
    display: flex;
    /* flex-direction: row */
    /* row(가로 방향)는 기본 값이라 생략 가능 */
}

#parents {
    display: flex;
    flex-direction: column;
    /* column(세로 방향)으로 레이아웃 설정 */
}
justify-content vs align-items
  • justify-content : flex-direction의 방향을 기준으로 같은 방향 기준
/* flex-direction이 row(가로 레이아웃)인 경우  */
#parents {
    display: flex;

    /* 왼쪽 정렬(기본 값) */
    justify-content: flex-start; 

    /* 오른쪽 정렬 */
    justify-content: flex-end; 

    /* 가운데 정렬 */
    justify-content: center;

    /* 양쪽 간격을 균일하게 정렬 : 양끝에는 여백 안줌*/
    justify-content: space-between;

    /* 양쪽 간격을 균일하게 정렬 : 양끝에도 여백 줌*/
    justify-content: space-around;
}
  • align-items : flex-direction의 방향 기준을 가로지르는 방향 기준
/* flex-direction이 row(가로 레이아웃)인 경우  */
#parents {
    display: flex;

    /* 위쪽 정렬(기본 값) */
    align-items: flex-start; 

    /* 아래쪽 정렬 */
    align-items: flex-end; 

    /* 가운데 정렬 */
    align-items: center;

    /* 양쪽(위아래) 간격을 균일하게 정렬 : 양끝에는 여백 안줌*/
    align-items: stretch;
}

반드시 알아야할 flex의 개념 : grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

자식 박스의 flex 속성 기본값은 다음과 같습니다. (flex 속성은 부모에 적용하는 것이 아닌, 자식 박스에 적용합니다.)

/* article 1,2,3의 레이아웃을 정하기 위해서는 부모 tag인 section에 display:flex 적용 필요 */
#parents {
    display: flex;
}

/* flex 태그를 각 자식들에게 적용하여 비율을 결정할 수 있다. */
.child {
    flex: 0 1 auto; 
    /* flex: <grow> <shrink> <basis> */
    /* flex: 0 1 auto; (기본값) */
}

  • grow: 박스 늘리기 (주로 사용)

  • shrink: 박스 줄이기 (보통 기본값인 1. shrink는 width나 이후 설명할 basis에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문에 실무에서는 grow를 자주쓰고 shrink는 거의 사용하지 않는다.)

  • grow, shrink는 단위가 없으며, 비례하는 값입니다. 박스를 여러개로 나누었을 때, 각 자식 박스가 갖는 grow값의 총 합이 n이라고 칩시다. 이 때의 1은 1/n의 크기를 의미합니다, 2는 2/n의 크기를 의미합니다.

  • basis: 박스의 기본 크기(박스가 grow나 shrink에 의해 늘어나거나 줄어들기 전 갖게 되는 기본 크기를 의미) : grow가 0일 때, basis 크기를 지정하면 그 크기는 보장. 비율을 균등하게 배치 할 때(1:1:1 등) basis가 auto면 실제 width가 차이난다. basis를 0%로 해야 균등하게 나눠진다. (width와 flex-basis를 동시에 적용하면, flex-basis가 우선)

  • 서로 다른 비율

.child1 {
    flex: 1 1 auto;
}
/* child1의 grow / child1 + child2 + child3 grow의 합  */
/* 즉, child1은 부모 width의 1/6 */
/* (flex direction이 row이기 때문에 width를 기준,flex direction이 column이면 height 기준 ) */

.child2 {
    flex: 2 1 auto;
}
/* child2의 grow / child1 + child2 + child3 grow의 합  */
/* 즉, child1은 부모 width의 1/6 */
/* (flex direction이 row이기 때문에 width를 기준,flex direction이 column이면 height 기준 ) */

.child3 {
    flex: 3 1 auto;
}
/* child2의 grow / child1 + child2 + child3 grow의 합  */
/* 즉, child1은 부모 width의 1/6 */
/* (flex direction이 row이기 때문에 width를 기준,flex direction이 column이면 height 기준 ) */
  • 비율을 균등하게
/*  비율을 균등하게 적용. */
/*  basis를 auto로 하면 실제 width가 차이 나므로 0%로 해야한다. */
.child1 {
    flex: 1 1 0%;
}

.child2 {
    flex: 1 1 0%;
}

.child3 {
    flex: 1 1 0%;
}
  • 고정 사이즈 + 나머지 비율 균등
/*  basis를 원하는 고정 px로 적용. grow는 0이어야한다. */
.child1 {
    flex: 0 1 100px;
}

/* 이 경우 basis를 auto로 작성해야 한다. */
.child2 {
    flex: 1 1 auto;
}

.child3 {
    flex: 1 1 auto;
}
  • 안쪽 박스의 콘텐츠가 넘칠 경우, width가 정확한 크기를 보장하지 않을 것입니다.
  • 안쪽 박스의 콘텐츠가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다. (flex-basis를 사용하지 않을 경우)

[코드 에디터 팁]

  • 중첩 나열 >
div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>
  • 병렬 나열 +
div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>
  • 여러개 반복 *
ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  • 셀렉터 넣기
ul#items>li.item*5

<ul id='items'>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>



© 2020.11. by creamer

Powered by CREAMer