선택자
자식 선택자 >
부모 선택자 <
형제 선택자 ~
글자 가로 가운데 정렬
text-align : center; // 문자 가로 중앙 정렬
글자 세로 가운데 정렬
line-height : (부모의 높이); // 문자 세로 가운데 정렬
vertical-align:middle
요소 중앙 정렬
부모
position: relative;
자식
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
요소 가운데 정렬
margin : auto;
컨텐츠에 맞게 크기 조절
width : fit-content;
왼쪽으로 띄우기
float: left
width: 100%; // 부모 넓이의 100%
height: 100%; // 부모 높이의 100%
width: 100vw; // 현재 창 넓이의 100분의 100
height: 100vh; // 현재 창 높이의 100분의 100
문자가 박스 밖으로 못나가게 하기
word-break: break-alll;
Input 박스 선택시에 outline 없애기
input:focus {
outline: none;
}
Input 박스 선택시 화살표 없애기
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance:
none;
margin: 0;
}
border까지 포함해서 크기 고정하기
box-sizing: border-box;
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}