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값이 있을경우 여백과 선을 포함시켜 사이즈를 적용 시..

퍼블리셔라는 일을 시작한지 많은 시간이 지났지만 당연스레 생각했던 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위 ..