TIL 4. HTML/CSS

epi·2021년 3월 18일

CODEIT 수업자료로 복습📝

Padding과 Margin의 차이

Padding과 Margin은 쉽게 헷갈릴 수 있는 개념입니다. 차이를 정확히 집고 넘어갑시다!

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

<Padding>

Padding을 주는 방법에는 몇 가지가 있습니다.

가장 직관적인 방법

우선 가장 직관적인 방법입니다:

p {
  border: 1px solid blue;
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 120px;
  padding-right: 60px;
}

한 줄에

한 줄에 쓰고 싶으면 padding 속성을 쓰면 되는데요. 순서는 위(padding-top)부터 시계 방향으로 하나씩 쓰면 됩니다.

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

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

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

p {
  border: 1px solid blue;
  padding: 50px;
}

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

위, 아래에 50px의 padding을 주고, 왼쪽, 오른쪽에 100px의 padding을 주려면 이렇게 하면 됩니다:

p {
  border: 1px solid blue;
  padding: 50px 100px;
}

<Margin>

요소에게 margin을 주는 방법은 padding을 주는 방법과 똑같습니다.

가장 직관적인 방법

p {
  border: 1px solid blue;
  margin-top: 50px;
  margin-bottom: 40px;
  margin-left: 200px;
  margin-right: 60px;
}

한 줄에

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

그러니까 위의 코드와 똑같이 쓰기 위해서는 이렇게 하면 되는 거죠:

p {
  margin: 50px 60px 40px 200px;
}

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

p {
  margin: 50px;
}

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

p {
  margin: 50px 70px;
}

가운데 정렬

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

HTML

<p>Lorem ipsum dolor sit amet, usu ea deleniti inimicus conceptam. Sit liber feugait consequuntur in, ea eruditi deseruisse per, in nam malis habemus copiosae. Solum assueverit consequuntur duo eu, et duo nulla pertinacia sadipscing. Est dicunt sententiae cu, meliore tincidunt ex vim. Eum no nibh voluptua deserunt.</p>

