개발/UI개발

[UI 개발] css3 - overlay side navigation 제작(오버레이 사이드 네비게이션)

Side Navigation(overlay) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내고, 컨텐츠 부분의 배경을 오버레이하는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - push-content side navigation 제작(사이드 네비게이션)

Side Navigation(push content) 이번에 준비한 사이드 네비게이션은 컨텐츠를 밀어내는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - full-width side navigation 제작(풀 사이드 네비게이션)

Side Navigation(full-width) 이번에 준비한 사이드 네비게이션은 페이지 전체를 덮는 사이드 네비게이션입니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작 원리를 이해하시고 사용하시면 실력 키우는데에도 많은 도움이 있을 것 같습니다.

개발/UI개발

[UI 개발] css3 - side navigation 제작(사이드 네비게이션)

Side Navigation 안녕하세요. 오늘부터 UI 개발한 코드를 블로그에 공개하려고 이렇게 글을 쓰게 되었습니다. 꾸준히 개발하면서 나온 결과물을 포스팅하겠습니다. ㅎ 혹시 필요한 기능이 있으시다면, 자유롭게 사용하시고, 개선사항이 있으면 알려주시면 고맙겠습니다. 예시 HTML 시멘틱마크업 우선 사이드 네비게이션을 제작하기 위한 기본적인 HTML 마크업을 위 코드와 같이 진행했습니다. CSS3 사이드 네비게이션 부분에 관련된 CSS 코드입니다. Javascript jQuery를 활용해서 개발했다면, 훨씬 깔끔하고, 유지보수하기 쉬운 코드가 되었겠지만, 자바스크립트를 공부하기 위해서 자바스크립트를 통해서 UI 개발을 진행했습니다. 전체 코드 완성된 코드입니다. 복사해서 사용하셔도 되지만, 최대한 동작..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - animate())

예제와 함께하는 제이쿼리 강의 이번에 다룰 기능은 animate() 메소드입니다. jQuery addClass() .addClass() 메소드는 특정한 클래스를 요소에 추가할 수 있습니다. 문법.addClass( className )className ( 지정한 클래스 이름을 추가) 데이터타입 : 문자열(String) 1개 또는 2개 이상의 클래스들을 속성에 추가합니다. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String 함수에서 반환된 클래스를 속성에 추가합니다.여기서 함수는 인자(매개변수) 값으로 index 와 currentClassName을 가지고 있습니다. 이 부분은 예제를 가지..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - slideDown() / slideUp() / slideToggle())

이번에 다뤄볼 기능은 jquery - slide() 메소드입니다. jQuery Effects - Sliding slide 메소드는 요소를 위 그리고 아래로 움직이게 도와주는 기능을 가지고 있습니다. slide 메소드는 아래와 같이 3가지 기능을 가지고 있습니다. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() 메소드는 요소를 아래로 내려주는 역할을 합니다. 문법 $(selector).slideDown(speed,callback); 인자는 지금까지 소개했던 메소드와 같이 속도를 제어할 수 있는 인자와 추가적인 기능을 적용시킬 수 있는 callback 함수 인자를 가지고 있습니다. 아래는 slideDown() 메소드의 예시입니다..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(Atom HTML Preview)

아톰에서 코딩을 하면서 실시간으로 HTML 파일의 상태를 확인하게 해주는 패키지입니다.프론트엔드 작업을 할 때 꽤나 유용하게 쓰이는 패키지죠.프론트엔드 개발자라면 꼭 이 패키지를 설치해서 사용해보도록 하세요. 설치법 사용예시 Atom-HTML-Preview 명세 A live preview tool for Atom Editor.Install:apm install atom-html-previewToggle HTML Preview:Press CTRL-SHIFT-H in the editor to open the preview pane.An example with Twitter Bootstrap 3 Package

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading jQuery는 희미하게 나타나게하고 없애는 fade() 메소드를 가지고 있습니다. jQuery에서는 아래 4가지 fade() 메소드를 가지고 있습니다. fadeIn() fadeOut() fadeToggle() fadeTo() 우선 fadeIn() 메소드에 대해서 알아보도록 하겠습니다. jQuery fadeIn() Method 메소드 이름과 같게 희미하게 보여지게 해주는 메소드입니다. show() 메소드에 자동으로 speed가 적용된 느낌의 메소드입니다. 문법 $(selector).fadeIn(speed,callback); 전 강의에서 다뤘던 show() 그리고 hide () 메소드와 같은 인자를 가지고 있습니다. 속도나 콜백함수에 대해서 잘 모르시다면, 전 강의..

