CSS:위치와 모양 편집하기

{{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;
|-
|부속물들 중앙정렬
|부속물들을 한 태그 안에 나열해 두면 그 크기에 따라 제각각 자리잡는다. 이를 방지하기 위한 속성.
|align-items: center;
|-
|우측에 붙이기
|해당 영역 안에서 우측에 붙이고 싶을 경우. 좌측 여백을 자동으로 지정하게 주면 된다.
|margin-left: auto;
|}
=모양속성=

===크기지정===
{| class="wikitable"
!의도
!설명
!방법
|-
|넓이 지정
|
|width: 10px;
|-
|높이 지정
|
|height: 10px;
|-
|태그크기 지정
|태그의 크기를 계산하여 지정할 필요 없이 전체 크기를 지정한다.
(내부 요소들은 자동계산)
|box-sizing:
|-
|
|
|
|}

===여백===
{| class="wikitable"
!의도
!설명
!방법
|-
|여백 만들기
|해당 태그가 차지하고 있는 여백을 지정한다.
|
{| class="wikitable"
!의도
!설명
|-
|전체적으로 같은 여백 주기
|padding: 10px;
|-
|상하로 여백 따로 주기
|padding: 10px 5px;
(상하 순이다.)
|-
|사방으로 여백 따로 주기
|padding: 상px 우px 하px 좌px;
|-
|위에만 여백 주기
|padding-top: 10px;
이외 right, left, bottom 사용이 가능하다.
|}<br />
|-
|여백만들기2
|해당 태그 밖으로 차지하고 있는 여백을 지정한다.
(태그 사이의 공간을 지정할 때 사용한다.)
|margin: 10px;
기본 사용은 padding과 같다.
|}

===경계선===
{| class="wikitable"
!의도
!설명
!방법
|-
|경계면 지정
|태그를 감싸는 윤곽선을 만든다.
|border: solid 10px black;
종류, 크기, 색 순으로 지정.
{| class="wikitable"
!종류
!설명
|-
|solid
|그냥 단선.
|-
|double
|선을 2개로 나눈다.
|-
|dotted
|점선으로.
|-
|groove
|명암.
|-
|inset
|안으로 눌린 것처럼 보인다.
|-
|outset
|밖으로 튀어나온 것처럼 보인다.
|}
투명하게 처리하고 싶다면 색에 transparent를 기입하자.
|-
|모서리 둥글게
|사각형 버튼 따위의 모서리를 둥글게 만든다.
|border-radius: 크기;
|}

===투명도===
{| class="wikitable"
!의도
!설명
!방법
|-
|투명도 지정
|0~1 사이의 값을 지정한다. 0이면 완전 투명.
|opacity: 값;
|}