Web/Styles
[SCSS] SCSS 기본 문법 정리
CSS작성(생성)을 위한 작고 가벼운 언어이고, SASS 와 SCSS가 있다. SASS : SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다. SCSS : 기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다. 이 둘은 같은 계열의 언어이지만 요즘은 SCSS를 많이 쓴다. SCSS => SASS 컴파일러 => CSS변환 Sass 컴파일러 방식 - VS Code + Live Sass Compiler - Compiler1 Ruby Gem 이용 - Compiler2 Node.js NPM 이용 VScode를 깔고 간단한 셋팅 뒤 sass관련 확장 프로그램을 다운받는다. sass, sass compiler, sass lint - scss 파일을 생성하고..
[CSS] 웹폰트
웹폰트 웹폰트는 사용자가 웹페이지에서 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드 되는 것은 아니고 클라이언트 로컬에 해당 폰트가 존재하지 않을 경우 전송된다. 속도 : 로컬 폰트 > CDN > 서버 폰트 1. CDN(Conent Delivery Network) 링크 방식 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);* { font-family: 'Nanum Gothic', sans-serif; } 2. 서버 폰트 로딩 방식-> CDN 링크를 통해 여러 개의 폰트를 사용한다면 로딩이 오래 걸린다. 또한 CDN링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이..
[CSS] animation03
CSS3 ANIMATION 일반적으로 CSS 애니메이션을 사용하며 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다. 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width변경 애니메이션은 JavaScript를 사용하는 것보다 훨씬 간편하며 효과적이다.세밀한 제어를 위해서는 JavaScript 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 도감기 또는 감속과 같은 고급 효과는 JavaScript가 훨씬 유용하다. CS..
[CSS] 벤더 프리픽스
벤더 프리픽스 CSS3 표준으로 확정되기 이전 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다. BrowserVendor PrefixIE or Edge-ms-Chrome-webkit-Firefox-moz-Safari-webkit-Opera-o-iOS Safari-webkit-Android Browser-webkit-Chrome for Android-webkit- Prefix Free 라이브러리 브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다. 사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리(http://leaverou.github.io/prefixf..
[CANVAS] 애니메이션 그리기
★ 사각형을 x축으로 왼쪽에서 오른쪽으로 움직이기★ https://jsfiddle.net/Kimara/w6rjhLqm/10/ ★두 개의 사각형을 만들고 애니메이션을 멈추게 하기★ https://jsfiddle.net/Kimara/gtfskc92/7/ ★백그라운드 이미지 애니메이션 만들기★ https://jsfiddle.net/Kimara/dLceafkz/11/ ★눈내리기★ https://jsfiddle.net/Kimara/2ksjgovb/15/
[CANVAS] 클릭한 곳에 사각형 그리기
https://jsfiddle.net/Kimara/Lo6f4xgh/21/ // HTML // 스크립트 var canvas=$('#myCanvas').get(0); var ctx=canvas.getContext('2d'); $('#myCanvas').click(function(e){ var mouseX = e.clientX - ctx.canvas.offsetLeft; var mouseY = e.clientY - ctx.canvas.offsetTop; ctx.fillStyle="red"; // 마우스 클릭한 곳에서 사각형의 중심이 되어서 생성이 된다. ctx.fillRect(mouseX-10, mouseY-10,20,20) //console.log(mouseX+','+mouseY); });
[CSS] vertical-align
vertical-align은 오로지 inline 또는 table-cell box에서만 수직 정렬을 지정한다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align
[CSS] css기본 규칙들
*내가 놓치고 있는 CSS 기본 규칙들.. CSS 우선순위 CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있다. 선택자 우선순위 !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자 경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정된다. 즉 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이긴다. 삽입 위치 우선순위 1. 요소안의 style 요소2. 요소안의 @import 문3. 요소로 연결된 CSS 파일4. 요소로 연결한 CSS 파일 안의 @import 문5. 최종 사용자가 연결한 CSS 파일6. 브라우저의 기본 스타일시트 예외적으로, 최종 사용자..
[CSS] display:flex
1. 플렉서블 박스 = 부모 박스- 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동 2. 플렉서블 박스의 자식 박스 = 플렉스 아이템- 자식 박스가 속성값에 의해 작동하는 순간부터 플렉스 아이템이라 부른다 3. 플렉서블 박스의 축 - 주축과 교차축- 주축 = 중심이 되는 축- 주축이 가로 -> 왼쪽에서 오른쪽으로 배치- 주축이 세로 -> 위에서 아래로 배치- 축의 방향 - 축의 시작과 끝이 존재하는 이유는 플렉스 아이쳄이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문 ( 속성 값은 플렉서블 박스에 적용한다. ) ※ 익스플로러 11 이상에서 작동. 안드로이드 4.4이상에서 자동※ 플렉서블 박스는 브라우저 접두사를 사용해야 한..
[CSS] 마우스커서 커스텀
https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X익스 6이상 O style="cursor: url(smiley.gif), url(myBall.cur), auto" 첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적..