[웹키워드#1] HTML, CSS, SASS, SCSS




스마트폰이 보급되며, 웹 서비서의 영향력은 줄어들지 않고 점점 커지고 있다. 이에 맞추어 HTML 또한 과거의 체계를 벗어던지고, HTML5 표준이 발표된지도 어느덧 2년이 이 되가고 있다. 


이에, 웹에 대해 본격적으로 공부를 하기에 앞서. 웹서비스에 널리 사용되는 기술들의 정의 및 용도에 대해 정리하고자한다. 단순히 코딩하는 기술 뿐 아니라 역사, 정의 등을 알 때에 활용할 수 있는 능력이 배가 될 것이라 생각한다. 


"여러 종류 칼 중 과일 깎을 때는 과도를 쓰듯, 용도에 맞는 기술을 사용하기 위해서는 배경지식이 필요하다."


1. HTML

Hyper Text Markup Language의 약자로 웹 페이지를 위한 지배적인 마크업 언어다. <> 형식의 태그로 이루어져 있다. 제목, 단락, 목록 같은 구조적인 의미를 나타내는 것 뿐 아니라 링크, 인용, 이미지 등도 나타낼 수 있다. 아래는 예시이다. 



- 5.0 웹 표준

1991년 HTML이 최초로 일반인에게 공개된 이후, W3C에서는 HTML 표준 규격을 발표해오고 있다. 1995년 HTML 2.0에 이어, 1997년에는 HTML 4.0이 발표되었다. 이후 10년이 넘는 시간이 지나 2014년 10월 HTML5 표준안이 발표되었다. 


HTML5는 이전 웹 표준들에 비해 큰 차이가 있다. 

    • <div> 태그를 대신해 <header>, <article>, <footer> 등이 등장
    • 플러그인 없이 멀티미디어 재생 가능 ( <audio>, <video>..)
    • 문서 선언이 <!DOCTYPE html>으로 간소화 되었다. 
    • 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다).
    • 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다.
    • text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다.
    • 새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다.
    • 오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다.
    • 플러그인 없이도 비디오와 오디오를 비롯한 미디어 재생이 가능하다.
    • 플러그인이 필요없는 스크립트 API를 20여종 이상이 지원하며, 주요 API는 아래와 같다.
      • 2D 그래픽을 위한 캔버스 요소
      • 문서 편집
      • 드래그-앤-드롭
      • 지오로케이션
      • 로컬 오프라인 저장소
      • 미디어 캡쳐
      • 마이크로데이터

2. CSS

CSS는 쉽게 말해 HTML을 꾸며주는 언어다. CSS를 이용하여 HTML로 만들어진 웹페이지를 질서정연한 문서로 만들수도 있고, 복잡한 UI들의 결합체인 웹애플리케이션으로 만들수도 있다. 

css before after에 대한 이미지 검색결과


CSS는 쉽고 간단하지만 갈수록 요구사항과 스펙이 복잡해지고 있고, 그에 따른 유지보수도 힘들어지고 있다. 이를 극복하기 위해 CSS 전처리기들이 등장하였는데, SCSS/SASS가 그것이다. 이들은 CSS가 가지고 있는 결함들을 보완해주기 위하여 등장하였다. 



- SASS

"사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다."


SASS는 CSS를 만들어주는 언어로 Javascript처럼 특정 속성(ex. color, margin..)의 값(ex. #000, 3px...)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 기능을 가졌다. 


SASS는 Ruby언어로 만들어졌기에, 사용하기 위해서는 Ruby가 설치되어있어야한다. 아래 SASS 예제를 보면 더 쉽게 이해가 갈 것이다. (아래는 SASS 중 하나인 SCSS예제입니다. 자세한 설명은 이어서 하겠습니다.)


 SCSS

 CSS

$display-default:block;

$color-point:#080;
.lnk{
      display:$display-default;
      position:absolute;
      left:5px;
      color:$color-point;
}

 .lnk {

      display: block;
      position: absolute;
      left: 5px;
      color: #080;
}


위와 같이 변수명으로 값을 설정해줄 수 있다. 또한 중첩, mixin (함수) 기능 등이 있어, 반복되는 것들이 있어도 더 이상 복사&붙여넣기를 할 필요가 없다. 


참고: 널리의 블로그 (http://wit.nts-corp.com/2015/01/09/2936)


- SCSS


SASS를 유지하는 사람들은 조금더 CSS에 친숙한 처리기를 만들기 위해, Sassy CSS라는 SCSS를 내놓았씁니다. 이들은 거의 동일한 기능을 가지고 있다. SASS는 중괄호, 세미콜론 같은 기호를 없애기 위해, 들여쓰기에 의존하며 이는 간결한 문장으로 이어진다.  하지만 이는 실제 CSS 문법과는 그 차이를 두고 있다. SCSS는 주로 CSS 올려진 작은 추가사항이므로, CSS에 친숙한 사람이라면 알아보기가 더 쉽다. 


아래는 SASS와 SCSS 각각의 장점이다. 


SASS

SCSS 
  • More concise
  • Easier to read
  • Doesn't complain about missing semi-colons. 
  • More expressive
  • encourages proper nesting of rules
  • More modular code with @extend
  • Allow me to write better inline doc.
  • Existing CSS tools often work with SCSS
  • Integration with an existing SCSS codebase is much easier
  • SCSS provided a much lower barrier to entry

참고: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better


다음 시간에는 [javascript, json, jquery]에 대해 해보겠습니다. 

저작자표시

'IT & 개발 > 웹키워드' 카테고리의 다른 글

[웹키워드#6] MEAN Stack (MongoDB, Express, AngularJS, node.js)  (0) 2016.12.29
[웹키워드#5] Framework (Framework7, Spring)  (0) 2016.12.28
[웹키워드#4] MVC, MVP, MVVM  (0) 2016.12.28
[웹키워드#3] Chrome V8, Non-blocking I/O, Event Loop  (0) 2016.12.27
[웹키워드#2] Javascript, JQuery, DOM Parser  (0) 2016.12.27

+ Recent posts

티스토리툴바