728x90 반응형 CSS127 [CSS] transform 이용하기 See the Pen transform by gahyun (@gahyun) on CodePen. translate : 현재위치를 기준으로 이동하기 translateX() => 가로로 이동 (+값 오른쪽 -값 왼쪽) translateY() => 세로로 이동 (+값 아래쪽 -값 위쪽) translate(X,Y) => 가로세로 값으로 이동 See the Pen css-transform by gahyun (@gahyun) on CodePen. scale : 현재크기를 기준으로 크기조정 scaleX() = > 가로로 크기 조절 scaleY() => 세로로 크기 조절 scale(X,Y) => 가로세로로 크기 조절 See the Pen css-transform-scale by gahyun (@gahyun) on Co.. 2019. 5. 15. [CSS]transition을 이용한 animation 구현 See the Pen css-trnasition by gahyun (@gahyun) on CodePen. transition-property : 트랜지션을 적용할 속성 나열 ,로 구분 transition-duration : 트랜지션 효과 지속시간 transition-timing-function : 트랜지션 효과 타이밍 transition-delay : 트랜지션 지연시간 (지정된 시간 이후 효과나타남) transition : property duration timing-functio delay 순으로 값 지정 transition: background 0.5s linear 0.8s, /* background 속성이 변할때는 0.8s 지연 후 0.5초동안 linear로 변한다. */ padding 1s eas.. 2019. 5. 15. [CSS]모바일에서 영역 클릭시 생시는 파란 박스 없애기 -- 모바일이나 웹에서 테두리가 생긴다면... 아웃라인만 없애주면 된다. input:focus{ outline:none; } 그런데 모바일에서는 하이라이트생기는 경우가 있다. IOS(아이폰,,아이패드 등..), Android 등의 웹킷 기반 브라우저(크롬, 사파리 등)에서 화면을 터치하면 해당위치에 파란박스 영역이 생긴다. (하이라이트) 이를 없애기 위해서는 -webkit-tap-highlight-color : 컬러; 를 사용해 색을 지정한다. 없애고 싶다면 rgba(0,0,0,0) 으로 투명하게 설정하거나 transparent로 투명하게 만들어준다. 웹표준은 아니라 브라우저마다 다르게 적용될수 있다고 한다...... 자세한 사항은 아래에서 확인할 수 있다. https://developer.mozilla.. 2019. 5. 15. [SCSS]작성법 9 - 다른 선택자에 적용한 속성 그대로가져와 적용하기 (@ extend) 2019/05/07 - [퍼블리싱/SASS] - [SCSS]작성법 8 - 다른 .scss파일 가져오기 (@ import) 아래와 같이 panel클래스에 적용한 css코드가 있다. .panel{ background-color: red; height: 70px; border: 2px solid green; } /* big-panel이라는 클래스에 .panel과 똑같은 코드를 적용하기 위해서 @extend를 이용하여 불러온다. */ .big-panel{ @extend .panel; width: 150px; font-size: 2em; } 아래와 같이 적용된다. .big-panel{ background-color: red; height: 70px; border: 2px solid green; width: 150.. 2019. 5. 7. 이전 1 ··· 21 22 23 24 25 26 27 ··· 32 다음 728x90 반응형