본문 바로가기

728x90

웹언어/CSS3

(38)

[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..

[CSS3강좌] 18강 CSS3선택자 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=PzNIJxi7HzA 1. CSS3선택자 - html5에서만 사용가능한 CSS선택자 선택자 정리 구조선택자1 :first-child 배열된 선택자의 첫 번째 자손 선택 :last-child 배열된 선택자의 마지막 자손 선택 :nth-child(num) 배열된 선택자의 순서를 번호로 작성해서 선택 1부터 시작 :nth-child(odd/even) 배열된 선택자의 순서를 홀수/짝수로 나눠 선택 구조선택자2 :first-of-type 배열된 선택자 중 같은 태그타입의 첫 번째 자손 선택 :last-of-type 배열된 선택자 중 같은 태그 타입의 마지막 자손 선택 :nth-of-type(num) 배..

[CSS3강좌] 17강 CSS2선택자 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://www.youtube.com/watch?v=xMBY7fIPMfY 1. CSS2선택자 - xhtml1.0과 html5에 모두 사용가능한 선택자 선택자 정리 전체선택자 *{ 속성명: 속성값; } 태그선택자 태그명{ 속성명: 속성값; } 아이디 선택자 #아이디명{ 속성명: 속성값; } 태그명.클래스명{ 속성명: 속성값; } ex) h1.on{ color: red; } 자손선택자 A > B{ 속성명: 속성값; } A의 자손인 B를 선택 후손선택자 A B{ 속성명: 속성값; } A의 후손(자손포함)인 B를 선택 동위선택자 A + B A 바로 뒤에 있는 B를 선택 A ~ B A뒤에 있는 모든 B를 선택 속성선택자 태그명[속성명=속성값]{ 속성명:..

[CSS3강좌] 16강 폼관련 CSS선택자와 속성 + textarea태그 크롬 크기 변경 ** 영상으로 공부하고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=iw5wmnc-37k 1. CSS 속성선택자 - 꼭 input태그를 위해서 나온 것은 아니지만 input태그에 활용하기 좋은 선택자 - 다른 태그에 사용해도 괜찮다. 1) 문법 요소[태그속성명=태그속성값]{ CSS속성명: CSS속성값; } 2) 예시 input[type=text]{ border: 1px solid red; } 3) 코드 4) 코드 완성뷰 - 는 테두리가 빨간색으로 처리 - 는 테두리가 파란색으로 처리되는 것을 확인할 수 있다. 2. input태그의 상태선택자 - input태그의 상태에 따라 다르게 선택되는 선택자 - 보통 상태선택자는 input:영문{ }으로 작성 1) in..

[CSS3강좌] 15강 블록요소의 자손을 가로 세로 가운데 정렬하기 1. 요소에 자손 정렬 기본값 1) 코드 텍스트한줄 텍스트 텍스트첫번째 텍스트두번째 2) 코드 완성뷰 - 첫번째 박스는 텍스트 한줄만 처리 - 두번째 박스는 이미지 처리 - 세번째 박스는 블록요소(p) 처리 - 네번째 박스는 두줄 텍스트 처리 - 기본적으로 좌측상단에 정렬되어 있는 것을 확인할 수 있다. 2. 인라인 요소 혹은 텍스트 가로 세로 가운데 정렬 1) 코드 텍스트한줄 텍스트 텍스트첫번째 텍스트두번째 - .box01{ text-align: center; line-height: 200px; } - 위의 코드를 CSS에 처리 - text-align은 인라인 요소에만 적용됨 - height와 line-height가 같으면 한줄텍스트는 세로 가운데 오게 처리할 수 있다. 2) 코드 완성 뷰 - 첫번째 ..

이전 1 2 3 4 5 다음

728x90

티스토리툴바