drexqq

Box-Shadow Reference box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; Property Description h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. Box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 {box-shadow: ..

margin - 박스 요소의 바깥쪽 여백을 설정합니다. 사용법 margin-top : 10px; - 요소의 위 바깥쪽 여백을 설정합니다. margin-right : 11px; - 요소의 오른쪽 바깥쪽 여백을 설정합니다. margin-bottom : 12px; - 요소의 아래 바깥쪽 여백을 설정합니다. margin-left : 13px; - 요소의 왼쪽 바깥쪽 여백을 설정합니다. margin : 10px 11px 12px 13px; - 위쪽/오른쪽/아래/왼쪽(시계방향) margin : 10px 11px 12px; - 위쪽(10px)/왼쪽,오른쪽(11px)/아래(12px) margin : 10px 11px; - 위쪽,아래쪽(10px)/왼쪽,오른쪽(11px) margin : 10px; - 위쪽,오른쪽,아래,왼..

이미지 타입 선택 프로젝트 종류에 따른 이미지 타입 표 종류 PC Mobile Web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X

CSS 선언 방법 CSS 선언 방법에는 3가지가 있습니다. External Style Sheet : css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다. Internal Style Sheet : HTML 문서 안의 안에 CSS 코드를 넣는 방법입니다. Inline Styles : HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.

CSS 색상 CSS 색상 표현 방법은 7가지가 있습니다. #RRGGBB 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정한다. 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지의 색을 사용할 수 있다. #RGB 빨강 초록, 파랑의 강도를 16진수 한 자리로 지정한다. 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않는다. rgb(r, g, b) 빨강, 초록, 파랑의 강도를 0~255 범위의 정수로 지정한다. rgba(r, g, b, a) rgb값 외에 투명도를 지정하는 알파를 0~1 사이의 실수로 지정한다. 0은 투명한 색이며 1은 불투명, 0.5는 반투명이다. hsl(h, s, l) 색상, 채도, 명도로 색상을 지정한다. 채도는 0~365 사이의 각도이고 명도, 채도는 ..

CSS 단위 CSS 단위 표현 방법은 9가지가 있습니다. % - 기본 크기에 대한 비율 em - 글꼴 높이의 배수 ex - 소문자 높이의 배수 px - 픽셀 / 단위를 생략할 때의 기본값 pt - 포인트 pc - 파이카 (12포인트와 같음) in - 인치 cm - 센티미터 mm - 밀리미터

CSS 선택자 선택자를 통하여 요소를 선택하고 속성을 줄 수 있습니다. id 선택자 하나의 태그만 식별하기 위한 선택자입니다. 하나의 태그에 하나만 사용할 수 있습니다. "#"으로 표시합니다. class 선택자 여러개의 태그를 식별하기 위한 선태자입니다. 하나의 태그에 여러개를 사용할 수 있습니다. "."으로 표시합니다. 속성 선택자 [ ] 괄호안의 속성 이름과 값 사이에 다양한 연산자를 사용하여 속성값의 일부만 평가하여 조건에 맞는 엘리먼트를 선택한다. 선택자설명 A[속성^=값] 특정 값으로 시작한다. A[속성$^=값] 특정 값으로 끝난다. A[속성*=값] 특정값을 부분 문자열로 포함한다. A[속성~=값] 특정 값을 단어로 포함한다. A[속성|=값] 특정 값을 단어로 포함한다. ~=에 비해서는 하이픈을..

벤더 프리픽스(접두사) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 웹(Web) 벤더 프리픽스(Vendor prefix) Explorer -ms- Chrome -webkit- Firefox -moz- Safari -webkit- Opera -o-

조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인 등을 삽입하는 용도로 자주 사용된다. ! : 아니다(not) - 예) [if !ie] ie가 아니라면 lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면 lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면 gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면 gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다 () : 우선처리 & : 그리고(and) - 예) [if (gte ie 7)&(lt ..

HTML5 shiv 새로운 HTML5 섹션이 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x에서도 작동하도록 해주는 라이브러리이다. html5 shiv 사용법 다운로드한 파일의 dist 폴더에서 사용할 파일을 선택한 후 부분에 아래와 같이 적용한다. 이 코드를 사용한 경우 CSS에서 해당 블록 요소들을 display:block 해주어야 한다. article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;} html5 shiv 알려진 문제와 제한사항 ShivMethods 옵션(document.createElement)과..