Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

position 연습1 본문

웹퍼블리싱/CSS

position 연습1

http://portfolio.wonpaper.net 2018. 11. 22. 02:01

<!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 position 연습</title>

<style type="text/css">
 div {border:1px solid red;width:100px;height:30px;}
  /* postion:relative --> 원래 컴퓨터가 위치를 계산해준 자리로 이동(left,top,right,bottom)*/
  /* left:50px 원래 자리에서 50px 만큼 이동된다. 마이너스 값 주면 왼쪽으로 이동한다. */ 
 #d2 {position:relative;left:50px;top:30px;} 
 /***********/
 
 #d3 {position:absolute;left:50px;top:30px;}
</style>
</head>
<body>

<div id="d1">111</div>
<div id="d2">222 position:relative;</div>
<div id="d3">333 position:absolute;</div>
<div id="d4">444</div>


</body>
</html>

 

 

 

div 레이어 창으로 많이 쓰이는 position 내용인데, relative(상대적), absolute (절대적) 위치 개념이다.

'웹퍼블리싱 > CSS' 카테고리의 다른 글

div 태그를 스크롤되게 하자  (0) 2018.11.24
position 연습2  (0) 2018.11.22
float 연습 3  (0) 2018.11.19
float 연습 2  (0) 2018.11.19
float 연습 1  (0) 2018.11.19
'웹퍼블리싱/CSS' Related Articles more
Comments