StyleSheet/CSS 검색 결과

해당 글 142건

선택자 우선순위 & 기타 팁

CSS competing rule(경쟁 규칙) 한 요소에 같은 CSS 규칙을 여러 번 지정할 수 있습니다. 이 글에서는 이를 "경쟁 규칙"이라고 부르겠습니다. 브라우저는 우선순위에 의해 경쟁 규칙 중에서 어느 규칙을 적용할 지 결정하게 됩니다. 예를 들어 브라우저가 각 요소에 기본 규칙을 할당했다고 가정해 봅니다. 만약 한 요소에 개발자가 다른 규칙을 지정하면 그 규칙은 기본 규칙과 경쟁하지만 개발자가 지정한 규칙이 우선순위가 높으므로 기본 규칙을 덮어 쓰게 됩니다. 여기서 이러한 선택자 우선순위에 대해 간단히 알아보겠습니다. 선택자 우선순위 우선순위에 따라 규칙을 분류하면 규칙에 사용된 선택자 종류에 따라 6개의 그룹으로 나뉩니다. 더 높은 우선순위 그룹의 규칙이 있으면 낮은 그룹의 경쟁 구칙은 무시됩..
StyleSheet/CSS 2016. 6. 14. 10:36

CSS 핵 보다 나은 조건부 주석문(conditional comment)

Better conditional classnames for hack-free CSS 조건부 주석문은 html 요소에 조건부 클래스 이름을 적용하면 CSS 수정과 IE의 특정 버전을 대상으로하는 데 도움이 되는 일반적인 방법입니다. 이것은 첫 번째 폴 아일랜드 의해 설명되고 HTML5 보일러 플레이트에 의해 좀더 보완되어졌습니다. 이러한 모든 장점에도 불구하고 여전히 성가신 문제가 몇 가지 있습니다. 여기에서는 잠재적인 문제를 회피할 만한 몇 가지 핵에 대해 알아보도록 하겠습니다. 조건부 주석문 처음에 조건부 주석문은 CSS의 수정과 IE의 레거시 버전을 위해 시작태그인 html 태그에 사용(Conditional stylesheets vs CSS hacks)하는 것을 제안했습니다. 이후 HTML5 보일러..
StyleSheet/CSS 2016. 5. 31. 07:00

Boilerplate base CSS(보일러플레이트 초기화)

Boilerplate Base Style 이 포스팅에서는 보일러플레이트에서 사용되는 초기화 CSS에 대해 소개합니다. Boilerplate CSS 아래 CSS에는 clearfix 방법(플로트해제) 및 접근성시 사용되는 텍스트 hidden 처리 방법도 포함되어 있습니다. 보일러플레이트 CSS는 다음과 같습니다. css /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan ..
StyleSheet/CSS 2016. 5. 30. 07:00

알아두면 좋은 CSS 팁 모음

CSS 팁 정리 이 글에서는 알아두면 편리한 CSS 테크닉에 대한 팁에 대해 알아보겠습니다. 이 포스팅은 좋은 팁을 숙지할 때 마다 업데이트될 것임을 알려드립니다. Cross-Browser Transparency 모든 곳에 적용하고 싶어지는 CSS3 속성 중 하나인 불투명도(opacity)를 필터 속성을 추가해서 IE의 예전 버전에서도 우아하게 다룰 수 있을 것입니다. css .transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, ope..
StyleSheet/CSS 2016. 5. 25. 12:23

순수 CSS 말풍선 만들기

