세연아빠의 개발과 일상의 모습

css box-shadow 속성css box-shadow 속성 이미지나 글자에 그림자 효과를 넣기 위해서는 이미지 편집 프로그램을 사용하여 이미지에 그림자를 넣어야 하였지만 css3에서는 간단한 속성만으로 그림자 효과를 낼 수 있어 손쉽게 작업을 진행 할 수 있다. css3 에서는 그림자 속성인 box-shadow 속성에 대하여 알아보도록 하자. 1 box-shadow 속성 css3 의 box-shadow 속성을 사용하면 포토샵이라 기타 이미지 편집 프로그램을 사용하지 않고도 간단하게 속성 추가만으로 그림자 효과를 낼 수 있다. 그리고 속성 값에 따라 그림자의 위치나 생상 기울기 정도를 조절할 수 있다. box-shadow 속성은 모두 4개의 값을 가질 수 있으며 최소 3개의 속성값을 지정하여야 한다. ..

CSS border-radius 모서리 부드럽게 처리및 원그리기CSS border-radius 모서리 부드럽게 처리및 원그리기 보통 웹상의 상자 모서리 처리를 위해서는 그래픽을 이용하거나 자바스크립트를 이용하여 처리하곤 하였으나 css3 에선 상자의 모서리 처리를 손쉽게 할 수 있도록 하는 border-radius 속성이 추가 되었다. 1 border-radius 처리하기 border-radius 속성으로 둥굴게 처리하기 상자의 굴곡처리는 값에 따라 자유롭게 조절이 가능합니다. 굴곡을 10px; 로 처리해본 테스트 페이지 입니다. 굴곡의 조종은 px 단위 뿐만아니라 상대적인 수치인 % 로 지정하는것도 가능합니다. ex) border-radius: 50%; 123456789101112131415161718..

html5 input tag autofocushtml5 input tag autofocus html5 에서 input 태그중 새롭게 추가된 기능중에 지금까지는 자바스크립트로 처리하여야 했던 기능을 간단한 속성추가로 그 기능을 대신하게 할 수 있도록 추가되었다. 그중에 autofocus 속성을 알아보자. 1 input 태그의 autofocus 속성 페이지가 오픈되자마자 입력필드중 원하는 필드에 마우스 커서가 바로위치하여 사용하기 편리하도록 처리 할 수 있다. 기존엔 이렇게 처리하려면 자바스크립트 처리 하여야 하였으나 지금은 간단한 autofocus 속성하나만 추가하여 쉽게 해결 할 수 있다. 1234567891011121314151617181920212223242526272829303132333435363..