배민찬

html 시맨틱 태그를 사용함

header
nav
section
article
aside
footer

css

em과 rem

em: 상위의 부모 font 사이즈와 관련있음
rem: root 폰트 사이즈와 관련 있음

image align: helper 사용

<div>
    <span class='helper'></span><img src='' alt=''>
</div>

div {
    text-align: center // 수평정렬할 시 사용
}
.helper {
	display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img {
    vertical-align: middle;
}

두 개의 맞닿은 inline-block 엘리먼트는 vertical-align: middle로 가운데 정렬할 수 있음을 이용

table-cell을 이용한 vertical align(주의: float 속성에선 불가)

<div class='outer'>
    <div class='inner'></div>
</div>

.outer {
    display: table-cell;
    vertical-align: middle
}
.inner {
    margin: auto // 수평 줄맞춤을 하고 싶다면
}

또는

.outer {
    display: table-cell;
    vertical-align: middle
    text-align: center;
}
.inner {
    display: inline-block;
}

image resizing

div태그 안에 img를 알맞게 넣고싶다면

<div>
   <img>
</div>

img {
    max-heigth: 100%;
    max-width: 100%;
}

img가 div보다 큰 경우에만 해당(작으면 효과없음)

넘치는 텍스트 …으로 바꾸기

다음과 같은 세가지 속성이 필요

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipse;
}