Pure CSS bubbles 이 글에서는 CSS 2.1 & CSS3 를 이용하여 이미지, 자바스크립트 없이 시맨틱 마크업에 말풍선을 적용하는 방법에 대해 알아봅니다. Pure CSS speech bubblesSupport: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.See the Pen <a href='http://codepen.io/jaehee/pen/JXgBRE/'>CSS 말풍선 효과</a> by jaeheekim (<a href='http://codepen.io/jaehee'>@jaehee..
StyleSheet/CSS 2016. 5. 24. 08:29

reset, default CSS

초기화용 CSS 정의 다음의 초기화 CSS는 필자가 주로 사용하는 디폴트용 CSS입니다. 사용자 환경에 적합하도록 커스텀 사용하시거나 그대로 사용하셔도 무방합니다. Reset CSS css @charset "utf-8"; /* * @ RESET CSS * ------------------------------- */ html, body, div, p, span, strong, b, em, iframe, pre, h1, h2, h3, h4, h5, h6, img, dl, dt, dd, fieldset, form, legend, label, table, caption, thead, tbody, tfoot, tr, th, td, ul, ol, li, a, input, select, textarea {margi..
StyleSheet/CSS 2016. 5. 20. 17:28

효율적인 CSS 작성 방법

효율적인 CSS 작성하기 이 글은 CSS 코드를 최적화하는 방법을 제공합니다. 특히, 선택자를 효율적으로 작성하는 방법에 대해 집중적으로 다룹니다. CSS 명세는 브라우저가 어떻게 스타일 시스템을 구현하는지에 대해 정해두지 않았습니다. 이 때문에 브라우저마다 스타일 시스템 엔진이 다릅니다. 널리 사용되는 오픈소스 엔진인 Gecko와 Webkit은 비슷한 알고리즘으로 스타일 시스템을 구현하고 있으므로 장점과 단점이 비슷합니다. 따라서 이 문서에 있는 팁은 실제 웹 문서에서 유용할 것입니다. 스타일 엔진은 어떻게 스타일 규칙을 분류하는가?! 스타일 엔진은 다음 4개의 카테고리로 스타일 규칙을 분류합니다. ID 규칙, Class 규칙, Tag 규칙, Universal 규칙, 이 4개의 규칙들은 스타일 규칙을 ..
StyleSheet/CSS 2016. 5. 20. 09:19

조건부 주석문을 스크립트로 처리하기 - IE Cross Browsing

조건부 주석문 스크립트 IE 버전의 크로스브라우징을 처리하기 위한 방법은 다양합니다. 대표적으로 조건부 주석문을 사용하거나 ie7.css, ie8.css 를 따로 관리하는 방법등이 있습니다. 여기서는 조건부 주석문에 사용되는 방법을 스크립트로 간단히 처리하는 방법에 대해 알아봅니다. IE 조건부 주석문을 JS로 처리하기 일반적으로 조건부 주석문(Conditional Comment)을 아래와 같이 작성할 수 있습니다. html 위와 같은 패턴을 사용하는 경우에는 HTML문서에 조건부 주석문을 모두 삽입해야하는 번거로움을 가지고 있습니다. 이를 스크립트로 처리하는 방법에 대해 알아봅니다. JavaScript /* * -------------------------------- * @ Checked Ver.IE..
StyleSheet/CSS 2016. 3. 22. 07:00

CSS 이벤트 제어 속성 - pointer-events

CSS Property - pointer-events 흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 추가적인 정보에 대해 알아봅니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있습니다. 아래의 표를 참고합니다. 숨김 속성과 값 공간 점유 이벤트 탭 접근 - tab opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collap..
StyleSheet/CSS 2016. 2. 25. 07:00

CSS3 - Background Images

CSS3의 뛰어난 배경 제어 능력 CSS3는 배경을 제어하는 부분이 있어서 더 발전되고 폭넓은 툴들을 제공하고 있습니다. 만약 최근에 이 업계로 접어든 개발자라면 선배 웹 개발자들이 겪었던 어려움에 대해 잘 모를테지만 현재의 CSS의 새로운 기능(예를 들어 둥근 모서리, 드롭 쉐도우, 그라디언트와 같은 특징들...) 덕분에 배경 이미지를 다양하게 표현할 수 있게 되었기 때문에 과거의 비효율적이고 불편했던 기억들로 인해 더 이상 몸서리칠 일이 줄어들 것입니다. 아직 보편적으로 사용하기에 시기상조일지 모르지만 현실에 안주하기 보다 창조적이고 실험적인 기능을 다루는데 주저하지 않기를 바랍니다. background-clip과 background-origin background-clip background-cli..
StyleSheet/CSS 2016. 1. 7. 22:36

float 정렬에 이용된 트릭 사용 방법

float 속성을 이용한 배치와 배치에 사용된 트릭 방법 우리는 float 속성을 이용하여 내부(세부) 콘텐츠를 배치하는데 많이 사용하고 있습니다. 내부 콘텐츠의 배치를 좀 더 간단히 할 수 있는 방법에 대해 알아봅니다. overflow: hidden을 이용한 트릭 일반적으로 가장 많이 쓰이는 콘텐츠 포맷은 아래와 같은 형태일 것입니다. 좌측 콘텐츠의 양은 일반적으로 적고, 우측 콘텐츠 양이 많은 포맷으로 구성되는 경우가 종종 있습니다. 이 포맷은 리스트 형태가 될 수도 있고 쇼핑몰의 썸네일과 썸네일의 디테일 내용 형태 등등.. 수없이 많은 타입으로 내용을 담는데 사용되는 디자인 형태라고 할 수 있습니다. 위 그림은 2개의 행만 가지고 있지만 만약 좀 더 많은 행을 가진 콘텐츠가 있으며 그 배치를 할 때..
StyleSheet/CSS 2016. 1. 7. 17:10

CSS를 이용한 Box 높이 동일하게 맞추는 방법

Match box column height - 열의 높이를 맞추는 다양한 방법 CSS 디자인의 경우 다수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결되지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 알아봅니다. 열(Column)의 높이를 자동으로 맞추는 속성 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있습니다. flex property flex 속성을 이용하면 매우 쉽게 원하는 결과를 얻을 수 있습니다. 대상 요소를 감싸는 부모요소(플렉스 컨테이너)에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 구현할 수 있습니다. 다만 지원문법이 ..
StyleSheet/CSS 2016. 1. 7. 10:48