지킬 블로그에 이미지 확대 기능 추가하기 (2) 용어 정리

지킬 블로그에 이미지 확대 기능 추가하기 (2) 용어 정리

Summary:

이미지 확대 기능을 추가하면서 알게 된 용어들을 정리했습니다.


무슨 말이지

블로그에 이미지 확대 기능을 추가하면서 많은 외계어들을 맞닥뜨렸다. 제이쿼리는 뭐지? 플러그인이랑 패키지랑 라이브러리는 같은 말인가? sass랑 css의 차이는 뭘까? 겉핥기할 수 있을 정도까지만 하나씩 알아보자.


제이쿼리(jQuery)?

jQuery는 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리다. 엘리먼트를 한 번에 선택하고 선택한 엘리먼트를 효과적으로 제어하는 여러 방법을 제공한다. 제이쿼리를 이용하면 자바스크립트만을 이용한 코딩보다 훨씬 적은 코드로 더 많은 일을 할 수 있다. 코드의 가독성, 생산성, 유지보수 편의성도 향상된다.

저번 포스팅에 쓰인 jQuery 기본문법

저번에 위 코드를 곧이곧대로 가져다썼다면, 이젠 이 코드가 img 안 alt(주어)에 담겨있는 내용들을 무언가로 대체(서술어)하라는 명령일 거라 짐작할 수 있다. 이처럼 jQuery는 여러 개 요소를 제어대상으로 지정하고 특정 명령을 내리는 데 사용된다. 자바스크립트만으론 그때그때 하나의 요소(엘리먼트)만을 제어할 수 있다.

자바스크립트는 뭘까? 이전에 php와 자바스크립트의 용도와 간단한 개념에서 html과 자바스크립트, php의 간단한 개념을 비교한 적이 있다.

JavaScript는 웹페이지와 사용자가 상호작용할 수 있게 만들어준다. 생활코딩 강의에선 html과 Javascript를 아래와 같이 비교했다.

html
JavaScript

html만으로 웹페이지를 만들면 한 번 화면에 나온 그 모습이 언제나 그대로다. 하지만 우리가 보는 웹페이지는 어떻게 터치하냐에 따라 화면에 뭔가가 불쑥 튀어나오거나 움직일 때가 많다. 이런 인터렉션에 자바스크립트가 사용되는 것이다. 자바스크립트는 조용한 화면에 재미를 더한다.

자바스크립트를 이용하면 이것도 만들 수 있고

이것도 만들 수 있고

이것도 만들 수 있다.


라이브러리? 플러그인?

라이브러리는 자주 사용하는 코드들을 재사용할 수 있는 형태로 만들어서 정리한 묶음을 말한다. 프로그래밍할 때 자주 사용하는 로직들을 어딘가에 저장하고 다시 찾아 사용하기 쉽도록 분류해놓은 것이다. 누구나 라이브러리를 만들 수 있다.

플러그인은 어떤 문제를 해결하기 위한 하나의 요소다. 비슷한 성격을 가진 플러그인들이 모여 라이브러리라는 집합체가 되는데, 사진 확대에 쓰인 Magnific Popup이 플러그인, 제이쿼리(jQuery)가 라이브러리에 해당한다.

유사어로 패키지가 있다. 패키지가 라이브러리보다 작은 개념이고 패키지들이 모여 라이브러리가 된다.


sass? scss? css?

Sass는 더 멋있어진 CSS라고 이해하면 쉽다. CSS를 좀 더 확장해 스타일 작업을 간편하고 빠르게 만들어주는 도구다. 변수 사용, 중첩, 믹스인이 가능하며(몰라도 된다) CSS의 모든 문법을 지원한다.

Sass와 CSS의 문법이 조금 다르다는 것만 알고 있자. Sass는 파이썬처럼 들여쓰기로 블록을 구분한다. 중괄호({})나 세미콜론(;)을 사용하지 않기에 기존 CSS보다 간편하게 코드를 작성할 수 있다.

/* css 문법 */
.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }
// sass 문법
.mfp-preloader
    color: #CCC
    position: absolute
    top: 50%
    width: auto
    text-align: center
    margin-top: -0.8em
    left: 8px
    right: 8px
    z-index: 1044

    > a
        color: #CCC

        &:hover
            color: #FFF

그럼 sass와 scss의 차이는 뭘까? sass는 Syntactically Awesome Style Sheet(문법이 멋진 스타일시트), scss는 Sassy Cascading Style Sheet(멋진 CSS)다. 중괄호와 세미콜론이 없는 게 sass, 있는 게 scss이다. css 문법을 최대한 살리면서 sass 기능을 갖췄다는 점에서 css 앞에 sassy(멋진)가 붙었을 뿐이다. 최근엔 sass보다 scss가 더 보편적으로 쓰인다고 한다.

// sass 문법
body
	line-height: 1.2
	font: 16px $fontSans
	color: $alpha
// scss 문법
body{
	line-height: 1.2;
	font: 16px $fontSans;
	color: $alpha;
}

Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora