글

CSS 높이와 폭의 최소값, 최대값

높이와 폭의 최소값, 최대값 높이나 폭을 최소값으로 지정하고 싶을땐 min-height, min-width 를 사용 최대값을 지정하고 싶을땐 max-height, max-width 를 사용하면 된다. 'min-' 영역의 최소값을 지정해준다. 길이나 퍼센테이지로 지정한다. 마이너스는 불가능. 'max- ' 영역의 최대값을 지정해준다. 길이나 퍼센테이지로 지정 마이너스는 불가능 min-width, min-height가 width, height보다 클 경우 min의 값으로 설정된다. max-width, min-height가 width, height보다 작을 경우 max의 값으로 설정된다. min의 값이 max값보다 클경우 min의 값으로 설정된다. 예시 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>최소 값, 최대 값</title> <style type="text/css"> .min { min-width:200px; min-height:200px; background:#3CC; } .max { max-width:200px; max-height:200px; background:#CCC; } </style> </head> <body> <div cl...
자세한 내용 보기

CSS 가운데 정렬

이미지
가운데 정렬 레이아웃 가운데 정렬방법 1. margin:auto 2. position:absolute; 3. text-align:center; 1. margin:auto 로 간단히 가운데 정렬하기. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css 가운데 정렬</title> <style type="text/css"> body{ margin:0; padding:0; } #box { width:980px; height:2000px; margin:0 auto; background:#0CF;} </style> </head> <body> <div id="box"> 레이아웃</div> </body> </html> 결과 2. position:absolute; 로 가운데 정렬 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <...
자세한 내용 보기

CSS 고정된 사이드 배너

고정된 사이드배너 쇼핑몰이나 높이가 긴 사이트에 경우 왼쪽 또는 오른쪽에 배너영역을 지정하기도 한다. 이때 화면상에서 스크롤에 상관없이 항상 같은 위치에 있게끔 하는 배너를 넣을땐 css의 position:fixed 으로 간단히 해결할수 있다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>고정된 사이드배너</title> <style type="text/css"> #sidebanner { position:fixed; top:50px; left:50%; margin-left:500px; width:100px; height:200px; background:#F9C; } #content { width:980px; height:2000px; margin:0 auto; background:#6CF; } </style> </head> <body> <div id="sidebanner">     사이드배너 </div> <div id="content">  컨텐츠내용 </div> </body> </html>
자세한 내용 보기

CSS 선택자

css 선택자 타입선택자 (type selector ) body,div 등 요소명에 직접 선택하는것 ex) body { margin:0; padding:0  } 전체선택자 ( universal selector ) 모든 요소에 대한 스타일 지정 * { color:#ff000;  } id선택자 html문서 안에서 단 하나의 요소만 선택할때만 사용 ex) #layer { width:100px; height:100px;  } class선택자 html문서 안에서 복수로 선택할때 사용 ex) .content { width:100px; height:100px;  } 속성 선택자 (attribute selector ) 속성명이나 속성값을 가진 요소에 스타일을줌 div[id ] { color:#ff0000;  } -> div에 id속성을 선택 ( 요소명[속성명] ) div[id="layer1" ] { color:#ff0000;  } -> div의 id속성의 값이 layer1을 선택 ( 요소명[속성명="속성값"] ) div[class~="box"] { color:#ff0000;  } -> class속성을 복수로지정한 경우 box라는 값이 있으면 선택 (요소명[속성명~="속성값 " ] ) div[id^="box"] { width:100px; } -> div의 id속성의 값이 box로 시작하는 속성값을 선택(요소명[속성명^="속성값 " ] ) a[href $=".com" ] { color:#000;  } -> 속성의 속성값의 뒷부분이 같을경우 선택 (요소명[속성명$="속성값 " ] ) div[class*="box" ]  { color:#000;  } -> 속성값에 속성값이 한개 이상 포함된 경우 (요소명[속성명* ="속성값...
자세한 내용 보기

CSS 롤오버 이미지 만들기

이미지
css로 만드는 롤오버 이미지 마우스가 이미지 또는 원하는 영역 위에 올라갔을때 변화를 줄수 있다. 주요 css background-position, :hover 이미지 준비! 가로 : 150px, 높이 100px. 처음 보여지는 이미지는 검정색의 메뉴. 롤오버됐을땐 노란색의 메뉴이 보이게 된다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css로 만드는 롤오버이미지</title> <style type="text/css"> .rollover { width:100%; } .rollover a { display:block; width:150px; height:50px; text-indent:-3000px; background: url(rollover.jpg) no-repeat; background-position:0 0; } .rollover a:hover { background-position:0 -50px; } </style> </head> <body> <div class="rollover">  <a href="#">롤오버이미지</a> </div> </body> </html>  ...
자세한 내용 보기

CSS content의 높이에 상관없이 항상 하단에 붙어있는 footer

content의 높이에 상관없이 항상 하단에 붙어있는 footer 컨텐츠가 들어가는 중간 부분이 100% 채워지는 방법입니다. 의외로 까다로와서 가끔 헷갈릴때가 있는데요. 그래서 기억해 두려고 포스팅해봅니다. 예시 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>예제</title> <style type="text/css"> html, body { height:100%; margin:0; padding:0;} #head { position:relative; height:100px; background:#9CF;} #content { min-height:100%; margin:-100px 0 -100px 0; background:#0FC;} *html #content { height:100%;}    #box { height:200px; padding:100px 0 150px;} #footer { height:100px; background:#ddd;} </style> </head> <body> <div id="head">상단임돠</div> <div id="content">     <div id="box">본문</div> </d...
자세한 내용 보기

CSS 원만들기

css로 원만들기 지난 포스팅한 border-radius로 원을 만들수 있다. width,height의 값의 /2의 값이 border-radius의 값이 된다. width,height의 값이 100px이면 border-radius의 값은 50px <style type="text/css"> .circle1 {  width:200px;  height:200px;   border-radius:100px;  -moz-border-radius : 100px;  -webkit-border-radius : 100px;  -ms-border-radius :100px;  -khtml-border-radius : 100px;  -o-border-radius :100px;  background:#09F;  font:normal 12px/200px "나눔고딕", "돋움", "굴림";  color:#fff;  text-align:center; } .circle2 {   width:100px;  height:100px;  border-radius:50px;  -moz-border-radius : 50px;  -webkit-border-radius : 50px;  -ms-border-radius :50px;  -khtml-border-radius : 50px;  -o-border-radius :50px;  background:#FF9;  font:normal 12px/100px "나눔고딕", "돋움", "굴림";  color:#222;  text-align:center; } .circle3 {   width:50px;  height:50px;  border-radius:25px;  -moz-border-radius :...
자세한 내용 보기