배경색 (Background colors)
background-color 속성은 CSS에서 어떤 요소에든 배경색을 지정할 수 있게 해줍니다. 이 속성은 유효한 <color> 값이라면 무엇이든 허용합니다. background-color는 요소의 콘텐츠(글자 등)와 패딩(padding) 영역의 맨 아래 바닥까지 깔리게 됩니다.
아래 예제에서는 여러 가지 색상 값을 사용해서 박스(box), 제목(heading), 그리고 <span> 요소에 배경색을 추가해 보았습니다.
예제를 직접 수정하면서 지정된 색상들을 사용 가능한 다른 <color> 값들로 마음껏 바꿔보세요.
<div class="box">
<h2>Background Colors</h2>
<p>Try changing the background <span>colors</span>.</p>
</div>.box {
padding: 0.3em;
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
span {
background-color: rgb(255 255 255 / 50%);
}MDN Playground에서 직접 예제 코드 만져보기
배경 이미지 (Background images)
background-image 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예제에는 두 개의 박스가 있습니다. 하나는 박스보다 크기가 큰 배경 이미지(balloons.jpg)를 가지고 있고, 다른 하나는 단일 별 모양의 작은 이미지(star.png)를 가지고 있어요.
이 예제는 배경 이미지에 대한 두 가지 중요한 사실을 보여줍니다. 기본적으로 아주 큰 이미지는 박스 크기에 맞춰 축소되지 않기 때문에 이미지의 작은 모서리 일부분만 보이게 됩니다. 반대로 작은 이미지는 마치 타일처럼 반복되어 박스 전체를 채우게 되죠.
<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
</div>.wrapper {
display: flex;
}
.box {
width: 200px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.a {
background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
}
.b {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
}MDN Playground에서 직접 예제 코드 만져보기
배경 이미지와 함께 배경색(background-color)을 추가로 지정하면, 이미지는 항상 배경색의 위(top)에 표시됩니다.
위 예제에 background-color 속성을 추가해서 이미지가 어떻게 배경색 위에 올라가는지 직접 확인해 보세요.
background-repeat 제어하기 (Controlling background-repeat)
background-repeat 속성은 이미지가 바둑판처럼 타일링(tiling)되는 방식을 제어하는 데 사용됩니다. 사용할 수 있는 값들은 다음과 같아요:
no-repeat— 배경이 아예 반복되지 않도록 막습니다. (이미지가 딱 하나만 나옵니다.)repeat-x— 가로(수평) 방향으로만 반복합니다.repeat-y— 세로(수직) 방향으로만 반복합니다.repeat— 기본값입니다. 가로, 세로 양방향으로 모두 반복합니다.space— 남는 여백이 있다면 이미지들 사이에 균일한 공간을 추가하면서 가능한 한 많이 반복합니다.round—space와 비슷하지만, 여백을 남기는 대신 이미지 자체를 늘리거나 줄여서 빈 공간 없이 딱 맞게 채웁니다.
아래 예제에서 이 값들을 직접 테스트해 보세요. 처음에는 값이 no-repeat로 설정되어 있어서 별이 딱 하나만 보일 거예요. 다른 값들을 하나씩 넣어보면서 어떤 효과가 나타나는지 눈으로 확인해 보세요.
<div class="box"></div>.box {
width: 200px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
}MDN Playground에서 직접 예제 코드 만져보기
배경 이미지 크기 조절하기 (Sizing the background image)
아까 첫 번째 배경 이미지 예제에서 사용했던 balloons.jpg는 요소의 크기보다 커서 이미지가 잘려(cropped) 보였죠. 이런 경우에는 background-size 속성을 사용해서 이미지가 배경 안에 잘 맞도록 크기를 조정할 수 있습니다.
background-size는 가로와 세로 방향의 크기를 지정하기 위해 두 개의 <length>(길이) 값이나 <percentage>(백분율) 값을 받을 수 있고, 혹은 아래와 같은 강력한 키워드를 사용할 수도 있습니다:
cover— 브라우저가 이미지의 가로세로 비율(aspect ratio)을 유지하면서, 박스 영역을 완전히 덮을 수 있도록 이미지를 꽉 차게 확대(또는 축소)합니다. 이 과정에서 이미지의 일부분이 박스 밖으로 삐져나가 잘릴 수 있습니다.contain— 브라우저가 이미지 전체가 박스 안에 온전히 다 보이도록 크기를 맞춥니다. 이미지와 박스의 가로세로 비율이 다를 경우, 위아래나 양옆에 빈 공간(레터박스)이 생길 수 있습니다.
background-size 가지고 놀아보기
아래 예제에서는 balloons.jpg 이미지가 박스 안에 딱 맞게 들어가도록 길이 단위(px)가 설정되어 있습니다. 하지만 이 때문에 이미지가 찌그러진(distorted) 걸 보실 수 있을 거예요.
직접 다음 사항들을 시도해 보세요:
- 배경 크기를 수정하기 위해 설정된 길이 단위를 바꿔보세요.
- 길이 단위를 지우고,
background-size: cover나background-size: contain을 대신 넣었을 때 어떻게 되는지 확인해 보세요. - 이미지를 박스보다 훨씬 작게 설정한 다음,
background-repeat값을 변경해서 이미지가 반복되도록 만들어 보세요.
<div class="box"></div>.box {
width: 500px;
height: 100px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 10px;
}
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
background-repeat: no-repeat;
background-size: 80px 10em;
}MDN Playground에서 직접 예제 코드 만져보기
배경 이미지 위치 잡기 (Positioning the background image)
background-position 속성을 사용하면 배경 이미지가 박스 안의 어느 위치에 나타날지 마음대로 지정할 수 있습니다. 이 속성은 박스의 왼쪽 상단 모서리를 (0,0)으로 하는 좌표계를 사용하며, 가로(x축)와 세로(y축)를 따라 박스가 배치됩니다.
참고:
background-position의 기본값은 좌측 상단인(0,0)입니다.
가장 흔하게 쓰이는 background-position 값은 두 개의 개별 값(가로 위치가 먼저, 그다음이 세로 위치)을 사용하는 형태입니다. top, right 같은 키워드를 사용할 수 있습니다 (다른 키워드들은 background-position 페이지에서 확인해 보세요):
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: top center;
}길이(lengths)나 백분율(percentages)을 사용할 수도 있습니다:
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 20px 10%;
}키워드 값과 길이나 백분율을 섞어서 쓰는 것도 가능한데, 이때 첫 번째 값은 가로 위치를, 두 번째 값은 세로 위치를 나타냅니다. 예를 들면:
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: 20px top;
}마지막으로, 박스의 특정 가장자리(edge)로부터 떨어진 거리를 정확히 명시하기 위해 4-값 구문(4-value syntax)을 사용할 수도 있습니다. 각 값의 쌍은 기준이 될 가장자리와 그 가장자리로부터 띄울 오프셋(offset) 거리를 나타냅니다. 아래 코드 조각에서는 배경을 맨 위(top)에서 20px, 오른쪽(right)에서 10px 떨어진 곳에 배치하고 있습니다:
.box {
background-image: url("image.png");
background-repeat: no-repeat;
background-position: top 20px right 10px;
}background-position 가지고 놀아보기
아래 예제를 활용해서 값들을 바꿔보면서 박스 안의 별을 원하는 곳으로 자유롭게 이동시켜 보세요:
<div class="box"></div>.box {
width: 500px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.box {
background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
background-repeat: no-repeat;
background-position: 120px 1em;
}MDN Playground에서 직접 예제 코드 만져보기
참고:
위 예제들에서는 각 축의 위치를 개별적으로 설정할 수 있는background-position-x나background-position-y대신 한 번에 설정할 수 있는 축약형인background-position을 사용했습니다. 실무에서도 이 축약형을 훨씬 많이 씁니다!
그라데이션 배경 (Gradient backgrounds)
놀랍게도 CSS에서 그라데이션(Gradient)은 배경으로 쓰일 때 완벽하게 '이미지'처럼 작동합니다. 그래서 배경색 속성이 아니라 background-image 속성을 사용해서 설정해야 해요.
그라데이션 값의 다양한 종류와 활용법에 대해서는 MDN의 <gradient> 데이터 타입 페이지에서 자세히 확인할 수 있습니다.
아래 예제에서 다양한 그라데이션 값들을 시도해 보세요. 현재 첫 번째 박스에는 영역 전체에 늘어나는 선형 그라데이션(linear gradient)이, 두 번째 박스에는 고정된 크기를 가지고 반복되는 방사형 그라데이션(radial gradient)이 적용되어 있습니다.
💡 강사님의 실무 팁!
버튼이나 배너를 디자인할 때 단순한 단색 배경보다는 은은한 선형 그라데이션을 주면 훨씬 입체감 있고 세련된, 모던한 UI를 완성할 수 있어요.
<div class="wrapper">
<div class="box a"></div>
<div class="box b"></div>
</div>.wrapper {
display: flex;
}
.box {
width: 400px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.a {
background-image: linear-gradient(
105deg,
rgb(0 249 255 / 100%) 39%,
rgb(51 56 57 / 100%) 96%
);
}
.b {
background-image: radial-gradient(
circle,
rgb(0 249 255 / 100%) 39%,
rgb(51 56 57 / 100%) 96%
);
background-size: 100px 50px;
}MDN Playground에서 직접 예제 코드 만져보기
참고:
그라데이션을 가장 쉽고 재밌게 다루는 방법은 인터넷에 많이 있는 CSS 그라데이션 생성기(예: CSSGradient.io)를 사용하는 것입니다. 시각적으로 예쁜 그라데이션을 직접 만들고, 생성된 소스 코드를 복사해서 붙여넣기만 하면 되거든요!
다중 배경 이미지 (Multiple background images)
단 하나의 선언 안에 여러 개의 배경 이미지를 지정하는 것도 가능합니다. 쉼표(,)로 background-image 값들을 여러 개 구분해서 적어주기만 하면 됩니다.
이렇게 여러 장을 겹쳐 쓸 경우 배경 이미지들이 서로 겹칠(overlap) 수 있는데요. 배경이 쌓이는 순서(stacking order)는, 코드 목록의 맨 마지막에 적은 배경 이미지가 스택의 제일 밑바닥에 깔리고, 이전에 적은 이미지일수록 코드 뒤에 오는 이미지의 위(top)로 하나씩 차곡차곡 쌓이게 됩니다.
참고:
일반적인 이미지와 그라데이션 이미지를 서로 섞어서 사용하는 것도 아무 문제 없이 잘 작동합니다.
background-image와 마찬가지로 나머지 background-* 관련 속성들에도 동일하게 쉼표로 구분된 값들을 줄 수 있습니다:
background-image:
url("image1.png"), url("image2.png"), url("image3.png"), url("image4.png");
background-repeat: no-repeat, repeat-x, repeat;
background-position:
10px 20px,
top right;각 속성의 값들은 적어준 순서대로 짝이 지어집니다. 예를 들어 위의 코드에서 image1의 background-repeat 값은 no-repeat이 되는 식이죠.
하지만 만약 각 속성별로 적어준 값의 개수가 서로 다르면 어떻게 될까요? 정답은 가장 적게 적힌 값들이 순환(cycle)한다는 것입니다. 위 예제를 보면 이미지는 4장인데 background-position 값은 2개밖에 없죠. 이 경우 첫 두 위치 값은 첫 두 이미지에 적용되고, 위치 값이 모자라니 다시 맨 처음 값으로 돌아와서 image3에는 첫 번째 위치 값이, image4에는 두 번째 위치 값이 적용되게 됩니다!
다중 배경 이미지 가지고 놀아보기
같이 한 번 테스트해 봅시다. 아래 예제에는 두 개의 배경 이미지가 포함되어 있습니다. 다음과 같이 코드를 수정해 보세요:
- 이미지가 쌓이는 순서(stacking order)를 확인하기 위해 목록에서 어떤 배경 이미지가 먼저 오는지 순서를 바꿔보세요.
- 다른
background-*속성들을 추가해서 이미지의 위치, 크기, 반복 여부를 변경해 보세요. - 세 번째
background-image자리에 그라데이션을 추가해 보세요.
<div class="wrapper">
<div class="box"></div>
</div>.wrapper {
display: flex;
}
.box {
width: 500px;
height: 80px;
padding: 0.5em;
border: 1px solid #cccccc;
margin: 20px;
}
.box {
background-image:
url("https://mdn.github.io/shared-assets/images/examples/star.png"),
url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}MDN Playground에서 직접 예제 코드 만져보기
배경 스크롤 고정 (Background attachment)
우리가 배경을 다룰 때 사용할 수 있는 또 다른 강력한 옵션은, 스크롤을 내릴 때 배경 이미지가 같이 스크롤되게 할지 말지를 결정하는 것입니다. 이는 background-attachment 속성으로 제어하며 다음과 같은 값을 가질 수 있습니다:
scroll: 페이지를 스크롤할 때 요소의 배경도 같이 스크롤됩니다. 단, (요소 자체에 스크롤바가 생겨서) 요소의 내부 콘텐츠를 스크롤할 때는 배경이 움직이지 않습니다. 즉, 배경이 페이지 전체를 기준으로 고정되어 있어 페이지와 함께 위아래로 이동하는 셈입니다.fixed: 요소의 배경이 화면(viewport)에 찰싹 고정됩니다. 따라서 페이지를 스크롤하든 요소 내부를 스크롤하든 배경은 전혀 움직이지 않고 화면상 항상 같은 위치에 머물러 있게 됩니다.local: 배경이 그것이 적용된 '요소' 자체에 고정됩니다. 그래서 요소 내부의 스크롤바를 움직이면 배경도 내부 콘텐츠와 함께 스크롤됩니다.
💡 강사님의 실무 팁!
background-attachment: fixed를 잘 활용하면, 마우스로 스크롤을 내릴 때 콘텐츠만 위로 올라가고 배경 이미지는 마치 창문 너머 풍경처럼 가만히 멈춰있는 멋진 패럴랙스(Parallax) 효과를 자바스크립트 한 줄 없이 아주 손쉽게 만들어낼 수 있습니다. 포트폴리오 사이트 만들 때 꼭 써먹어 보세요!
background-attachment 속성은 실제로 스크롤할 내용이 있어야만 그 차이를 알 수 있습니다. 그래서 이 세 가지 값의 차이점을 극명하게 보여주기 위해 데모 페이지를 만들어 두었습니다. background-attachment.html을 클릭해서 직접 눈으로 확인해 보세요. (코드 원본은 여기서 확인하실 수 있습니다.)
배경 축약 속성 사용하기 (Using the background shorthand property)
실무 코드를 열어보면 여러 속성을 하나로 뭉쳐놓은 background 축약(shorthand) 속성을 정말 자주 보게 되실 겁니다. 한 줄로 배경과 관련된 모든 속성을 한꺼번에 설정할 수 있어서 타이핑을 획기적으로 줄여주거든요.
만약 다중 배경(여러 이미지)을 사용한다면, 첫 번째 배경에 대한 모든 속성 값들을 쭉 나열하고 쉼표를 찍은 뒤, 그다음 배경에 대한 속성들을 이어 적으면 됩니다. 아래 예제를 보면, 먼저 크기와 위치를 가진 그라데이션이 오고, 그다음 no-repeat과 위치가 지정된 이미지 배경이 오며, 마지막으로 배경 색상이 추가된 것을 볼 수 있습니다.
배경 축약 속성을 작성할 때는 반드시 지켜야 할 몇 가지 규칙이 있습니다:
background-color(배경색)는 반드시 목록의 제일 마지막 쉼표 뒤에 단 한 번만 지정할 수 있습니다.background-size값은 반드시background-position값 바로 뒤에 슬래시(/)로 구분해서 적어야 합니다. 예를 들면 이렇게요:center/80%. (이 문법을 지키지 않으면 CSS가 에러를 뱉고 작동하지 않으니 주의하세요!)
축약 문법에 대한 더 자세한 내용과 규칙은 MDN의 background 페이지에서 꼼꼼히 확인해 보세요.
<div class="box"></div>.box {
width: 500px;
height: 300px;
padding: 0.5em;
background:
linear-gradient(
105deg,
rgb(255 255 255 / 20%) 39%,
rgb(51 56 57 / 100%) 96%
)
center center / 400px 200px no-repeat,
url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
center no-repeat,
rebeccapurple;
}MDN Playground에서 직접 예제 코드 만져보기
배경 작업 시 접근성 고려사항 (Accessibility considerations with backgrounds)
배경 이미지나 색상 위에 글자(텍스트)를 배치할 때는 방문자가 글자를 쉽게 읽을 수 있도록 텍스트와 배경 간에 충분한 대비(contrast)를 확보하는 데 매우 신경을 써야 합니다.
또한 텍스트 밑에 배경 이미지를 지정할 때는 항상 짝꿍처럼 background-color도 함께 지정해 주어야 합니다. 만약 네트워크 문제 등으로 이미지가 로드되지 않는 상황이 발생하더라도, 설정해 둔 배경색이 대신 나타나 텍스트가 잘 보이도록(가독성 확보) 방어벽을 구축해 두는 것이죠.
스크린 리더(Screen readers, 시각 장애인용 화면 낭독 프로그램)는 CSS로 넣은 배경 이미지를 읽거나 분석할 수 없습니다. 따라서 CSS 배경 이미지는 의미 없는 순수 장식용(decorative)으로만 사용해야 합니다. 사용자에게 꼭 전달되어야 하는 중요한 이미지는 배경이 아니라 반드시 HTML 페이지 내에 <img> 태그 등으로 포함되어야 한다는 점, 절대 잊지 마세요!
테두리 (Borders)
우리가 박스 모델(box model)을 배울 때, 테두리가 전체 박스의 사이즈에 어떻게 영향을 미치는지 알아보았죠? 이번 레슨에서는 이 테두리를 좀 더 창의적이고 다양하게 사용하는 방법을 알아볼 겁니다.
보통 CSS에서 요소에 테두리를 추가할 때는 border라는 축약 속성을 사용해서, 단 한 줄의 코드로 박스 네 면의 색상(color), 두께(width), 그리고 스타일(style)을 한 번에 지정합니다.
.box {
border: 1px solid black;
}아니면 박스의 특정 한 쪽 면만 콕 집어서 적용할 수도 있어요:
.box {
border-top: 1px solid black;
}물론 축약형을 쓰지 않고 개별 속성인 border-width, border-style, border-color를 하나씩 풀어쓰는 것도 가능합니다:
.box {
border-width: 1px;
border-style: solid;
border-color: black;
}심지어 네 개의 면 각각에 대해 너비, 스타일, 색상을 따로따로 지정하는 아주 디테일한 개별 속성(longhand properties)들도 존재합니다:
.box {
border-top-width: 1px;
border-top-style: solid;
border-top-color: black;
}참고:
위에서 살펴본 top, right, bottom, left와 같은 방향성 테두리 속성들 외에도, 문서의 쓰기 모드(예: 글이 왼쪽에서 오른쪽으로 진행하는지, 아니면 위에서 아래로 진행하는지)와 연동되어 유연하게 작동하는 논리적 테두리 속성(logical border properties)도 존재합니다. 이에 대한 더 깊은 내용은 다양한 텍스트 방향 다루기(handling different text directions) 문서에서 확인하실 수 있습니다.
테두리 가지고 놀아보기
테두리에 쓸 수 있는 스타일(solid, dashed, dotted 등)은 생각보다 매우 다양합니다. 아래 예제에서는 박스에 두 가지 종류의 테두리 스타일을, 제목(<h2>)에 또 다른 두 가지 종류의 테두리 스타일을 적용해 두었습니다. 테두리의 스타일, 너비, 색상 값을 직접 바꿔보면서 테두리가 어떻게 달라지는지 확인해 보세요.
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>* {
padding: 0.2em;
}
.box {
width: 500px;
background-color: #567895;
border: 5px solid #0b385f;
border-bottom-style: dashed;
color: white;
}
h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24 163 78);
}MDN Playground에서 직접 예제 코드 만져보기
둥근 모서리 (Rounded corners)
요즘 유행하는 모던한 UI 디자인에서는 딱딱한 직각 박스보다 모서리가 부드러운 박스를 훨씬 선호하죠. border-radius 속성과, 박스의 각 모서리별로 매칭되는 개별 속성들을 사용하면 모서리를 예쁘게 둥글게 깎을 수 있습니다.
값으로는 길이나 백분율 두 개를 넣을 수 있는데, 첫 번째 값은 가로 반경(horizontal radius)을, 두 번째 값은 세로 반경(vertical radius)을 정의해서 타원 형태의 모서리를 만들 수 있어요. 하지만 대부분의 실무 작업에서는 그냥 하나의 값만 딱 던져주고 그걸 가로/세로 반경에 동일하게 사용하는 경우가 훨씬 많습니다.
예를 들어, 박스의 네 모서리에 모두 10px 만큼의 둥글기를 주고 싶다면 이렇게 씁니다:
.box {
border-radius: 10px;
}오른쪽 위(top right) 모서리 하나만 가로 1em, 세로 10%의 반경으로 약간 찌그러진 둥글기를 주고 싶다면 이렇게 개별 속성을 사용합니다:
.box {
border-top-right-radius: 1em 10%;
}참고:
방금 위에서 배운 일반적인 테두리 속성들처럼, 모서리를 깎아주는 속성들도 글의 흐름에 따라 방향이 달라지는 논리적 테두리 반경 속성(logical border-radius properties)이 마련되어 있습니다.
💡 강사님의 실무 팁!
사용자 프로필 이미지나 아이콘을 완전한 동그라미(원)로 만들고 싶을 때 어떻게 할까요? 박스의 너비와 높이를 똑같이(정사각형) 맞춘 다음,border-radius: 50%를 줘보세요. 한 줄이면 깔끔한 원형 아바타가 완성됩니다!
border-radius 가지고 놀아보기
아래 예제는 기본적으로 네 모서리를 한꺼번에 설정한 다음, 오른쪽 위 모서리의 값만 나중에 따로 변경해서 색다른 모양을 만들었어요. 값들을 이것저것 바꿔보면서 여러분만의 둥근 모서리를 만들어 보세요.
더 다양한 문법과 옵션을 보고 싶다면 border-radius 속성 페이지를 참고하시고요. 수치를 직접 쓰기 귀찮거나 시각적으로 먼저 테스트해 보고 싶다면 border-radius 생성기(border-radius generator)를 사용하면 원하는 모양의 코드를 1초 만에 뽑아낼 수 있습니다!
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>.box {
width: 500px;
height: 110px;
padding: 0.5em;
border: 10px solid rebeccapurple;
border-radius: 1em;
border-top-right-radius: 10% 30%;
}MDN Playground에서 직접 예제 코드 만져보기
요약 (Summary)
정말 수고 많으셨습니다! 박스에 배경이나 테두리를 추가하는 것 하나만으로도 이렇게 배워야 할 수많은 문법과 트릭들이 숨어있다는 걸 깨달으셨을 거예요. 오늘 다룬 기능들 중 하나라도 "오 이건 좀 더 깊이 파보고 싶은데?" 하는 내용이 있다면 주저하지 말고 MDN의 각 속성 페이지를 탐험해 보세요. MDN의 거의 모든 페이지에는 여러분의 지식을 레벨업 시켜줄 수 있는 살아있는 플레이그라운드 예제들이 준비되어 있으니까요.
