삐뚤빼뚤 프론트 개발

hr {

border: 0;

height: 1px;

background: red

}

 chrome 에서 이쁘게 나옴

overflow: hidden;

text-overflow: ellipsis;

white-space: normal;

max-height: 35px;

word-break: break-all;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

위에서 line 수와 max-height 값을 유동적으로 변경하면됨

1.table - 1. colgroup이 있다면 col width의 총 너비를 계산해볼 것.

vuetify : nuxt로 처음 세팅할때 왼쪽 메뉴가 자동 생성됨

bootstrap : 4버전에서 기본 포함 아이콘이 없으며, 왼쪽 메뉴 collapse는 만드는게 빠른듯

https://github.com/GeunHeeKim/FDS/blob/gh-pages/Source/css/css-flexbox.md

한 라인에서 텍스트와 아이콘 이미지가 같이 있는 경우 ie 등 멀티 브라우저를 지원할때 vertical align 을 보기좋게 하는거...

EM - 상위 요소를 기준으로 폰트 사이즈를 정함 ( 대문자 M 의 너비를 의미한다고 함. 그럼 M은 그렇다 치고 E는 무슨뜻인지 모르겠음;)

REM - html 요소를 기준으로 폰트 사이즈를 정함 ( Root EM 이라는 뜻.)

이전 프로젝트에서 함께 일하던 개발자분이 세팅한 방법을 보고 참 아름답다고 생각했음.(나만 몰랐던것인가;)

html의 폰트사이즈를 10px로 정해놓고 그 하위 모든 요소의 폰트 사이즈 세팅을 rem으로 하면 계산이 매우 쉬워진다. 위 이미지에서의 프로젝트는 기본 폰트사이즈가 13px이다.