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