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

메뉴얼

분류목록
게시물 검색

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

  • 포애드텍
  • 2018-04-03 12:06:00
  • hit1551
웹 표준 코딩 및 반응형 웹 개발에 있어서 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복사
출력
목록
prev 이전글
윈도우10 부팅시 자동로그인 해제 방법
next 다음글
크롬 개발자도구 팁2 (캐시파일 리셋)
게시물 검색
List of articles
번호 분류 제목 작성자 작성일 조회수
28 결제모듈 (PG) 카카오페이 결제 오류코드 포애드텍 2023-07-18 hit346
27 웹 상식 이미지 좌표 구하기 어렴게 하지마세요 photo file 포애드텍 2019-09-02 hit2199
26 솔루션 메뉴얼 인스타그램 연동 방법 photo 포애드텍 2019-05-23 hit2374
25 솔루션 메뉴얼 통합 검색페이지 직접 만드는 방법 photo 포애드텍 2019-04-17 hit2354
24 솔루션 메뉴얼 오늘 본 상품을 퀵메뉴로 출력 하는 방법 photo 포애드텍 2019-02-03 hit2322
23 솔루션 메뉴얼 카카오톡 알림 서비스 설정 방법 photo 포애드텍 2019-01-24 hit2653
22 솔루션 메뉴얼 상품 상세 및 결제페이지의 배송료 문구 수정하기 photo 포애드텍 2019-01-13 hit2342
21 PC 상식 시놀로지 네트워크드라이브 외부접속 photo file 포애드텍 2018-12-28 hit5944
20 PC 상식 PC 네트워크 2개 공유기 연결 방법 (NAS 사용자 필독) photo 포애드텍 2018-10-23 hit3938
1 2 3 4
퀵 메 뉴
닫 기