글

라벨이 CSS인 게시물 표시

CSS position

이미지
position 으로 위치정하기 position은 요소의 위치를 정할 때 어디를 기준으로 할지 정하는 속성입니다. 속성값은 static, absolute, fixed, relative가 있으며, 기본값은 static입니다. 위치를 계산할 기준을 정하고 나면 top, right, bottom, left 속성으로 위치를 정할 수 있습니다. 단, position의 속성값으로 static을 사용하면 top, right, bottom, left를 설정해도 적용되지 않습니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS | position</title> <style> .container { width: 500px; height: 500px; margin: auto; border: 1px solid #da9627; background-color: #ffb848; } .po { width: 200px; border: 1px solid #17a668; background-color: #27a9e3; position: static; top: 100px; left: 100px; } </style> </head> <body> <div class="container"> <p>Lorem ipsum dolor.</p> <div class="po"> ...
자세한 내용 보기

CSS box-sizing

이미지
박스의 사이즈 정의 특정 영역에 컨텐츠를 놓고 사이즈를 지정할때 padding이나 border가 포함된 width값을 지정하느냐 아님 제외한 지정하느냐가 고민 이다. 이때 정확한 값을 위해 box-sizing이 쓰이게 되는데  content-box일때 width는 padding,border크기를 포함하지 않는다 border-box일때 width는 padding,border크기를 포함한다 예를들어 div {     width:300px;     height:100px;     border:50px solid #ff0000;     min-width:100px;     min-height:100px;     margin:10px; } 라고 가정할때  "margin:10px; 밑줄에 box-sizing:content-box"를 입력하면 "margin:10px; 밑줄에 box-sizing:border-box"를 입력하면 위에 그림 처럼 나오게 된다 
자세한 내용 보기

CSS 랜더링 엔진

랜더링엔진 브라우저 마다 페이지를 랜더링 하는 기준이 달라서, 특정 브라우저에서만 동작하는 CSS를 기립하기 위해 CSS HACK을  사용한다. 예) -webkit -transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .2s; transition: opacity .25s ease .2s; -webkit : 사파리 크롬에서만 동작 -o : 오페라에서만 동작 -moz : 파이어폭스에서 동작 transition : 전체 브라우저 동작 *transtion은 마우스 오버시 자바스크립트나 플래쉬 없이 div에 어떠한 액션을 줄때 사용한다 참조링크 http://www.w3schools.com/cssref/css3_pr_transition-property.asp http://linuxism.tistory.com/1677
자세한 내용 보기

CSS 하나의 이미지로 버튼 만들기

이미지
하나의 이미지로 버튼만들기 background-position 을 이용한 버튼 방법. 예시 1.이미지준비 파랑색버튼 - width:150px; height:50px; 검정색버튼 - width:175px; height:45px; 주황색버튼 - width:59px; height:20px; 2.코딩방법 <!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"> a { display:block; margin:10px 0; padding:0; background:url(button.png); } .btn01 { background-position:0 0; width:150px; height:50px; } .btn02 { background-position:0 -50px; width:175px; height:45px; } .btn03 { background-position:0 -95px; width:59px; height:20px; } </style> </head> <body> <a href=" http://jaguarkim2108.blogspot.kr/ " class="btn01" ></a> <a...
자세한 내용 보기

CSS 제목요소

h1~h6 제목요소 html문서에서 제목을 넣는 요소로는 h1, h2, h3, h4, h5, h6 가 있다. 블록레벨요소이며, 인라인요소와 텍스트를 포함하지만 블록레벨요소는 포함할수 없다. h1은 가장 큰제목, 다음 h2 중간제목, h3가 작은제목 으로 쓰이며 대부분 h3까지 쓴다. h1은 큰 제목이기 때문에 html문서에서 한번만 사용되어야 한다. 예시 <html> <head> <title>제목요소 사용하기</title> </head> <body>     <h1>블로그입니다</h1>     <h2>블로그는 어떤 내용들이 있는가?</h2>     <h3>블로그 내용 알아보기</h3> </body> </html>
자세한 내용 보기

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 :...
자세한 내용 보기

CSS 메뉴만들기

css로 메뉴만들기 css만으로 간단히 메뉴를 만들수 있다. 가상클래스 :hover, display 사용 예시 <style type="text/css">  ul.mn {  }  ul.mn li { position:relative; float:left; padding:0 20px; font:normal 14px/30px "나눔고딕", "돋움", "굴림";}  ul.mn li ul { display:none; position:absolute; top:30px; left:0; }   ul.mn li:hover ul { display: inline; }  ul.mn li ul li { font:normal 12px/20px "나눔고딕", "돋움", "굴림"; } </style> <ul class="mn">  <li><a href="#">대메뉴</a>      <ul class="submn">          <li><a href="#">2뎁스</a></li>             <li><a href="#">2뎁스</a></li>             <li><a href="#">2뎁스</a></li>         </ul>     </li>     ...
자세한 내용 보기

CSS 버튼만들기

css로 버튼 만들기 그동안 포스팅했던 내용들로 버튼을 만들어보겠습니다. ​ 주요 css display background-image:linear-gradient border-radius  <style type="text/css"> a {display:block; width:200px; height:50px; font:bold 14px/23px "나눔고딕", "돋움", "굴림"; text-align:center; line-height:50px; text-decoration:none;} a:link, a:visited {  background-color: #f33f2a;  background-image: -webkit-gradient(linear, left top, left bottom, from(#f33f2a),to(#dc331f));  background-image: -webkit-linear-gradient(top, #f33f2a, #dc331f);  background-image: -moz-linear-gradient(top, #f33f2a, #dc331f);  background-image: -o-linear-gradient(top, #f33f2a, #dc331f);  background-image: -ms-linear-gradient(top, #f33f2a, #dc331f);  background-image: linear-gradient(top, #f33f2a, #dc331f);  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f33f2a', EndColorStr='#dc331f');  border-style:solid;  border-width:1px;  border-color:#f66250...
자세한 내용 보기

CSS gradient

이미지
gradient css로 그라데이션 효과 주기 방법 background-image: linear-gradient(-90deg, #ff0000, #00ae00); 설명 · 그라데이션은 백그라운드-이미지로 설정가능하다. · linear-gradient은 스타일임, linear는 선형, radial은 원형임. · - 90deg는 그라데이션의 각도,방향임. · 첫번째 색(#ff0000)은 시작색 · 마지막 색(#00ae00)은 끝 색     색은 색이름(red, green...), rgb(255,255,255), #ff0000 등으로 표현가능하다. background-image: linear-gradient( -90deg , #ff0000, #00ae00); background-image: linear-gradient( 90deg , #ff0000, #00ae00); background-image: linear-gradient( 0 , #ff0000, #00ae00); background-image: linear-gradient( 180deg , #ff0000, #00ae00); background-image: linear-gradient(90deg, red,orange,yellow,green,blue,indigo,violet ); background-image: linear-gradient(90deg, red,orange 30%,yellow 20% ); background-image: radial-gradient ( circle , red, yellow, green); *원형에서는 각도가 아닌 circle가 들어가야함.(생략가능) 아쉽게도 아직까지 많은 브라우저들이 호환되지 않음.(ie10이상) 각각 브라우저에 맞춰 식별자를 넣어줘야 함. -moz-border-radius : 파이어폭스 -webkit-border-radius : 사파리...
자세한 내용 보기

CSS display

display 요소을 인라인, 블록박스로 보일지 결정해줌.   div { display:값; } · none : 요소가 보이지 않음. · block : 요소를 블록박스로 만듬 · inline : 요소를 인라인요소로 만듬. · inline-block : 배치는 블록박스로 되지만, 요소는 인라인임. · list-item : li요소와 같이 블록 박스와 목록 항목의 인라인 박스로 만듬. · run-in : 런인박스로 만듬. · 다음 요소들은 테이블 관련 요소와 비슷한 형태로 만듬.     inline-table     table     table-row-group     table-column     table-column-group     table-header-group     table-footer-group     table-row     table-cell     table-caption · compact, marker는 삭제됨.
자세한 내용 보기

CSS strong

strong 글씨 강조, 볼드체 - 글씨를 강조할때 사용. - 인라인 요소 - font-weight의 bold의 굵기 예시 글씨를 <strong>굵게</strong> 할때 사용합니다. 결과 글씨를 굵게 할때 사용합니다. - <b>요소와 비슷함. ( <b>요소는 텍스트 스타일요소, <strong>는 강조 요소로 사용됨.​)
자세한 내용 보기

CSS box-shadow

이미지
box-shadow 요소(박스)의 그림자 효과 - 박스에 그림자 효과를 넣고 싶을때 사용 - 문법 div {  box-shadow:h-shadow v-shadow blur spread color 그림자위치 }   · h-shadow : x축 그림자. 길이로 표현해준다(ex. 10px, 2em, 5%). 마이너스값 사용가능   · v-shadow : y축 그림자. 역시 길이로 표현. 마이너스값 가능   · blur : 흐린정도. 생략 가능.   · spread : 퍼지는 정도. 생략 가능   · color : 그림자색. red,#ff0000,rgb(255,255,255) 등 다양한 방법이 가능하다.   · 그림자위치 : 기본은 박스 바깥쪽 그림자. inset을 넣으면 박스 안쪽으로 그림자가 생김. 예시 div { box-shadow:5px 5px;  } div { box-shadow:10px 10px 20px blue; } div { box-shadow:10px 10px 20px 20px blue; } div { box-shadow:10px 10px 20px blue inset;  }
자세한 내용 보기

CSS 글자간격

글자간격 letter-spacing 글자의 문자간격 글자 하나하나의 간격을 조절할때 사용 문법 div { letter-spacing:0.2em; } 0은 normal 기본 간격임. 보통 px,em으로 표시 마이너스 값도 가능하지만, 특정범위를 넘어서면 더이상 값이 반영되지 않는다. div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; letter-spacing:2em;} <div>글자 사이사이 간격을 조절해 줍니다.</div> 결과 글자 사이사이 간격을 조절해줍니다. div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; letter-spacing:-0.5px;} <div>글자 사이사이 간격을 조절해 줍니다.</div> 결과 글자 사이사이 간격을 조절해줍니다. word-spacing 단어 간격 단어와 단어 사이 간격을 조절할때 사용 문법 div {word-spacing:5px;} 0은 normal 기본 간격 보통 px, em으로 표시 마이너스 값도 가능하지만, 특정범위를 넘어서면 더이상 값이 반영되지 않는다. div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; word-spacing:5px;} <div>단어와 단어 사이 간격을 조절해 줍니다.</div> 결과 단어와 단어 사이 간격을 조절해 줍니다. div {font:normal 12px '나눔고딕', '돋움', '굴림'; background:#fff; word-spacing:-2em;} <div>단어와 단어 사이 간격을 ...
자세한 내용 보기

CSS text-shadow

이미지
text-shadow   텍스트에 그림자 넣기 - 텍스트에 그림자를 넣고 싶을 때 사용. - 문법   div {text-shadow: h-shadow v-shadow blur color;}     · 첫번째 길이는 x축 (가로)     · 두번째 길이는 y축 (세로)     · 세번째 길이는 흐린정도     ·  x축과 y축 길이는 마이너스도 가능함.     · 네번째 색은 그림자색을 나타냄.     · 색이 첫번째에 와도 무방하다.     · red,#ff0000,rgb(255,255,255) 등 다양한 방법이 가능하다.     · 흐린정도와 색상은 생략 가능.     · 그림자 복수지정도 가능하다. ','이용 예시 h1 {text-shadow:5px 5px 3px red; } h1 {text-shadow:5px 5px; } h1 { text-shadow:5px 5px 2px #666, -5px -10px 2px #C30; } - ie9 이하 브라우저에선 적용되지 않음.
자세한 내용 보기