본문 바로가기

728x90
반응형

전체 글

(444)
[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() ..
[CSS3강좌] 22강 transform(변형)속성 - 2D변형 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=DVvXE4uN1oA 1. 2D transform의 함수 값의 종류 - transform을 사용하면 포토샵처럼 회전, 기울기, 크기변형, 이동들을 할 수 있다. 함수 값 설명 rotate() 요소를 회전, 단위는 deg scale(x,y) 요소의 너비와 높이를 같이 변경, 단위는 등배단위 scaleX() 요소의 너비만 변경, 단위는 등배단위 scaleY() 요소의 높이만 변경, 단위는 등배단위 skew(x,y) X축과 Y축에 따라 기울기 변환, 단위는 deg skewX() X축을 기준으로 기울기 변환, 단위는 deg skewY() Y축을 기준으로 기울기 변환, 단위는 deg translate..
[CSS3강좌] 21강 transition(변화)속성 - OSSAM강좌 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=dafSZio9HZo 1. transition속성 정리 속성 정리 transition 선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성 아래 속성들을 한번에 처리하는 속기법 transition-delay 변화되는 시간을 지연시키는 속성 transition-delay: 1s; => 1초지연 transition-duration 변화되는 시간을 작성하는 속성 transition-duration: 1s; => 초단위 transtion-property 변화되는 CSS를 구분하여 따로 처리 transition-timing-function 변화되는 시간에 ease(가속감속)처리 2. transit..
[CSS3강좌] 20강 구글웹폰트와 @font-face - OSSAM강좌 ** 영상으로 보고 싶다면 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=6u1bYDdJmHM 1. 구글 웹폰트란? - 폰트는 원래 사용자의 컴퓨터에 설치되어 있어야 인식 - 그것을 보완하기 위해 구글 서버에 있는 폰트를 가져와 어디서든 같은 폰트를 보이게 처리 - 주소 : https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1) 주소에 들어가서 사용할 폰트 선택하기 - 여기에서는 Roboto를 클릭 2) 원하는 스타일을 설정 - 원하는 굵기를 담으면 오른쪽에 선택된 것이 보임 3) 사용할 HTM..
[CSS3강좌] 19강 CSS 텍스트줄임 ** 동영상으로 보실분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=YCwDcJygDkw 1. 글자줄임이란? - 영역보다 글자가 많아서 넘칠때 [...]기호를 처리하는 것을 의미 2. 한줄 텍스트인 경우 글자 줄임 요소 속성 설명 선택자에 영역설정 width: 숫자; height: 숫자; ** a태그처럼 width와 height를 받지 못하면 display: inline-block;처리 글자 줄임 공식인 3개의 속성과 속성값 작성 1) overflow: hidden; 2) white-space: nowrap; 3) text-overflow: ellipsis; 요소{ width: 가로영역; height: 세로영역; overflow: hidden; white-spac..

728x90
반응형