CSS:위치와 모양
틀:CSS. css에 대한 문서들을 담아두기 위한 틀.
위치속성
<style>
.box{
...
position: 옵션;
...
}
</style>
position에 지정한다.
위치
(기본값 static) |
relative | absolute | fixed |
---|---|---|---|
용도 | absolute의 기준점을 잡기 위해 주로 사용한다. | 상위의 요소를 기준으로 위치를 잡아주기 위해 사용. | 팝업창처럼 브라우저 내에서 고정된다. |
위치기준 | 자신 | 부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.) |
브라우저 |
위치 | x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수. %로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다. (정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.) (margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.) transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다. |
absolute와 동일. |
모양속성
의도 | 설명 | 방법 |
---|---|---|
모서리 둥글게 | 사각형 버튼 따위의 모서리를 둥글게 만든다. | border-radius: 크기; |