목록CSS (7)
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[속성|=값] 특정 값을 단어로 포함한다. ~=에 비해서는 하이픈을..