Pure CSS Drawing with codepen.io

css관련 글을 구글링 하다가 “Simpsons in CSS” 라는 글을 보게 되었습니다.
Chris Pattle이라는 웹 개발자가 순수하게 CSS만을 사용해서 유명 애니메이션 심슨가족 캐릭터를 어떻게 그렸는지 소개한 글입니다.
“The Simpsons in CSS”프로젝트 페이지도 연결되어 있어 더 많은 캐릭터 그림을 볼 수 있었습니다.
이 글을 보고, 저도 언젠가는 CSS로 그림을 그려봐야겠다고 생각(만) 했었죠.

그러다가 CSS만 사용해서 그린 아이폰6를 보게 되었습니다.

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@fbrz) on CodePen.

이것을 보고 나니 진짜 CSS로 못하는 것이 무엇일까? 라는 생각과 이렇게 그림을 그리다보면 CSS에 대한 이해도와 활용방법이 늘겠다라는 생각을 하게 되었습니다. 그래서 CSS를 이용해 그림 그리기를 시작했습니다. 전 이제 시작단계이니 나름 간단한 라인의 캐릭터 “브라운”의 얼굴만 그리기로 했습니다.   라인 브라운 일반적인 에디터에서 작업해도 좋지만, 코드를 작성하고 실시간으로 결과를 확인할 수 있는 codepen.io를 사용하기로 했습니다. 그렇게 해서 그린 브라운입니다.

See the Pen line brown css3 drawing by In Suk Kim (@shoo7830) on CodePen.

이렇게 그리다보니 제 코드의 몇 가지 개선할 점이 보입니다.

  1. 되도록 div를 적게 사용하면서 CSS로 표현하기
    css로 그린 그림들은 대부분 div하나를 이용하며, :after나 :before 같은 슈도 선택자를 사용해서 그림을 그립니다. 지금은 div를 남발해서 그렸는데 차후에는 저도 div를 줄이려고 합니다.
  2. 귀 부분은 어떤 속성을 쓰면 잘 그릴 수 있는지 고민하기
    브라운의 귀 부분은 얼굴과 자연스럽게 연결이 되며, 귀 안쪽에 반원 형태의 색상이 들어갑니다. 위에 언급한 심슨캐릭터 그리는 방법을 응용해보려고 합니다.

PSD 페이지 마크업만 하다가 이렇게 즐기면서 CSS를 익히니 더 기억에 남고, 불분명한 것은 책이나 명세로 다시 한번 확인하니 쉽게 잊어버리지 않을 것 같습니다.


참고링크

 

코드카데미를 이용한 온라인 프로그래밍 공부

코드카데미는 온라인 프로그래밍 공부 사이트다.

HTML/CSS, JavaScript, JQuery, PHP, Python, Ruby 등을 공부할 수 있다.

뿐만 아니라 API활용, 웹 페이지 레이아웃 제작도 배울 수 있다.

좀 바쁜게 지나가서 코드카데미를 이용해 백엔드를 공부하고 있다.

 

처음 백엔드할 때는 그렇게 싫었는데 스스로 하고 싶어서 하는 것이고,

뭔가 동기부여가 되다보니 (학습진도에 대한 표시, 강의 마지막에 주는 배지)

정말 재밌다. 학습한 내용을 잊어버리지 않기 위해 블로그에 조금씩 정리하고 있다.

지금은 원어 그대로 정리하고 있지만, 시간이 되면 조금씩 번역해서 올릴까 한다.

 

동시에 여러 언어를 같이 하다보니, 헷갈리는 부분이 없잖아 있긴하다.

else if, elsif, elif 같은 것이 그러하다.

 

업무에 크게 방해받지 않는 선에서 하루 30분 정도 공부하는 것이 좋을 것 같다.

코드카데미를 마치고 나면 책 한 권 정해서 제대로 공부해보려고 한다.

 

 

Python Syntax – Variables and Data Types

1. Welcome!

Python is an easy to learn programming language. You can use it to create web apps, games, even a search engine!

(파이썬은 배우기 쉬운 프로그래밍 언어입니다. 당신은 이것으로 웹  앱, 게임, 심지어 검색 엔진까지 만들수 있습니다.)

2. Variables

Creating web apps, games, and search engines all involve storing and working with different types of data. They do so using variables. A variable stores a piece of data, and gives it a specific name.