개발/jQuery

[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - show() and hide())

jQuery - hide() and show() 제이쿼리에는 hide() 와 show() 메소드를 통해 HTML 요소를 숨기고, 보이게 해줄 수 있는 기능을 가지고 있습니다. 예시 결과값을 보면, 박스가 사라지고 나타나는 것을 볼 수 있습니다. 문법 $(selector).hide(speed,callback); $(selector).show(speed,callback); 각 메소드에 속도를 제어할 수 있게 도와주는 인자값을 넣을 수 있는데요. 값은 milliseconds 단위로 입력하면 됩니다. 콜백함수를 인자 값으로 넣을 수도 있는데요 이 함수를 통해서 hide() 나 show() 메소드가 완료된 다음에 어떠한 처리를 가능하게 해줍니다. 쉽게 말해서, hide()와 show() 메소드는 동작속도와 동작 ..

카테고리 없음

[Bootstrap] 기초부터 시작하는 부트스트랩 강의

기초부터 시작하는 부트스트랩 강의 1 부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다.빠르게 프로토타입을 제작할 때 가장 적합한 프레임워크죠. Javascript까지는 아니더라도 HTML5와 CSS3에 대한 기본 개념이 있으신 분이 이 강의를 보셨으면 좋겠습니다. 좋은 퍼포먼스를 내려면 적어도 기본적인 지식이 있어야 된다고 생각합니다. HTML5 doctype부트스트랩은 HTML5 doctype 의 사용을 필요로 하는 HTML 요소와 CSS 속성을 사용합니다. 모바일 우선부트스트랩3은 모바일을 우선적으로 고려해서 개발이 되었습니다. 한마디로, 모바일은 부가적인 부분이 아닌 핵심적인 부분으로 만들어졌습니다. 모바일 우선 스타일은 전 독립된..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(color-picker)

color picker 구글 확장프로그램이나 기타 응용프로그램에서 자주 사용되는 color picker입니다. 꽤나 유용한 소프트웨어죠 !원하는 색상이 있으면, 찍어서 색상코드를 볼 수 있는 소프트웨어입니다. 그 기능을 Atom에서도 사용하게 도와주는 패키지가 있는데요. 바로 아래처럼 색상을 바로 뽑아볼 수 있습니다. Preview 매우 편리한 기능이죠? 설치법 아래는 color picker 명세입니다. A Color Picker for AtomRight click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(file-icons)

시각적으로 파일관리를 편리하게 도와주는 file-icons file-icons는 좌측이나 상단에 문서의 유형을 아이콘을 통해 시각적으로 구별하기 쉽게 만들어주는 패키지입니다. 이렇게 상단이나 왼쪽에 있는 네비게이션 부분의 문서들의 아이콘을 만들어줌으로써 시각적으로 어떤 파일인지 구별이 쉽게 만들어줍니다. 전에 소개드린 pigments와 함께 꼭 같이 사용하셨으면 할 패키지입니다. 설치법 아래는 file-icons의 명세입니다. file-icons If you've just updated and your icons are all messed up, please restart Atom before filing an issue.Some of the underlying icon fonts have updated..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(pigments)

이번에 다룰 패키지는 pigments입니다.프론트엔드 개발을 하면서 가장 소름돋고 필요하다고 생각했던 기능을 atom에서 제공을 해줍니다. 바로 css 파일에서 backgorund나 color에 색상을 적용할 때 코드 안에 컬러가 들어가는 것을 알 수 있습니다. 정말 효율적인 패키지이므로, atom을 사용하시는 분은 꼭 이 패키지를 받아서 사용하시길 바랍니다. 설치법 pigments 명세 A package to display colors in project and files:Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for..

개발/유틸리티

텍스트 에디터 Atom(아톰) 테마(theme) 추천 (atom-material-syntax)

제가 사용하는 Atom Material Syntax입니다.제가 코딩할 때 눈에 확확 들어와서 사용하게 된 syntax입니다. 설치방법 A syntax theme for Atom Material UI. Inspired by Mattia Astorino's SublimeText theme.

개발/유틸리티

텍스트 에디터 Atom(아톰) 테마(theme) 추천(atom-material-ui)

