CSS tip

1. 소수점 표기법: css값 마지막은 세미콜론을 안넣어도 된다. ;} → }

2. 마진 곂침현상: 큰수가 먼저 표현된다. 여백은 한방향으로 준다. margin보단 padding.

div{margin-bottom: 10px;}

div{margin-top: 10px:}

결과: 10px만큼의 여백이 생긴다. (20px이 아니다.)

div{margin-bottom: 20px;}

div{margin-top: 10px:}

결과: 20px만큼의 여백이 생긴다. (30px이 아니다.)

3. Padding과 maring의 우선 순위: 무조건 padding을 준다. 하지만 배경에 색/이미지/선(border)이 있을 경우 margin을 준다.(위의 더블마진현상을 방지하기 위해)

4. 높이 100%:

첫번째 방법: position: absolute or fixed; height: 100%;

두번째 방법: html, body{height: 100%} div{heightr: 100%;}

ㄴ원하는 영역에 표현하려면 해당 모든 부모에 100%를 넣어야 한다.

세번째 방법: div{height: 100vh;}

ㄴ원하는 영역에 표현하려면 부모 100vh, 자식 100%

5.  attr();코드: <div data-text=" 텍스트"> div:after{content: attr(data-text);}

6. 말줄임표: 

한줄: overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ← 모든 브라우저에서 사용 가능.

두줄이상: display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical, overflow: hidden; ← 익스플로러, 파이폭스 안됨. 모바일에서만 사용가능하다.