web sprit

css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해 늦은 시간을 활용하여 끄적여(?) 보겠습니다. 일반적으로 저는 모를 사항 이었습니다만... 우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.접근성을 고려하여 아래와 같은 순으로 작성합니다. 1234567.box{ -ms-filter:alpha(opacity=0); /* IE8 */ filter:alpha(opacity=0); /* IE5 ~ 7 */ opacity:0; /* IE9+, chrome4.0+, firefox2.0+, safari3.1+, opera9.0+ */} Colored by Color Scriptercs 하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족..

transform 속성은 크게 2가지로 나눌 수 있습니다. 2D Transforms 와 3D Transforms 입니다. 우선 브라우저 서포트 현황을 알아 봅시다. propertiy 크롬 엣지 파이어폭스 사파리 오페라 2D Transforms 36.0 ~ 4.0 -webkit- 10.0 ~ 9.0 -ms- 9.0 ~ 3.2 -moz- 23.0 ~ 15.0 -webkit- 10.5 -o- 23.0 ~ 15.0 -webkit- 10.5 -o- 3D Transforms 36.0 ~ 12.0 -webkit- 12.0 ~ 10.0 16.0 ~ 10.0 -moz- 9.0 ~ 4.0 -webkit- 23.0 ~ 15.0 -webkit- ※ 정확한 정보가 아닐 수 있으니 문제점 지적 부탁드립니다. ^^ Syntax12..

CSS3 는 아직 표준안에 확정되지 않은 상태에서각 브라우져는 벤더 프리픽스를 제공하여 CSS3 속성을 실험적으로 사용할 수 있게 해 줍니다.브라우져별 벤더 프리픽스는 아래와 같습니다. 웹킷 계열 브라우저 (사파리, 크롬) -webkit- 모질라 (파이어폭스) -moz- 오페라 -o- 인터넷 익스플로러 -ms- CSS3 기본속성기본속성 작성 벤더 프리픽스를 작성할 때 위와 같은 순으로 작성하면 됩니다.그 이유는 추후 CSS3 속성이 표준안으로 변경 되었을 경우 벤더 프리픽스가 붙은 내용은 무시하고 표준 속성만 지원하기 때문 입니다. ex)123456789box{ -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-..

오늘은 도메인을 구입하여 합니다.요즈음 블로그 꾸미는 맛에 살고 있는 관리자인데요 ㅎㅎ 티스토리 같은 경우 도메인에 tistory.com 이 붙는데요. 붙어있다고 나쁘진 않지만하위도메인으로 인해 애드센스를 달 수 없는 관계로 도메인을 구입하려 합니다. 자 서론이 긴건 별로죠 ~자 저는 대표적인 도메인 구입 사이트로 가비아와 카페24에서 구입하려 합니다.제가 하려는 도메인은 kcmschool 인데요 의외로? 없네요 ㅎㅎㅎ 뒤에 붙은 국가나 관공서 영역을 나타내는 부분(com, org 등...) 이 무엇이냐에 따라 가격이 심하게 차이 나는 군요. 가비아 카페24 저는 애드센스만 달것이기에 전혀 보지 못한 주소로 구입하려 합니다. 가비아가 정말 싸긴 싸군요 1년 하려고 했는데 몇년은 더 할 수 있겠어요~우선 ..

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%임에도 불구하고 기존 다른 브라우저와 보이는 모습이 다른 경우가 있습니다. 해결방안으로 아래와 같이 확인 후 변경해 보시기 바랍니다.