clearfix 클래스 추가하여 float 해제하는 법 clearfix 1234567891011.cf{ &::before, &::after{ content:''; display:table; } &::after{ clear:both; }} cs SCSS 스타일로 코딩해봄. * 부모요소에 overflow : hidden 을 설정하면 float 해제된다. 퍼블리싱/CSS 9년 전
rem 과 em EM 상속된 폰트사이즈 * em = px 로 변환됌. 12345678.parent{ font-size:20px; .child{ font-size:14px; width:2em; }} cs parent로 부터 20px를 상속받았으므로 child는 20px을 상속받음. child의 width = 20px * 2em 이므로40px을 width 값으로 가짐 그러나 child에 font-size가 14px로 지정이 된다면 width = 14px * 2em = 28px을 너비 값으로 가짐. REM(Root EM) 최상위 요소의 폰트크기 * rem 의 공식HTML의 폰트크기가 설정되지 않았다면 브라우저 설정값이 효력을 가짐. EM - 상위요소로 부터 상속받은 폰트크기 혹은 자신에게 설정된 폰트크기 * emREM - 최.. 퍼블리싱/CSS 9년 전
효율적인 CSS 작성법 결론결론부터 말하자면 중복되지 않는 클래스명으로 직빵으로 css를 주는것이 제일 좋다. 1. Universal 규칙을 피해라12* { ... }[hidden="true"]{ ... }cs 2. ID규칙에 쓸모없는 태그나 클래스를 붙이지 말아라1234button#Button {…} /* 나쁨 */.menu#Icon {…} /* 나쁨 */#Button {…} /* 좋음*/#Icon {…} /* 좋음 */cs 3. 클래스 규칙에 쓸모없는 태그를 붙이지 말아라12tag.class {…} /* 나쁨 */.sub-menu {…} /* 좋음 */cs 의미가 있는 이름을 사용하는 것이 최선임. 4. 가장 명확한 규칙을 적용하라12tag > tag > tag {…} /* 나쁨 */.c-detail {…} /* 좋음 */.. 퍼블리싱/CSS 9년 전
SASS와 SCSS에 관하여 SASS / SCSS 소프프웨어 공학 - DRY 원칙Don't Repeat Yourself 반복되는 코드를 만들지 말 것!CSS는 이것이 힘들었다. 그래서 CSS의 반복적인 부분을 재활용하고 구조적으로 CSS를 사용하기 위해 나온 것이 SASS와 SCSS 이다. 둘은 비슷한데 문법적인 차이임.SASS - 자바스크립트와 비슷SCSS - CSS와 비슷 Ruby 를 다운받고 설치. watch를 해줌으로써 SCSS와 CSS파일간의 실시간 동기화가 이루어진다. sass -E utf-8 --watch --style compact style.scss:style.css 1. encoding UTF-8 에러시 ruby가 설치된 폴더에서 registry.rb 파일을 검색 해당파일 열고 70번 라인쯤에LOCALE = Enc.. 퍼블리싱/CSS 9년 전
background image와 linear gradient 동시에 주기. 1234567body{ background-size: cover; background-repeat: no-repeat; background-image: linear-gradient(to bottom, #86D0F3 0%,#A3D4C0 100%), url("../img/bg.png"); background-blend-mode: multiply; color:#232323;}Colored by Color Scriptercs 웹에서는 blend-mode를 overlay로 하면 제대로 겹쳐졌는데하이브리드앱 퍼블리싱하느라 해봤는데 overlay가 안먹고 multiply가 먹더라는... 퍼블리싱/CSS 9년 전
CSS로 background-color gradient 주기 1background{linear-gradient(to right, #00b4d9 0%,#00ddb3 100%);}cs 퍼블리싱/CSS 9년 전
width에 맞춰 문장 ... 으로 줄이기 1ul li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} cs 퍼블리싱/CSS 9년 전
IR기법 IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다. 출처 : http://darum.daum.net/convention/css/css_ir Phark Method 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 WA IR , Farhner Image Replacement 등의 기법이 있지만 위 기법을 권장함. 퍼블리싱/CSS 9년 전