3. Booleans

A boolean is like a light switch. It can only have two values. Just like a light switch can only be on or off, a boolean can only be True or False.

4. You’ve Been Reassigned

 

출처 : http://www.codecademy.com Python 강의

Introduction to Ruby – Variables & Data Types

1. Overview & Sneak Peek

  • High-level, meaning reading and writing Ruby is really easy—it looks a lot like regular English!
  • Interpreted, meaning you don’t need a compiler to write and run Ruby. You can write it here at Codecademy or even on your own computer (many are shipped with the Ruby interpreter built in—we’ll get to the interpreter later in this lesson).
  • Object-oriented, meaning it allows users to manipulate data structures called objects in order to build and execute programs. We’ll learn more about objects later, but for now, all you need to know is everything in Ruby is an object.
  • Easy to use. Ruby was designed by Yukihiro Matsumoto (often just called “Matz”) in 1995. Matz set out to design a language that emphasized human needs over those of the computer, which is why Ruby is so easy to pick up.

2. Data Types: Numbers, Strings, Booleans

In Ruby, your information (or data) can come in different types. There are three data types in Ruby that we’re interested in right now: numbers, booleans (which can be true or false), and strings (words or phrases like"I'm learning Ruby!").

Never use quotation marks (‘ or “) with booleans, or Ruby will think you’re talking about a string (a word or phrase) instead of a value that can be true or false. It’s also important to remember that Ruby is case-sensitive (it cares about capitalization).

3. Variables

Declaring variables in Ruby is easy: you just write out a name like my_num, use = to assign it a value, and you’re done! If you need to change a variable, no sweat: just type it again and hit = to assign it a new value.

4. Math

Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)
Exponentiation (**)
Modulo (%)

5.’puts’ and ‘print’

The print command just takes whatever you give it and prints it to the screen. puts (for “put string”) is slightly different: it adds a new (blank) line after the thing you want it to print. You use them like this:

No parentheses or semicolons needed!

출처 : http://www.codecademy.com Ruby 강의

가비아 기업도메인 취약점 개선

개편 전 기업도메인 사이트 메인

개편 전 기업도메인 사이트 메인

13

개편 후 기업도메인 사이트

 

 

 

 

 

 

 

 

  • 링크 : https://bizgabia.com/
  • 기간 : 2014년 5월 19일 ~ 5월 28일
  • 오픈 : 2014년 6월 18일
  • 작업사항
    1. 메인 개편
    2. 푸터 수정
    3. 탑메뉴 수정
    4. 개인정보 취급방침 추가
    5. 약관 추가
    6. 개인정보 수정 페이지 수정
    7. 회원가입 페이지 수정
    8. 로그인 페이지 추가
    9. 기업회원 혜택 페이지 추가
    10. 비밀번호 안내 팝업 수정
  • 작업시 애로사항
    1. 쿽스모드 (…) 이건 뭐 간만에 뭉크의 절규 표정을 지었음. 핵쓰기 싫었는데 간만에 핵 사용
    2. 분명 탑메뉴 부분이 인클루드로 되어 있어서 한 개의 페이지만 수정하면 다 바뀔거라 생각했는데..그것은 나의 착각…탑메뉴 안에 또 각 메뉴별로 인클루드 파일이 있었음. 아아아!!!! 페이지 몇 개를 열어서 수정한 것이야…
    3. 테이블 레이아웃
    4. 인라인 스타일
    5. 개발서버와 실 서버의 환경차이로 인한 초기 셋팅 시간 지연
    6. 기존 CSS와 주소검색 CSS와의 충돌

이번 작업을 하면서 좀 더 기획서를 잘 분석해야겠다는 생각. 그리고 쿽스모드랑 테이블 레이아웃은 그만 보고 싶으며…작업 전에 기존 소스를 잘 확인 해봐야겠다.

오픈 한 것 보니 뿌듯~뿌듯~

IE9 이하에서 placeholder 적용하기

각종 입력 폼에 예시 문구를 나타내기 위해서 예전에는 이미지를 잘라서 position을 잡고 포커싱이 되면 이미지가 사라지게 하는 방법을 사용했다.

HTML5에 추가된 placeholder 속성을 사용하면 아주 간단하게 예시 문구를 처리할 수 있는데, 이 죽일 넘의 IE는 IE9 이하는 placholder가 뭔지 모른다.

