web sprit

placeholder 는 input 박스 안에 input 의 사용용도나 설명 내용을 넣을 수 있습니다. 하지만 기존의 낮은 브라우저에서 작동을 하지 않기 때문에 label 태그를 이용하거나 다른 태그에 내용을 넣어 스크립트로 작동하게 만들어 사용하였습니다. CSS3 기술임으로 모바일 위주의 작업에서 사용하면 유익할 것으로 보입니다. 다음은 input 에 placeholder 를 사용하는 코드입니다.123 Colored by Color Scriptercs 다음은 placeholder 선택자를 사용하여 input을 입력하기전 내용을 꾸며 줄 수 있습니다.12345678.text-placeholder-wrap{border-radius:5px; border:1px solid #e1e1e1; padding:20p..

작은 공간에서 긴문장을 한 줄에 표현하지 못할때 쓸 수 있는 방법입니다. 개발단에서 글자를 바이트 단위로 끊어 표현할 수 있지만 css로도 말줄임을 표현할 수 있으니 방법을 알려드리도록 하겠습니다. 12345678.box{ width:300px; overflow:hidden; //width 값에 벗어나면 숨김 text-overflow:ellipsis; //점처리 white-space:nowrap; //글씨가 길어도 아래로 떨어지지 않게 처리} Colored by Color Scriptercs 여기서 주의 할점은 꼭 width값이 존재해야 합니다. 그래야 점처리가 효과적으로 나타날 수 있습니다. 위의 기술은 한줄문장을 말줄임표시 처리를 한다면 2줄에서 또는 3줄에서 자기가 원하는 라인번째에 말줄임을 할 수..

box-sizing 속성은 CSS3 기술로서 이것을 사용함으로서 여백과 선을 포함시킬것인지 아님 내용만 포함시킬 것인지를 정할 수 있습니다.우선 지원하는 브라우저를 알아보도록 하겠습니다. 크롬 엣지 익스플로러 파폭 사파리 오페라 10.0 ~ 4.0-webkit- 12.0 8.0+ 29.0 ~ 2.0-moz- 5.1 ~ 3.2-webkit- 9.5 box-sizing 속성값 content-box 너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다.즉 box-sizing 의 값을 지정하지 않았을때와 같습니다. 기본이라는 것이죠. border-box width값과 height값이 있을경우 여백과 선을 포함시켜 사이즈를 적용 시..

다른말 필요없이 토렌트를 다운 받아 설치하고 그 밖에 기본 셋팅 요령에 대하여 설명하겠습니다.우선 다운받을 사이트에 접속 합니다.http://www.utorrent.com/intl/ko/ 들어가면 아래와 같은 메인 화면을 보실 수 있습니다. 하단으로 스크롤을 내리시면 아래와 같은 화면이 나오는데요 ~빨간영역을 클릭하면 토렌트를 설치할 수 있는 exe 파일을 다운 받게 됩니다. (참고로 저는 Window OS를 사용하기 떄문에 Window용을 다운 받았습니다.) 자 그럼 본격적으로 설치를 해 볼까요? 설치파일을 더블클릭하면 언어선택이 나옵니다. 당연히 한국인이니 Korean을 선택합니다.이제 계속 순조롭게 넘어가 보죠~ 자 그럼 스피드하게 넘어 가셧나요? 이 화면에서 다음 화면이 나올겁니다. 저는 필요없는..

SASS는 Ruby라는 프로그래밍 언어로 만들어졌습니다. 그래서 Ruby를 설치하여 SASS를 사용할 수 있습니다. 그럼 Ruby를 설치해 보겠습니다. 먼저 http://rubyinstaller.org/downloads/ 위 URL로 접속합니다. 그럼 아래와 같은 화면이 나옵니다. 현재 루비 버전은 Ruby 2.2.4 이네요. 전 Window10 64bit를 사용 중이니 최신버젼의 64를 다운 받았습니다. 자 그럼 설치를 진행해 보도록 하겠습니다. 설치를 진행시 아래와 같은 화면이 나오는데요. "Add Ruby executables to your PATH "부분에 체크를 꼭 해주셔야 합니다. 체크를 해주어야 설치가 끝난 후 따로 PATH 설정을 할 필요없이 수고를 덜어 줍니다. 설치가 끝나면 Ruby가 ..

크롬 브라우저의 해상도가 100%임에도 불구하고 기존 다른 브라우저와 보이는 모습이 다른 경우가 있습니다. 해결방안으로 아래와 같이 확인 후 변경해 보시기 바랍니다.

홈페이지의 구도를 잡아주며 디자인 요소는 적용해주는 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..