attribute1

attribute2

attribute3

1. margin, padding

• margin: 요소 바깥으로 범위 잡힘

• padding: 요소 안쪽으로 범위가 잡힘

  🔷 <a>

  • margin 넓히면 a태그 바깥이 넓어지므로 a태그 크기가 커지지 X
  • padding 넓히면 안쪽으로 넓어지는것이기 때문에 a태그 적용 O

  🔷 border

  • margin 넓히면 요소 바깥이 넓어지기 때문에 border 상관X
  • padding 넓혀야 요소의 border가 커짐

• margin { _ _ _ _ }: 각각 상 우 하 좌 에 해당 (시계방향)

2. float

block 요소를 억지로 위로 올리려면 float:left/right 써야하는데 float을 쓰다보면 float이 적용된 요소의 부모요소가 height를 잡지 못하는 경우가 발생

이럴때 float이 적용된 요소의 부모요소에 clearfix를 적용시켜야 함

/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after{display: block;content: '';line-height: 0;}
.clearfix:after{clear: both;}

3. flex

flex 쓸땐 clearfix, float 전부 안써도 됨

하지만 IE9인가 IE10 미만으로는 지원을 하지 않아 가급적 지양

• justify-content
  • space-between: 끝에 붙어서 자동 정렬
  • space-around: 끝에 안붙고 자동 정렬
• align-item
  • 원래는 위에 baseline을 기준으로 하지만
  • center로 하면 중간이 기준선이 돼서 각 요소 크기 상관없이 중앙정렬

4. vh, vw

viewport height, viewport width로 켜져있는 화면의 길이값을 표현

• 세로값 100vh