css3 (32) 썸네일형 리스트형 [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강좌] 29강 이미지를 위한 object-fit속성 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=8hsCUwZJjw4 1. object-fit속성이란? - 요소의 크기에 맞게 태그와 태그의 크기를 조정하는 방법으로 사용되는 속성입니다. 1) object-fit속성값 속성값 설명 fill 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다. contain 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다. cover 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다. non.. [CSS3강좌] 28강 CSS Grid 레이아웃 모드 - 오쌤의 니가스터디 1. Grid 레이아웃이란? - CSS에서 제공되는 Grid 레이아웃은 행과 열이 있는 그리드 기반 레이아웃 시스템입니다. - 위치 지정 시 float나 position을 사용하지 않고도 웹페이지 레이아웃을 쉽게 잡을 수 있습니다. - 단, 최신브라우저에서만 지원됩니다. 브라우저 크롬 익스플로러/엣지 파이어폭스 사파리 오페라 버전 57.0 이상 16.0 이상 52.0 이상 10 이상 44 이상 1) 그리드 요소 설정하기 - 그리드 레이아웃은 하나 이상의 하위 요소가 있는 상위 요소로 구성됩니다. - display속성의 값을 [grid]로 변경합니다. - grid-template-columns속성은 그리드 레이아웃의 열 수 및 열 너비를 지정합니다. 값은 공백으로 구분된 목록으로 각 값은 각 열의 크기를 .. [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으로 바꾼 결과 - 한줄로 수평 나.. [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방식의 애.. 이전 1 2 3 4 다음
