|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
[title="position"] {width:150px; height:150px; font-weight:900; border:3px solid purple}
/*position - 요소의 위치값을 좌푯값에 따라 배치할 수 있는 속성*/
.position00 {background-color:#000000; color:white; position:static} /*좌표 속성을 사용할 수 없다.(작성하지 않았을때와 같은 기본값)*/
/*속성 relative - 요소의 왼쪽 위가 모서리가 기준점이 된다.*/
.position01 {background-color:red; position:relative; top:50px} /*위쪽 기준으로 50px만큼 위치이동*/
.position02 {background-color:yellow; position:relative; right:50px} /*오른쪽 기준으로 50px 만큼 위치 이동*/
.position03 {background-color:green; position:relative; bottom:50px} /*아래쪽 기준으로 50px 만큼 위치 이동*/
.position04 {background-color:blue; position:relative; left:50px} /*왼쪽 기준으로 50px 만큼 위치 이동*/
.position05 {background-color:white; position:relative; left:80px; bottom:80px} /*여러개의 속성을 사용해도 된다.*/
/*속성 absolute - 위치 값을 좌푯값에 따라 배치할 수 있는 속성 (절대좌표)*/
/*웹브라우저의 테두리가 기준점이 된다. 그러므로 브라우저창을 늘렸다 줄여도 그 상황에 맞게 위치 하게 된다.*/
/*한쪽 방향만 설정값을 넣고 다른 방향을 생략하면 원래 생략한 부분은 원래 있던 자리가 기준이 된다.*/
/*absolute 속성을 사용하면 그 요소는 비어있는 것으로 인식이 된다. absolute 속성을 사용한고 다음 태그를 사용시 그 자리에 요소가 생성된다.*/
.position06 {background-color:#ff00ea55; position:absolute} /*기준점으로 사용할 원래자리*/
.position07 {background-color:#ff00ea55; position:absolute; top:10px} /*원래 자리에서 위에서 10px 만큼 떨어진 위치*/
.position08 {background-color:#ff00ea55; position:absolute; right:10px} /*원래 자리에서 오른쪽에서 10px 만큼 떨어진 위치*/
.position09 {background-color:#ff00ea55; position:absolute; bottom:10px} /*원래 자리에서 아래에서 10px 만큼 떨어진 위치*/
.position10 {background-color:#ff00ea55; position:absolute; left:500px} /*원래 자리에서 왼쪽에서 500px 만큼 떨어진 위치*/
.position11 {background-color:#ff00ea55; position:absolute; top:10px; right:10px} /*위쪽 오른쪽 각각 10px씩 만큼 떨어진 위치*/
/*속성 fixed - 스크롤해도 항상 고정된 윈치에 배치된다.*/
.position12 {background-color:#00ff8c; position:fixed; top:200px; right:10px} /*위쪽 오른쪽 각각 10px씩 만큼 떨어진 위치*/
/*속성 sticky - 스크롤하는 중 일정 지점이 되면 고정된다.*/
.position13 {background-color:#00ccff; position:sticky; top:50px} /*스크롤하다 위에서 50px보다 적게 벌어지면 고정된다.*/
/*속성 z-index - 요소와 요소가 겹칠때 우선순위를 지정하는 속성*/
.position14 {background-color:red; position:relative; z-index:3} /*순서에 따라 초록색이 제일 위에 위치해야 하지만 z-index 설정값으로 빨간색이 제일 위에 위치 되었다.*/
.position15 {background-color:yellow; position:relative; bottom:100px; left:50px; z-index:2}
.position16 {background-color:green; position:relative; bottom:200px; left:100px; z-index:1}
</style>
</head>
<body>
<div class="position00" title="position">position:static<br>(기본값)</div> <br>
<div style="background-color:aqua; border:solid; width:300px; height:800px; display:inline-block">
<div class="position01" title="position">relative<br>위쪽 기준으로 50px만큼 위치이동</div>
<div class="position02" title="position">relative<br>오른쪽 기준으로 50px 만큼 위치 이동</div>
<div class="position03" title="position">relative<br>아래쪽 기준으로 50px 만큼 위치 이동</div>
<div class="position04" title="position">relative<br>왼쪽 기준으로 50px 만큼 위치 이동</div>
<div class="position05" title="position">relative<br>여러개의 속성을 사용해도 된다.</div>
</div>
<div style="background-color:aqua; border:solid; width:156px; height:156px; display:inline-block">
<div class="position06" title="position">absolute<br>원래 자리</div>
<div class="position07" title="position">absolute<br>위쪽에만 설정값을 넣어서 x축은 그대로이고 y축만 브라우저 위쪽에서 10px 떨어진 모습</div>
<div class="position08" title="position">absolute<br>오른쪽에만 설정값을 넣어서 y축은 그대로이고 x축만 브라우저 오른쪽에서 10px 떨어진 모습</div>
<div class="position09" title="position">absolute<br>아래에만 설정값을 넣어서 x축은 그대로이고 y축만 브라우저 아래쪽에서 10px 떨어진 모습</div>
<div class="position10" title="position">absolute<br>왼쪽에만 설정값을 넣어서 y축은 그대로이고 x축만 브라우저 왼쪽에서 500px 떨어진 모습</div>
<div class="position11" title="position">absolute<br>x축, y축 모두 사용 가능하다.</div>
<div class="position12" title="position">fixed<br>스크롤해도 항상 위에서 200px, 오른쪽에서 10px 만큼 떨어진 위치에 고정된다.</div>
</div>
<div style="height:2000px">
<div class="position13" title="position">sticky<br>스크롤하다 위에서 50px보다 적게 벌어지면 고정된다..</div>
<div class="position14" title="position">순서에 따라 초록색이 제일 위에 위치해야 하지만 z-index 설정값으로 빨간색이 제일 위에 위치 되었다.</div>
<div class="position15" title="position"></div>
<div class="position16" title="position"></div>
</div>
</body>
</html>
|
position:static (기본값) relative
위쪽 기준으로 50px만큼 위치이동 relative
오른쪽 기준으로 50px 만큼 위치 이동 relative
아래쪽 기준으로 50px 만큼 위치 이동 relative
왼쪽 기준으로 50px 만큼 위치 이동 relative
여러개의 속성을 사용해도 된다. absolute
원래 자리 absolute
위쪽에만 설정값을 넣어서 x축은 그대로이고 y축만 브라우저 위쪽에서 10px 떨어진 모습 absolute
오른쪽에만 설정값을 넣어서 y축은 그대로이고 x축만 브라우저 오른쪽에서 10px 떨어진 모습 absolute
아래에만 설정값을 넣어서 x축은 그대로이고 y축만 브라우저 아래쪽에서 10px 떨어진 모습 absolute
왼쪽에만 설정값을 넣어서 y축은 그대로이고 x축만 브라우저 왼쪽에서 500px 떨어진 모습 absolute
x축, y축 모두 사용 가능하다. fixed
스크롤해도 항상 위에서 200px, 오른쪽에서 10px 만큼 떨어진 위치에 고정된다. sticky
스크롤하다 위에서 50px보다 적게 벌어지면 고정된다.. 순서에 따라 초록색이 제일 위에 위치해야 하지만 z-index 설정값으로 빨간색이 제일 위에 위치 되었다.
|
'CSS' 카테고리의 다른 글
| CSS - transition (0) | 2023.04.04 |
|---|---|
| CSS - float, clear (0) | 2023.04.04 |
| CSS box관련 - margin, border, padding, content (0) | 2023.04.02 |
| CSS 텍스트 스타일 (0) | 2023.04.01 |
| CSS 선택자 이용방법 (0) | 2023.03.20 |