CSS 포지션 스타일 CSS 강좌 08강
※position
▷position은 CSS를 이용하여 HTML 엘리먼트들의 위치를 제어하는 방법입니다.
▷position의 종류
(1)상대위치(relative position)
->자신의 위치를 기준으로 위치 값을 지정합니다.
ㅇ기준위치 : 엘리먼트 자체
ㅇ부모의크기 : 자식의 크기에 따라 변경
ㅇ자신의크기 : 부모의 크기를 따름(width:100%)
ㅇoffset : 사용가능
ㅇ스크롤 : 영향을 받음
사용법)
{ position:relative }
예제)
*스타일 요소
<style>
.normal, .parent {
border: 4px solid blue;
margin: 20px;
}
.box {
border: 4px solid green;
background-color: red;
position: relative;
}
</style>
*HTML요소
<body>
<div class="normal">
일반적인 박스
</div>
<div class="parent">
부모 박스
<div class="box">
자신 박스
</div>
</div>
</body>
위 소스에서 자신박스에 offset 값으로 top:20px 을 추가해서 테스트 해보겠습니다.
(2)절대위치(absolute position)
->문서를 기준으로 위치 값을 지정합니다.
ㅇ기준위치 : 문서(시작 위치는 정적인 기준으로 정해짐)
ㅇ부모의크기 : 변경되지는 않음
ㅇ자신의크기 : 콘텐츠의 크기만큼 동적인 변화가 일어남
ㅇoffset : 사용가능
ㅇ스크롤 : 영향을 받음
사용법)
{ position:absolute }
예제)
*스타일 요소
<style>
.normal, .parent {
border: 4px solid blue;
margin: 20px;
}
.box {
border: 4px solid green;
background-color: red;
position: absolute;
}
</style>
*HTML요소
<body>
<div class="normal">
일반적인 박스
</div>
<div class="parent">
부모 박스
<div class="box">
자신 박스
</div>
</div>
</body>
위 소스에서 자신박스에 offset 값으로 top:50px;left:50px 을 추가해서 테스트 해보겠습니다.
offset 값을 추가하였더니 절대적인 위치인 offset의 위치로 위치가 변경됩니다.
(3)고정위치(fixed position)
->문서를 기준으로 위치 값을 지정합니다.
ㅇ기준위치 : 문서(시작 위치는 정적인 기준으로 정해짐)
ㅇ부모의크기 : 변경되지는 않음
ㅇ자신의크기 : 콘텐츠의 크기만큼 동적인 변화가 일어남
ㅇoffset : 사용가능
ㅇ스크롤 : 고정
사용법)
{ position:fixed }
예제)
*스타일 요소
<style>
.normal1, .normal2, .parent {
border: 4px solid blue;
margin: 20px;
}
.box {
border: 4px solid green;
background-color: red;
position: fixed;
}
.normal2{
height:1000px;
}
</style>
*HTML 요소
<body>
<div class="normal1">
일반적인 박스1
</div>
<div class="parent">
부모 박스
<div class="box">
자신 박스
</div>
</div>
<div class="normal2">
일반적인 박스2
</div>
</body>
이번에는 스크롤을 아래로 이동시킨 후 자신박스의 위치를 보겠습니다.
스크롤이 움직여도 자신박스의 위치에는 변함이 없음을 확인할 수 있습니다.
(4)정적위치(static position)
->자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 동적으로 변경됩니다.
->position 속성을 지정하지 않았을 경우의 기본값 입니다.
ㅇ기준위치 : 엘리먼트 자체
ㅇ부모의크기 : 자식의 크기에 따라 변경
ㅇ자신의크기 : 부모의 크기를 따름(width:100%)
ㅇoffset : 사용불가능
ㅇ스크롤 : 영향을 받음
사용법)
{ position:static }
예제)
*스타일 요소
<style>
.normal, .parent {
border: 4px solid blue;
margin: 20px;
}
.box {
border: 4px solid green;
background-color: red;
}
</style>
*HTML 요소
<body>
<div class="normal">
일반적인 박스
</div>
<div class="parent">
부모 박스
<div class="box">
자신 박스
</div>
</div>
</body>
위 소스에서 자신박스에 offset 값으로 top:50px;left:50px 을 추가해서 테스트 해보겠습니다.
offset의 영향을 받지 않는것을 확인할 수 있습니다.
'코딩이야기 > CSS' 카테고리의 다른 글
| CSS 상속/우선순위 CSS 강좌 09강 (0) | 2016.03.10 |
|---|---|
| CSS 박스 스타일 CSS 강좌 07강 (0) | 2016.03.08 |
| CSS 강좌 06강 - CSS 링크/표/배경 스타일 (0) | 2016.03.05 |
| CSS 강좌 05강 - CSS font 스타일 (0) | 2016.03.03 |
| CSS 강좌 04강 - CSS 텍스트 스타일 (0) | 2016.03.03 |