정기적인 업데이트로 언제나 함께 하겠습니다

메뉴얼 각종 피드백을 수집하며,
회원가입을 하셔야 열람할 수 있습니다.

게시물 검색

솔루션 메뉴얼 SCSS 안내 및 사용방법

  • 포애드텍
  • 2018-04-03 12:06:00
  • hit564
웹 표준 코딩 및 반응형 웹 개발에 있어서 CSS 코딩의 비중은 점점 고도화되어가고 있습니다.
SCSS는 코딩 시간을 획기적으로 줄이고, 빠른 유지 보수를 위해 SCSS를 도입하였습니다.
 
1
2
3
4
5
<style>
.test {margin:0; padding:0;}
.test ul li {width:50%; float:left; box-sizing:border-box; padding:10px;}
.test ul li span {display:block; padding:5px; font-size:14px; font-weight:100; }
</style>
cs
<기존 CSS>
 
위 소스는 기존 CSS입력방식입니다. 소스가 길지 않거나 간단한 경우 위처럼 사용해도 무방하지만
예를 들어 홈페이지 가로 사이즈가 1000px에서 800px로 줄인다던가 전체적인 색감을 10% 정도 밝게 수정해야 하는 상황이라면
전면적인 수정이 불가피한 상황이 발생됩니다.
또한, 한눈에 수정부분을 찾기에 다소 무리가 있습니다. 유지보수 측면에서 좋지 않은 부분입니다.
 
하지만 SCSS 사용 시 매우 획기적으로 관리할 수 있습니다.
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#navbar {
  $navbar-width: 800px;
  $items: 5;
  $navbar-color: #ce4dd6;
 
  width: $navbar-width;
  border-bottom: 2px solid $navbar-color;
 
  li {
    float: left;
    width: $navbar-width/$items - 10px;
 
    background-color:
      lighten($navbar-color, 20%);
    &:hover {
      background-color:
        lighten($navbar-color, 10%);
    }
  }
}
cs
<SCSS 작성화면>
 
1
2
3
#navbar {width: 800px; border-bottom: 2px solid #ce4dd6;}
#navbar li {float: left; width: 150px; background-color: #e5a0e9;}
#navbar li:hover {background-color: #d976e0;}
cs
<SCSS 결과화면>

위 소스는 SCSS 입력방식입니다.

SCSS에서는 반복되는 네임을 하나로 압축하여 코딩할 수 있으며, 변수를 선언할 수 있기 때문에, CSS를 좀 더 프로그램화하여 관리가 가능합니다.
또한, 함수 선언이 가능하며, 반복되는 CSS 및 복잡한 연산 등을 쉽게 해결할 수 있습니다.
게시글 공유 URL복사
게시물 검색
List of articles
번호 분류 제목 작성자 작성일 조회수
27 웹 상식 이미지 좌표 구하기 어렴게 하지마세요 photo file 포애드텍 2019-09-02 hit361
26 솔루션 메뉴얼 인스타그램 연동 방법 photo 포애드텍 2019-05-23 hit464
25 솔루션 메뉴얼 통합 검색페이지 직접 만드는 방법 photo 포애드텍 2019-04-17 hit530
24 솔루션 메뉴얼 오늘 본 상품을 퀵메뉴로 출력 하는 방법 photo 포애드텍 2019-02-03 hit523
23 솔루션 메뉴얼 카카오톡 알림 서비스 설정 방법 photo 포애드텍 2019-01-24 hit644
22 솔루션 메뉴얼 상품 상세 및 결제페이지의 배송료 문구 수정하기 photo 포애드텍 2019-01-13 hit559
21 PC 상식 시놀로지 네트워크드라이브 외부접속 photo file 포애드텍 2018-12-28 hit2935
20 PC 상식 PC 네트워크 2개 공유기 연결 방법 (NAS 사용자 필독) photo 포애드텍 2018-10-23 hit1040
19 PC 상식 윈도우10 부팅시 자동로그인 해제 방법 photo 포애드텍 2018-04-06 hit832
퀵 메 뉴
닫 기