Skip to content

Commit

Permalink
feat: 띄어쓰기 추가 및 번역 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@rbals0445
rbals0445 committed Aug 1, 2023
1 parent 40141f0 commit ca9c834
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions files/ko/learn/css/css_layout/media_queries/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ l10n:

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

**CSS Media Query**는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분입니다. 하지만 사용자가 실행중인 환경에 대해서 다른것들을 감지하는데에도 사용할 수 있습니다. 예를 들면 사용자가 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.
**CSS Media Query**는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분입니다. 하지만 사용자가 실행 중인 환경에 대해서 다른 것들을 감지하는 데에도 사용할 수 있습니다. 예를 들면 사용자가 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

<table class="learn-box standard-table">
<tbody>
Expand Down Expand Up @@ -70,7 +70,7 @@ l10n:
}
```

> **참고:** 여기서 미디어 타입은 {{glossary("MIME type")}}과 다릅니다.
> **참고:** 이 미디어 타입은 {{glossary("MIME type")}}과 다릅니다.
> **참고:** 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.
Expand All @@ -96,7 +96,7 @@ l10n:

[이 예제를](https://mdn.github.io/css-examples/learn/media-queries/width.html) 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html).

`width`(및 `height`) 미디어 기능은 범위 지정에 사용될 수 있습니다. 따라서 `min-` or `max-` 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 600 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 `max-width`:를 사용할 수 있다.
`width`(및 `height`) 미디어 기능은 범위 지정에 사용될 수 있습니다. 따라서 `min-` or `max-` 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있습니다. 예를 들어 뷰포트가 600 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 `max-width`:를 사용할 수 있습니다.

```css
@media screen and (max-width: 600px) {
Expand All @@ -106,9 +106,9 @@ l10n:
}
```

[이 예제를](https://mdn.github.io/css-examples/learn/media-queries/max-width.html)를 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html).
[이 예제를](https://mdn.github.io/css-examples/learn/media-queries/max-width.html) 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html).

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 `width` 또는 `height` 값을 사용하는 경우는 좀처럼 흔치앖습니다.
실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 `width` 또는 `height` 값을 사용하는 경우는 좀처럼 흔치 않습니다.

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 [미디어 쿼리 사용: 미디어 기능](/ko/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features)에서 전체 목록을 찾을 수 있습니다.

Expand Down Expand Up @@ -144,17 +144,17 @@ l10n:

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

마찬가지로 `pointer` 미디어 기능이 수준 4 규격에 포함되어 있습니다. 이것은 `none`과 `fine` `coarse`의 세 가지 값을 취할 수 있다. `fine` 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. `coarse` 포인터는 터치스크린 상에 손가락을 말합니다. `none` 값은 사용자가 포인팅 장치가 없다는 의미입니다. 아마 키보드 또는 음성 명령만으로 탐색하고 있을 수 있습니다.
마찬가지로 `pointer` 미디어 기능이 수준 4 규격에 포함되어 있습니다. 이것은 `none`과 `fine` `coarse`의 세 가지 값을 취할 수 있습니다. `fine` 포인터는 마우스나 트랙패드와 같은 것입니다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 됩니다. `coarse` 포인터는 터치스크린 상에 손가락을 말합니다. `none` 값은 사용자가 포인팅 장치가 없다는 의미입니다. 아마 키보드 또는 음성 명령만으로 탐색하고 있을 수 있습니다.

`pointer` 사용이 당신에게 주는 이점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

## 더 복잡한 미디어 쿼리

사용 가능한 다양한 미디어 쿼리들을 이용해서 쿼리를 함께 결헙하거나, 일치할 수 있는 쿼리 목록들을 만들 수 있습니다.
사용 가능한 다양한 미디어 쿼리들을 이용해서 쿼리를 함께 결합하거나, 일치할 수 있는 쿼리 목록들을 만들 수 있습니다.

### "논리곱" 미디어 쿼리

`and`를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 `and`를 사용했던 방식과 같습니다. 예를 들어, `min-width`와 `orientation`의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 HTML 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 600픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.
`and`를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 `and`를 사용했던 방식과 같습니다. 예를 들어, `min-width`와 `orientation`의 논리곱 조건을 테스트해 보고 싶을 수도 있습니다. 여기서 HTML 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 600픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

```css
@media screen and (min-width: 600px) and (orientation: landscape) {
Expand All @@ -168,7 +168,7 @@ l10n:

### "논리합" 미디어 쿼리

여러 쿼리들의 집합이 있는 경우, 어떤것이라도 일치할 수 있숩니다. 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 600픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이라면 쿼리가 일치합니다.
여러 쿼리들의 집합이 있는 경우, 어떤 것이라도 일치할 수 있습니다. 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 600픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이라면 쿼리가 일치합니다.

```css
@media screen and (min-width: 600px), screen and (orientation: landscape) {
Expand Down Expand Up @@ -208,9 +208,9 @@ Firefox DevTools의 [반응형 디자인 모드](/ko/docs/Tools/Responsive_Desig

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 레이아웃을 추가할 수 있습니다. 이 두 번째 접근법은 **mobile first** 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 레이아웃을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 레이아웃이 됩니다.
가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 레이아웃을 할 필요가 없다는 말입니다. 다시 말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 레이아웃이 됩니다.

아래의 길라잡이는 매우 간단한 레이아웃으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.
아래의 길라잡이는 매우 간단한 레이아웃으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리 내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

### 길라잡이: 간단한 모바일 우선 레이아웃

Expand Down Expand Up @@ -316,7 +316,7 @@ article {

[이 예제를](https://mdn.github.io/css-examples/learn/media-queries/step1.html) 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html).

**당신이 우리의 진행 과정대로 이 예제를 실행해보려면 [step1.html](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html)의 사본을 당신의 컴퓨터에 만드세요.**
**당신이 우리의 진행 과정대로 이 예제를 실행해 보려면 [step1.html](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html)의 사본을 당신의 컴퓨터에 만드세요.**

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 줄 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 사용자보다 비슷한 줄 길이이지만 뷰포트가 더 넓은 곳에서 중단점이 발생하기에 ems를 사용합니다.

Expand Down Expand Up @@ -344,7 +344,7 @@ article {

[2단계](https://mdn.github.io/css-examples/learn/media-queries/step2.html) 파일을 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html).

사이드바가 새 열을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.
사이드바가 새 열을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달 시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

**다시 한 번 아래 코드를 step1.html CSS의 하단에 추가합니다.**

Expand Down Expand Up @@ -420,11 +420,11 @@ article {

[이 격자 예제를](https://mdn.github.io/css-examples/learn/media-queries/grid.html) 브라우저에서 열거나 [소스를 보세요](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html).

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도 있다! 라는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 레이아웃 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.
상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을 수도 있다! 라는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 레이아웃 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

## 스킬을 테스트 하세요!
## 스킬을 테스트하세요!

게시글의 맨 마지막 부분까지 도달했지만, 중요한 정보를 기억할 수 있으신가요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인할 수 있는 테스트를 찾을 수 있습니다. [여기](/en-US/docs/Learn/CSS/CSS_layout/rwd_skills)를 확인해주세요.
게시글의 맨 마지막 부분까지 도달했지만, 중요한 정보를 기억할 수 있으신가요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인할 수 있는 테스트를 찾을 수 있습니다. [여기](/ko/docs/Learn/CSS/CSS_layout/rwd_skills)를 확인해주세요.

## 요약정리

Expand Down

0 comments on commit ca9c834

Please sign in to comment.