box-shadow 속성선택한 요소에 그림자 효과 추가하기 구분 설명 inset · 박스의 그림자가 안쪽으로 퍼지게 합니다 5px · 가로 오프셋 거리 (가로로 밀리는 폭) · 그림자가 가로로 얼마나 떨어져 있는지 지정 · 양수값은 요소의 오른 쪽에 그림자 표시 · 음수값은 요소의 왼쪽에 그림자 표시 -5px · 세로 오프셋 거리 (세로로 밀리는 폭) · 그림자가 세로로 얼마나 떨어져 있는지 지정. · 양수값은 요소의 아래에 그림자 표시 · 음수값은 요소의 위쪽에 그림자 표시 10px · blur radius · 그림자의 번지는 정도를 지정. · 0이 최소값이며 이 값을 생략하면 번지는 효과를 사용하지 않습니다. 15px · 그림자와 박스의 거리 #000000 · 그림자 색상을 지정 · 16진수로 된 색..

border-radius 프로퍼티· 박스 모서리를 둥글게 만드는 속성· 이전에는 박스의 모서리를 부드럽게 만들 때에는 그래픽이나 자바스크립트를 이용하였는데, CSS3에서는 border-radius 속성을 이용하여 모서리 부분을 손쉽고 다양하게 표시할 수 있습니다. · 각 모서리를 똑같은 모양으로 만들 수도 있고, 네 모서리 중 원하는 부분만 둥글게 표현하여 원, 반원, 4분의 1조각 짜리 원 등을 표현해 낼 수도 있습니다. border-radius 속성값· 속성 값을 하나만 입력하면 네 개의 모서리가 똑같은 모양이 됩니다.· 각각의 모서리 값을 입력하면 모서리 별로 다른 모양을 만들 수 있습니다. 속성 값을 적는 순서

border - 테두리 관련 프로퍼티· border-top, border-bottom, border-left, border-right 프로퍼티에 border-width, border-style, border-color 프로퍼티에 해당하는 값을 지정하여 너비, 스타일, 색상 속성을 한꺼번에 지정 가능합니다.

border-color 프로퍼티· 테두리 색상 지정 속성· border-top-color, border-right-color, border-bottom-color, border-left-color프로퍼티를 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 색상을 지정할 수 있습니다. · 색상값 및 RGB값 사용을 지정할 수 있으며 아무런 값을 지정하지 않으면 투명하게 나타나기 때문에 화면에는 보이지 않습니다. 프로퍼티 값 설명 색상 키워드 red, blue, green, black등 색상 이름 RGB값

background-image 프로퍼티· HTML의 문서의 배경을 이미지로 설정· 오류 대비 배경 색상도 함께 지정하는 것을 권장· 왼쪽 위부터 이미지를 출력· 이미지 파일 삽입시 "url(이미지경로)" 형태로 지정· 표시되는 컨테이너의 크기와 상관없이 삽입된 background-image의 크기 그대로 표시됩니다(이미지 크기가 축소되거나 확대지 않음 ) · 이미지 보다 표시되는 컨테이너 크기가 큰 경우 해당 이미지는 반복해서 출력됩니다.· 형식 프로퍼티 값 설명 url 상대 경로 및 절대 경로를 지정 none 이미지 파일 없음

border-width 프로퍼티· 테두리 두께를 지정하는 속성· 한꺼번에 박스의 모든 영역에 대한 테두리 너비를 설정할 수 있습니다.(위, 오른쪽, 아래, 왼쪽)· 두께를 지정할 때 키워드를 이용하거나 값을 입력하면 됩니다. · border-top-width, border-right-width, border-bottom-width, border-left-width를 이용하여 위쪽, 오른쪽, 아래쪽, 왼쪽의 테두리 두께를 지정할 수 있습니다. 프로퍼티 값 설명 thin 얇은 선 medium 중간 선 thick 두꺼운 선 숫자 사용자가 굵기를 직접 지정