웹,그래픽디자인을 비롯해 운영일지 형식으로 웹에 전반적인 관련 내용들을 다루고 있습니다.

위의 예제는 아주 간략하게 보통 쇼핑몰이나 홈페이지 상단에서 알림 공간에 쓰일 수 있습니다. 보통 중요한 공지가 있을때는 팝업창을 띄우거나 레이어 팝업을 즐겨 씁니다. 하지만 사용자 입장에서는 무척 짜증나는 방법입니다. 사이트 방문자는 목적을 갖고 방문합니다만, 팝업은 그 목적을 훼방하는 요소입니다.

그래서 상단에 저렇게 고정된 형식으로 공지하는 편이 많이 선호되고 있습니다. 컨텐츠를 가리지 않아도 되고, 눈에 띄기 좋은 곳에 항상 자리잡고 있기 때문이죠. 기본적인 원리는 간단합니다. X자 표시를 눌렀을때 해당 광고창이 통채로 사라지게 하는겁니다.

기본적인 구조(html)과  스타일시트(CSS)를 통해 모양을 만들어놓고 버튼을 눌렀을때 사라지는 기능(Jquery)으로 구성되어 있습니다.

최근에 sass에 관심을 갖게 되면서 기존의 css를 어떤식으로 바꿔서 사용할 것인지 한 번 테스트를 해봤습니다. 현재 대부분 사람들이 사용하는 브라우저 상에서는 sass를 해석해서 보여주는 기능은 없습니다.  그래서 sass로 만든 문서는 css로 변환해주는 – 컴파일 과정이 필요합니다. sass는 로컬상에서 작성해서 css라는 결과물로 출력해줘야한다는 이야기입니다. 다만, sass로 css 출력물을 받아보면 체계적으로 잘 정리해서 내놓기때문에 별도로 손댈 것들이 없습니다.

그리고 sass 상에서 주석을 잘 달아놓으면, 나중에 쉽게 가져다 쓰기 좋습니다. 아직은 능숙하게 다룰 수 있는 수준이 아니어서 조잡한 수준으로 활용하고 있습니다만, mixin 기능이 무척 강력하다는걸 조금씩 인지하고 있습니다. mixin을 잘 활용하면 굳이 부트스트랩과 같은 무거운 프레임워크에 의존하지 않고, 다양한 디자인으로 만들어갈 수 있을 것 같아서 오히려 더 매력적으로 다가옵니다.

less를 주로 지원하던 부트스트랩이 차기 버전부터 sass를 지원하기 시작한걸 보면, sass가 얼마나 빠르게 성장하는지 알 수 있습니다. 당장 새롭게 공부해야한다는 점에서 sass가 오히려 처음에는 css보다 작성하는데 속도가 더디겠지만, 추후 관리 면에서는 css보다 훨씬 체계적이고 직관적으로 관리가 가능할 것 같습니다.

이미 여기저기에서 mixin을 서로 공유하는 프론트엔드 개발자들도 많은 걸 보니, 손쉽고 빠른 프론트엔드 개발을 위해서도 sass는 더더욱 중요하게 자리잡을 것 같습니다.

아래 예제는 각각 html과 SASS(scss)로 작성한 코드가 브라우저 상에서 어떻게 작동하는지 확인해볼 수 있는 간단한 예제입니다. header 상에 존재하는 상단 메뉴의 경우 이렇게 만들 수 있다라는 것을 보여주기 위해 작성한 코드입니다. 깔끔하지는 못하지만, css를 이미 알고 계실 경우에는 대충 어떤 구조인지 파악해볼 수 있을 겁니다.

 

 

 SASS, COMPASS, SUSY, REAKPOINT 소개

