CSS:위치와 모양 편집하기

{{CSS}}

=위치속성=
<br /><syntaxhighlight lang="html">
<style>
    .box{
        ...
        position: 옵션;
        ...
    }
</style>
</syntaxhighlight>position에 지정한다.
<br />
==display 속성==
===Block===
블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.

모든 너비를 가져가며 아래로 쌓인다.
===Inline===
한 문장 내의 룩엔필을 다루는 개념.

옆으로 쌓인다.
===Inline-block===
블록인데, 옆으로 쌓인다.
===None===
있지만, 시각화되지 않는다.

== 위치 속성 ==
{| class="wikitable"
!위치
(기본값 static)
!relative
!absolute
!fixed
|-
|용도
|absolute의 기준점을 잡기 위해 주로 사용한다.
|상위의 요소를 기준으로 위치를 잡아주기 위해 사용.
|팝업창처럼 브라우저 내에서 고정된다.
|-
|위치기준
|자신
|부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.)
|브라우저
|-
|위치
|
|x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수.

%로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다.

(정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.)

(margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.)

transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다.
|absolute와 동일.
|}
=모양속성=
{| class="wikitable"
!의도
!설명
!방법
|-
|모서리 둥글게
|사각형 버튼 따위의 모서리를 둥글게 만든다.
|border-radius: 크기;
|}