CSS (3) 썸네일형 리스트형 [CSS] 여러 줄의 말 줄임표, '...', ellipsis 처리 p { display: -webkit-box; -webkit-line-clamp: 1; /* 줄 길이 */ -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; } [CSS] 이미지 최적화 코드 추가(chrome) 유난히 크롬과 아이폰에서 이미지 해상도 문제가 생겨서 이미지 해상도 최적화를 위해 몇가지 방법을 찾았다. 해당 코드를 background: url()을 통해 넣은 CSS 코드에 함께 넣어주면 된다. 1. image-rendering: -webkit-optimize-contrast; 이미지의 랜더링 방식을 선명하게 하도록 설정 2. backface-visibility: hidden; 이미지의 뒷면을 숨김으로서 입체감 방지 div { background: url(../이미지경로) no-repeat 0 0; background-size: contain; /* 밑의 내용 추가 */ image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; } [Sass/SCSS] 1. Sass/SCSS 기초 1. 왜 CSS 전처리기를 사용해야하는가? CSS는 작업이 고도화 될 수록 가독성과 유지보수가 어려워질 수 있습니다. 코드의 재활용성을 높여 클린 코드를 작성하고, 가독성과 생산성을 높이기 위해 전처리기의 사용이 필요합니다. 2. CSS 전처리기(Preprocessor) 전처리기라는 이름처럼 CSS의 동작 전에 사용되는 기능으로 CSS의 불편한 점을 상쇄시키는 확장 기능입니다. 3. 왜 Sass/SCSS를 사용하는가? 가장 많이 사용되는 CSS 전처리기는 Less, Sass(SCSS), Stylus 세 가지가 있습니다. Less는 난이도가 낮아 접하기 쉬우나 기능의 한계가 있습니다. Stylus는 비교적 후발주자로 성숙도가 떨어지기에 사소한 버그가 있을 수 있습니다. Sass/SCSS는 앞서 언급된 Le.. 이전 1 다음