레이블이 html인 게시물을 표시합니다. 모든 게시물 표시
레이블이 html인 게시물을 표시합니다. 모든 게시물 표시

2016년 8월 17일 수요일

CSS Selector 공부하기 좋은 사이트 - CSS Diner


http://flukeout.github.io/

CSS Diner라는 사이트인데요.
깃헙 페이지를 통해서 퍼블리싱한 사이트입니다.

CSS Selector를 게임처럼 배울 수 있는 곳 입니다.
enter 버튼이 보이는 줄에 들썩들썩 움직이는 녀석들을
골라 낼 수 있는 코드를 넣어 주면됩니다.



접시에 마우스를 가져다 대면 그 움직이는 물체의 컴포넌트를 볼 수 있습니다.
지금은 접시가 움직이고 있으니
plate라고 입력하고 enter!

다음으로 넘어가면,


bento 박스만 골라내라고 하네요.
이런식으로 움직이는 물체들을 골라내고 enter로 진행하면서
CSS Selector를 공부하게 됩니다.

즐거운 공부가 되겠네요.
즐거운 개발 되시길 바라요~

2016년 6월 12일 일요일

Boilerplate란 무엇일까? - 개념과 설치해보기

요즘 Front-end 쪽 프로젝트도 많이하고
공부도 많이 하고 있는 중에 HTML boilerplate 에 대해 보게되었다.

우선 boilerplate 란, 여기(텀즈)를 참고해서 이야기해보자면
"변경없이 재사용이 가능한 저작품"

원래 보일러 플레이트는 증기 보일러 내부에 있는 커다란 압연 강판을 말한다.

다른 의미로는 이렇게 표현할 수 있다.

"이 용어는 보일러 플레이트가 오랜 기간동안 시험되었으며, 
강철처럼 튼튼하다, 또는 반복적으로 재사용하기에 충분할 정도로 강력한 어떤 물건으로 만들어졌다는 등의
 여러 가지 함축적인 의미를 내포하고 있다."

보일러 플레이트에 대한 용어 설명은 이만하고
HTML Boilerplate에 대해서 한번 살펴보려고 한다.

HTML5  BOILERPLATE

Link : https://html5boilerplate.com/



메인 페이지에서는
"보일러플레이트를 사용하면 사이트나 웹앱을 빠르고 튼튼하게
그리고 잘 적응할 수 있게(다른 컴포넌트와 잘 맞게) 만들 수 있다." 라고 되어있다.

밑으로 내려서 사이트 내용을 더보자.



좋은 내용만 있는거 같다.
1. 모바일에 친화적이고, 구글 아날리틱스도 잘 쓸 수 있음.
2. Normalize.css 를 이용해서 잘 만들 수 있음.
3. jQuery, Modernizr 을 이용해서 빠른 라이브러리 호출을 할 수 있다.
4. 좋은 성능 : 아파치 서버 세팅을 통해서 빠르게.

Modernizr 에 대한 내용은 따로 공부해보는 것도 좋아보인다.
https://modernizr.com/

다시 보일러 플레이트로 돌아가서,
이러한 좋은점이 있으니 사용해라인데, 일단 다운받아봤다.
다운 받는 방법은 세 가지가 있는데

1. 사이트에서 다운받기
2. http://www.initializr.com/ 이 사이트에서 조건 설정해서 다운받기
3. git clone을 통해서 다운받기

일단은 1의 방법으로 다운받았다.

다운받아서 그 안에 내용을 봤더니


이렇게 구성되어 있었다.

여기서 index.html을 켜보면,
아래와 같은 페이지가 보인다.


(역시 시작은 Hello world!)

보일러 플레이트를 이용한 다른 사이트들을 볼 수 있는곳은
http://h5bp.net/

많은 사이트들이 있는데
기본적으로 반응형으로 제작되어있었고
페이지 로딩이라던지, 다른 부분에 있어서 퍼포먼스는 좋았다.

실제로 개발해보면서 자세히 들여다보고 분석해보는게 좋을 것 같다는 생각이 들었다.

2016년 6월 10일 금요일

Bootstrap safari right side empty white space


When i use bootstrap full slider,
(http://startbootstrap.com/template-overviews/full-slider/)

I have some issue. Like this.


As you can see, this image shows white space at right side.

in my code,
1. use wrapper class
2. wrapper > row, row, row








i just add to wrapper class
overflow-x: hidden;
and removed empty white space.

thats all.
Daily save the day post.

2016년 4월 19일 화요일

Materialize - Material Design plugin



Link: http://materializecss.com/

This plugin like bootstrap, i think.
but this plugin is develop version.(not deployed)


This is showcase.




I will use this plugin later.
It's awesome!

JIRA Plugin - ScriptRunner 소개 #2

관련 글 소개 #1:  https://pineoc.blogspot.com/2019/03/scriptrunner-1.html ScriptRunner 소개 #2 지난 글에서는 Behaviours를 보았고 다음 내용인 콘솔, 리스너 등을 ...