coding for _

pug & Scss로 고양이 animation 만들기 pug & Scss 활용해보기 결과 See the Pen cat animation by kimm99604 (@kimm99604) on CodePen. 코드펜 페이지 pug pug는 html을 조금 더 세련되게 쓸 수 있는 템플릿 언어, express 뷰 엔진이다. npm으로 설치할 수 있다. 라면에 밥 말아서 먹고 싶다 이렇게 쓰는 것을 p 라면에 밥 말아서 먹고 싶다 처럼 쓸 수 있다. .cat .ear.ear--left .ear.ear--right .face .eye.eye--left .eye-pupil .eye.eye--right .eye-pupil .muzzle Scss css보다 간단한 scss로 스타일을 주었다. $color-black: #..

이미지 스프라이트(Image Sprite) | ir 효과 | 백그라운드 표현 이미지 스프라이트(Image Sprite), ir 효과, 백그라운드 표현에 대해 알아봅시다. CSS 이미지 스프라이트(Image Sprite) 이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지 스프라이트를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다. 예제 figma 다음 예제는 하나의 이미지를 가지고 6개의 아이콘을 만드는 예제입니다. 6개의 아이콘을 만들기 위해 6개의 이미지를 사용하는..

SASS | SCSS 스타일 시트 언어 (Style Sheets) CSS | SCSS | SASS 정의 CSS : Cascading Style Sheets - 종속형 시트 SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트 SCSS : Sassy CSS - SASS의 3버전에서 새롭게 등장한 스타일 시트 SASS(SCSS)사용 이유 (장점) 웹에서는 분명 CSS만 동작하지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. SASS(SCSS)는 이러한 이슈를 해소시켜 줄 수 있습니다. ex) 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 SCSS | SASS 차이점 SAS..

CSS 기본 문법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. CSS에서의 주석은 /* */로 표현합니다. 01. 내부 스타일 시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. 02. 외부 스타일시트 스타일 속성을 따로 *.css 확장자를 가진 파일로 저장하여 HTML문서에 파일명으로 연결하는 형태입니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용하지만, 외부 스타일시ㅡ는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. html 우리를 기쁘게 하는 것들. style.css @charset "UTF-8"; p {c..

미디어쿼리(media query) 미디어쿼리는 뷰포트의 해상도에 따라 CSS를 분기시키는 반응형 기법입니다. 01. 최소 가로폭이 1000px보다 넓은 해상도일 때 style_pc.css를 연결한다는 뜻입니다. 02. @media @media all and (min-width: 1000px) { 모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들... } CSS 파일을 하나로 만들어서 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형웹 CSS입니다. all은 Media Type을 나타냅니다. and 전, 후에 띄어 씁니다. Media Type 설명 all 모든 미디어 장치에 사용 (기본값) print 프린터에 사용 screen PC, 태블릿, 스마트폰에 사용 speech 스..

벡터(Vector) | 비트맵(Bitmap) 벡터(Vector) 그래픽이란? 벡터 이미지는 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식을 말합니다. 벡터(Vector) 특징 최근에는 컴퓨터 하드웨어의 발달로 웹사이트의 로고 및 아이콘 표시에 벡터 그래픽이 사용되고 있습니다. 벡터 이미지는 확대해도 깨지는 현상이 없고 선분과 면으로 이루어져 있어 경계는 선명하고 뚜렷합니다. 수학 연산으로 만들어져 있어 사이즈를 키워도 용량은 변하지 않으며, 자주 접할 수 있는 벡터 파일의 형식에는 .ai, .eps, .svg가 있습니다. 비트맵(Bitmap) 그래픽이란? 비트맵 그래픽은 간단히 말해 서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식입니다. 픽셀(Pixel)이란? 이미지를 구성하는 ..