@keyframes1. 개념@keyframes로 어떤 모양에서 어떤 모양으로 변할지 지정IE는 버전 10 이상에서 사용 가능@keyframes animationName { 0% { /* 애니메이션의 시작 상태 */ } n% { /* 중간 상태 */ } 100% { /* 애니메이션의 끝 상태 */ }} .element { animation-name: animationName; /* 정의한 애니메이션 이름 사용 */ animation-duration: 2s; /* 애니메이션의 지속 시간 */} 2. 단계0%시작할 때의 모양 지정0% 대신 from을 사용 가능n% n% 일 때의 모양 지정100%끝날 때의 모양 지정100% 대신 to를 사용 가능 3. 예제CSS\webapp\08_cssDynamic ..
WEB
Shadow 1. values;text-shadow: offset-x ;그림자의 수평 거리 지정 (필수)offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동text-shadow: offset-y;그림자의 수직 거리 지정 (필수)offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동text-shadow: blur-radius; 흐림 정도 지정 (선택 : 값을 정하지 않으면 0)blur-radius의 값을 증가시키면 그림자가 흐려짐text-shadow: color;색 지정 (선택 : 값을 정하지 않으면 브라우저 기본값)text-shadow:none ;글림자 효과 제거text-shadow: initial; 기본값으로 설정text-shadow: inherit; 부모 요소의 속성값을 상속 받..
목록(List) 스타일list-style-type 1. 비순차적 목록 타입 지정list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: none;마커 삭제 2. 순차적 목록 타입 지정css로는 ul, ol 관계없이 적용 가능하며, 로마숫자, 그리스, 알파벳, 넘버링 형태를 제공list-style-type: decimal; list-style-type: lower-roman; list-style-type: upper-roman; list-style-type: lower-greek; list-style-type: lower-alpha; list-style-type: upper-alpha; li.ha..
display, visibility 속성display 속성1. 기본 속성HTML 요소를 block 혹은 inline 혹은 inline-block 으로 지정한다block inline inline-block전체 너비 차지기본 위아래 여백 있음콘텐츠 크기만큼만 공간 차지inline 처럼 같은 줄에 나란히 배치 가능게시판 하단의 페이징(1, 2, 3 ...) 부분을 꾸미는데 유용width, height Owidth, height Xwidth, height O text-align Otext-align X 인라인 요소가 포함된 블록 요소에는 text-align 속성을 적용 가능text-align O 이 텍스트는 정렬되지 않습니다.이 텍스트는 정렬되지 않습니다.">이 텍스트는 정렬되지 않습니다. 이 텍스트는 가..
Box Model1. 개념HTML 의 각 요소들은 모두 사각의 박스 형태를 가지는데, 이 박스를 표현하기 위해 지정하게 되는 여러 요소들HTML 의 몇몇 태그들은 배경색이 없고, 테두리가 없어서 박스처럼 보이지 않을 뿐이다content내용border테두리margin 테두리를 기준으로 바깥쪽 여백padding 테두리와 content 사이의 안쪽 여백 2. 속성width:, height:width:, height: 속성이 지정하는 크기 == content 의 크기border:테두리 표현박스의 기준이 되는 바깥 테두리 선width:(두께), style:(형태), color:(색상)를 적용 가능색상을 지정하지 않으면, 해당 요소의 글자색과 같은 색이 적용 margin: 테두리 바깥 여백 border 기준..
배경(background) 스타일1. 개념배경에 관련된 여러 가지 속성을 포함한다background 속성은 아래의 여러 속성 들을 지정할 수 있다한 요소에 여러 개의 배경 이미지를 적용할 수 있다.bg { width: 600px; height: 400px; border: 3px solid; background: url(img/bg_a.png) no-repeat 0 0, url(img/bg_b.png) no-repeat 100% 0, url(img/bg_c.png) no-repeat 0 100%, url(img/bg_d.png) no-repeat 100% 100%, url(img/bg_e.png) no-repeat 40px 40px;} 2. 속성background-color :색상red, rgba(..
