복습!
selector
기본선택자
모든 요소 *
태그명 type 선택자 : div
class 주로 제일 많이 사용하는 선택자, BEM 형식으로 작명
id 유일한 값으로 사용하기
컬러 처리 방식
RGB, HEX( # 붙이기), HSL
색상이 없는 것 회색
크기, 박스모델
magin 크기에는 영향을 주지 않지만 배치에 영향을 준다.
크기 content, padding, border
계층구조 content 자식요소(하위요소)
디자인 시
오버 플로어 처리를 어떻게 할 것인지도 결정해야 한다.
기본값은 컨텐츠 박스인데 보더 박스를 더 많이 사용한다.
padding 속성으로 2방향의 여백지정(위/왼쪽)
padding : 10px 0 0 15px;
공백으로 차이를 둔다.
아래 두 속성은 같은 값을 가진다.
padding : 10px 0 0 0; == padding-top : 10px;
3방향은 같은 여백, 한 방향만 다른 여백을 주는 경우
padding : 10px; padding-left: 30px;
전체적으로 주고 난 후에 더 주고 싶은 방향만 여백을 더 주는 경우
여백
1. 바깥쪽 여백(margin)
대부분의 내용은 안쪽 여백과 동일하다.
요소의 크기에는 영향을 주지 않는다.
약간이지만 위치에 영향을 주는 속성
방향은 똑같이 4 방향, padding과 같음
속성
1) margin-top
2) margin-right
3) margin-bottom
4) margin-left
5) margin(시계방향)
요소의 가운데 정렬
auto 값을 사용 (가로만 가능, 세로는 X)
예) margin : 0 auto; (위아래는 여백이 없고, 좌우는 동일하다.)
padding 에는 적용이 되지 않는다.
margin을 잘못 주면 오버플로어가 생긴다.
밀려나감 == 오버 플로어
디자인을 적용할 때 잘 적용해야 한다.
px 단위로 사용하는 것이 그나마 수월하다.
전체선택자를 선택해서 magin과 padding을 사용하여 0으로 만들고 사용하는 것이 제일 편하다.
ex> 구글 홈페이지 첫 화면
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바깥 쪽 여백</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 150px;
height: 100px;
border: 1px solid;
}
.b1 {
border-color: rgb(224, 138, 32);
/* padding: 10px; */
overflow: auto;
margin: 10px auto; /*위아래는 여백이 없고, 좌우 같은 여백을 자동으로 준다는 의미
창 크기에 따라서 가운데 정렬이 된다.
세로는 auto가 되지 않는다.*/
}
.b2 {
box-sizing: border-box;
width: 100%;
height: 100%;
/* margin: 15px 10px 20px 5px; */
/* margin-top: 10px; */
}
</style>
</head>
<body>
<div class="b1">
<div class="b2">박스</div>
</div>
</body>
</html>테두리(border)
요소의 테두리 선을 표현하는 속성
여백과 마찬가지로 4방향에 따로 테두리를 설정할 수 있다.
1) border-style : 테두리의 종류(선의 모양)
border-top-style
border-right-style
border-bottom-style
border-left-style
2) border-width : 테두리의 두께 (px로 정해주는 것이 좋다)
3) border-color : 테두리의 색상
4) border-radius : 모서리의 반지름(둥근 모서리)
4방향을 다르게 설정가능하다. 좌측상단부터 시작 시계방향
5) border : 두께 종류 색상 순으로 작성(단축 속성, 4방향을 똑같이 적용)
두께와 종류는 반드시 작성해야 한다. 색상은 작성하지 않으면 검정
none, hidden 둘 다 보여지는 모습을 같으나 차이가 존재한다.
둥근 모서리의 경우 한 변의 값의 50% 이상
이 되면 효과가 나타나지 않는다.
예) 아랫쪽 선만 두꺼운 테두리
border: 1px soild red;
border-bottom-width: 5px;
<style>
div {
width: 200px;
background-color: rgba(99, 230, 169, 0.575);
border-width: 5px;
/*thin ==1px, medium ==3px, thick ==5px*/
margin-bottom: 20px;
padding: 5px;
}
#b0 {
border-style: solid;
/* border-top-width: 1px; */
border-width: thick thin medium thick;
}
#b1 {
border-style: dotted;
}
#b2 {
border-style: dashed;
}
#b3 {
border-style: double;
}
#b4 {
border-style: groove;
}
#b5 {
border-style: ridge;
}
#b6 {
border-style: inset;
}
#b7 {
border-style: outset;
}
#b8 {
border-style: solid;
border-left-style: none;
border-top: hidden;
}
#b9 {
border-style: hidden;
}
#b10 {
border-style: solid;
height: 50px;
border-radius: 25px;
box-sizing: border-box;
}
#b11 {
border-style: solid;
/* border-top-left-radius: 20px; */
border-radius: 25px 15px;
}
</style>
min/max
1) min : 지정된 값 미만으로 줄지 않는 요소로 설정, 줄어들지 않는다.
2) max : 지정된 값 초과로 커지지 않는 요소로 설정, 커지지 않는다.
예) max-width: 500px;
창의 크기게 맞춰 커지다가 500px부터는 커지지 않는다.
디자인이 깨지는 것을 방지하기 위해서 min-width을 많이 지정하여 쓴다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최소, 최대 너비</title>
<style>
div {
height: 100px;
margin: 20px auto; /* 현재 창 전체가 지정되어 있기 때문에 가운데 정렬이 안된다.*/
}
#b1 {
background-color: lightpink;
width: 500px;
}
#b2 {
background-color: lightgoldenrodyellow;
min-width: 500px;
/* 창의 크기가 가로 길이가 500px보다 작아지면 스크롤이 나타나고 커지면 스크롤이 없어진다. */
}
#b3 {
background-color: lightskyblue;
max-width: 500px;
}
</style>
</head>
<body>
<div id="b1">일반</div>
<div id="b2">min-width</div>
<div id="b3">max-width</div>
</body>
</html>
'공부기록 > CSS' 카테고리의 다른 글
| 2월 22일 (2) CSS 공간 처리 (0) | 2023.02.22 |
|---|---|
| 2월 22일 (1) CSS font (0) | 2023.02.22 |
| 2월 21일 (2) CSS 배경, 텍스트 처리 (0) | 2023.02.21 |
| 2월 20일 (2) CSS 기본 선택자, box-sizing, padding (0) | 2023.02.20 |
| 2월 20일 (1) CSS 기초 (2) | 2023.02.20 |
