반응형 CS/HTML&CSS3 sass - 변수 변수 (variables) 반복적으로 사용되는 값을 변수로 지정할 수 있다. 변수 이름 앞에는 항상 $가 붙는다. $변수이름 : 속성값; ex) $color - primary : #e96900; $url-images : */assets /images/* $w : 200px; .box{ width : $w; margin-left: $w; background : $color-primary url($url-images + "bg.jpg") } 변수 유효범위(variable Scope) 변수는 사용 가능한 유효범위가 있습니다. 선언된 블록 {} 내에서만 유효범위를 가집니다. 변수 $color는 .box1의 블록 안에서 설정되었기 때문에, 블록 밖의 .box2에서는 사용할 수 없습니다. ex) .box1{ $co.. 2020. 1. 7. CSS 선언 순서 레이아웃(배치)과 연관성이 많은 속성 순으로 선언하는 것이 좋다. 모질라 파이어폭스 CSS 선언 순서 1. display 2. list-style 3. position 4. float 5. clear 6. width/height 7. padding/margin 8. border/background 9. color/font 10. text-decoration 11. taxt-align/vertical-align 12. white-space 13. other text 14. content 네이버 CSS 선언 순서 1. display, visibility(표시) 2. overflow(넘침) 3. float(흐름) 4. position(위치) 5. width/height(크기) 6. padding/margin(.. 2019. 12. 27. CSS 방법론 CSS를 보다 효율적으로 작성하기 위해서 생겨났다. 1. 쉬운 유지보수 2. 코드의 재사용 3. 확장 가능 4. 직관적인 네이밍 - 클래스명 만으로도 의미를 예측 가능하도록 하자. SMACSS (Scalable and Modular Architecture for CSS) 엄격한 프레임워크 보다는 스타일 가이드에 초점을 맞추었다. 사용목적 : * CLASS 명을 통한 예측 * 재 사용 * 쉬운 유지보수 * 확장 가능 하나의 사이트에서 공통으로 적용되는 Base가 되는 css의 집합을 만든다. 예) reset.css css 이름은 콘텐츠와 직접적으로 연관되고, 이름만으로 어떤 콘텐츠인지 알 수 있도록 해야 한다. – 접두사를 사용하여 레이아웃, 모듈, 상태 여부를 알 수 있도록 : layout-, modul.. 2019. 12. 20. 이전 1 다음 728x90 반응형