간략하게 정리하자면 sass,compass,susy,breakpoint는 아래와 같다.

  • SASS – CSS를 더욱 체계적이고 효율적으로 작성할 수 있도록 도와주어 관리, 재사용에 유리하다
  • Compass – SASS Framework : SASS를 좀 더 편리하게 사용할 수 있도록 준비되어있는 프레임워크
  • SUSY – Grid System Framework : 그리드 시스템을 이용하여 편리하게 레이아웃을 잡을 수 있도록 도와주는 프레임워크
  • Breakpoint – SASS용 미디어쿼리 라이브러리 : 반응형 웹 사이트를 제작할때 미디어쿼리를 쉽게 삽입할 수 있도록 도와주는 라이브러리

sass 설치

먼저 윈도우 환경이라면, http://rubyinstaller.org 에서 루비를 다운로드 받아 설치해야한다. sass가 꼭 ruby기반에서 돌아가는 것만 있는 것은 아니지만, susy2를ruby기반 sass가 완벽 지원하기 때문이다. 참고로 아래 내용들은 우분투 16.04.2에서 설치하는 과정들을 적어놓았지만, 루비를 이용한 설치이므로 윈도우와 큰 차이는 없을 것이다.

루비가 설치되어 있는 상태에서 커맨드 창을 띄워 아래 명령어를 순서대로 입력해서 sass와 compass를 설치한다. 우분투라면 루트 권한으로 설치했기때문에 sudo 명령어는 생략했다. 루트상태가 아니라면 ‘sudo gem install sass’ 와 같은 식으로 앞에 sudo를 붙여줘야한다.

Susy와 Breakpoint를 설치하는 방법은 여러가지가 있지만 여기서는 ruby를 이용해서 설치하도록 한다.

설정

설치가 모두 이뤄지고 나면, config.rb 파일에서 susy와 breakpoint를 사용할 수 있도록 설정해줘야한다.

sass

위의 이미지처럼 compass를 설치하면 맨 처음에 require ‘compass/import-once/activate’ 명시가 되어있다. 그 밑에 require ‘susy’ require ‘breakpoint’ 를 추가해주어 susy와 breakpoint를 사용한다는 것을 알려줘야한다.

require 밑에 명시된 부분들은 수정이 가능한 부분들이므로 자신에게 맞도록 바꾸면 된다. http_path에서는 실제로 작업이 이뤄지고 있는 폴더를 명시해줘야하고, css_dir에는 sass 파일이 css로 컴파일된 결과물이 저장될 위치다. sass_dir는 작업중인 sass 파일의 위치, images_dir와  javascripts_dir는 이미지와 자바스크립트 파일이 저장될 위치다.

그리고 난 다음에는 sass 파일에 compass와 susy, breakpoint를 사용한다는 것을 또 알려줘야한다.

compass/reset, compass/css3, compass/typography, compass/utilities는 선택사항들이고, compass,susy,breakpoint가 지금 설치한 것들을 활용하기 위해서 필수로 명시해줘야하는 부분들이다. 나머지는 필요에 의해 추가된 것들이다.

나머지로 추가된 파일들은 저렇게 연결 – @import만 해주면 된다. 지금 수정한 sass 파일만 컴파일 하면 나머지는 알아서 연결되기때문에 모든 sass 파일을 컴파일 할 필요가 없다.

sass는 작성만 해주면 바로 css처럼 웹페이지에서 읽어들일 수가 없다. 그래서 sass로 작성된 파일을 따로 css로 컴파일 해주어야한다. 이러한 과정또한 compass가 알아서 해준다.

위와 같은 준비가 다 끝나고나면 커맨드 입력창에서 아래와 같은 명령어를 입력해준다.

위의 스크린샷에서 볼 수 있듯이 이제 컴파스는 sass 파일을 지켜보면서, 사용자가 sass 파일의 내용을 바꾸고 저장할때마다 css로 바꿔서 아까 지정한 css_dir에 파일을 저장해줄 것이다. 그래서 html문서의 head 부분에 css_dir에 명시된 파일을 link로 css파일을 연결해주면 sass로 작성된 문서가 체계적으로 정리되서 출력될 것이다.

