web sprit

홈페이지의 구도를 잡아주며 디자인 요소는 적용해주는 CSS는 때로는 중복되는 작업이나 자주 쓰이는 속성으로 인하여 지저분한 소스코드나 관리하기 힘든 일이 발생하곤 합니다. SASS를 이용하면 이런 CSS를 보다 간결하고 동적으로 적용할 수 있있습니다. 코드의 재활용성이 높고 그 만큼 코드의 양을 줄여주기 떄문에 작업면이나 소스면이나 매우 효율적으로 제공됩니다. 재활용이나 코드를 어떻게 줄일 수 있을까요? SASS는 SASS나름데로의 문법이 있습니다. 제가 처음 알아본 SASS는 개발문법과 비슷하다고나 할까요? 자바스크립트를 어느정도 하실 줄 아신다면 그리 어렵지 않게 내용을 파악하실 수 있다고 생각합니다. SASS는 자체로는 사용할 수 없으며 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다. 만..

1.Bootstrap 3 Datepicker 2. jQuery UI

HTML5 Input Types color date datetime datetime-local email month number range search tel time url week 1. Base (기본)1cs- 웹에서의 폼은 사용자 입력부분과 서버 전송 버튼으로 나눔- 사용자 입력 부분은 거의 태그를 이용해 처리 함- 태그의 type=""속성을 통해 입력하는 내용이 어떤 정보인지를 지정 함- type=""속성 값에 따라 사용할 수 있는 속성들도 다름 2. type2-1. hidden1cs- 숨겨진 입력필드를 정의 즉, 화면상에 폼에는 보이지 않지만, 폼을 서버로 전송할 때 함께 전송되는 요소- 예를 들어, 회원가입 폼에서 가입 경로, 날짜와 같이 굳이 사용자가 입력하지 않아도 알 수 있는 정보들을 서..

일반적으로 가운데 정렬은 width 값이 존재하고 margin값을 margin:0 auto;를 주어 정렬하곤 합니다.하지만 width 값이 가변적으로 변경될 수 있다면 어떻게 정렬해야 할까요? 방법은 있습니다!!! 크게 2가지 방법을 알려 드리겠습니다.1. display:table12345678 .center-box{display:table; margin:0 auto; padding:30px; background:red;} .center-box .item{background:yellow;} contentsColored by Color Scriptercsex) 화면 contents 2. display:inline-block12345678 .center-box2{text-align:center; backgr..

display 의 inline-block 속성을 사용할때 가끔 크로스브라우징에 문제가 발생하곤 합니다.지금부터 그런 문제들의 대한 해결방안을 설명해 드리겠습니다. IE6 ~ 7 문제익스플로서의 낮은 버전의 브라우저에서 생기는 문제로inline태그에 inline-block 속성을 사용 : 이상없음block태그에 inline-block 속성을 사용 : inline-block을 block 속성으로 인식하는 버그12/* 해결방법 */.className{*display:inline; *zoom:1;}cs FF2 문제display:-moz-inline-stack 을 사용하여 해결.(이것보다 더 의미에 맞는 속성은 display:-moz-inline-box 속성 이나 -moz-inline-box 속성을 사용할 경우 ..

퍼블리셔라는 일을 시작한지 많은 시간이 지났지만 당연스레 생각했던 CSS Reset에 관해 좀더 심도있게 알아보려 합니다. 처음에 들어와서 누군가가 사용하던것에 이미 익숙해져있는 나로서 새로운 나만의 reset css를 만들어 보겠습니다. 우선 아래 참고할만한 사이트를 나열 하였습니다. 1. CSS Reset 종류1-1. Eric Meyer's CSS Reset1-2. html5doctor.com Reset1-3. Normalize.css 1.0 - GitHub (참고사이트 : http://webdir.tistory.com/455)1-4. Yahoo! (YUI 3) Reset CSS1-5. DAUM(Darum) Reset CSS(PC, Mobile reset css 제공) 2. 정리 CSS Reset위 ..

select 폼을 꾸며주는 jQuery Selectric 플러그인 일반적으로 select는 css로 원하는 디자인을 꾸며줄 수 없습니다.플러그인을 이용하여 보다 쉽고 tab 접근성에도 유용한 플러그인을 소개하려 합니다.http://lcdsantos.github.io/jQuery-Selectric/index.html 위 URL을 들어가면 Selectric 플러그인 홈페이지가 나옵니다. 자세한 내용을 확인하려면 홈페이지를 참조하여 주시기 바랍니다.첨부파일을 첨부하며 첨부파일의 내용은 아래와 같습니다.* head태그 안에 추가 123456789 $(function(){ $('.tric_01').selectric(); });Colored by Color Scriptercs * html 추가12345678 Sel..

가상요소인 before 와 after 선택자 입니다.:before는 선택자의 앞에 속성값을 설정할때 사용하고,:after는 선택자의 위에 속성값을 설정할때 사용합니다. 위 선택자의 사용 방법은 아래와 같습니다. css2에서 사용예시 div:before{}div:after{} css3에서 사용예시div::before{}div::after{} :와 ::차이::는 css3에서 가상클래스와 가상요소를 구분하기위해 도입 되었습니다. :와 ::브라우저 지원여부:before, :after는 ie8+, FF, chrome, opera+, safari4.0+ ::before, ::after는 ie9+, FF1.5(1.8)+, chrome, opera7+, safari4.0+ 사용방법:before, :after는 주로 c..

이번 설명은 윈도우에서 IIS를 설치해보고 ASP를 실행하여 로컬에서 확인할 수 있는 방법을 설명하려 합니다. ^^ 서버 관련하여 초보라 설명이 미흡할 수 있습니다. 오류사항이 있다면 들어오시는 분들의 많은 지적 바랍니다. 우선 저의 OS는 Window10 PRO 입니다. 참고 하세요. 우선 IIS란 Internet Information Services 의 줄임말로 OS 버젼중 홈에디션(Home Edition)의 경우 지원하지 않으니 주의바랍니다. IIS는 Window7 이상 프로페셔널(Professional) 버젼 이상에서 손쉽게 설치할 수 있습니다. 1. IIS 설치 제어판의 보기 기준이 큰아이콘에서 프로그램 및 기능으로 들어갑니다.들어가면 왼쪽 메뉴에 Windows 기능 켜기/끄기를 클릭! 그러면 ..