본문 바로가기

Web

bootstrap 나는 개발자고 tool을 만들어야 하는데 design을 못하니까. 관련 framework가 있는지 검색해 보았다. 아래 글에서 보면 몇 가지를 추천해 주는데 아는 차장님이 쓰셨던 bootstrap을 사용하기로 했잖아...http://mashable.com/2013/04/26/css-boilerplates-frameworks/ 이걸 사용하기로 한 이유 1. 보니까 사용하기 쉽다. 2. 기기별 responsive 웹 지원 (기기별 화면에 맞는 레이아웃 지원) 3. UI가 이쁘고 사용할만한 components도 많다. 다운로드와 설치 getting started 페이지에 가보면 다운로드 소스가 있다. compiled된 것이 있고 source가 있는데 source를 받아보면 example page등이 들어있다... 더보기
스프링 개발 설정하기 할때마다 이런건 삽질을 해서 검색해서 찾아놓은 것 중 좋았던것을 스크랩해놓아야겠다. 스프링 @MVC 개발환경 설정 (이클립스 Juno(4.2) + Maven + STS plugin + Tomcat7 스프링 개발환경 셋팅)http://kdarkdev.tistory.com/115 내가 eclipse juno 였기 때문에 위의 페이지를 참고 삼았는데 저 분이 쓴글 보면 STS(SpringSource Tool Suite)를 사용해서 개발하는 방법도 있다.셋팅하다 질리면 아래 포스트를 참고해서 그냥 개발 환경을 통째로 깔아 버리는 것도 나쁘지 않을 것 같다. 관련 링크 : http://kdarkdev.tistory.com/19 스프링 개발 예제 설명 ht.. 더보기
CSS와 Javascript로 Dom에서 node 위치 변경하기 Rotate! 위의 돌아가는 네게의 창은 div 네개로 만들어져있다. HTML은 아래같이 해놓았다. (더보기를 클릭) Div 하나에 4개의 div를 넣고 각각에 색칠을 해놓은 것 뿐이다. 그럼 저걸 돌아가게 만들어보쟈~! Rotate! 위와 같이 rotate 함수를 만들어서 setInterval로 1초마다 호출해주면 div_container에서 class가 r_div인 div 네개를 꺼내서 돌아가는 것처럼 보이게 순서를 재배치 해준다. 브라우저가 div를 다시 그려주기 때문에 돈는 것 처럼 보인다. Rotate 버튼을 눌러도 돈다~~ 구글 크롬의 개발자 도구 (F12를 누르면 나옴) 에서 살펴보면 1초마다 layout을 변경하고 paint를 다시 하는 것을 볼 수 있다. 한마디로 좋지 않음 ㅎ node들.. 더보기
CSS 문법 (CSS syntax) CSS 문법은 크게 두가지 부분으로 나눌 수 있다. 1. 어떤 부분 2. 어떻게 나타내라 [그림 1] 위 그림에서 h1이 1.어떤 부분에 해당한다. 태그를 대상으로 한다는 것이다. {color:blue; font-size:12px;} 부분이 2. 어떻게 나타내라에 해당한다. 즉, css 문법에 맞춰 기술 해주면 위와 같이 문서에서 원하는 부분을 잡아서 스타일링을 할 수 있다. 그림 1에서 보면 h1위에 Selector라고 나와있는데 스타일링하기 위한 대상을 지정하기 위해 Selector가 쓰인다. 예를 한번 보자 ( http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1 ) [예제 1] css 문법을 적용하는 방법 중 하나로 html내에서 styl.. 더보기
CSS cascading style sheets 의 약자 HTML 문서가 어떻게 표현될 것인지를 나타내는 방법이다. 아래 링크로 접속해 보면 그림 1처럼 보인다. http://www.w3schools.com/css/ex2.htm [그림 1. CSS가 적용된 페이지] 하지만 실제 CSS로 표현된 것을 제외하면 아래 그림2 같다. [그림2. CSS가 적용되지 않은 페이지] 즉, text의 색상과 크기, 배경색 등을 다르게 보이게 정의 하면 그림 1 처럼 보이는 방법을 정의 할 수 있는 것이다. 그럼 실제 코드를 보자 This is a header 1 You can see that the style sheet formats the text This is a link 위에서 보면 HTML로 문서를 어떻게 정의 했는지 .. 더보기
CSS selector CSS2 selector를 사용할 일이 있어서 정리를 해 놓는다. CSS selector를 사용하면 javascript내에서 원하는 node element에 쉽게 접근할 수있다. 참고 : w3의 CSS2 selector 관련 문서 (http://www.w3.org/TR/CSS2/selector.html) 그럼, 먼저 아래의 HTML을 살펴 보자 Wide text 출처 : http://www.w3.org/TR/CSS2/selector.html#id-selectors 위에서 보면 Style을 지정할때 id가 *#z98y인 모든 element를 찾아 letter-spacing: 0.3em라는 style을 지정해주고 있다. javascript 사용시에 document .. 더보기
MAC에서 PHP사용하기 MAC OS 에서 PHP를 사용하기 위해서는 먼저 시스템 환경설정 > 공유 로 가서 파일, 웹을 더블클릭하여 활성화 한다. 그리고 http://localhost/ 에 접속해 봐서 It works!라는 메시지가 나오면 성공이다. 쉽지? 그러면 이제 php는 어떻게 실행할 수 있을까? terminal을 실행시켜 /private/etc/apache2 폴더로 간다. 혹시 터미널을 모르나? 그럼 오른쪽 맨위에 돋보기를 클릭하고 terminal이라고 치면 까만 화면같은 아이콘이 검색되는데 그걸 클릭 한다. 시키는데로 친다. cd /private/etc/apache2 sudo vi ./httpd.conf 그러면 http.conf의 내용을 볼 수 있다. 파일안에 # LoadModule php5_module libexe.. 더보기
Proxy server (프록시 서버) Proxy server는 server와 cleint사이에서 중개인 역할을 해주는 서버라고 생각하면 된다. Wikipedia : http://en.wikipedia.org/wiki/Proxy_server 위의 그림에서 보듯 Charles가 몇시인지 Jonas에게 물어보기 위해 직접 가는 것이 아니라 Proxy를 중간에 두고 물어보는 것이다. Proxy server를 쓰는 이유는 보통 아래와 같다 장비를 보안상의 이유로 익명의 접근으로부터 보호하고자 할때 Proxy 서버들의 cache를 사용해 접근 속도를 높이기 위해서 네트워크나 content의 접근 정책을 적용하기 위해서 (예> 특정사이트의 접근 차단) 회사나 ISP에 의해서 접근 차단당한 site에 접근하기 위해 회사 직원의 인터넷 사용정보를 저장하거나.. 더보기
DNS 서버 DNS는 Domain Name System의 약자이다. www.naver.com이라는 주소는 "네이버"이지만 실제로 기계가 접근하기 위해서는 IP 주소(202.131.30.11)가 필요하다. 실제로 browser에서 www.naver.com로 접근하나 202.131.30.11로 접근하나 결과는 같다는 것을 볼 수 있다. 그럼 생각해 보자 www.naver.com랑 202.131.30.11 중에 어떤게 더 외우기 쉬운가? 그렇다. 외우기 쉬운 www.naver.com을 사람들이 외워서 치면 기계가 알아먹는 주소(IP)로 바꿔주는 것이 DNS 서버의 역할이다. 여기서 www.naver.com과 같이 사람이 읽기 쉬운 이름을 Domain name이라 한다.. 더보기
웹사이트 글자 디자인 이미지 만들기 (로고 만들기) 웹사이트에 사용할 로고 이미지를 만드려고 하다가 찾은 사이트다. http://creatr.cc/creatr/ 한글도 그나마 지원되니 text를 넣고 원하는 이미지를 만든 후에 로고나 title 이미지로 사용할 때 유용할 것 같다. More preset 1 preset 2 preset 3 preset 4 preset 5 preset 6 preset 7 Logo Text: Font Font Color: Font Color 2: Font Face: Default Adventures Subtitles Andale Mono Arial Arial (bold) Arial Black Arial (italic) Arial Unicode (chinese) Book Antiqua Book Antiqua (bold) Book.. 더보기

티스토리툴바