drexqqa 이성희

SCSS Processing 루비의 설치를 완료하였다면 scss를 설치해야합니다. 자신이 작업하는 파일의 경로를 알아봐야 하는데 그 방법은 두 가지가 있습니다. 이렇게 폴더 상단에 경로를 클릭하게 되면 나오거나, 그 파일의 속성에 들어가게되면 위치가 나오게 됩니다. 그 뒤에 cmd창을 다시 키고 "cd 자신이 작업하고 있는 폴더의 경로" 를 입력한뒤 엔터를 누르고 "sass 폴더명.scss:폴더명.css" 를 입력하게 되면 이렇게 폴더들이 생기는 것을 확인할 수 있습니다.

SCSS 설치 Sass는 단독으로 설치 가능한 애플리케이션이 아닌, 루비온레일스(Ruby On Rails)라는 오픈 소스 웹 프레임워크에 속한 패키지 프로그램이기 때문입니다. 먼저 루비를 설치하고 그다음 Sass를 설치합니다. Ruby On Rails 다운로드 위의 링크에 들어가서 자신의 PC에 맞는 파일을 다운로드합니다. 저 파일을 실행시켜 아래의 순서에 맞게 설치를 진행합니다. 설치가 완료되면 이 화면에서 1을 누르고 엔터를 눌러줍니다. 이렇게 설치가 완료되면 이 화면을 닫아줍니다. 그 후에 실행창을 실행시켜줍니다. 그 뒤 cmd창을 실행시켜줍니다. " ruby -v " 라고 작성을 한 뒤에 루비의 버전이 나오게되면 성공입니다. 마지막으로 " gem install sass "을 입력하면 설치가 완료됩..

Rocket - Animation See the Pen Rocket - Animation by LeeSungHee (@drexqq) on CodePen.

컨텐츠 요소를 가운데 정렬하는 방법 인라인 요소를 가운데 정렬하는 방법 (text-align: center;) 블록 요소를 가운데 정렬하는 방법 (margin: 0 auto;) 테이블을 이용한 가운데 정렬하는 방법 (vertical-align: middle;) 포지션을 이용한 가운데 정렬하는 방법 (margin) 포지션을 이용한 가운데 정렬하는 방법 (transform: translate(-50%, -50%);) 포지션을 이용한 가운데 정렬하는 방법 (margin: auto;) 플렉스를 이용한 가운데 정렬하는 방법 (display: flex;) 인라인 구조를 가운데 정렬하는 방법 See the Pen Align Center Type 1 by LeeSungHee (@drexqq) on CodePen. 블록..

See the Pen Animation - Dog by LeeSungHee (@drexqq) on CodePen.

See the Pen Animation - Tentacle by LeeSungHee (@drexqq) on CodePen.

See the Pen TentacleMoving - Animation by LeeSungHee (@drexqq) on CodePen.

See the Pen animation steps by LeeSungHee (@drexqq) on CodePen.