둔필승총

요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding은 내용과 테두리 사이의 공간이다.

Margin은 요소 주위의 여백, 즉 테두리 밖의 공간이다.

Margin과 Padding 사용법

padding은 다음과 같이 사용한다.

p {
  padding: 위 오른쪽 아래 왼쪽;
}

p {
  padding: 20px 60px 40px 120px;
}

위, 아래, 왼쪽, 오른쪽이 다 같은 경우

만약 위, 아래, 왼쪽, 오른쪽에 똑같은 padding을 주고 싶으면 더 간편하다. 모두 50px의 padding을 주려면 이렇게 하면 된다.

p {
  padding: 50px;
}

Margin도 사용방법이 같기 때문에 따로 코드를 보여주진 않겠다.

요소를 가운데 정렬하고 싶으면 왼쪽과 오른쪽 margin 값을 auto로 설정해줘야 한다. auto는 말 그대로 '자동으로 계산'하라는 뜻이다. 왼쪽과 오른쪽을 auto로 설정하면 자동으로 왼쪽과 오른쪽으로 똑같이 함으로써 요소는 가운데 정렬이 된다.

p {
  margin-left: auto;
  margin-right: auto;
}

Overflow 정리

width, height, max-width, max-height 등을 설정하다 보면 내용물이 들어갈 공간이 부족한 경우가 생긴다. 그럴때 overflow를 사용하여 보여주던가 scroll하던가 숨겨주던가 한다.

1. visible : 넘쳐나는 내용물이 그대로 보여진다. 디폴트 값이다.

p {
  overflow: visible;
}

2. hidden : 넘쳐나는 부분 아예 숨기기

p {
  overflow: hidden;
}

3. scroll : 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법

p {
  overflow: scroll;
}

4. auto : scroll과 거의 똑같음. scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바 보여줌

p {
  overflow: auto;
}

border 정리

border 속성 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색.

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

아니면 명확하게 나눠서 사용하면 된다.

border-width , border-style, border-color 순서대로 이다.

border-style 에는 dotted, dashed, solid 등이 있다.

border를 없애기 위해서는 

border: none;

border: 0;

둘 중 하나를 사용하면 된다.

박스 꾸미는 몇 가지 방법

1. border-radius -> 둥근 모서리 쓰기

(border-top-left-radius, border-top-right-radius, border-bottom-right-radius 이런식으로 각 모서리를 개별 설정 가능)

2. backgroud-color -> 배경색 사용하기

3. backgroud-color: transparent -> 배경색 투명하게

4. box-shadow: 10px 10px 10px 10px red-> 그림자 입히기

(순서대로 1. 위쪽 2. 오른쪽 3. 흐리게 나오는 정도(blur : 기본값 0px) 4. 그림자 크기 설정(spread) 5. 색깔)

box - sizing

width와 height가 border, padding을 뺀 내용물의 크기만 나타나기 때문에 결과물은 달라질 수 있다. width, padding, border를 쓰다보면 원하는 가로 길이를 계산하기 귀찮아지기 때문에 box-sizing으로 간편하게 할 수 있다. 기본값은 box-sizing:content-box;이다.

h1{
 box-sizing:content-box;
}

box-sizing: border-box; 는 너무 편리해서 자주 사용한다.

모든 요소에 쓰고 싶으면 *을 쓰고 속성을 써주면 된다.

*{
 box-sizing:border-box;
}

배경 이미지

background-image:url("")

1. background-repeat

 이미지를 반복시킬 것인지 아닐 것인지, 그리고 반복시킨다면 어떤 방식으로 반복시킬 것인지 정해주는 속성이다.

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

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

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

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

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

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

2. 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%;

3. 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;