From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../\354\203\201\354\236\220/index.html" | 330 +++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" (limited to 'files/ko/web/css/시작하기/상자/index.html') diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" new file mode 100644 index 0000000000..17de8697c7 --- /dev/null +++ "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" @@ -0,0 +1,330 @@ +--- +title: 상자 +slug: Web/CSS/시작하기/상자 +translation_of: Learn/CSS/Building_blocks +--- +

{{ CSSTutorialTOC() }}

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}CSS 시작하기 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.

+ +

정보: 상자

+ +

Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.

+ +

가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

옅은 회색은 레이아웃의 구성을 보여준다.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

브라우저에서는 위와 같이 보여준다.

+
+ +

안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.

+ +

색상입히기

+ +

안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

element는 녹색 배경색이다..

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

브라우저에서 보면 위와 같다.

+
+ +

경계

+ +

라인이나 상자를 통해 element의 경계를 치장 할 수 있다.

+ +

경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.

+ +

스타일은 아래와 같다.

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.

+ +

경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할  수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.

+ +
+
예제
+ +

아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

결과는 아래와 같다.

+ + + + + + + +
+

Stylish heading

+
+ +

아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.

+ +
img {border: 2px solid #ccc;}
+
+
+ +

결과는 아래와 같다.

+ + + + + + + + +
Image:Image:Blue-rule.png
+ +

내/외부 여백

+ +

내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.

+ +

바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.

+ +

위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.

+ +

넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.

+ +

4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.

+ +
+
예제
+ +

아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.

+ +

안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

결과는 아래와 같다.

+ + + + + + + +
+

Here is a normal paragraph.

+ +

Here is a remark.

+
+
+ +
+
좀더 자세히
+ +

내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.

+ +

브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.

+ +

원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.

+ +

내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 Box model를 참조하라.

+
+ +

액션: 경계선 추가

+ +

style2.css를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.

+ +
h3 {border-top: 1px solid gray;}
+
+ +

이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

결과를 보기위해 브라우저에서 새로 읽어 보라.

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
도전
+ +

예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)

+
+ +

결과 확인.

+ +

다음에는?

+ +

{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.

-- cgit v1.2.3-54-g00ecf