Programming/CSS (10) 썸네일형 리스트형 [CSS] 여러 줄의 말 줄임표, '...', ellipsis 처리 p { display: -webkit-box; -webkit-line-clamp: 1; /* 줄 길이 */ -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; } [CSS/Javascript/React] iOS환경 safari/chrome 브라우저에서 height 100% 안 먹히는 오류 해결 결국 완전히 CSS만으로 해결이 안되었고, 1. Javascript로 style에 새로운 변수를 만들어 디바이스의 세로길이인 window.innerHeight 값을 넣어 보내준 후 2. css에서 해당 값을 가지고 height 값을 정의해주어야 한다. 1. App.js const App = () => { const handleResize = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); }; useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); return () =.. [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; } [CSS] 텍스트 드래그 방지 홈페이지 텍스트 드래그 방지용 CSS 코드 div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 드래그 재활성화를 원하거나 일부분 드래그를 허용하기 위해선 아래의 내용을 넣으면 된다. div { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } [Sass/SCSS] 6. Sass/SCSS Mixins 사용법 Mixins는 style sheet 전반에서 재사용을 할 CSS 그룹을 정의하는 기능입니다. (1) @Mixin //SCSS @mixin 이름 { 스타일 정의 } //Sass =이름 스타일 정의 //SCSS @mixin l-red-text { font-size: 30px; font-weight: bold; color: red; } //Sass =l-red-text font-size: 30px font-weight: bold color: red ① 선택자 포함 가능 ② 상위(부모) 요소 참조 가능 ex)& @mixin l-red-text { font: { size: 30px; weight: bold; } color: red; &::after { content: "content"; } span.icon { .. [Sass/SCSS] 5. Sass/SCSS의 연산 (1) 연산(Operations) Sass는 기본적인 연산 기능을 지원하므로 default value를 기준으로 계산할 시 유용하게 사용할 수 있습니다. 산술 연산자 연산자 설명 참고 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 Number / 나누기 오른쪽 값은 반드시 Number % 나머지 비교 연산자 연산자 설명 == 동등 != 부등 보다 크다 = 보다 크거나 같다 논리 연산자 연산자 설명 and 그리고 or 또는 not 부정 (2) 숫자 (Number) ① 상대적 단위 연산 보통은 px 단위를 사용하여 연산하지만, 상대적 단위의 연산일 경우 CSS의 calc()를 사용하여 연산합니다. width: 100% - 20px; //error 단위 모순 width: calc(100% - 20px.. [Sass/SCSS] 4. 외부 Sass/SCSS 가져오기 1. @import CSS의 경우, 외부 CSS를 불러올 때는 @import를 이용해 가져올 수 있습니다. Sass/SCSS에서는 CSS의 @import로 불러올 수 있는 경우가 4가지 있습니다. - 확장자가 .css 일 때 - 파일 주소가 "http:// 로 시작하는 경우 - url() - Media Query가 있는 경우 @import "main.css"; @import "http://~~/main"; @import "url(main)"; @import "main" screen; 2. 파일 분할 Compile 전 main 이외에 _사용 권장 [Sass/SCSS] 3. Sass/SCSS 문법 (1) 주석(Comment) Javascript와 동일한 두 가지 사용. // Compile되지 않는 주석 /* Compile되는 주석 */ 그러나, Sass의 경우 여러 줄의 주석을 사용할 때 줄의 앞에 *가 붙어야 하고 같은 선상에 있어야 함. /* 여러 줄의 주석을 * 사용할 경우 앞의 *를 * 맞춰 주어야 합니다. */ SCSS는 기존 CSS와 동일하게 사용함. (2) 중첩 if (SCSS) { .component { width: 100%; .content { float: left; .box { float: left; } } } } else if (SCSS to CSS) { .component { width: 100%; } .component .content { float: left; } .com.. 이전 1 2 다음