웹언어/CSS3 (38) 썸네일형 리스트형 [CSS3강좌] 30강 select태그 아이콘 변경 - 오쌤의 니가스터디 1. select 태그란? -여러 옵션 중 한 개의 값을 선택하는 상자 ## 코드 옵션1 옵션2 옵션3 ## 결과 - 옵션1 옆에 아이콘(아래 방향)이 존재합니다. ## 익스플로러/엣지(edge) 2. select CSS초기화 - 브라우저 별로 다르기도 하고 기본적으로 예쁘지 않기 때문에 없애는 경우가 많이 있습니다. ## 문법 select{ appearance: none; -webkit-appearance: none; /* 사파리, 크롬 하위버전용 */ -moz-appearance: none; /* 사파리, 크롬 하위버전용 */ } select::-ms-expand{ display: none; } /* 익스플로러용 */ - 익스플로러는 위와 같이 따로 작성해줘야 가능합니다. ## 코드 옵션1 옵션2 옵.. [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방식의 애.. [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 다음
