1. Padding / Margin
<style>
h1 {
border: 5px solid red;
padding-top: 50px;
padding-bottom: 20px;
padding-left: 80px;
padding-right: 65px;
padding: 50px 65px 20px 80px;
padding: 50px; → 4방면 모두 50px
padding: 50px 25px → 위아래 50px, 좌우 25px
(margin도 동일)
margin-left: auto;
margin-right: auto; → 중앙 정렬
margin: 0 auto; → 중앙 정렬
}
</style>2. width / height (가로 / 세로)
min-width → 해당 요소가 적어도 ??px이어야 한다. (아무리 줄여도 일정크기 이후로는 줄어들지 않음)
max-width → 최대 크기가 지정 (아무리 늘려도 일정 크기 이후로는 늘어나지 않음)
3. overflow
overflow: hidden → 넘쳐나는 부분을 숨겨라!
overflow: visible → 넘쳐나는 부분이 삐져나온다. (안써도 visible이 기본값)
overflow: scroll → 숨기고 스크롤해서 볼 수 있다. (스크롤바를 항상 보여줌)
overflow: auto → 자동으로 조절 (내용물이 넘쳐날 때만 스크롤바를 보여줌)
4. border (테두리)
.p1 {
border: 2px solid #4d9fff;
}
.p2 {
border-style: solid;
border-color: #4d9fff;
border-width: 5px;
}
.p3 {
border-top: 3px dotted #4d9fff; → 윗테두리만 따로 지정
border-bottom: 2px dashed red; → 밑테두리만 따로 지정
}solid(직선) 자리에 대신 쓸 수 있는 단어
1. dotted → 점선
2. dashed → 파선
테두리 없애기 : input태그 등 어떤 요소에는 기본적으로 테두리가 지정되어 있는데 이를 없애고 싶은 경우
1. border: none;
2. border: 0;
5. 박스 꾸미는 몇 가지 방법
border-radius: 50px; → 둥근 모서리
background-color: red; → 배경 색상 지정
background-color: transparent; → 투명한 배경으로 지정
box-shadow: 10px 10px 5px 10px red;
→ 그림자 설정 (가로 위치, 세로 위치, 그림자의 흐린 정도, 그림자의 크기, 그림자 색)
6. box-sizing
그냥 width height을 지정하면 padding과 border 사이즈와는 별개로 내용물의 사이즈만 지정된다. 그럼 전체 사이즈를 지정할 수 있는 방법은 없는걸까?
box-sizing: border-box; → padding과 테두리가 가로세로에 포함된다.
(기본 설정은 content-box)
모든 요소에 같은 스타일을 넣고 싶은 경우
' * { ~~~
}
7. 배경 이미지
background-image: url("경로");
background-repeat: no-repeat;
repeat 자리에 들어가는 다른 코드
1. repeat-x → 가로 방향으로만 반복
2. repeat-y → 세로 방향으로만 반복
3. repeat → 모든 방향으로 반복
4. space → 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분
5. round → 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분
background-size: cover; → 배경을 꽉 채우면서 비율을 유지시킨다. (하지만 잘릴 수 있다)
cover 자리에 들어가는 다른 코드
1. auto → 원래 이미지 사이즈대로 출력
2. contain → 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력
3. 30px 50px → 픽셀값 지정
4. 60% 70% → 퍼센트값 지정
background-position: right bottom; → 잘리지 않을 곳의 기준을 설정
