Eveningstar

**미디어 쿼리와 뷰포트는 반응형 웹사이트를 만들기위해 꼭 필요한 방법이다. 디바이스의 화면크기를 감지하고 그에 따른 코드를 화면에 보여줄수있도록 하는 기술이다. [ 미디어쿼리 ] - 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술 1.기본문법 @media [only or not] [미디어유형] [and or ,(콤마)] (조건문) { 실행문 } 1) only or not - only 키워드는 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게 해주는 키워드로써 ie 8이하에서 지원하지 않기때문에 사용하지 않는 편 - not 다음에 따라오는 조건을 부정하는 키워드임으로 not (조건문)은 "조건문"의 경우를 제외한 모든 미디어유형을 뜻함 2) 미디어 유형 - all, screen, tv, aur..

CSS3 Transitions transition 속성은 그 자체로도 애니메이션 효과를 가지고는 있지만, animation 속성보다는 제한적인 기능을 가지고 있습니다. 그래서, 하나의 줄거리를 이루기 위한 애니메이션 보다는, 특정 객체를 부각시키는 인스턴트적인 상황이나 화면 전환에 더 적합합니다. transition 속성 transition-delay : 지연시간 transition-duration :지속시간 transition-property : 속성 transition-timing-function : 변화의 시작과 끝 타이밍을 정의 *트랜지션은 객체가 기존에 가지고 있던 속성의 값이 다른 값으로 변할 때만 표현됩니다. ie10이하 지원 안함 * 타이밍속성값ease기본값linear모든 속도가 같다.ea..

CSS3 2D transform(평면) translate()rotate()scale()skewX()skewY()matrix() 익스 9미만 지원안되는 css도 있음(scale) translate() - translate() 메서드는 요소를 현재 위치에서 X 축 및 Y 축에 지정된 매개 변수에 따라 이동시킨다 https://jsfiddle.net/jywoo/hcgbo6rb/2/ rotate() - rotate()메소드는 주어진 정도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전 scale() - scale()메서드는 요소의 크기를 늘리거나 줄입니다 (폭 및 높이에 대한 매개 변수에 따라). https://jsfiddle.net/jywoo/a01v4jek/ skewX()/ skewY() - skew..

IE / Chrome / Safari - 스크롤바 1. -webkit-에서 커스터마이징 스크롤바 만들기 ::-webkit-scrollbar {스크롤바 전체영역} ::-webkit-scrollbar-button {상하, 좌우스크롤바 버튼} ::-webkit-scrollbar-track {화살표를 제외한 부분} ::-webkit-scrollbar-track-piece {track에서 실제 움직이는 부분을 제외한 나머지 부분} ::-webkit-scrollbar-thumb {실제로 움직이는 부분(스크롤바 알맹이)} ::-webkit-scrollbar-corner {리사이즈 하기 전 상하 좌우 스크롤바가 만나는 모서리 부분} ::-webkit-resizer {화면 리사이즈시 클릭앤드래그 하는 부분(모서리)} 2..