본문 바로가기

웹표준5

마우스를 올리면 이미지 확대되게 하기(CSS) 본문 이미지나 썸네일 이미지에 마우스를 올렸을 때 이미지가 확대되어 보이게 하는 효과를 간단한 CSS로 구현할 수 있다. 이미지에 생동감을 줄 수 있고 페이지 로딩 속도에 큰 영향도 주지 않아서 가볍게 쓸 수 있다. HTML 코드 이미지에 클래스네임(thumb)을 주고, 이걸 img-wrap이라는 div와 box라는 div로 감싼 형태이다. CSS 코드 이미지를 가로 300px으로 출력하되 이미지에 마우스오버하면 가로세로 각각 1.2배 확대가 0.5초에 걸쳐 일어나고, 마우스를 떼면 0.3초에 걸쳐 다시 원래 크기로 돌아가게 되도록 설정한 것이다. 샘플 예제 코드 다운로드 열린노트/IT·SW·디자인
CSS Colors 속성을 색상 이름으로 간편하게 입력하기 여섯 자리의 복잡한 코드값 대신 색상값으로 간단하게 색을 사용할 수 있다. 가령 다음과 같이 배경색읕 'darkorange', 글자색을 'oldlace'로 해서 코드를 입력하면, 테스트입니다. 이렇게 나온다. 테스트입니다. 아래는 웹표준 140개 색상이름이다. 내가 쓰기 편하려고 올려두는 건 함정. 색상명 HEX 코드 색상 AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black #000000 BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 C.. 열린노트/IT·SW·디자인
웹 코딩에 필요한 CSS 단위와 사이즈 비교 표 코딩할 때 크기 속성은 여러 가지 단위로 사용할 수 있다. 요즘 브라우저들은 대부분 확대-축소(Zoom) 기능을 갖추고 있기 때문에 굳이 상대 단위인 em이나 %를 쓸 필요 없이 편한 대로 px나 pt 수치로 입력하면 되지만, 화면 크기에 따라 다르게 출력되는 반응형 페이지를 코딩할 때는 상대 단위를 활용하는 것이 유용하다. 이 장점 때문에 점점 비율 단위가 많이 쓰이는 것 같다. CSS에 사용되는 size 단위들 CSS의 크기 단위로는 절대 단위와 상대 단위가 쓰인다. 절대 단위 in(Inches) : 말 그대로 인치(inch)이다. 1인치는 2.54cm이다. cm(centimeters) : 우리가 미터법에 따라 쓰는 그 센티미터를 말한다. mm(millimeters) : 0.01cm에 해당하는 밀리미.. 열린노트/IT·SW·디자인
반응형 사진 슬라이더 jQuery 플러그인 소스 28개 1. Zuper Slider 반응형 + 모바일 멀티터치 슬라이더. 2. Camera Slider 3. Fluid CSS3 Slideshow with Parallax Effect 4. FlexSlider 반응형 제이쿼리 슬라이더. 거의 가장 유명하고 많이 쓰이는 듯. 다양한 구성이 특징이고 쓰기 편리하다. 5. FlexSlider 2 FlexSlider의 업데이트 버전. 6. Lightweight mobile slider 7. WOW Slider 8. wmuSlider 9. CSS3 Responsive Slider 자바스크립트 없이 CSS3만으로 만든 슬라이더 10. Slider Pro WordPress용 슬라이더 플러그인 11. Responsly 12. RoyalSlider 모바일 터치 기능을 지원하는 .. 열린노트/IT·SW·디자인
엔티티 코드(Entity Code) 사용하기 : HTML에서 특수문자 코드 입력하는 방법 웹페이지상에서 다음과 같은 문자들을 본 적이 있을 것이다. 이런 문자를 '엔티티 코드(Entity Code)'라고 한다. & " HTML이나 XHTML 문서를 코딩할 때 특수 문자(참조 문자)를 써야 하는 경우에는 이러한 엔티티 코드 또는 엔티티 넘버로 변환해서 입력해야 한다. 변환하지 않고 특수 문자를 그대로 입력해 버리면 컴퓨터가 문서를 읽을 때 실제 문서 내용(contents)과 코드를 구분하기 못하는 문제가 발생하기 때문이다. 가령, 어떤 문서 내용에 꺽쇠 괄호 ' < '가 포함돼 있다면, 컴퓨터는 이 문서를 읽어들일 때 꺽쇠 괄호를 HTML 태그의 시작 기호로 받아들여 버린다. 또 큰따옴표 ' " '는 HTML 속성 값으로 인식될 수 있고, ' & '은 엔티티 기호의 시작으로 인식될 수 있다. .. 열린노트/IT·SW·디자인