01. Box Model 소개

실제 내용 > 내용과 테두리 사이 여유 공간 (padding) > 테두리 > 이 요소와 다른 요소 사이의 간격 ( margin )

h1 {
  border : 5px solid red; // 5px 빨간색 실선 테두리
  margin-top : 100px; // 테두리 바깥에 100px 여백
  padding-bottom : 50px; // 상자와 글 사이에 50px씩 여백
  width : 500px; // box 길이 설정
  height : 300px; // box 높이 설정  
}

02. margin, padding

가장 직관적인 방법(margin, padding 동일)

.p1 {
  padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 80px;
  padding-right: 65px;
}

한 줄로 줄이기(margin, padding 동일)

.p1 {
  padding: 50px 65px 20px 80px; //시계방향
  padding : 50px; // 사방향 값 다 같은 경우
  padding : 50px 25px; 위아래 같고, 왼오 같은 경우
}

요소 가운데 정렬

.p1 {
  margin-left : auto; // auto는 브라우저에게 알아서 계산하라는 것
  margin-right : auto;
  
  margin: 0 auto; // 위아래로는 margin 없고 왼오로는 반반
}

Padding과 Margin의 차이

요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져있다.
Padding은 내용과 테두리 사이의 '여유 공간'인 반면에
Margin은 요소 주위의 여백이다. 즉, 테두리 밖의 공간이다.

03. width, height

width : 가로길이
height : 세로길이

.p1 {
  width : 500px;
  height : 500px;
}

max-width : 가로 최대 길이
min-width : 가로 최소 길이

.p1 {
  min-width : 500px; // 이 요소의 가로길이가 적어도 500px이어야 한다. 
  : 화면이 500px보다 적더라도 요소가 더 좁혀지지 않음. 
  max-width : 500px; // 이 요소의 가로길이가 최대 500px이어야 한다. 
  : 화면이 최대 500px이어야 하기 때문에 창을 넓혀도 요소가 넓어지지 않음.
}

max-height : 세로 최대 길이
min-height : 세로 최소 길이

.p1 {
  min-height : 500px; // 이 요소의 세로길이가 적어도 500px이어야 한다. 
  max-height : 500px; // 이 요소의 세로길이가 최대 500px이어야 한다. 
}

04. overflow

width, height, max-width, max-height 등을 설정하다 보면 내용물이 들어갈 공간이 부족한 경우

1. hidden : 튀어나온 내용물을 숨기는 경우
2. visible : 튀어나온 내용물을 그냥 두는 것 (기본값)
3. scroll : 튀어나온 내용물을 숨기고, scroll 하면 볼 수 있다.
   (내용물이 적어도 scroll 바가 있음)
4. auto : 내용이 넘쳐날 때만 scroll, scroll 바가 있음.

.p1 {
  overflow : hidden;
  overflow : visible;
  overflow : scroll;
  ocerflow : auto; 
}

💡 overflow-x : 가로(x축)에 대한 overflow 속성
💡 overflow-y : 세로(y축)에 대한 overflow 속성

05. border

border : 굵기, 스타일(실선, 점선 등), 색;

일반적인 방법으로 border 속성으로 한 줄에 다 쓰는 것이다.

.p1 {
  border : 2px solid #4d9fff;
}

border-style, border-color, border-width 속성 사용

테두리의 스타일을 하나씩 지정해주는 방법이다.

.p1 {
  border-style : dotted;
  border-color : red;
  border-width : 5px;
}

다채로운 테두리

4면 다 다르게 설정해주고 싶을 때 사용하는 방법이다.

.p1 {
  border-top: 3px dotted #4d9fff;
  border-bottom: 2px dashed red;
  border-left: 5px solid green;
}

테두리 없애기

어떤 요소들(input태그)은 기본적으로 테두리가 설정되어 있다. 이런 요소들의 테두리를 없애고 싶을 때 속성 설정해주면 된다.

1. border : none;
2. border : 0;

06. box decoration 방법

border-radius : 둥근 모서리

.div {
  border-radius : 5px;
}

개별 설정 시

h1 {
  border : 1px solid green;
  border-top-left-radius : 50px;
  border-top-right-radius : 5px;
  border-bottom-right-radius : 0px;
  border-bottom-left-radius : 20px;
}

background-color : 배경색

h1 { 
  background-color : #4d9fff;
}

페이지 전체의 배경색 설정 경우 body 태그에 설정해주기
배경색을 투명하게 두고 싶은 경우 transparent 값으로 설정 (기본값)

body { 
  background-color : #4d9fff;
}

h1 { 
  background-color : transparent;
}

box-shadow : 그림자

요소에 그림자를 주기 위해서는 box-shadow 속성 사용. 기본값은 none

.div {
  box-shadow : 40px 10px; // 가로위치 세로위치
  box-shadow : none; // 그림자 없음
  box-shadow : 40px 10px #4d9fff; // 가로위치 세로위치 색
  box-shadow : 40px 10px 10px #4d9fff; // 가로위치 세로위치 흐림정도(blur) 색 
  box-shadow : 40px 10px 10px 20px #4d9fff; // 가로위치 세로위치 흐림정도 그림자크기 색 

box-sizing

border과 padding 값 계산하지 않고 box 사이즈를 설정해주고 싶을 때 사용

box-sizing 속성을 border-box 값으로 설정해주면 width와 height는 테두리와 패딩과 내용물을 모두 포함한 길이가 된다. 따라서 더 이상 귀찮은 계산을 할 필요가 없어진다.

box-sizing의 기본값은 content-box!

.div1 {
  box-sizing : border-box;
  border : 10px solid red;
  width : 300px;
  height : 200px;
  padding : 40px;
}

💡 모든 요소에 입혀주기 위해서

// *을 쓰고 안에 모든 요소에 입혀줄 부분을 적어주기
* { 
  box-sizing : border-box;
} 

💡 요소에 기본적으로 적용되면 좋을 속성들 : css reset, 구글링

07. 배경이미지

background-image

.div1 {
  background-image : url ("../images/beach.jpg");
}

background-repeat

이미지를 반복시킬 것인지 어떤 방식으로 반복시킬 것인지 정해주는 속성

/* 반복하지 않음 */
background-repeat : no-repeat;

/* 가로 방향으로만 반복 */
background-repeat : repeat-x;

/* 세로 방향으로만 반복 */
background-repeat : repeat-y;

/* 가로와 세로 모두 반복 */
background-repeat : repeat;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */
background-repeat : space;

/* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */
background-repeat : round;

background-size

배경 이미지의 사이즈를 정해주는 속성

/* 원래 이미지 사이즈대로 출력 */
background-size : auto;

/* 화면을 꽉 채우면서, 사진 비율을 유지 */
background-size : cover;

/* 가로, 세로 중 먼저 채워지는 쪽에 맞추어서 출력 */
background-size : contain;

/* 픽셀값 지정 ( 가로 : 30px, 세로 : 50px로 설정 ) */
background-size : 30px 50px;

/* 퍼센트값 지정 ( 가로 : 부모 요소 width의 60%, 세로 : 부모 요소 height의 70%로 설정 ) */
background-size : 60% 70%;

background-position

배경 이미지의 위치를 정해주는 속성

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */
/* 아래와 같은 총 9개의 조합이 가능 */
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;

/* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */
background-position: 25% 75%;

/* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */
background-position: 100px 200px;