CSS (44) 썸네일형 리스트형 [CSS3강좌] 34강 CSS filter속성 - 오쌤의 니가스터디 1. CSS filter 속성 - filter속성은 요소에 대한 시각효과를 지정합니다. (ex) blur효과 등) - 간단히 생각하면 포토샵에서의 layer style이나 adjustment(보정) 등이 지정된다고 보면 편합니다. - 하지만 최신 브라우저에서만 될 수 있기 때문에 브라우저 지원이 어디까지 되는지 확인해보세요. 1) filter속성의 함숫값 종류 설명 none 기본값, 이펙트를 없앰 blur(px) 이미지에 흐림효과를 적용 값이 클수록 흐림이 더 많이 생성, 값을 작성하지 않으면 0으로 지정 brightness(%) 이미지 밝기를 조정 0%는 완전히 검게 처리, 100%는 기본값, 100%보다 크면 밝게 제공 contrast(%) 이미지의 대비를 조정 0%는 완전히 검게 처리, 100%는 .. [CSS3강좌] 33강 폰트가 깨져 보일때 해결법(IE) - 이번 강좌에서는 폰트가 깨져 보일 때 조금이나마 보완해보는 방법을 알아보도록 하겠습니다. - 웹이 발달이 많이 되면서 한글도 많은 무료 폰트들이 생겨났습니다. - 그래서 웹에서 활용할 폰트가 많이 생겨 좋아진 것도 사실입니다. 1. 에스코어 드림 주소 : www.s-core.co.kr/company/font/ 에스코어 에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요. www.s-core.co.kr - S-Core에서 제공하는 폰트입니다. - 이폰트의 장점은 꽉 찬 직사각형 구조의 고딕체로 제목용 글꼴로 사용하시면 좋습니다. - 특히 9가지의 다양한 두께를 지원하는 몇 안 되는 폰트 중 하나죠. - 위의 이미지는 모.. [CSS3강좌] 27강 CSS flexbox - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=DhiDpXEkd-E 1. 과거의 레이아웃 모드 1) 웹페이지의 구역을 block요소로 처리 - block요소로 처리되는 요소들을 수직 나열 처리가 됩니다. ## block요소의 수직나열된 코드 ## block요소의 수직나열된 결과 - div태그는 block요소이므로 부모 영역 안에서 수직 나열 처리되는 것을 확인할 수 있습니다. 2) 이미지태그처럼 inline-block으로 나열 처리 - 블록요소를 수평 나열 처리하기 위한 방법으로 display를 inline-block으로 처리합니다. ## inline-block으로 바꾼 코드 ## inline-block으로 바꾼 결과 - 한줄로 수평 나.. [SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌 ** 영상으로 보실 분은 아래 주소를 클릭해주세요. https://youtu.be/J2xSVTEyI0I 1. @mixin문법 - 웹사이트전체에 재사용할 CSS코드 정의하는 지시문 @mixin mixin명 { //재사용할 스타일 속성 지정 } 2. @include문법 - @mixin을 선택자에 포함하는데 사용하는 지시문 선택자{ @include mixin명; } 3. @mixin과 @include를 이용한 기본 구문 1) 예시 - h3태그를 이용한 타이틀이 존재하고 다른 값은 모두 동일하고 글자색만 다르다고 가정해보자. ** HTML코드 전시 공지사항 ** SCSS코드 @mixin h3Text{ font-family: “Noto Sans kr”; font-size: 28px; font-weight: 700.. [CSS3강좌] 26강 CSS calc()함수 - OSSAM강좌 1. calc() 함수 - CSS에서 수치화된 숫자 값을 사칙 연산자를 사용하여 계산을 할 수 있도록 해주는 함수 - 보통 %로 처리된 것을 px로 연산할 때 유용하게 사용할 수 있다. - 사용할 수 있는 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기)가 있다. width: calc(100% - 20px); font-size: calc(100% - 10px); background-position: calc(100% - 20px) top; - 위에 보이는 것과 같이 다양한 속성에 사용 가능 calc(수치 - 수치); - 사칙연산자 사이는 띄어 써야 인식 가능, 특히 +와 -는 반드시 띄어쓰기를 해야 가능 2. calc() 함수 예제 1) width에 calc() 함수 적용 ## 코드 -.. [CSS3강좌] 25강 배경이미지 고정처리 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=ukPTssZLPoI 1. 배경이미지 고정처리란? - 컨텐츠 뒤의 배경이미지를 고정시켜 스크롤이동시 고정된 효과를 주는 기능 - 예시 : http://www.gongju.go.kr/tour/index.do 공주 문화관광 공주 문화관광 www.gongju.go.kr - 공주문화관광 재단사이트를 보면 [footer]위쪽의 [세계가 사랑한 공주]배너 부분의 배경이미지 스크롤시 고정되는 것을 확인할 수 있다. - 하단 부분의 배경이미지가 고정처리되서 스크롤시 고정되어 있는 것을 확인할 수 있다. 2. background-attachment 속성 - background-attachment속성이 배경이미.. [CSS3강좌] 24강 animation속성 - OSSAM강좌 ** 영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=krdFNe2R27E - animation은 요소를 움직이게 해주는 속성 - 실제적으로는 CSS변화를 시간차를 둬서 부드럽게 효과를 주는 속성이다. - 특히 위치 값인 left, top, right, bottom을 이용해서 움직이는 효과를 줄 수 있다. 1. 애니메이션의 종류 - 애니메이션에는 수많은 종류가 있지만 여기서는 크게 2가지로 나눠서 비교 후 keyframe에 대한 이해를 돕도록 하겠다. 1) frame by frame방식 - 애니메이션을 한장한장 그려서 붙여서 보여주는 방식 - 과거 국어책에 졸라맨을 그리고 넘겼던 추억을 떠올려보면, 그것이 frame by frame방식의 애.. [CSS3강좌] 23강 transform(변형속성) - 3D변형 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=DVvXE4uN1oA 1. 3D transform의 함수값 함수 값 설명 rotate3d(x, y, z, angle) 3D회전을 한번에 정의 rotateX() X축을 중심으로 3D회전을 정의 rotateY() Y축을 중심으로 3D회전을 정의 rotateZ() Z축을 중심으로 3D회전을 정의 scale3d(x, y, z) 3D스케일(크기) 변화를 한번에 정의 scaleX() X축을 중심으로 3D크기를 정의 scaleY() Y축을 중심으로 3D크기를 정의 scaleZ() Z축을 중심으로 3D크기를 정의 translate3d(x, y, z) 3D적 요소 이동을 한번에 정의 translateX() .. 이전 1 2 3 4 5 6 다음
