글

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

HTML 구분선

구분선 hr html에서 구분선을 사용할때는 <hr>요소를 사용 -블록레벨요소 -종료태그는 없음 대신 <hr />로 표시 코딩 <hr /> <div>구분선</div> <hr /> 결과 구분선
자세한 내용 보기

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

HTML 동영상 삽입

html 동영상 삽입 방법 1.embed 태그를 이용한 동영상 삽입 - 웹표준에서는 사용되지 않음. <embed src="동영상경로" width="640" height="480"></embed> 2.object 요소를 이용한 동영상 삽입 <object type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="400">  <param name="movie" value="동영상경로" />     <param name="quality" value="high" />     <param name="wmode" value="opaque" />     <param name="wmode" value="transparent">     <param name="swfversion" value="6.0.65.0" />     <param name="expressinstall" value="Scripts/expressInstall.swf" />  <object type="application/x-shockwave-flash" data="동영상경로" width="400" height="400">      <param name="quality" value="high" />  ...
자세한 내용 보기

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

HTML 원하는 위치로 이동

원하는 위치로 이동 #id명 html 작업중 원하는 위치로 이동하는 간단한 방법은 id값을 이용하는것. 원하는 위치에 id값을 주고  #id명을 링크로 걸어주면 링크가 걸린 id값으로 이동함. 예시 <style type="text/css"> div { height:500px; } </style> <div id="layer 1" >     1번레이어     <a href="#layer1">1번 레이어로 이동</a>     <a href="#layer2">2번 레이어로 이동</a>     <a href="#layer3">3번 레이어로 이동</a>     <a href="#layer4">4번 레이어로 이동</a>     <a href="#layer5">5번 레이어로 이동</a> </div> <div id="layer 2 " >     2번 레이어     <a href="#layer1">1번 레이어로 이동</a>     <a href="#layer2">2번 레이어로 이동</a>     <a href="#layer3">3번 레이어로 이동</a>     <a href="#layer4">4번 레이어로 이동</a>     <a href="#layer5">5번 레이어로 이동</a> </div> <div id="lay...
자세한 내용 보기

HTML id&class

id, class 특정 요소를 선택하여 스타일을 줄때 사용됨. <div id="idN ame " class="classN ame" >id와 class </div> id : html문서 안에서 딱 1번만 선택될때 사용함.       header나 content 등 한번만 들어가는 요소에 사용하면 좋음.       스타일 사용할때 # idName       ex)div #idName { background:#ff0000;  } class : 복수로 선택할때 사용.       같은 스타일을 사용하는 경우 사용하면 좋음.       스타일 사용할땐 .className       ex)div .className { color:#ff0000;  } id와 class는 한 요소에서 동시 사용 가능하다. id명 와 class명은 알파벳 소문자 , 대문자, 숫자, '_'가 사용가능하나 숫자가 먼저올 순 없다.   ex)id="0div" (X )
자세한 내용 보기

HTML 문서의 기본구조

html 문서 의 기본구조 html이란? html은 Hypertext Markup Language의 약자로, 월드 와이드 웹(www )에서 볼수 있는 페이지를 만들때 사용하는 프로그래밍의 언어의 한 종류. 현재 많은 웹페이지들은 대부분 html을 쓰고 있음. 가장 보편적인 언어라고 보면 될듯. - html에서 사용되는 요소 를 사용할때는 "<",">"를 사용함.    ex) <h1>블로그에 오신걸 환영합니다! </h1> - 이때 첫번째나오는 요소명이 시작태그이고, 끝에 나오는 요소명은 종료 태그임. 종료태그엔 반드시 슬러시('/')가 들어감. - 일부 요소는 종료태그가 없이 < ... /> 이렇게 들어가는 경우가 있는데. 이런 요소를 빈요소라고 함.     ex)<img src="이미지경로 " /> - 요소들에는 속성 이 들어감.    ex) <a href= http://gela_studio.blog.me >블로그 </a> - 이때 <a>는 요소, href는 속성, http://gela_studio.blog.me 는 속성값이 된다. - 속성을 쓸땐 요소에서 한칸 띄운뒤 사용(스페이스바). 속성과 다른 속성을 쓸때도 스페이스바로 구분을 해줘야함. html 기본구조 <html> <head>웹페이지의 기본정보 </head> <body>      웹페이지의 내용 </body> </html> <html></html> : html문서의 시작과 끝을 알림. html문서임을 알려줌. <head></head> : 헤드 사이에는 xml선언,  타이틀, 메타태그 , 언어선언, 스타일링크 등 페이지에 필요한 기본정보들이 들어...
자세한 내용 보기

HTML 절대경로와 상대경로

절대경로와 상대경로 웹상에서 링크를 걸거나, 이미지 삽입할때 꼭 알아야할 절대경로과 상대경로. 절대경로 http// <-요것까지 모두다 쓰인게 절대 경로. 예를들면. <a href=" http://jaguarkim2108.blogspot.kr/ ">블로그 </a> <img src= http://jaguarkim2108.blogspot.kr /img.jpg /> 이런식으로 주소 모두가 쓰이면 절대경로이다. 상대경로 어떠한 파일이나, 폴더를 기점으로 한 경로이다. 예를들면 <a href="/index.html ">블로그 </a> <img src="../img/img.jpg " /> 이런식으로 들어간 게 상대경로다. ​ 여기서 중요한건 "../"와 "." "/ "의 차이다. "../"는 지금 파일의 윗폴더. "."은 현재 같은 폴더 내에서(생략이 가능 ) "/"의 최상의 위치에서 찾게된다.( http://jaguarkim2108.blogspot.kr / 와 같음 )
자세한 내용 보기

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