p {
  border: 1px solid blue;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

가로 길이, 세로 길이

텍스트

요소의 가로 길이(width)와 세로 길이(height)를 설정해봅시다.

p {
  border: 1px solid blue;
  width: 400px;
  height: 300px;
}

이미지

사진의 크기도 똑같이 css에서 설정할 수 있습니다.

.bond-img {
  width: 400px;
  height: 300px;
}

최소, 최대 가로 길이

min-width, max-width로 요소의 최소, 최대 가로 길이를 설정할 수 있습니다.

.p1 {
  border: 1px solid blue;
  max-width: 1000px;
}

.p2 {
  border: 1px solid red;
  max-width: 200px;
}

.p3 {
  border: 1px solid blue;
  min-width: 2000px;
}

.p4 {
  border: 1px solid red;
  min-width: 200px;
}

최소, 최대 세로 길이

min-height, max-height로 요소의 최소, 최대 세로 길이를 설정할 수 있습니다.

.p1 {
  border: 1px solid blue;
  min-height: 400px;
}

.p2 {
  border: 1px solid red;
  min-height: 200px;
}

.p3 {
  border: 1px solid blue;
  max-height: 1000px;
}

overflow 정리

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

이렇게 넘쳐나는 내용물을 overflow 속성으로 처리해줄 수 있는데요. 몇 가지 옵션이 있습니다.

옵션 1: visible

visible 값을 사용하면 넘쳐나는 내용물이 그대로 보입니다. 따로 설정해주지 않으면 이게 기본값입니다!

HTML
CSS

p {
  border: 1px solid blue;
  width: 300px;
  height: 200px;
  overflow: visible;
}

결과 확인

옵션 2: hidden

hidden 값을 사용하면 넘쳐나는 부분을 아예 숨겨줄 수도 있습니다.

HTML
CSS

p {
  border: 1px solid blue;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

결과 확인

옵션 3: scroll

내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법도 있습니다!

HTML
CSS

p {
  border: 1px solid blue;
  width: 300px;
  height: 200px;
  overflow: scroll;
}

결과 확인

옵션 4: auto

scroll과 거의 똑같은데, 한 가지 차이점이 있습니다. scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여줍니다.

참고로 Mac OS에서는 스크롤을 할 때만 스크롤바를 보여주는 경향이 있기 때문에 scroll과 auto의 차이를 보기 힘들 수도 있습니다.

p {
  border: 1px solid blue;
  width: 300px;
  height: 200px;
  overflow: auto;
}

border 정리

한 줄에 끝내기

가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것입니다. 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생깁니다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 파선), 색입니다.

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

.p2 {
  border: 2px dotted #4d9fff;
}

.p3 {
  border: 2px dashed #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> 태그)은 기본적으로 테두리가 설정되어 있습니다. 이런 요소들의 테두리를 없애고 싶으면 직접 border 속성을 설정해주면 되는데요. 두 가지 방법이 있습니다:

border: none;
border: 0;

둥근 모서리

border-radius라는 속성을 사용하면 요소의 모서리를 둥글게 만들 수 있습니다. 더 큰 값을 쓰면 더 둥글게 되는 거죠!

.div1 {
  border: 1px solid green;
  border-radius: 5px;
  margin-bottom: 20px;
}

.div2 {
  border: 1px solid green;
  border-radius: 30px;
}

개별 설정

그냥 border-radius 속성을 사용하면 모서리 네 개 모두 똑같이 둥글게 되는데요. 각 모서리를 개별 설정할 수도 있습니다.

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 속성을 사용하면 배경색을 설정할 수 있습니다. 폰트 색을 설정할 때처럼 색 이름, RGB 코드, HEX 코드 중 하나를 입력하면 됩니다.

h1 {
  background-color: #4d9fff;

페이지 배경색

페이지 전체의 배경색을 설정하고 싶으면 body 태그에 background-color 속성을 입혀주면 됩니다.

그리고 배경색을 투명하게 두고 싶으면 transparent 값으로 설정해주면 되는데, 따로 설정을 해주지 않으면 transparent가 기본값으로 설정됩니다!

body {
  background-color: #4d9fff;
}

h1 {
  background-color: white;
}

h2 {
  background-color: transparent
}

요소에 그림자를 주기 위해서는 box-shadow 속성을 사용하면 되는데요. 기본값은 none입니다. 그림자가 없다는 뜻이죠.

.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: none;
}

결과 확인

그림자 추가

위치 설정

그림자의 위치만 설정해주면 그림자가 나타납니다. 가로 위치와 세로 위치를 설정해줍시다.

.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px;
}

결과 확인

그림자 색 설정

위의 예시를 보시면 그림자가 검정색이죠? 따로 설정해주지 않으면 그림자는 검정색입니다. 만약 다른 색으로 바꾸고 싶으면 box-shadow속성에 추가로 색을 써주면 됩니다.

.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px #4d9fff;
}

흐림 정도 (blur)

box-shadow 속성에서 그림자가 얼마나 흐리게 나올지 설정해줄 수 있습니다. 가로, 세로 위치 뒤에 추가해주면 되는데요. 기본값은 0px입니다.

.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px 10px #4d9fff;
}

그림자 크기 (spread)

그림자가 얼마나 퍼질지도 설정할 수 있습니다. 흐림 값 이후에 써주면 됩니다.

.div1 {
  background-color: #eeeeee;
  width: 400px;
  height: 300px;
  box-shadow: 40px 10px 10px 20px #4d9fff;
}

box-sizing

.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}

.div1과 .div2의 width와 height를 똑같이 설정해줬는데, 결과물을 보면 크기가 서로 다르네요. 그 이유는 width와 height가 테두리(border)와 패딩(padding)을 뺀 내용물(content)의 크기만 나타내기 때문입니다.

따라서 .div1의 실제 가로 길이는 테두리까지 포함한 320px, 세로 길이는 테두리까지 포함한 220px인 거죠. 반면 .div2의 실제 가로 길이는 테두리와 패딩까지 포함한 400px, 세로 길이는 300px입니다.

실제 가로, 세로 크기가 300px, 200px이기 위해서는 테두리와 패딩을 고려해서 계산을 해줘야 한다는 불편함이 있습니다.

