[TIL] CSS 테이블, 포지션, 플로트

✍ Today I Learned

• table 요소에서 border-collapse: collapse; 를 적용하면 단일 텍스트로 변경된다.
• 티스토리 테이블 표와 같은 스타일로 꾸미려면 nth-child(even or odd) 선택자를 이용한다.

tr:nth-child(even) {
   background-color: #f2f2f2;
}

• vertical-align을 적용하려면 height 값이 설정되어야 한다.
• table에서 overflow 속성을 적용했을 때 콘텐츠의 양이 충분하지 않다면 min-width 값을 설정해야 한다.
• text-overflow: ellipsis; 이렇게 설정하면 넘치는 콘텐츠는 줄임표(...)로 표시된다.
• 레이아웃을 위한 속성으로 position과 float이 있다.
• 크롬 확장프로그램 'Web Developer'를 이용하면 모든 웹 페이지의 아웃라인을 확인할 수 있다. (Outline Block Level Elements 체크!)
• position: absolute; 는 해당 요소의 부모 요소 height값에 영향을 받는다!!