20201119 (목)

HTML의 emmet 활용하기

emmet문법으로 작성한 뒤 tab키를 눌러주면 자동으로 html코드가 작성된다

ol>li*3

  <ol>
    <li></li>
    <li></li>
    <li></li>
  </ol>

ol>li{test}*3

<ol>
    <li>test</li>
    <li>test</li>
    <li>test</li>
  </ol>

ol>li{$}*3

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>

ol.orderlist>li#num${$}*3

<ol class="orderlist">
      <li id="num1">1</li>
      <li id="num2">2</li>
      <li id="num3">3</li>
</ol>

ol.orderlist>li.item.num${$}*3

<ol class="orderlist">
  <li class="item num1">1</li>
  <li class="item num2">2</li>
  <li class="item num3">3</li>
</ol>

.이나 #은 css에서 쓰는 selector와 같다

위처럼 아이템 안에 아이템을 겹겹이 위치시킬 때는 >를 쓰지만, 단순히 나열하고 싶을 때는 +를 쓰면 된다

div.container+section+p#text

<div class="container"></div>
<section></section>
<p id="text"></p>

 

---

Flex box란?

아이템들을 정렬하고 일정한 간격으로 배치할 수 있게 도와준다!

• main axis가 가로이면 아이템들이 가로로 배치되고, 세로이면 세로로 배치된다.
  main axis가 아닌 축은 cross axis라고 부른다
• container 속성과 item 속성을 지정할 수 있다

container 속성

먼저 display를 flex로 적용해야 한다

display: flex;

 

• flex-direction: 축 지정. 나열 순서.
  row: default. 왼->오
  column: 위->아래
  각각의 속성에 -reverse를 붙이면 아이템의 순서가 반대가 됨!
  
  
• flex-wrap: 공간이 부족할 경우 item을 줄 바꿈 하여 묶음
  nowrap: default. 줄 바꿈이 되지 않음
  wrap: 줄바꿈
  wrap-reverse: 뒤에서부터 wraping 됨
  
  
• flex-flow: direction과 wrap을 한 번에
  
  
• justify-content: main axis를 기준으로 아이템 배치, 정렬(gravity).
  flex-start: default. 왼쪽/상단
  flex-center: 가운데
  flex-end: 오른쪽/하단
  
  space-around: 각 아이템의 주변을 감싸는 빈 공간 부여(아이템의 시작과 끝 공간이, 각 아이템 사이 공간보다 좁게 설정된다)
  space-evenly: 아이템 시작과 끝, 각 아이템의 사이의 공간이 모두 일정
  space-between: 아이템 사이에만 공간을 준다
  
  flex-direction과의 차이? 아이템의 순서는 그대로이고, 정렬 방식만 바뀐다

 

 

align-content, align-items 등 교차축을 기준으로 하는 배치도 알아보자