CSS (8) 썸네일형 리스트형 8.CSS Filter △ ▽ 1. CSS Filter 함수 - drop-shadow - grayscale - sepia - saturate - hue-rotate - invert - opacity - bright - contrast - blur 1. CSS Filter 함수1. CSS3 Filter 속성을 사용하면 블러나 색상 변경같은 효과를 요소에 적용할 수 있다. 필터는 일반적으로 이미지, 배경, 테두리의 효과를 조정하는데 사용된다. 이미지 필터링 같은 경우는 어떤 이미지에 대해 다른 스타일을 줄 수 있다. 웹사이트에 여러개의 이미지를 업로드하는 대신 하나의 이미지로 필터 속성만 바꿔가면서 시각적인 효과를 줄 수 있다. 필터 함수는 blur(), brightness(), contrast(), drop-shadow(), g.. 7.CSS3 Animation △ ▽ 1. Transitions 2. transform : rotate() 3. transform origin, translate(), skew() 4. scale(), 동시 적용. 5. Keyframes & Animations 6. Animation 속성 7. 3D 변환 1. Transitions1. CSS3는 하나의 property 값을 일정시간동안 다른 값으로 변경하는 것이 가능하다. - transition-property : 변환 적용할 property를 지정한다. - transition-duration : 변환 시간을 설정한다. - transition-timing-function : 지속 시간동안 어떻게 변환되는지 설정한다. - transition-delay : 변환 효과의 지연시간을 설정한다.. 6.CSS3 그라데이션&배경 △ ▽ 1. 선형 그라데이션 만들기 2. 방사형 그라데이션 만들기 3. background-size 속성 4. background-clip 속성 5. 투명 경계선 6. 멀티 배경 7. opacity 속성 1. 선형 그라데이션 만들기1. CSS3는 두개 이상의 특정한 색을 부드럽게 변환하는 그라데이션을 가능하게 한다. CSS3에는 Linear 와 Radial 타입 두가지의 그라데이션이 있다. 선형 그라데이션을 만들기 위해 적어도 두가지 색상지점을 선택해야 한다. 색상지점이란 부드럽게 표현하려고 하는 색상이다. 또한 시작점과 방향, 그라데이션 효과를 정할 수 있다. 색상은 색이름, 16진수값, RGB, HSL까지 사용 가능하다. 모질라 계열 브라우저에 사용하기 위해 접두어 -moz가 붙는다. div { wi.. 5.CSS3 기본 △ ▽ 1. CSS3 소개 2. CSS3 접두어 3. border-radius 속성 4. box-shadow 속성 5. 투명 효과 6. text-shadow 속성 7. 유사 클래스 (Pseudo-Classes) 8. 유사 요소 (Pseudo-Elements) 9. word-wrap 10. @font-face 1. CSS3 소개1. CSS3는 하위 버전들과 완벽하게 호환되는 CSS의 최신 표준이다. 새롭게 달라진 주요 기능들 - Border radius : 요소들 코너를 둥글게 하는 것이 가능해졌다. - Border images : 경계선에 이미지를 넣는 것이 가능해졌다. - Multiple backgrounds : 여러가지 배경을 요소에 넣을 수 있다. - Animations and effects : 애.. 4.레이아웃 △ ▽ 1. display 속성 2. visibility 속성 3. position 속성 4. float 속성 5. clear 속성 6. overflow 속성 7. z-index 속성 1. display 속성1. display : block HTML의 모든 요소는 직사각형의 박스다. display 속성은 직사각형 상자의 위치, 크기 등을 결정한다. block 요소는 시작과 끝에 줄바꿈을 취하고 block의 가로 길이는 가능한 최대로 한다. 대표적으로 span 태그는 block의 반대 개념인 inline 요소인데 display 속성으로 block으로 변경할 수 있다. span { display: block;} 2. display : inline inline 요소는 필요한 만큼만 가로 길이를 가져가고 줄바꿈.. 3.Properties △ ▽ 1. CSS 박스 모델 2. Border 속성 3. Width, Height 속성 4. Background 5. LIST 6. TABLE 7. LINK 8. 마우스 커서 1. CSS 박스 모델모든 HTML 요소들은 박스로 간주된다. CSS 박스 모델은 웹페이지의 디자인과 레이아웃을 나타낸다. Margins, borders, padding, 컨텐츠로 구성된다. Properties는 같은 순서로 동작한다 : top, right, bottom, left HTML 요소의 전체 가로길이 : left right 마진 + left right 테두리 + left right 패딩 + 컨텐츠 가로 HTML 요소의 전체 세로길이 : top bottom 마진 + top bottom 테두리 + top bottom 패딩 .. 2.텍스트 스타일 △ ▽ 1. Font-family 속성 2. Font-size 속성 3. Font-style 속성 4. Font-weight 속성 5. Font-variant 속성 6. Font-color 속성 7. Text-align 속성 8. Vertical-align 속성 9. Text-decoration 속성 10. Text-indent 속성 11. Text-shadow 속성 12. Text-transform 속성 13. Letter-spacing 속성 14. Word-spacing 속성 15. White-space 속성 1. Font-family 속성1. Font-family 속성은 태그 내용의 font를 정의한다. 2가지 타입의 font family 이름이 있다. - font family : 특정 글자체 그룹.. 1.기본 △ ▽ 1. CSS 개론 2. CSS의 3가지 다른 사용방법 3. CSS의 규칙과 선택자 4. CSS 주석 5. Style Cascade와 상속 1. CSS 개론1. CSS란 무엇인가? CSS는 Cascading Style Sheets의 약자이다. - Cascading은 CSS가 다른 스타일 위에 또 다른 스타일을 적용하는 계단형 방식이다. - StyleSheet는 웹 문서의 모양을 담당한다. CSS와 HTML은 함께 동작한다. - HTML은 페이지 구조를 정리한다. - CSS는 HTML 요소들이 어떻게 보일지 결정한다. 2. 왜 CSS를 사용하는가? - CSS는 특정 스타일을 특정 HTML 요소에 적용할 수 있게 한다. - 가장 큰 이점은 컨텐츠의 스타일만 뽑아 분류할 수 있다는 것이다. - HTML만.. 이전 1 다음
