CSS:위치와 모양
틀:CSS. css에 대한 문서들을 담아두기 위한 틀.
위치속성
<style>
.box{
...
position: 옵션;
...
}
</style>
position에 지정한다.
display 속성
Block
블록. 콘텐츠를 담을 공간에 대한 룩엔필을 다룬다.
모든 너비를 가져가며 아래로 쌓인다.
Inline
한 문장 내의 룩엔필을 다루는 개념.
옆으로 쌓인다.
Inline-block
블록인데, 옆으로 쌓인다.
None
있지만, 시각화되지 않는다.
위치 속성
| 의도 | 설명 | 방법 |
|---|---|---|
| 위치 지정 | 여기에서 지정한 위치값은 좌측 위를 기준으로 한다.
겹치는 경우, css에서 나중에 지정된 속성이 위로 온다. |
position: 속성; |
| 위치
(기본값 static) |
relative | absolute | fixed |
|---|---|---|---|
| 용도 | absolute의 기준점을 잡기 위해 주로 사용한다. | 상위의 요소를 기준으로 위치를 잡아주기 위해 사용. | 팝업창처럼 브라우저 내에서 고정된다. |
| 위치기준 | 자신 | 부모(상위 태그. 기준태그가 relative를 갖고 있어야 한다.)
(없으면 브라우저까지 찾아 올라간다.) |
브라우저 |
| 위치 | x축과 y축을 지정해주어야 한다.
left 속성과 top 속성 등이 필수. %로 지정이 가능한데, 왼쪽 상단을 기준으로 위치가 정해진다. (정확히 가운데에 두고 싶으면 margin-left:-50%; 등을 이용해 위치 조정.) (margin에 퍼센트 사용이 가능한가? 보통은 transform:translate(-50%,-50%)를 이용한다.) transform:translateY(-50%)로 한 축에 대해서만 지정도 가능하다. |
absolute와 동일. |
위치 옮기기
| 의도 | 설명 | 방법 |
|---|---|---|
| 위치 옮기기 | 기준점으로부터 얼마나 옮길지 지정할 수 있다.
역시나 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; |
모양속성
크기지정
| 의도 | 설명 | 방법 | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 넓이 지정 | width: 10px; | |||||||||
| 높이 지정 | height: 10px; | |||||||||
| 태그크기 지정 | 태그의 크기를 계산하여 지정할 필요 없이 전체 크기를 지정한다.
(내부 요소들은 자동계산) |
box-sizing: | ||||||||
| 자식 크기가 클 때 | 자식 크기가 부모크기보다 클 때 어떻게 처리할지를 결정한다.
overflow-x: hidden; overflow-y: scroll; 형식으로 축에 대해 정할 수도 있다. |
overflow: hidden; |
여백
| 의도 | 설명 | 방법 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 여백 만들기 | 해당 태그가 차지하고 있는 여백을 지정한다. |
| ||||||||||
| 여백만들기2 | 해당 태그 밖으로 차지하고 있는 여백을 지정한다.
(태그 사이의 공간을 지정할 때 사용한다.) |
margin: 10px;
기본 사용은 padding과 같다. |
경계선
| 의도 | 설명 | 방법 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 경계면 지정 | 태그를 감싸는 윤곽선을 만든다. | border: solid 10px black;
종류, 크기, 색 순으로 지정.
투명하게 처리하고 싶다면 색에 transparent를 기입하자. | ||||||||||||||
| 모서리 둥글게 | 사각형 버튼 따위의 모서리를 둥글게 만든다. | border-radius: 크기; |
투명도
| 의도 | 설명 | 방법 |
|---|---|---|
| 투명도 지정 | 0~1 사이의 값을 지정한다. 0이면 완전 투명. | opacity: 값; |