CSS:위치와 모양

틀:CSS. css에 대한 문서들을 담아두기 위한 틀.

1. CSS:개요
2. CSS:선택자
3. CSS:크기척도
4. CSS:텍스트
5. CSS:아이콘
6. CSS:속성
   1. CSS:색
   2. CSS:위치와 모양
   3. CSS:Flexbox
   4. CSS:기타속성
7. CSS:변수
8. 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:
자식 크기가 클 때	자식 크기가 부모크기보다 클 때 어떻게 처리할지를 결정한다. 옵션 설명 hidden 넘치면 보이지 않게 한다. scroll 넘치면 스크롤바르 이용. visible 밖으로 터져나가도 그냥 두기. overflow-x: hidden; overflow-y: scroll; 형식으로 축에 대해 정할 수도 있다.	overflow: hidden;

여백

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

경계선

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

투명도

의도	설명	방법
투명도 지정	0~1 사이의 값을 지정한다. 0이면 완전 투명.	opacity: 값;