우분투

최근 우분투에서 sudo 명령어를 입력하다보면 간혹 저렇게 unable to resolve host ubuntu 라는 메세지가 뜹니다. 왜 그런걸까 이유를 모르다가 찜찜해서 검색해보니 제가 최근에 HP sleekbook 15pc 어쩌고 뭐 이런 긴 이름으로 PC 이름이 설정되어있길래  간단하게 ubuntu로 바꿔놨더니 문제가 발생하는 거였습니다. 실행은 됩니다만, 매번 저런 메세지를 본다는게 좀 껄끄럽죠.

문제는 PC 이름을 바꿔줄때 명시해줘야할 부분이 아래의 두 군데라는 것입니다.

  • /etc/hostname
  • /etc/hosts

현재 상황에서 hostname은 제가 이미 ubuntu로 바꿔놓은 상태이기 때문에, hosts 부분만 바꿔주면 됩니다. 결국 현재 상황을 보면, 호스트 이름은 바뀌었는데, 호스트가 등록되어있지 않으니 에러 메세지가 자꾸 나왔던 셈입니다.

sudo nano /etc/hosts 명령어로 nano 편집기로 들어가서 내용을 살펴보니, 127.0.1.1 부분에 아직 바뀌지 않은 HP sleekbook 15 어쩌고 하는 옛날 이름으로 지정되어있길래 아래와 같이 ubuntu로 수정해주었습니다.

파일을 저장해주고 나서  아래 명령어를 입력해서 서비스를 재시작 시켜주면 완료됩니다.

본 내용은 http://zzaps.tistory.com/283 의 포스팅을 참고하였습니다.

미처 스크린샷을 찍지 못했는데, 서버에 처음 접속하면 아래와 같이 업데이트 가능한 정보에 대해서 미리 알려줍니다. 정기적으로 업데이트 되는 내용들을 반영해주지 않으면, 보안과 관련해서 문제가 될 수 있으니 아래처럼 나오는 메세지를 잘 확인해줘야합니다.

문제는 위의 내용을 보고 보통 sudo apt-get update 와 sudo apt-get upgrade를 통해 업데이트 된 내용들을 적용해줍니다만, 제가 지금 겪은 에러는 sudo apt-get upgrade를 할때 “/usr/sbin/update-info-dir: 3: /etc/default/locale: //: Permission denied dpkg: error processing package install-info (–configure)” 이런식의 에러메세지를 뿜어내며 진행이 안되더군요. 최종적으로는 “E: Sub-process /usr/bin/dpkg returned an error code (1)” 나왔습니다만, 그 전에 installation-info에 문제가 있다는 에러메세지였습니다.

무슨 이유인지 아무리 뒤져도 나오지 않았습니다만, 한가지 껄끄러운 부분이 있었습니다. locale 설정과 관련해서 제가 default 상태가 아니라 한글로 변환해줬던 적이 있는데, 아마도 이게 문제가 되지 않나 싶더군요.

그래서 sudo nano /etc/default/locale 파일을 아래와 같이 다시 수정해주었습니다.

그리고 sudo update-locale 명령으로 변경된 내용을 적용을 해주고 나니, 다시 우분투가 영문으로 나오기 시작했고 sudo apt upgrade 명령도 정상적으로 수행하기 시작했습니다.

우분투 서버에서 워드프레스 사이트를 운영하면서 한글 주소를 사용하다보니 locale 설정도 변경해줘야하는 줄 알고 적용했던 부분인데, 사실상 우분투 ssh 접속시에 나오는 메세지 일부가 한글로 바뀐다는것 이외에 워드프레스 사이트에 영향을 주지는 않습니다. 알면서도 귀찮아서 그냥 놔뒀는데 이런식으로 업그레이드 상황에서 문제가 터질거라고 생각은 못했네요.

여튼 locale 설정을 바꿔줘서 문제는 해결이 됐습니다.