CSS Specificity

today 2016-02-16 face Posted by appkr turned_in Work & Play forum 0

speci.., specifif…, speficyfyf…, specificificfy… what?

CSS Specificity

[* spesɪ fɪsəti*, 스페시피서티, CSS 적용 우선 순위]. 블로그 플랫폼 이전 3 - Publishing 포스트에서 twbs 클래스들을 오버라이드하는 과정에서 잘못 이해한 것을, 실험을 통해 배우고 고쳐서 정리해 놓는다.

Test

이번 주는 생활코딩 작심5일 수업에 자원봉사자로 참여하고 있다. 오늘 수업에서 CSS 얘기를 듣다가 문득 궁금증이 생겼다.

내가 기존에 알고 있던 지식은

  • Tag Selector 1 점 (e.g. a {...})
  • Class Selector 10 점 (e.g. .darth {...})
  • Id Selector 100 점 (e.g. #sith {...})

였다. 궁금증은 ‘Tag 를 11 개 중첩해서 쓰면 Class 하나를 오버라이드할 수 있을까?’ 라는 것.

블로그 플랫폼 이전 5 - Disqus & Facebook

today 2016-02-13 face Posted by appkr turned_in Work & Play forum 0

Wordpress 에서 Jekyll 로 마이그레이션 과정에서 배운 내용을 총 5 편의 포스트로 정리해 본다.

  1. 개발자로서의 새로운 삶
  2. Goodbye Wordpress, Hello Jekyll
  3. Publishing
  4. Build Automation with Gulp
  5. Disqus & Facebook

지난 2 주일 동안 일어난 우여곡절들을 기억을 되살려 최대한 복기해 두었다.

• • •

기존 Wordpress to Jekyll 마이그레이션 시리즈에 하나의 포스트를 더 추가한다. 오늘 구현한 따끈한 기능 2가지 이다.

  • Disqus1 최신 댓글 뽑아 오기
  • Facebook 최신 포스트 뽑아 오기

Disqus 최근 댓글 뽑아 오기

Disqus 에서 이미 위젯을 제공하고 있어서 구현은 아주 간단한다.

<!-- https://github.com/appkr/blog/blob/master/_includes/site-sidebar.html#L64 -->

<!-- ... -->
<section class="box" id="recent-comments">
  <div class="box-header">
    <h3>Recent Comments</h3>
  </div>

  <div class="box-body dsq-widget">
    <script src="http://appkr.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=100"></script>
  </div>
</section>
<!-- ... -->

블로그 플랫폼 이전 4 - Build Automation with Gulp

today 2016-02-12 face Posted by appkr turned_in Work & Play forum 0

Wordpress 에서 Jekyll 로 마이그레이션 과정에서 배운 내용을 총 5 편의 포스트로 정리해 본다.

  1. 개발자로서의 새로운 삶
  2. Goodbye Wordpress, Hello Jekyll
  3. Publishing
  4. Build Automation with Gulp
  5. Disqus & Facebook

지난 2 주일 동안 일어난 우여곡절들을 기억을 되살려 최대한 복기해 두었다.

• • •

Jekyll Serve

Jekyll 은 로컬 테스트 서버를 포함하고 있다. 콘솔 메시지를 자세히 보면, 빌드 대상이 되는 파일들을 컴파일하여 public 디렉토리에 출판하고, public 디렉토리를 Document Root 로 하는 http://localhost:4000 로컬 웹 서버를 띄운다는 것을 알 수 있다. 서버를 뛰우지 않고 빌드만 하려면, $ jekyll build. 오오~ 멋지다~

$ jekyll serve
# Configuration file: /.../blog/_config.yml
#             Source: /.../blog
#        Destination: public
#  Incremental build: disabled. Enable with --incremental
#       Generating...
#                     done in 1.432 seconds.
#  Auto-regeneration: enabled for '/.../blog'
# Configuration file: /.../blog/_config.yml
#     Server address: http://127.0.0.1:4000/
#   Server running... press ctrl-c to stop.

Preview with Jekyll built-in web server

그런데 2% 가 부족했다.

블로그 플랫폼 이전 3 - Publishing

today 2016-02-11 face Posted by appkr turned_in Work & Play forum 0

Wordpress 에서 Jekyll 로 마이그레이션 과정에서 배운 내용을 총 5 편의 포스트로 정리해 본다.

  1. 개발자로서의 새로운 삶
  2. Goodbye Wordpress, Hello Jekyll
  3. Publishing
  4. Build Automation with Gulp
  5. Disqus & Facebook

지난 2 주일 동안 일어난 우여곡절들을 기억을 되살려 최대한 복기해 두었다.

• • •

연초에 블로그 이전을 생각하며 여기 저기 눈팅하던 중 디자인 (themeforest-Globals) 하나가 눈에 들어왔다. 내용과 품질에 비해서 너무 저렴한 가격 $12. 지르지 않을 이유가 없었다.

themeforest-Globals

그런데, 구매한 후 다운로드하고 파일 압축을 풀고서야 알았다, “PSD 파일 밖에 없다는 것을”. 기존에 구매했던 관리자용 템플릿인 Inspina 처럼, AngularJS, MEAN, RoR, .. 등 대부분의 플랫폼에 미리 포팅되어 동작하는 템플릿을 기대하고 있었던 것이다.

블로그 플랫폼 이전 2 - Goodbye Wordpress, Hello Jekyll

today 2016-02-10 face Posted by appkr turned_in Work & Play forum 0

Wordpress 에서 Jekyll 로 마이그레이션 과정에서 배운 내용을 총 5 편의 포스트로 정리해 본다.

  1. 개발자로서의 새로운 삶
  2. Goodbye Wordpress, Hello Jekyll
  3. Publishing
  4. Build Automation with Gulp
  5. Disqus & Facebook

지난 2 주일 동안 일어난 우여곡절들을 기억을 되살려 최대한 복기해 두었다.

• • •

Jekyll[dƷékəl,dƷí:k-,줴클] 은 Ruby 언어로 개발된 정적 (Static) 페이지를 생성 도구 이다. Jekyll 은 로컬 컴퓨터에서 HTML 또는 Markdown 으로 작성한 글을 미리 정적 페이지로 컴파일 하는 일을 한다. 컴파일 된 결과물을 웹 서버의 Document Root 로 복사하는 것만으로 서비스가 가능하다. 더구나, 정적 페이지는 동적 페이지 대비 응답 속도가 더 빠르다는 장점이 있다. 즉, Jekyll 은 서버에 백엔드 플랫폼/프레임웍 없이도 고급스러운 웹 서비스를 만들 수 있는 도구이다.

keyboard_arrow_up