CSS:위치와 모양 편집하기 (부분)

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

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

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

==위치 속성==
{| class="wikitable"
!의도
!설명
!방법
|-
|위치 지정
|여기에서 지정한 위치값은 좌측 위를 기준으로 한다.
겹치는 경우, css에서 나중에 지정된 속성이 위로 온다.
|position: 속성;
|}
{| 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"
!의도
!설명
!방법
|-
|위치 옮기기
|기준점으로부터 얼마나 옮길지 지정할 수 있다.
역시나 px, % 등 크기를 사용할 수 있다.
|top: 10px;
left: 10px;
|-
|중앙정렬
|어떤 크기이든 항상 중앙정렬.
모든 기준이 한 점에 몰리게 하고 경계를 자동으로 지정하게 하여 언제든 중앙정렬이 되게 할 수 있다.

width와 height 속성이 없으면 화면 전체를 채워 배경화면으로 쓰기도 한다.
|top: 0;
bottom: 0;

left: 0;

right: 0;

margin: auto;
|-
|부속물들 중앙정렬(서브축 정렬)
|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
위아래 위치를 잡아준다.

center, end, space-between(요소별로 여백 나눠주기) 등 정렬을 정한다.
|align-content: center;
|-
|부속물들 중앙정렬(메인축 정렬)
|좌우 위치를 잡아준다.
위와 같은 옵션값을 넣을 수 있다.
|justify-content: center;
|-
|우측에 붙이기
|해당 영역 안에서 우측에 붙이고 싶을 경우. 좌측 여백을 자동으로 지정하게 주면 된다.
|margin-left: auto;
|}<br />