해결책: box-sizing

다행히 CSS3부터는 box-sizing 속성을 사용하면 이 문제를 해결할 수 있습니다. 따로 설정해주지 않으면 box-sizing의 기본값은 content-box인데, 이걸 border-box로 바꿔봅시다.

.div1 {
  box-sizing: border-box;
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

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

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

더 간편하게!

box-sizing 속성을 사용하면 너무 편하다 보니, 요즘 많은 개발자들이 모든 요소에 box-sizing: border-box;를 써주는 추세입니다. 이걸 간편하게 한 번에 처리하기 위해서는 모든 요소를 나타내는 *에 속성을 써주면 되겠죠?

* {
  box-sizing: border-box;
}

.div1 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  margin-bottom: 50px;
}

.div2 {
  border: 10px solid red;
  width: 300px;
  height: 200px;
  padding: 40px;
}

background

background-repeat

background-repeat는 이미지를 반복시킬 것인지 아닐 것인지, 그리고 반복시킨다면 어떤 방식으로 반복시킬 것인지 정해주는 속성입니다.
여기에는 우리가 배운 repeat, no-repeat 외에도 다양한 옵션이 있습니다.

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

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

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

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

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

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

body {
  background-color: gray;
}

div {
  width: 300px;
  height: 230px;
  border: 2px solid white;
  background-image: url("https://i.imgur.com/WxH5bez.png");
  margin: 30px;
}

#div1 {
  */* 반복하지 않음 */*background-repeat: no-repeat;
}

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

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

#div4 {
  */* 가로와 세로 모두 반복 */*background-repeat: repeat;
}

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

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

background-size

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

body {
  background-color: gray;
}

div {
  width: 300px;
  height: 230px;
  border: 2px solid white;
  background-image: url("https://i.imgur.com/WxH5bez.png");
  margin: 30px;
  background-repeat: no-repeat;
}

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

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

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

#div4 {
  */* 픽셀값 지정 (가로: 150px, 세로: 10px로 설정) */*background-size: 150px 10px;
}

#div5 {
  */* 픽셀값 지정 (가로: 200px, 세로: 200px로 설정) */*background-size: 200px 200px;
}

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

}

#div7 {
  */* 퍼센트값 지정 (가로: 부모 요소 width의 30%, 세로: 부모 요소 height의 100%로 설정) */*background-size: 30% 100%;
}

background-position

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;

body {
  background-color: gray;
}

div {
  width: 300px;
  height: 230px;
  border: 2px solid white;
  background-image: url("https://i.imgur.com/WxH5bez.png");
  margin: 30px;
  background-repeat: no-repeat;
}

#div1 {
  */* 단어로 지정해주기 (가로: 왼쪽, 세로: 상단) */*background-position: left top;
}

#div2 {
  */* 단어로 지정해주기 (가로: 왼쪽, 세로: 센터) */*background-position: left center;
}

#div3 {
  */* 단어로 지정해주기 (가로: 센터, 세로: 상단) */*background-position: center top;
}

#div4 {
  */* 단어로 지정해주기 (가로: 오른쪽, 세로: 하단) */*background-position: right bottom;
}

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

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

}

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

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

epi

👀

이전 포스트

TIL 3. JSP

다음 포스트

TIL 4. HTML/CSS

Padding과 Margin의 차이

<Padding>

가장 직관적인 방법

한 줄에

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

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

<Margin>

가장 직관적인 방법

한 줄에

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

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

가운데 정렬

가로 길이, 세로 길이

텍스트

이미지

최소, 최대 가로 길이

최소, 최대 세로 길이

overflow 정리

옵션 1: visible

옵션 2: hidden

옵션 3: scroll

옵션 4: auto

border 정리

한 줄에 끝내기

명확하게 나누기

다채로운 테두리

테두리 없애기

둥근 모서리

개별 설정

배경색

페이지 배경색

그림자 추가

위치 설정

그림자 색 설정

흐림 정도 (blur)

그림자 크기 (spread)

box-sizing

해결책: box-sizing

더 간편하게!

background

background-repeat

background-size

background-position

TIL 3. JSP

TIL 5. HTML/CSS

0개의 댓글