TIL

TIL 2020.11.06

paigekim29 2020. 11. 6. 10:27

HTML & CSS

1. To RESET html

1
2
3
4
5
6
7
8
* {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  padding: 0;
}
 cs

 

2. FLEX: grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 🤯

  • apply to children but does not give any property
  • decide how much you want to expand the children
  • flexbox can extend with need
    1
    flex: 0 1 auto;
    		 cs
  • grow
    • represents ratio
    • grow 1: expands equally
    • grow 0: only upto its content's size
      1
      2
      3
      .left {
        flex: 0 1 70px;
      }
      		  
  • shrink
    • leave as 1 most of times
    • need to study more how to count 🤯
  • basis
    • if you give exact px, it will not grow more than that
    • if you put as '0%' over 'auto', each div will get exact same width regardless of length of each contents in div
  • if you put width and flex-basis together, flex-basis gets priority. If contents inside box overload, width does not guarantee exact size. In order to prevent that, it is better to use 'max-width' over 'width' if you do not use flex-basis.
  • In order to apply vertically, need to use as below,
    • put display:flex and flex-direction:column to parent and put flex on child
      1
      2
      3
      4
      5
      <div htmlclhtmlass="col w20">
          <div class="row h40">영역1</div>
          <div class="row h40">영역2</div>
          <div class="row h20">영역3</div>
      </div>
      		 cs
      1
      2
      3
      4
      5
      6
      7
      8
      .col{
          display: flex;
          flex-direction: column;
      }
       
      .h40{
          flex: 4 1 auto;
      }
      		 c

reference:

https://heropy.blog/2018/11/24/css-flexible-box/

https://studiomeal.com/archives/197

3. WIREFRAME

  • design layout to show how the final will be
  • first time making wireframe in order to start twittler with pair but not sure whether I did it correctly or not but it definitely helps me to brainstorm first before I write codes

  • Result with HTML & CSS: