FrontEnd/HTML&CSS
scss keyframe 적용법
일반적인 방법으로는 scss에 @keyframe을 적용할 수 없었다. @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; animation: #{$str}; } @include keyframes(fade) { 0% { opacity: 1; } 100% { opacity: 0; } } 위와같이 mixin과 include를 활용해서 넣어주어야 한다. 위 예시는 fade를 적용시켜본 경우이다. 그 이후, class-name { @i..
16_CSS 네이밍 규칙
항상 지금까지 css 이름을 지을땐 나름의 규칙만 가지고 지었었는데, 이번 기회에 이를 바로잡을 필요가 있다고 생각하여 css 에서 class 이름을 짓는다면 어떤 방식으로 지어야 하는지 알아보았다. 보통 자바스크립트에서는 Camel case로 불리는 규칙을 많이 사용한다. myNameIsMingyu 와 같은 형태이다. 하지만 css에서는 그렇지 않다. CSS에서는 우선 기본적으로 소문자와, 하이폰( - ) 을 사용한다 my-name-is-mingyu 와 같은 방식이다. BEM 규칙 BEM규칙이란 Block, Element, Modifer의 줄인말이다. 아래 형태의 html을 보면서 생각해 보자. Search Block은 기능적으로 독립된 컴포넌트이다. search-form 이 이에 해당된다. Eleme..
15_Bootstrap
Bootstrap Bootstrap.css를 불러오고, 해당 파일에 정의된 버튼,레이아웃등을 가져와서 사용하는 것 클래스로 간단하게 불러와서 사용할 수 있다. 트위터에서 개발하였다. 쉽게 생각해서, 만들어져있는 양식들을 가져와서 내가 게시판 등을 만들때 보다 편하게 사용할 수 있는것! 오픈소스들을 가져다 쓰는 개념이라고 보면 되겠다. bootstrap을 사용하기 위해서는 먼저 css에 부트스트랩을 추가하는 부분이 필요하다. 위처럼 링크로 표시해도 되고, 직접css파일을 다운받아서 추가해도 상관없다!! 공부할때 3.4.1버전으로 써봤는데 아직도 3버전기반 으로 작동하는 웹페이지가 많다고 하니 3버전으로 공부하고 4버전적용이 되면 쓰는게 좋은거 같다. 레이아웃 다 더하면 12가 된다는 것이 핵심이다. col..
14_SCSS_함수
함수(Functions) 자신의 함수를 정의하여 사용할 수있다. Mixins과 거의 유사하지만 반환하는 내용이 다르다. mixin은 지정한 스타일을 반환하는 반면, 함수는 연산된 특정 값을 반환하는 개념이다. 즉 보통 언어에서 사용되는 함수의 개념과 같다. 사용 방법은 위와 같으니 간략하게 보고 넘어가보자. 함수 이름 중복 함수는 함수이름을 그대로 사용하기 때문에 SCSS의 내장함수와 이름이 겹치는 경우가 발생할 수 있다. 예를들어 SCSS안에 이미존재하는 red()를 만들었다면 문제가 생길 수 있으며 extract-red()이런식으로 별도의 접두어를 두어서 사용해야 한다. 내장함수를 다 외우는것은 불가능하기에 my_red() 이런식으로 프로젝트마다 정해두는것도 방법이다. if(함수) 조건의 값(bool..
13_SCSS_연산,재활용(mixin,include),확장
계속해서 SCSS 문법을 공부해 나가보겠다. 이번에는 연산, 재활용, 확장 개념에 대해 다뤄보겠다. 연산(Operations) + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) / 나누기 오른쪽 값이 반드시 숫자(Number) % 나머지 == 동등 != 부등 대소 / 보다 큰 = 대소 및 동등 / 보다 크거나 같은 and 그리고 or 또는 not 부정 일반적인 언어의 연산을 다 지원한다. 숫자 연산 >곱하기를 사용할 때 10px * 5처럼 사용해야 한다. 10 * 10 이나 10px * 10px는 사용할 수 없다. >CSS는 속성 값을 분리하는 방식으로 /를 사용하기 때문에 /가 나누기로 사용되지 않을 수 있다. 그래서 다음과 같은 조건을 충족하는 경우에 나누기로 계산이 된다. ..
12_SCSS_중첩,변수,import
이제 본격적으로 SCSS 문법들에 대해 공부해 보겠다. 주석(Comment) // /* */ 두가지 스타일의 주석을 사용한다. //는 컴파일되지 않는 주석으러 처리되며, /*는 컴파일이 되는 주석으로 처리된다. 단, 여러줄을 사용할때 Sass는 /* 나는 * 정민규 * 나는정민규 */ 이런식으로 해야한다. SCSS는 문제없어 CSS와 호환이 더 쉽다. 데이터 종류 (Data Types) Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative, "/images/a.png", "dotum" Colors 색상 표현 red, blue, #FFFF00, rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음 null Lists..