seulcoding

Sass watch basic usage파일단위 watchsass --watch scss/file.scss:scss/file.css 디렉토리 단위 watchsass --watch src/sass:src/css

Installgem install sass # or sudo gem install sass When installed, check versionsass -v Compile usage# compile one file sass input.scss output.css # watching (automatically compile) sass --watch input.scss:output.css # set style sass --watch --style compressed input.scss output.css

sass를 사용하는데 좋은 가이드라인이 있어서 공유한다. 구문, 설계 등 다양한 sass 사용 방식을 잘 설명해 놓은 글.sass를 사용하는 중이거나 사용 할 예정에 있는 사람이라면 한 번 읽어봄직하다.Sass Guidelines. 한국어 번역판은 여기에서 확인할 수 있다.다음은 저자가 너무 길어서 안 읽는 사람들을 위해 쓴 정리.탭 대신 스페이스 두(2) 칸을 들여쓴다;행의 너비는 80 글자;CSS를 여러 행으로 적절히 작성한다;공백을 의미 있게 사용한다;문자열과 URL에는 인용 부호(작은 따옴표)를 붙인다;뒤따르는 0은 표기하지 않는다. 앞장서는 0은 반드시 표기한다;연산은 괄호로 감싼다;매직 넘버를 피한다;색은 키워드 > HSL > RGB > 16진법 순으로 표기한다;리스트는 쉼표로 구분한다;리스트..

VariableSass는 variable을 사용해서 자주 쓰는 것들을 쉽게 사용할 수 있다. $를 사용해서 var를 선언할 수 있다.$color-red: red; div { background-color: $color-red; } p { background-color: $color-red; } NestedSass는 중첩된 엘리멘트들을 다 쓰지 않고, 해당 엘리먼트 내에 작성이 가능하게 하여 훨씬 간편하게 스타일을 적용할 수 있다..post { color: red; .title { color: black; } } Referencing Parent Selectors (부모참조 선택자: &)위의 중첩을 사용할 때, &를 사용하면 css로 컴파일 될 때 복합선택이 된다..post { color: red; .ti..

Sass에서는 다음의 우선순위를 따라서 색을 입력하라고 얘기한다. 인간의 두뇌로 이해하기 쉽고 작성자가 색을 변경하기 쉬운 순서대로 사용하라고 하는 것 같다.CSS 색키워드: 여기서 모든 목록을 확인 가능하다. (ex black, red …)HSL 표기법 : hue, saturation, lightness를 사용. ({backgrount-color: hsl(120, 100%, 50%)})RGB 표기법: 우리가 알고있는 그 RGB. (ex. rgb(255, 0, 0))RGB 표기는 0~255 숫자 혹은 0%~100%의 백분율을 사용한다. rgb(100%, 0%, 0%)는 rgb(255, 0, 0)과동일16진법 표기법: #000추가적으로 Alaph(투명도)가 추가된 RGBA, HSLA가 있다.HSLA: hu..

html에서 날씨를 표시할 일이 생겨 찾아보던 중, 날씨 아이콘을 쉽고 간편하게 사용할 수 있는 프로젝트가 있어 짧게 작성한다.Using weather-iconsweather-icons 공식 홈페이지에 들어가 Download Now로 아이콘 zip 파일을 다운받은 후 압축을 풀어준다.css 디렉토리 아래의 weather-icons.min.css을 프로젝트의 css 폴더에 추가해준다.font 디렉토리 아래의 3개의 폰트 파일(.ttf, .woff, .woff2)을 프로젝트의 font 폴더에 추가해준다.와 같이 쉽게 사용 가능하다.

*오늘 장고스터디를 하면서 자바스크립트 공부를 할 때 유용한 사이트들에 대해 듣고 잊지 않기 위해 남긴다.(언제 자바스크립트를 공부할 수 있을지는 모르겠지만...) https://d3js.org/자바스크립트로 구현해 놓은 각종 그래프, 표 등 다양한 결과물을 확인할 수 있다.신세계! https://codepen.io/pens/사용자들이 자신이 만든 css, js 템플릿을 간략하게 공유할 수 있게 되어있다.디자인을 잡을 때 보면 좋을듯! https://developer.mozilla.org/en-US/MDN, 모질라 그룹에서 운영하는 자바스크립트 모듈 모음집? http://www.aladin.co.kr/shop/wproduct.aspx?ItemId=96339454HTML & CSS for Beginner ..

제목# 텍스트#을 하나 쓰면 HTML의 태그를, #을 두개 쓰면 태그를 의미한다. 즉, #은 하나에서 여섯개까지 쓸 수 있고, #이 늘어날때마다 제목의 수준은 내려간다.(보통 글씨 크기가 작아진다.)번호 없는 리스트-/+/* 텍스트번호 있는 리스트숫자. 리스트기울인 글씨 (html의 태그)*텍스트* or _텍스트_굵은 글씨 (html의 태그)**텍스트** or __텍스트__인용> 텍스트인용문안에 인용문을 넣으려면 >를 더 추가해주면 된다.인라인 링크[텍스트](링크주소)참조 링크[텍스트][참조명][참조명]: 링크주소이미지수평선-, *, _을 세개 이상 나열코드\`코드 내용\`코드 블럭앞에 스페이스 4개 이상 삽입 *줄바꿈 강제로 하려면 줄 끝에 둘 이상의 공백을 넣으면 된다 참조:h..

생활코딩 강의를 듣던 중 css 파일에 수정된 내용이 실제 localhost에서 적용되지 않는 문제가 발생했다. 해결을 위해 구글링하여 해결법을 참고한다. *이유: 브라우저가 캐쉬를 사용할 때 적재된 JS나 CSS 파일 내용으로 계속 처리가 되기 때문이라고 한다. 캐쉬를 삭제하거나 다른 웹브라우저를 사용하는 것 또한 방법이겠지만, 매번 그렇게 할 수 없으니깐. 검색을 통해 방법을 알아냈다. 여기서 버전 정보를 추가한다. -> 버전 정보를 파일명(text/css) 뒤에 추가함으로서 브라우저가 기존 url과 다른 url인지 인식한 후 캐쉬된 파일 대신에 쿼리스트링이..

현재 local에서 사용하고 있는 Apache 서버를 컴퓨터를 켤 때마다 켜줘야한다. cd opt/lamp~~/ 폴더 내의 manager 프로그램을 실행한다. $sudo ./manager~~ (이름이 길어서 생략), (Q. 왜 이 manager 프로그램은 탭으로 자동완성이 안되는걸까? ) Manager servers 탭의 MySQL, Apache를 start 해주어야 한다!