web sprit

CSS에서 :not(), :nth-child(), ::after 같은 선택자를 조합할 때의 작성 순서는 선택자 유형과 작동 범위에 따라 정해집니다. 올바른 순서를 따르면 원하는 스타일이 제대로 적용됩니다.예제로 아래와 같이 만들어 보겠습니다.// 기본구조 css 2번째 li를 제외하고 나머지 li에 가상선택자를 사용하여 '체크마크'를 넣으려면??.li:not(:nth-child(2))::after { content: "✔"; display: block; color:red;}이렇게하면 위와같은 화면을 확인할 수 있습니다.하지만 잘못된 점이 있습니다.CSS4 명세에서 :not()은 **단순 선택자(simple selector)**만 받을 수 있도록 제한되어 있습니다. 단순 선택자란 다음을 포함합니다태..

알고 보면 엄청 단순하지만 막상 이론적으로 머리가 안굴러가는 현상.... 정말 단순하지만 정리해 봅니다. 우리가 반응형 사이트를 만들때 em또는 rem 단위로 font size를 작업합니다. em이나 rem 같은 경우는 유동적이라 반응형이나 모바일에 사용하고 있습니다. 간단하게 em과 rem을 설명하자면em은 부모요소에게 영향을rem은 최상단 부모요소(html)에게 영향을 받습니다. em은 부모요소에 12px의 폰트사이즈가 적용되어 있다면1em은 12px 입니다. 그럼 2em은 24px 이고요. ㅎ rem은 부모요소에 12px로 적용하여도 부모요소에 영향을 받는 것이 아니라최상단 부모요소(html)에게 영향을 받기 떄문에html 태그에 16px로 적용되어 있다면1rem은 16px이고 2rem은 32xp ..

오늘은 Compass 설치에 대해 정리해 봅니다.요전에 말했듯이 Compass는 Ruby 기반으로 작동하기 때문에 Ruby를 꼭 설치 하셔야 합니다.참고 : http://kcmschool.xyz/39 Ruby를 설치하셧다면 본격적으로 Compass를 설치해 보겠습니다.맥이라면 터미널로 윈도우 사용자라면 command를 이용하여 설치하면 됩니다.다음과 같이 작성해서 실행해 주세요~ gem install compass 그럼 무언가 설치하는 코드가 나오면서 설치가 완료 됩니다. 설치가 잘되었는지 확인해 보려면 버전체크를 한번 해보시길 바랍니다.버전정보를 확인하려면 아래와같이 작성해서 실행하세요. compass -v 자 매우 간단하게 CSS Framework 인 Compass 를 설치해 보았습니다.비록 간단하고..

Compass 는 CSS 를 편리하고쉽게 개발할 수 있게 만들어 주는 CSS Framework 입니다.SASS를 사용하며 , Ruby 기반으로 Ruby를 설치해줘야 합니다.http://kcmschool.xyz/39 위 URL을 참고하면 Ruby 설치방법을 참고 할 수 있습니다. 기존 SASS를 사용하여 Compile 하였다면 Compass는 SASS 보다 간결하고 간단한 방법으로 Compile 이 가능하다. 앞으로 실무에서 사용하며 간간히 사용법이나 Tip을 정리할 생각입니다.이 글이 도움이 되시거나 잘못된 부분이 있으면 댓글 부탁드립니다. ^^

일반적으로 form 요소의 customize를 추천하지도 않고 사용하고 싶지도 않습니다. 이유는 브라우저별 모양이 너무 재각기이고 이러한 폼요소는 기본적으로 최소한의 꾸밈으로 사용하는 것이 디바이스별 사용성에도 좋은듯 합니다. 대부분 background 이미지를 이용하여 스크립트로 클래스 제어를 통해 form요소를 customize 하는 것으로 알고 있습니다. 지금 알려드릴 방법은 css를 이용한 방법이며 스크립트를 사용하지 않습니다. 그리고 브라우저는 IE를 기준으로 IE9 이상 잘 나오고 있습니다. 만약 더 하위버전을 맞추고 싶다면 그때 background 이미지를 이용하여 스크립트를 사용하는 방법말고는 생각이 나질 않네요. 제가 만든 소스를 보고 한번 그대로 가져다 확인해 보세요 정말 괜찮은 방법이..

개인적으로 잘 안 외워지는 css 속성중에서 visibility 속성에 대해 얘기 하려 합니다.visibility 속성은 display 속성과 비슷하다고 말할 수 있지만다른점은 display 의 none 속성값은 태그와 차지하고 있는 영역까지 숨겨 Layout 을 흐트릴 수 있지만visibility 의 hidden 속성은 태그를 숨기지만 차지하고 있는 영역은 그대로 유지해 줍니다. visibility 속성의 값은 다음과 같습니다. visible 기본 값. 태그의 요소를 보여줍니다. hidden 태그의 영역을 숨깁니다. (영역은 유지) collapse table 태그에만 적용되며, tr과 td태그를 안보이게 합니다.(영역은 유지) inherit 부모요소의 값을 상속 받습니다. 작성방법은 아래와 같습니다.1..

퍼블리셔라는 일을 시작한지 많은 시간이 지났지만 당연스레 생각했던 CSS Reset에 관해 좀더 심도있게 알아보려 합니다. 처음에 들어와서 누군가가 사용하던것에 이미 익숙해져있는 나로서 새로운 나만의 reset css를 만들어 보겠습니다. 우선 아래 참고할만한 사이트를 나열 하였습니다. 1. CSS Reset 종류1-1. Eric Meyer's CSS Reset1-2. html5doctor.com Reset1-3. Normalize.css 1.0 - GitHub (참고사이트 : http://webdir.tistory.com/455)1-4. Yahoo! (YUI 3) Reset CSS1-5. DAUM(Darum) Reset CSS(PC, Mobile reset css 제공) 2. 정리 CSS Reset위 ..

가상요소인 before 와 after 선택자 입니다.:before는 선택자의 앞에 속성값을 설정할때 사용하고,:after는 선택자의 위에 속성값을 설정할때 사용합니다. 위 선택자의 사용 방법은 아래와 같습니다. css2에서 사용예시 div:before{}div:after{} css3에서 사용예시div::before{}div::after{} :와 ::차이::는 css3에서 가상클래스와 가상요소를 구분하기위해 도입 되었습니다. :와 ::브라우저 지원여부:before, :after는 ie8+, FF, chrome, opera+, safari4.0+ ::before, ::after는 ie9+, FF1.5(1.8)+, chrome, opera7+, safari4.0+ 사용방법:before, :after는 주로 c..