본문 바로가기

Web/UI

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등이 들어있다... 더보기
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들.. 더보기
웹사이트 글자 디자인 이미지 만들기 (로고 만들기) 웹사이트에 사용할 로고 이미지를 만드려고 하다가 찾은 사이트다. 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.. 더보기
css 예제들, css examples css 관련 예제들이 나와있는 페이지이다. http://pmob.co.uk/ 더보기
팔레트 color picker 색깔 관련 팔레트 같이 쓸 수 있는 페이지 http://www.computerhope.com/htmcolor.htm 여기가 더 낫겠다. http://html-color-codes.info/ 더보기
Font 글씨체 여기에 가면 HTML font face (글씨체)들에 대해서 볼 수 있다. http://trio.co.kr/webrefer/httut/fontface.html 나중에 web 개발할 때 써야 겠다. 예를 들어 코드 관련 서체는 요런거 쓰면 좋겠다. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 가나다라마바사아자차카타파하 1234567890 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 가나다라마바사아자차카타파하 1234567890 더보기
속도계 관련 javascript UI 구글 chart api인데 이것도 속도계로 쓸 수 있겠다. http://code.google.com/intl/ko-KR/apis/chart/docs/gallery/googleometer_chart.htmlExamplesDescriptionExampleThis demonstrates using the chxl to specify custom labels both below and above the dial.chxt=x,ychxl=0:|Groovy|1:|slow|faster|crazyYou can specify multiple arrows with multiple data points.chd=t:20,40,60chdl=1|2|3To apply a style to a.. 더보기

티스토리툴바