산술연산 나누기 조건 3가지 값 또는 그 일부가 변수인 경우 값이 ()로 묶여있는 경우 다른 연산자와 함께 사용되는 경우 mixin SCSS SASS 선언 @mixin 믹스인이름{ 스타일; } =믹스인이름 스타일 사용 @include 믹스인이름; +믹스인이름 선택자 이용하기 인수 argument 기본 인수 사용 인수 default value @mixin 믹스인이름($매개변수: 기본값) { 스타일; } 인수 응용 키워드 인수 keyword argument 입력순서 불필요, 미작성 인수 적용을 위해 기본값(null) 설정 추천 @mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) { 스타일; } @include 믹스인이름($매개변수B: 인수); 가변인수 variable arguments @m..

중첩 1. 규칙 중첩 2. 속성 중첩 특수선택자 부모 참조 선택자 & @at-root 중첩 벗어나기 변수 $변수명:데이터 식별자 (변수명) 규칙: 영문,한글 모두 가능 * kebab-case (mostly use) * snake_case 데이터의 종류 데이터 설명(특이사항) 예시 Numbers 숫자: 숫자에 단위가 있거나 생략가능 1,20px, 2em, .5 Strings 문자 : 따옴표가 있거나 생략 bold, relateive, “dotum”, Colors 색상표현 red, #ff0000, rgba(255,0,50,0.5) Booleans 논리 true,false Nulls 아무것도 없음 null이 사용되면 컴파일하지 않음 null Lists 공백이나 , 로 구분되는 목록: (), 생략가능 (appl..

Sass(Syntactically Awesome Style Sheets) Scss(sassy css) : css의 확장언어 SCSS와 Sass는 불필요한 선택자의 과용과 연산 기능의 한계, 구문의 부재들 프로젝트가 복잡해지면서 Css의 가독성과 재사용성이 떨어지는 단점을 보완하고, 유지보수가 쉬워지도록 만들어준다. SASS의 추가기능 1. 변수의 사용 2. 조건문과 반복문 3. Import 4. Nesting 5. Mixin 6. Extend/Inheritance ​ SASS 특징 1. CSS의 모든 문법을 지원하는 CSS 완전 호환성 2. 변수, 중첩, 믹스인 등 사용으로 언어 확장 3. 색상 등 값을 처리하는 다수의 유용한 함수 4. 라이브러리를 위한 제어 지시문과 같은 고급 기능 5. 형식을 잘 갖..

반응형 1. 미디어쿼리 (css) @media 기기타입 and (min-width:#) and (max-width:#){} 2. 메타태그 (html) 반응형 디자인 패턴 유동형 (mostly fluid) :googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/mostly-fluid.html 열 끌어놓기(column drop) googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/column-drop.html 레이아웃 시프터(layout shifter) googlesamples.github.io/web-fundamentals/fund..

FLEX 1. 부모요소에 주는 태그 display: flex / inline-flex flex-direction flex-wrap: 줄넘김 설정 justify-content 가로 정렬 align-item 세로 정렬 2. 자식요소에 주는 태그 order: z-index와 같은 방식, 미설정 시 최상위 http://css3generator.com/ CSS3Generator by @RandyJensen Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown print..

transform rotate 3D 주사위 만들기 실습 .wrap{ width:200px; height:200px; position: relative; font-size:100px; text-align: center; line-height: 200px; color:white; margin:100px auto; transform-style: preserve-3d; transform:rotate3d(1,1,0,0deg); transition:3s; } .wrap:hover{ transform:rotate3d(1,1,0,360deg) } .wrap>div{ width:200px; height:200px; position: absolute; } .box1{ background-color:rgb(218, 112,..