글

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