1. border : 테두리 / 밑줄 / 구분 선

               선 유형, 굵기, 색상

    [테두리 위치]

border : 위, 오, 아, 왼 전부 테두리

 border-top : 위쪽에만 테두리

border-right : 오른쪽 테두리

border-bottom : 아래 테두리

border-left : 왼쪽 테두리

 [선 유형]

solid : 실선

dotted : 점선

double : 이중선

dashed : 파선

  1. border-radius : 둥근 모서리 → px이 커질 수로 더 동그랗게…

  2. box-shadow : 그림자

    x축, y축, 흐림 정도, 색상

    Untitled

  3. padding : 안쪽 여백 (위, 오, 아, 왼)

    1. padding-top : 위의 안쪽 여백(=테두리와 내용 사이 간격)
    2. padding-right : 오른쪽의 안쪽 여백
    3. paddig-bottom : 아래의 안쪽 여백
    4. padding-left : 왼쪽의 안쪽 여백
    5. padding : px; : 모든 위치의 안쪽 여백
    6. padding : px px; : 위/아래, 왼쪽/오른쪽 세트로 안쪽 여백
    7. padding : px px px px; : 위, 오른쪽, 아래, 왼쪽 안쪽 여백

  4. margin : 바깥 여백 (위, 오, 아, 왼) → 헤더에는 기본적으로 여백이 존재한다.

    1. margin-top : 위 바깥 여백 : 테두리부터 위의 아이템의 여백
    2. margin-right : 오른쪽의 바깥 여백 : 테두리부터 오른쪽의 아이템의 여백
    3. margin-bottom : 아래의 바깥 여백 : 테두리부터 아래의 아이템의 여백
    4. margin-left : 왼쪽의 바깥 여백 : 테두리부터 왼쪽의 아이템의 여백
    5. margin : px; : 모든 위치의 바깥 여백
    6. margin : px px; : 위/아래, 왼쪽/오른쪽 세트로 바깥 여백
    7. margin : px px px px; : 위, 오른쪽, 아래, 왼쪽 바깥 여백

  5. width : 가로 사이즈

    1. width 생략 시 → 100%

  6. height : 세로 사이즈

  7. 가운데 정렬

    1. text-align : center ; : 구역[box]의 내용[contents]정렬
    2. margin : 0 auto; : 구역[box]의 가운데 정렬

  8. box-sizing

    1. box-sizing : content-box; : [기본 값] width를 내용[contents] 기준으로 잡을 것인가 → 사이즈 고정 X → 내용물이 크면 자동으로 커짐
    2. box-sizing : border-box; : width를 테두리[border] 기준으로 잡을 것인가. → 사이즈 고정 O : 넘치는 문제점

  9. 색상

    1. color : 폰트 색상
    2. background-color : 배경 색상
    3. 색상 표현 방법
      1. RGB : 빨초파 혼합한 색상 0~255
      2. Hex color : 16진수 이용한 색상 표현
      3. 키워드 : CSS키워드
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title> css 박스</title>
			<link href = "4.css_box.css" rel = "stylesheet"/>
		</head>
		<body>
			<h3> 박스권 설정 </h3>
			<h4> box1 </h4>
			<h5> box2 </h5>
			<h6> box3 </h6>
			
			<h2> box2 </h2>
			<h1> box1 </h1>
			<p class = "box1">
				p_box1p_box1p_box1p_box1
			</p>
			<p id = "box2">
				p_box2p_box2p_box2p_box2
			</p>
			
		</body>
	</html>

@charset "UTF-8";

/* css 주석 */
/* 준비물 : 누구[선택자/식별자]를 어떻게 꾸밀건지? */
/* 1. 선택자 2. 속성 3. 속성 값 */

h4{
	border : solid 1px red ;
}

h5{
	border-top : solid 1px skyblue;
	border-right : dotted 1px orange;
	border-bottom : double 1px red;
	border-left : dashed 1px black;
	border-radius: 5px;
	box-shadow: 5px 5px 5px purple;
}

h6{
	border : solid 2px red;
	/* 안쪽 여백 : 테두리와 내용 사이 간격 */
	padding-top : 20px ;    /* 위 안쪽 여백 : 테두리와 내용 사이 위 간격 */
	padding-right : 10px;
	padding-bottom : 30px;
	padding-left : 40px;
	
	/* 바깥 여백 : 테두리부터 근처 아이템의 여백*/
	margin-top : 40px;    /* 위 바깥 여백 : 테두리부터 위의 아이템의 여백*/
	margin-right: 30px;   /* 오른쪽 바깥 여백 : 테두리부터 오른쪽의 아이템의 여백*/
	margin-bottom: 20px;  /* 아래 바깥 여백 : 테두리부터 아래의 아이템의 여백*/
	margin-left: 10px     /* 왼쪽 바깥 여백 : 테두리부터 왼쪽의 아이템의 여백*/
}

h2{
	border : solid 1px green;
	padding : 10px; /* 모든 위치의 안쪽 여백 */
	padding : 10px 20px; /* 위/아래, 왼쪽/오른쪽*/
	padding : 10px 20px 30px 40px; /*위, 오른쪽, 아래, 왼쪽*/
	
	margin : 20px; /* 모든 위치의 바깥 여백 */
	margin : 10px, 20px; /*위/아래, 왼/오*/
	margin : 10px 20px 30px 40px; /*위, 오른쪽, 아래, 왼쪽*/
}

h1{
	width : 200px; /* 가로 사이즈, margin : 0 auto를 하려면 크기 지정을 해줘야 가운데 정렬 의미가 있음*/
	border : dotted 1px orange; /* 테두리가 없으면 margin : 0 auto를 했는지 알기 어려움*/
	text-align : center; /* 박스 안에서의 텍스트 가운데 정렬(박스 권안에서)*/
	margin : 0 auto; /* 박스의 가운데 정렬(박스 자체의) */
}

/* 클래스 . 식별자/선택자 */
.box1{
	width : 100px;
	margin : 60px;
	padding : 60px; 
	border : solid 10px red;
	box-sizing : border-box;  /* width를 border 기준으로 잡을 것인가. */
}

/* 아이디 # 식별자/선택자 */
#box2{
	width : 100px;
	margin : 60px;
	padding : 60px; 
	border : solid 10px red;
	box-sizing : content-box; /* width를 내용[contents] 기준으로 잡을 것인가. */
}