본문 바로가기

WEB (49)

[CSS] px-em 변환 사이트 http://pxtoem.com/ PXtoEM.com: PX to EM conversion made simple. What is an EM? Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px For more information visit Wikipedia and Mozilla MDN. What is the pxtoem.com
[CSS] 그라데이션 배경 만들어주는 사이트 http://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com
[HTML/CSS] 마우스오버 효과 1. 마우스오버 시 다른 이미지로 교체하기 2. 마우스오버 시 버튼 누르는 효과 주기 .img:hover { position: relative; top: 2px; left: 2px; } img라는 이름의 클래스를 가진 요소에 마우스를 올리면 버튼처럼 눌리는 효과가 나타난다. top: 2px , left: 2px 은 각각 위, 왼쪽에서 2px만큼 이동하는 것이므로, 버튼이 눌리는 움직임을 크게 혹은 작게 하려면 2px의 값을 변경하면 된다.
[jQuery] 드롭다운 메뉴(2depth) 간단한 드롭다운 메뉴입니다. Months January February March Weeks Monday Tuesday Wednesday 1. 태그 안에 제이쿼리를 불러옵니다. 2. CSS ul, li { list-style: none; } 3. HTML Months January February March Weeks Monday Tuesday Wednesday 4. Script
[CSS] background-size 속성 및 IE8 이하 브라우저 대응 background-size: auto; /* 기본값, 이미지 원본 크기 */ background-size: auto 500px; /* 가로를 auto, 세로를 원하는 크기로 지정하면 세로 크기에 따라 가로 크기는 자동으로 원본 비율에 맞게 변경됨 */ background-size: 500px auto; /* 가로 크기에 따라 세로 크기는 자동으로 원본 비율에 맞게 변경됨 */ background-size: 500px 300px; /* 가로, 세로 모두를 원하는 크기로 지정할 수 있음 */ background-size: cover; /* 이미지의 가로와 세로 중 크기가 더 큰 쪽에 맞추어 이미지 비율을 유지하며 배경 영역을 덮을 수 있음 */ background-size: contain; /* 이미지의 ..
[HTML] 클릭 시 지정한 크기로 새 창(팝업창) 띄우기 새 창 열기 menubar : 메뉴바 toolbar : 툴바 location : 주소 표시줄 directories : 연결 디렉토리 status : 상태 표시줄 scrollbars : 스크롤바 resizable : 새 창 크기 조절
[HTML/CSS] 스타일시트(CSS) 적용하는 방법 1. 외부 CSS "style.css" 라는 외부 스타일시트를 헤드 섹션 내에 요소로 추가합니다. 가장 많이 사용하는 방법입니다. 2. 내부 CSS 헤드 섹션 내에 3-2. CSS파일 내 @import url("style.css"); 4. 인라인 CSS 내용 해당 요소에 직접 스타일 속성을 추가하는 방법입니다. CSS가 이미 선언되어 있더라도 직접적으로 추가하는 이 방법이 우선적으로 적용됩니다. CSS 수정 시에 일일이 찾아야 하는 불편함이 있으므로, 수정 및 관리 측면에서 이 방법은 권장하지 않습니다.
[CSS] overflow:hidden과 clear:both 비교 overflow: hidden; overflow: hidden 은 내용이 지정 영역 밖으로 나가지 않게 하고, 영역 밖의 내용은 잘립니다. clear: both; 모든 방향의 float 속성을 해제합니다. clear: both 외에 clear: left , clear: right 는 각각 왼쪽, 오른쪽의 float 속성을 해제합니다.