하지만 간단하게 스크립트 하나만 추가하면 IE9 이하에서도 placeholder를 사용할 수 있다.

두 가지 스크립트가 있다. 하나는 JQuery를 사용하는 방법이고 하나는 Placeholders.js이다.

http://jamesallardice.github.io/Placeholders.js/  에서 스크립트를 다운 받고 아래와 같이 써준다.

이러면 끝!
각 버전별로 잘 동작하는 것을 확인할 수 있었다.

 

2014.09.22 추가사항

Placeholder.js 파일은 간편하지만, IE7~9에서 새로고침을 누른 경우 가끔 placeholder가 사라질 때가 있다.

그래서 지금 진행중인 프로젝트에서는 JQuery를 사용하는 방법을 이용하기로 한다.

우선 https://github.com/mathiasbynens/jquery-placeholder 에서 스크립트를 다운받고 아래와 같이 써준다.

그런 다음,  코드 한 줄을 추가한다.

IE7~9에서 전부 확인해보니 별 문제 없이 동작하였다. 개인적으로는 이 방법을 더 추천한다.

 

2015.02.11 추가사항

placeholder.js를 사용하면 IE9이하는  .placeholder라는 클래스가 자동으로 input에 생성된다.

이것을 이용하여 placeholder 색상을 바꿀수 있다.

다만, IE10이상, FF, Chrome의 경우는 각각 브라우저 업체별 접두어를 사용해서 변경한다.

 

2014년은 자바스크립트 공부의 해

웹 마스터로 약 6년 간 일하다가 사정이 생겨 2007년 웹 퍼블리셔로 전직을 했다.
웹 퍼블리셔는 단순하게 HTML + CSS만 하면 된다고 생각했는데 그게 아니였다.
웹 표준으로 코드를 작성해야하고, SEO도 고려해야하고, 웹 접근성도 고려해야하고, 자바스크립트도 작성해야 하고, 더 넓게는 백앤드 관련 지식도 필요했다.

약 6년간 웹 퍼블리셔로 일하면서 어려웠던 적이 많았으나 가장 큰 벽이 바로 자바스크립트였다.
JQuery라는 자바스크립트 라이브러리로 쉽게 갈 수 도 있지만 자바스크립트에 대한 지식 없이는 이것도 쉬운게 아니였다. 기초가 없으니 응용을 할 수 없었다. 보지도 않는 책을 계속 사기만 했다. 왠지 관련 책을 갖고만 있어도  실력이 늘어날 것 같은 기분이랄까. 책꽂이에 꽂힌 자바스크립트 책만 15권이다.

언젠가는 공부해야지 하고 미루다보니 처음 자바스크립트를 하겠다고 마음 먹은 시간으로 부터 7년이나 지났다.
점점 자바스크립트 활용 범위는 넓어지고 있고 진작 공부하지 않은 것을 후회하고 있었다.

그러다가 클리어보스 운영자 조은님의 자바스크립트 스터디 모집 공고를 보게 되었고 남편의 허락으로 참가할 수 있게 되었다. 이제 1주차를 했고, 스터디 진행 원칙을 볼 때 확실하게 공부할 수 있을 것 같다. 이 스터디의 주 교재는 한빛미디어에서 출간 된 ” 더글라스 크록포드의 자바스크립트 핵심 가이드” 라는 책이다.

생활코딩 그룹에서도 자바스크립트를 제대로 공부해보자는 글을 보게 되었고, 그 글 작성자분이 만든 “자바스크립트 제대로 배우기 스터디그룹”에도 가입했다. 이 곳은 자바스크립트 제대로 배우기라는 기본 가이드(http://bit.ly/1fsUmuG)가 있고 그 가이드에 따라 8~12주간 공부하고 요약해서 자신의 블로그에 올리는 것이다.

두 가지를 동시에 진행하는 것에 약간의 무리가 있긴하겠지만…
올해는 자바스크립트를 제대로 공부하면서 도약의 해로 삼아볼까 한다.

덧…5월 20일부터 매주 화요일 2시 우리 팀에서도 인사이드 자바스크립트라는 책과 생활코딩 자바스크립트를 공부하기 시작했다. 올해는 정말 자바스크립트 공부의 해 인가보다 🙂