본문 바로가기

전체 글

 (80)
[Sass/SCSS] 반복문 사용하기 (@for $변수 from 시작점 through 끝점) #작성법 - 반복문은 다음과 같은 형식으로 사용할 수 있다. @for $변수 from 시작점 through 끝점 { ... } @for $i from 1 through 4 { // i는 변수명, 변수명은 뭘 쓰던 상관 없다. // 1부터 4까지 반복 // @debug $i; // @debug 사용시, 터미널에서 디버그 결과를 확인할 수 있음 .col-sm-#{$i} { // 클래스이름에 변수 사용시, #{}에 변수명을 감싸줘야한다. width: 100% / $i; } } - scss에서 위 코드와 같이 작성 시, css에서는 다음과 같이 랜더링 된다. .col-sm-1 { width: 100%; } .col-sm-2 { width: 50%; } .col-sm-3 { width: 33.33333%; } ...
[Sass/SCSS] 변수 만들기 #1. 사용법 1. scss 파일에서 다음과 같은 형태로 넣어준다. $name: value; // $변수명: 값; * 이름지을때 유의사항 - 알파벳,-,_ ,숫자 사용가능 - 대소문자 구분함 - 변수명 숫자로 시작하지 말아야함. - 보통 아래 두가지 조합 많이 사용함 (강요적인건 아니니까, 회사에서 쓰는 방식에 따라 사용하는게 좋음) 1) sass에서는 보통 소문자로,- 조합 2) 대문자로 _ 조합 $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 2. scss 에서 변수가 필요한 곳에 그대로 사용하면 된다. $color-red: red; // 1. 소문자 - 조합 $COLOR_BLUE: #0000ff; // 2. 대문자 _ 조합 ..
[Sass/SCSS] Sass/SCSS style 쉽게 추적하기 Sass/SCSS 를 사용하는경우, 별다른 셋팅이 없으면 모든 style이 연결된 css로만 추적이된다.. 오늘은 개발의 편의를위해, 이를 scss파일로 추적 가능하게 만들어보도록 하자. 1. package.json 열기 2. "scripts" sass 를 정의한 라인에 하단 옵션 추가 --source-map true * node-sass option에 해당 옵션을 추가한거예요. 3. 터미널에서 npm run sass 4. 연결된 scss다시 저장 하면, 다음과 같이 css가 아닌, scss로 스타일을 추적할 수 있다.
[기타] 아이콘 폰트 만들기 우리가 사용하는 폰트,, 그들도 svg로 만들어진것 아시나요? 이말은 즉슨,, svg로 추출한 우리의 아이콘들도 아이콘 폰트로 만들수 있다는 말이죠 오늘은 프로젝트에서 사용될 아이콘들을 폰트로 만드는 방법에 대해서 이야기 해보겠어여 많은 아이콘폰트 변환페이지가 있지만, 저는 icomoon.io 사이트를 이용할게요. 1. 해당 페이지 접속 https://icomoon.io/app/#/select IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io 2. 상단 import icons 버튼 클릭 후, 폰트로 변환하고 싶은 svg 파일 import 해오기 - 추가시, 하단에 Untitled Set이 생긴다. 3. 폰트로 변환하고자하는 아이콘 선택 4. 하단..
[기타] 이미지 추출하기 오키오키 웹을 만들자!! 그런데 이미지.. 뭘로 추출해야되지,,? 이건,, 다 png로 넣어버려도 되나..? 싶은 고민들 많을거다. 이번에는 프로젝트 시작에 앞서 어떤 이미지로 추출하면 좋을지에 대해 알아보자. 웹에서 적절한 이미지를 선택하는 것은,, 약간 밸런스 게임 같다. 용량이 높으면 고화질의 멋진 이미지를 얻을 수 있지만, 너무 용량이 높으면 그것을 받아오는 로딩 속도가 느려져 웹의 퍼포먼스를 방해하기도 한다. 그리하여, 각각 이미지를 어떤 파일로 추출할지 정하는것은 웹의 퍼포먼스에 있어 중요한 일이다. #1. jpg, jpeg - 가장 보편적으로 사용되는 이미지 확장자. - 이미지가 촘촘한 dot으로 이루어진 레스트터 타입의 이미지다. - 타 확장자(png)에 비해 압축률이 좋아, 배경이 투명하..
[Sass/SCSS] Sass/SCSS 시작하기 - css 랜더링 자동화 앞서 npm run sass라는 명령어를 통해 scss파일을 css파일로 수동으로 랜더링하는 방법까지 알아봤다. scss의 기본적인 셋팅에 대해 알고싶다면 이전글을 참고하기 이번 포스팅에서는 매번 명령어를 통해 수동으로 파일을 랜더하기 어려우므로 이를 자동화 하는 방법을 메모하고자 한다. 1. package.json 열기 2. "scripts"의 "sass" 를 정의해놓은 영역에 -wr추가 "sass": "node-sass -wr styles/main.scss ./style.css" * -wr 뭔데 추가함? -w, --watch : 파일의 변화를 감지하여 작동하겟다는 뜻. -r, --recursive : 재귀적인 디렉토리나 파일도 감시하겠다는 뜻 3. 터미널에서 npm run sass 입력. 4. 이제 ..
[Sass/SCSS] Sass/SCSS 시작하기 - 셋팅 #1. node 설치 1. node 는 하단 링크에서 각자의 컴퓨터 사양에 맞게 설치하자. - LTS(Long Term Support, 장기 지원 버전) 설치 권장 : 큰 버그 없이 안정적으로 사용가능한 버전 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 터미널에서 하단 키워드를 입력후 버전 정보가 잘 나온다면 설치가 잘 된 것이다. node -v 3. 터미널에서 하단 키워드 입력하여 package.json 생성하기 - 생성된 package.json 에서는 node module을 사용하기 위한 여러가지 셋팅을 설정..
[자바스크립트 딥다이브] 17. 생성자 함수에 의한 객체 생성 #0. 생성자 함수 - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스라고 한다. #1. Object 생성자 함수 1-1. Object 생성자 함수 1. new 연산자와 함께 Object 생성자 함수를 호출 2. 빈 객체를 생성하여 반환 3. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체 완성. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function(){ console.log('Hi! My name is ' + this.name); }; console.log(person); //{name: 'Lee',..

티스토리툴바