Eveningstar

1) Variables ($) 변수선언은 '$'으로 시작. 변수의 값으로는 문자, 숫자, 컬러가 올 수 있다. $변수명 : 속성값; $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }2) Nesting 부모자손 선언 - tree구조, 포함관계, 중첩적 선언꺾쇠 선택자를 통해 직접선택도 가능( ul > a) & : 상위요소(자기자신)을 뜻함 = this nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6p..

Sass(Syntactically Awesome Stylesheets) sass는 css 전처리기 언어이다. sass로 우선 작성한 후 css로 변환하여 사용한다.어썸이 들어갈 정도면 엄청나게 멋진 언어겠지,,,,,, sass는 변수, 함수, 중첩(부모자손) 등등을 css임에도 사용할 수 있게 해준다.또한 변수와 mixin, extend등의 활용으로 코드의 재사용이 용이하다. sass를 배우는데 참고한 영상들 생활코딩 : https://opentutorials.org/module/237/2490 인프런 : css에 날개를 달아주는 sass 문서 참고 : http://sass-lang.com/guide [ sass -> css로 변환 ] sass는 css로 변환해주는 컴파일러라는 도구가 꼭 필요하다. 1-..

* 웹 크롬에서 이미지 작업을 했을때 이미지가 흐릿하게 보이면서 글자가 선명하게 보이지 않는 현상이 발생했다.(도덕책...왜..) 왼쪽 ie11 / 오른쪽 크롬(버전 62이상) A주임님이 전달해준 css3 image-rendering 값으로 해결함. 이 프로퍼티는 이미지 scale과 관련하여 이미지 렌더링 방식에 대해 컨트롤할수있게 해줍니다. 1. MDS에서의 image-rendering에 대하여 image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은..

word-break&word-wrap [word-break] - word-break는 문자열의 줄바꿈을 설정해줍니다.- 줄바꿈은 공백(띄어쓰기) 혹은 하이픈(hyphen) 사용시 줄바꿈이 시행되지만 CJK(중국,일본,한국) 언어에서는 '음절'에 따라 줄바꿈이 시행됩니다. 속성 값 1. normal(기본값) 2. break-all : 무조건 줄바꿈(단어가 깨짐) / non-CJK일때는 임의대로 줄바꿈 가능, CJK에서는 normal과 원리동일. 3. keep-all : 단어를 유지하면서 바꿔줌. ** But 특수문자와 언어에따라 사용여부를 결정해야한다. 아래 테스트를 살펴보자 (1) 특수문자 없이 그대로 CJK와 non-CJK(영문)을 비교해보았다. https://jsfiddle.net/jywoo/h92r..