이번 포스팅에서는 제가 사용하는 아톰 테마에 대해서 소개하도록 하겠습니다.저는 Atom Material UI를 사용하고 있습니다. 깔끔한 UI를 좋아하시는 분에게는 정말 최고의 테마라고 생각합니다. 필자의 atom 에디터 UI 설치법 atom setting 탭에 Install에서 쉽게 설치해서 사용하실 수 있습니다. 아래는 Atom Material UI 영문 명세입니다. A dynamic UI theme for Atom that (kinda) follows Google's Material Design Guidelines. Best with Atom Material Syntax.Inspired by Mattia Astorino's SublimeText theme.InstallationFire up a co..

개발/유틸리티

텍스트 에디터 Atom(아톰) 패키지 추천(Activate Power Mode)

Activate Power Mode아톰 패키지 중에 Activate Power Mode가 있는데, 기존에 조금 심심했던 코딩을 게임처럼 즐겁게 할 수 있게 바꿔주는 패키지입니다.저도 사용하고 있는데, 정말 단조로웠던 코딩을 재밌게할 수 있게 도와주는 패키지더라구요. 이렇게 콤보가 계속되면, 저렇게 화면에 이펙트 효과까지 나오게 됩니다. 아래에 설치 방법과 명세를 추가해 놨습니다. For a list of power mode packages to other editors, check out codeinthedark/awesome-power-mode.InstallWith the atom package manager:apm install activate-power-modeOr Settings ➔ Package..

개발/유틸리티

텍스트 에디터 Atom(아톰)의 설치와 기본설정

Atom 이란? Github에서 만든 에디터로써 다양한 프로그래밍 언어의 편집이 가능하고 웹언어를 사용하여 에디터를 커스터마이징할 수 있는 가장 큰 장점이 있습니다. + 극강의 UI를 가지고 있습니다. Atom의 특징 1. 무료이다. - 많은 사용자들을 보유하고 있는 Sublime Text, Edit Plus 등과는 반대로 무료로 지원한다는 점 2. 플러그인으로 기능을 확장할 수 있다. 3. HTML / CSS /JavaScript와 같은 웹기술들로 구현되었다. - 앞서 말했듯이 웹페이지를 만들듯이 커스터마이징하여 사용할 수 있다는 것이다. 4. Windows / MAC / Linux 모두 설치 가능하다. 5. 마지막으로 이쁘다. ★★★★★ Atom 설치 아톰은 아래 주소를 통하여 다운로드 받을 수 있습..

개발/유틸리티

서브라임 텍스트(Sublime Text) 소개 및 설치

학부시절 웹기반 시스템 수업을 들었던 당시 에디트플러스를 사용하면서 코딩을 했던 기억이납니다, 메모장에 비해서는 정말 편한 방식이라 그때 당시에는 만족했지만, 서브라임 텍스트(sublime text)라는 신세계를 마주하게 되었고, 지금까지 웹 프론트엔드 코딩을 할 때 이 에디터를 사용하고 있습니다. 오늘은 무료버전을 사용해도 제약이 없다시피한 서브라임 텍스트에 대하여 알아봅니다. 서브라임 텍스트(Sublime Text) 소개 서브라임 텍스트는 가볍고 확장성이 좋은 편집기로서, 국내뿐 아니라 외국에서도 많은 개발자들이 사용하고 있는 에디터입니다. 기본적으로 하드코딩을 염두에 두고 개발되었는데 여러가지 플러그인들이 붙으면서 그 편의성이 날로 좋아지고 있는 추세입니다. 기본적으로 제공되는 Monokai 테마도..

일상/컴퓨터 관련 팁

[PC 최적화] 시스템 최적화 프로그램 고클린 사용법

시스템 최적화 프로그램 고클린 사용법입니다. 고클린이라는 프로그램을 아시나요. 인터넷이 느려지거나, 컴퓨터 속도가 느려질때는 여러가지 문제가 있겠지만 대부분은 파일 문제가 많습니다. 그럴때 가끔 사용하는 고클린을 소개해드리도록 하겠습니다. 우선, 고클린 다운로드 부터 알려드릴께요. http://software.naver.com/software/summary.nhn?softwareId=MFS_100029 네이버에 고클린을 검색하시면, 네이버 자료실에서 받으실 수 있습니다.이 프로그램은 시스템 최적화분야에서 1위를 하고 있으며, 다음으로 많이 사용하는것이 패스트 핑과 네이버 클리너 컴퓨터에 조금 아는 분들은 프로세스 클린이라고 생각할 수있습니다.그만큼 간단하게 클릭 몇번으로 효과를 볼 수 있어서 많은 분들이..

개발/CSS3

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet? Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다. 가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 아래와 같이 자동완성을 해보면 어떨까요? table>tr*5>td*5 table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 ..