맨 땅에 프론트엔드 개발자 되기

SASS(SCSS) 색상 내장 함수 SASS(SCSS)에서는 색상과 관련된 내장 함수를 제공하고 있다. 공식문서 https://sass-lang.com/documentation/modules/color Sass: sass:color The hue is a number between 0deg and 360deg (inclusive). The whiteness and blackness are numbers between 0% and 100% (inclusive). The hue may be unitless, but the whiteness and blackness must have unit %. The alpha channel can be specified as either a unit sass-lang.c..

SASS(SCSS) Mixin 과 Include SASS(SCSS)의 편리한 기능 중 하나인 Mixin 기능은 코드의 재사용을 가능하게 해준다. 한 번 작성된 코드로 여러 곳에 같은 코드를 적용시킬 수 있다. 예를 들어, 아래와 같이 코드를 작성해둔다면 어디에서나 이 코드를 불러와 사용할 수 있다. @mixin flex { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; } 사용할 때는 아래와 같이 사용한다. .container{ @include flex; } 미리 정해둔 속성에서 불러올 때마다 값만 다르게 하고 싶다면 함수의 매개변수처럼 아래와 같이 mixin 을 만들 수..

간단한 SASS(SCSS) 사용 방법 - Live Sass Complier SASS(SCSS)는 CSS 전처리기(Pre-processor)로 CSS의 사용을 더 편리하게 도와주는 도구다. 웹 브라우저는 자체적으로 SASS를 해석하지 못 하기 때문에 컴파일을 통해 SASS 파일에 작성된 SASS 문법을 CSS 문법으로 작성된 CSS 파일로 변환시켜주는 작업이 필요하다. node.js 환경에서 작동되는 컴파일러를 실행할 수도 있지만 실제 사용환경이나 최신 기술을 고려하지 않고 단순히 만든 SASS 작업의 결과를 가시적으로 확인하고 싶을 땐 VS Code의 Extension 기능인 Live Sass Complier 를 사용할 수 있다. Live Sass Complier 를 설치하고 나면 우측 하단에 Watch..

VS Code로 코드 작성시에 코드 작성을 편하게 도와주는 Extension 몇 개를 소개해볼까한다. 1. Indent-rainbow indent는 들여쓰기라는 뜻으로 코드를 작성할 때 들여쓰기 단계에 따라 4가지 색상으로 구분해서 코드 작성을 도와주는 기능이다. 코드의 길이가 짧을 때는 별 유용함을 느끼지 못하지만, 코드가 길어지면 포함관계를 구분해서 작성해야할 때 위치를 잘 찾을 수 있도록 도와준다. 2. Auto Close Tag / Auto Rename Tag HTML/XML 태그의 닫힘 태그를 자동으로 완성해주는 기능이다. 태그 명을 수정할 때에도 닫힘 태그를 자동으로 수정해준다. 꼭 필요하고 없어서는 안 되는 기능이라고 생각한다. 정말정말!!! 3. Color Highlight 색을 많이 다루..

웹페이지를 만들 때 폰트는 웹 디자인에 있어서 중요한 한 부분이다. 인터넷이 발전하면서 많은 디자이너 분들이 웹폰트를 만들어오셨고, 우리는 그 중 무료로 배포된 웹폰트를 가져다 써보려고 한다. 물론, 유료 웹폰트도 구매하면 사용가능하지만... 가난한 학생은 무료로 배포된 웹폰트를 감사한 마음으로 사용하렵니다... 무료 웹폰트를 구글에 검색하면 수많은 페이지들이 나온다. 나는 그 중에서도 가장 널리 쓰이고 유명한 구글 웹폰트를 사용해볼 것이다. 구글 웹폰트는 개인 작업용 뿐만 아니라 상업용으로도 사용이 가능하고 영어와 한글 둘 다 있다는 장점이 있다. 저작권에서 자유로울 수 있다는 점! 감사합니다 구글~~~ https://fonts.google.com/?subset=korean Google Fonts Ma..

// 반복문을 활용한 구구단 출력하기 오늘은 버튼을 눌렀을 때 해당 숫자의 구구단을 출력해주는 초간단 구구단 출력기를 구현해보려고 한다. for문 사용과 증감 연산자 사용을 연습해볼 수 있는 예제다. 구현된 최종화면에는 아래와 같이 구구단이 출력된다. #HTML 구구단 출력 2 3 4 5 6 7 8 9 All #JAVASCRIPT const elBtn = document.querySelectorAll('.ex-gugu > div > button'); const elResult = document.querySelector('.result'); let result = ''; let gugu = function(n){ for(i=1; i