SCSS Sass(syntactically awesome stylesheets, 사스)는 스타일시트 언어입니다. Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어입니다. SassScript는 그 자체로 스크립트 언어이다. Sass는 2가지로 구성되어 있습니다. 새로운 "SCSS"는 CSS의 것과 비슷한 블록 형식을 사용합니다. 블록 안의 줄을 구불하기 위해 괄호를 사용하여 코드 블록과 세미콜론을 인지합니다. SCSS 설치 Sass는 단독으로 설치 가능한 애플리케이션이 아닌, 루비온레일스(Ruby On Rails)라는 오픈 소스 웹 프레임워크에 속한 패키지 프로그램이기 때문입니다. 먼저 루비를 설치하고 그다음 Sass를 설치합니다. 루비 사이트 가기 설치 방법 1. https://ruby..
Hover Effect Hover Effect (1) See the Pen Hover Effect by jeongahlee (@jeongahlee) on CodePen. Hover Effect (2) See the Pen Hover Effect 3 by jeongahlee (@jeongahlee) on CodePen. Hover Effect (3) See the Pen Hover - Effect3 by jeongahlee (@jeongahlee) on CodePen. Hover Effect (4) See the Pen Hover-Effect 4 by jeongahlee (@jeongahlee) on CodePen. Hover Effect (5) See the Pen Hover Effect5 by jeon..
컨텐츠 요소를 가운데 정렬하는 방법 인라인 구조를 가운데 정렬하는 방법 (text-align : center;) 블록 요소를 가운데 정렬하는 방법(margin: 0 auto;) 테이블을 이용한 가운데 정렬하는 방법(기본적인 방법 : display: table-cell; ,vertical-align: middle;) 포지션을 이용한 가운데 정렬하는 방법 1 (margin) 포지션을 이용한 가운데 정렬하는 방법 2 (transform: translate(-50%, -50%);) 포지션을 이용한 가운데 정렬하는 방법 3 (margin:auto; , left: 0; top: 0; right: 0; bottom: 0;) 포지션을 이용한 가운데 정렬하는 방법 4 ( displat: flex;) 인라인 구조를 가운데..
CSS Selector 태그 유형 설명 버전 . .class {color:#fff;} 클래스 선택자 CSS1 # .id {color:#fff;} 아이디 선택자 CSS1 * * {color:#fff;} 전체 선택자 CSS2 element p {color:#fff;} 요소 선택자 CSS1 element, element p, div {color:#fff;} 그룹 선택자 CSS1 element element div p {color:#fff;} 후손 선택자 CSS1 element > element div > p {color:#fff;} 이웃 선택자 CSS2 element + element div > p {color:#fff;} 자식 선택자 CSS2 element ~ element div ~ p {color:#ff..