diff --git a/.prettierignore b/.prettierignore index 38813df427f09a..19ddf41a676e61 100644 --- a/.prettierignore +++ b/.prettierignore @@ -54,22 +54,10 @@ build/ /files/ja/web/svg/**/*.md # ko -/files/ko/glossary/**/*.md /files/ko/learn/**/*.md -/files/ko/learn/css/**/*.md -/files/ko/learn/html/**/*.md -/files/ko/learn/javascript/**/*.md -/files/ko/learn/server-side/**/*.md -/files/ko/mdn/**/*.md -/files/ko/mozilla/**/*.md -/files/ko/mozilla/add-ons/**/*.md -/files/ko/mozilla/add-ons/webextensions/api/**/*.md -/files/ko/mozilla/firefox**/*.md -/files/ko/web/**/*.md /files/ko/web/api/**/*.md /files/ko/web/css/**/*.md /files/ko/web/javascript/**/*.md -/files/ko/web/svg/**/*.md # pt-br /files/pt-br/web/api/**/*.md diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index 17a93a93281fa7..4c50dffca0bc49 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -92,7 +92,7 @@ **사전 순으로 용어집을 편집해주세요.** | 용어 | 번역 | 기타 | -| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------ | +| ------------------ | --------------- | ------------------------------------------------------------------------------------------------------ | --- | | Application | 애플리케이션 | | | Assertion | 어설션 | | | Attribute | 특성 | | diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index b72a975e2958ed..2a6de35bd180fd 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -12,10 +12,8 @@ /ko/docs/About_the_Document_Object_Model /ko/docs/Web/API/Document_Object_Model /ko/docs/Accessibility /ko/docs/Web/Accessibility /ko/docs/Accessibility/ARIA /ko/docs/Web/Accessibility/ARIA -/ko/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets /ko/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets /ko/docs/Alternative_style_sheets /ko/docs/Web/CSS/Alternative_style_sheets /ko/docs/Apps/Progressive /ko/docs/Web/Progressive_web_apps -/ko/docs/Apps/Progressive/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable /ko/docs/Apps/Progressive/App_structure /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure /ko/docs/Apps/Progressive/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs /ko/docs/Apps/Progressive/Offline_Service_workers /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Offline_Service_workers @@ -333,7 +331,6 @@ /ko/docs/Learn/접근성 /ko/docs/Learn/Accessibility /ko/docs/Learn/접근성/HTML /ko/docs/Learn/Accessibility/HTML /ko/docs/Learn/접근성/What_is_accessibility /ko/docs/Learn/Accessibility/What_is_accessibility -/ko/docs/Learn/접근성/모바일 /ko/docs/Learn/Accessibility/Mobile /ko/docs/Localization /ko/docs/Glossary/Localization /ko/docs/MDN/About /ko/docs/MDN/Writing_guidelines /ko/docs/MDN/Contribute/Content/Best_practices /ko/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete @@ -818,7 +815,6 @@ /ko/docs/Web/Media/Formats/코덱파라미터 /ko/docs/Web/Media/Formats/codecs_parameter /ko/docs/Web/Performance/브라우저는_어떻게_동작하는가 /ko/docs/Web/Performance/How_browsers_work /ko/docs/Web/Performance/중요_렌더링_경로 /ko/docs/Web/Performance/Critical_rendering_path -/ko/docs/Web/Progressive_web_apps/Add_to_home_screen /ko/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable /ko/docs/Web/Progressive_web_apps/App_structure /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/App_structure /ko/docs/Web/Progressive_web_apps/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Installable_PWAs /ko/docs/Web/Progressive_web_apps/Introduction /ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index c683b4d182a65e..4e635cb761e4e1 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -735,10 +735,6 @@ "modified": "2020-07-16T22:40:12.947Z", "contributors": ["dev-dongwon"] }, - "Learn/Accessibility/Mobile": { - "modified": "2020-07-16T22:40:31.872Z", - "contributors": ["seunghun"] - }, "Learn/Accessibility/What_is_accessibility": { "modified": "2020-07-16T22:40:05.805Z", "contributors": ["seunghun"] @@ -4688,26 +4684,10 @@ "modified": "2020-01-12T10:16:30.044Z", "contributors": ["alattalatta", "young-gratia", "teoli", "Cho.Eun"] }, - "Web/Accessibility/ARIA/ARIA_Live_Regions": { - "modified": "2020-12-05T03:30:43.763Z", - "contributors": ["movegun1027"] - }, - "Web/Accessibility/ARIA/ARIA_Techniques": { - "modified": "2020-01-12T02:25:07.876Z", - "contributors": ["alattalatta", "dcondrey"] - }, "Web/Accessibility/ARIA/Roles": { "modified": "2019-03-18T21:24:18.888Z", "contributors": ["estelle"] }, - "Web/Accessibility/ARIA/Roles/dialog_role": { - "modified": "2019-03-18T21:24:31.941Z", - "contributors": ["seokju-na"] - }, - "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": { - "modified": "2019-03-23T23:21:28.496Z", - "contributors": ["dotorify", "teoli", "Cho.Eun"] - }, "Web/Accessibility/Mobile_accessibility_checklist": { "modified": "2019-09-08T04:58:59.841Z", "contributors": ["seunghun"] @@ -4893,10 +4873,6 @@ "modified": "2020-10-15T21:50:30.795Z", "contributors": ["alattalatta", "young-gratia"] }, - "Web/CSS/CSS_Selectors": { - "modified": "2020-08-22T11:28:21.089Z", - "contributors": ["alattalatta"] - }, "Web/CSS/CSS_Types": { "modified": "2020-08-06T04:37:09.952Z", "contributors": ["alattalatta"] @@ -5197,6 +5173,10 @@ "modified": "2019-04-14T23:39:58.448Z", "contributors": ["alattalatta", "Netaras"] }, + "Web/CSS/CSS_selectors": { + "modified": "2020-08-22T11:28:21.089Z", + "contributors": ["alattalatta"] + }, "Web/CSS/CSS_shapes": { "modified": "2019-04-25T10:46:18.309Z", "contributors": ["alattalatta", "seunghun", "Netaras"] @@ -6102,22 +6082,10 @@ "Web/Guide/Audio_and_video_delivery": { "modified": "2019-04-17T05:03:01.108Z" }, - "Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video": { - "modified": "2019-05-13T05:46:53.607Z", - "contributors": ["hoony"] - }, - "Web/Guide/CSS/Block_formatting_context": { - "modified": "2020-08-05T00:58:44.120Z", - "contributors": ["alattalatta", "moolow", "corps99"] - }, "Web/Guide/Graphics": { "modified": "2020-02-15T07:39:57.101Z", "contributors": ["Netaras", "hyeonseok", "narae_lee"] }, - "Web/Guide/Mobile": { - "modified": "2019-05-30T06:59:50.297Z", - "contributors": ["SDSkyKlouD", "Seia-Soto", "xfq"] - }, "Web/Guide/Parsing_and_serializing_XML": { "modified": "2019-03-23T22:16:47.020Z", "contributors": ["young-gratia"] @@ -10196,10 +10164,6 @@ "modified": "2019-03-23T22:00:19.382Z", "contributors": ["chrisdavidmills", "cs09g"] }, - "Web/Progressive_web_apps/Guides/Making_PWAs_installable": { - "modified": "2020-01-26T15:58:32.379Z", - "contributors": ["alattalatta", "chrisdavidmills", "cs09g"] - }, "Web/Progressive_web_apps/Tutorials/js13kGames": { "modified": "2019-03-18T20:52:13.104Z", "contributors": ["chrisdavidmills", "cs09g"] diff --git a/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index 48ca716f55b1de..0fee5eee37b666 100644 --- a/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/ko/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -5,7 +5,7 @@ slug: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation {{GamesSidebar}} -In this tutorial we’ll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial. +In this tutorial we'll go through the process of building an HTML5 mobile game that uses the [Device Orientation](/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) and [Vibration](/ko/docs/Web/Guide/API/Vibration) **APIs** to enhance the gameplay and is built using the [Phaser](http://phaser.io/) framework. Basic JavaScript knowledge is recommended to get the most from this tutorial. ## Example game @@ -15,7 +15,7 @@ By the end of the tutorial you will have a fully functional demo game: [Cyber Or ## Phaser framework -[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It’s quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it’s open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself. +[Phaser](http://phaser.io/) is a framework for building desktop and mobile HTML5 games. It's quite new, but growing rapidly thanks to the passionate community involved in the development process. You can check it out [on GitHub](https://github.com/photonstorm/phaser) where it's open sourced, read the [online documentation](http://docs.phaser.io/) and go through the big collection of [examples](http://examples.phaser.io/). The Phaser framework provides you with a set of tools that will speed up development and help handle generic tasks needed to complete the game, so you can focus on the game idea itself. ## Starting with the project @@ -31,7 +31,7 @@ You can open the index file in your favourite browser to launch the game and try ## Setting up the Canvas -We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let’s set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along: +We will be rendering our game on Canvas, but we won't do it manually — this will be taken care of by the framework. Let's set it up: our starting point is the `index.html` file with the following content. You can create this yourself if you want to follow along: ```html @@ -94,7 +94,7 @@ The first value is the name of the state and the second one is the object we wan ## Managing game states -The states in Phaser are separate parts of the game logic; in our case we’re loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states. +The states in Phaser are separate parts of the game logic; in our case we're loading them from independent JavaScript files for better maintainability. The basic states used in this game are: `Boot`, `Preloader`, `MainMenu`, `Howto` and `Game`. `Boot` will take care of initializing a few settings, `Preloader` will load all of the assets like graphics and audio, `MainMenu` is the menu with the start button, `Howto` shows the "how to play" instructions and the `Game` state lets you actually play the game. Let's quickly go though the content of those states. ### Boot.js @@ -260,7 +260,7 @@ The `create` and `update` functions are framework-specific, while others will be #### Adding the ball and its motion mechanics -First, let’s go to the `create()` function, initialize the ball object itself and assign a few properties to it: +First, let's go to the `create()` function, initialize the ball object itself and assign a few properties to it: ```js this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, "ball"); @@ -270,17 +270,17 @@ this.ball.body.setSize(18, 18); this.ball.body.bounce.set(0.3, 0.3); ``` -Here we’re adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We’re also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles. +Here we're adding a sprite at the given place on the screen and using the `'ball'` image from the loaded graphic assets. We're also setting the anchor for any physics calculations to the middle of the ball, enabling the Arcade physics engine (which handles all the physics for the ball movement), and setting the size of the body for the collision detection. The `bounce` property is used to set the bounciness of the ball when it hits the obstacles. #### Controlling the ball -It’s cool to have the ball ready to be thrown around in the play area, but it’s also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let’s focus on the keyboard first by adding the following to the `create()` function : +It's cool to have the ball ready to be thrown around in the play area, but it's also important to be able to actually move it! Now we will add the ability to control the ball with the keyboard on the desktop devices, and then we will move to the implementation of the Device Orientation API. Let's focus on the keyboard first by adding the following to the `create()` function : ```js this.keys = this.game.input.keyboard.createCursorKeys(); ``` -As you can see there’s a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. +As you can see there's a special Phaser function called `createCursorKeys()`, which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right. Next we will add the following code to the `update()` function, so it will be fired on every frame. The `this.keys` object will be checked against player input, so the ball can react accordingly with the predefined force: @@ -301,13 +301,13 @@ That way we can check which key is pressed at the given frame and apply the defi #### Implementing the Device Orientation API -Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here’s the code from the `create()` function responsible for this: +Probably the most interesting part of the game is its usage of the **Device Orientation API** for control on mobile devices. Thanks to this you can play the game by tilting the device in the direction you want the ball to roll. Here's the code from the `create()` function responsible for this: ```js window.addEventListener("deviceorientation", this.handleOrientation, true); ``` -We’re adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this: +We're adding an event listener to the `"deviceorientation"` event and binding the `handleOrientation` function which looks like this: ```js handleOrientation: function(e) { @@ -335,7 +335,7 @@ this.hole.anchor.set(0.5); this.hole.body.setSize(2, 2); ``` -The difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article). +The difference is that our hole's body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article). #### Building the block labyrinth @@ -390,7 +390,7 @@ Thanks to that the game gives the player a challenge - now he have to roll the b #### Collision detection -At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There’s a problem though — our game doesn’t have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let’s fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function: +At this point we've got the ball that is controlled by the player, the hole to reach and the obstacles blocking the way. There's a problem though — our game doesn't have any collision detection yet, so nothing happens when the ball hits the blocks — it just goes through. Let's fix it! The good news is that the framework will take care of calculating the collision detection, we only have to specify the colliding objects in the `update()` function: ```js this.physics.arcade.collide( @@ -447,7 +447,7 @@ If the `vibrate` method is supported by the browser and available in the `window #### Adding the elapsed time -To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let’s define the variables in the `create` function first: +To improve replayability and give players the option to compete with each other we will store the elapsed time — players can then try to improve on their best game completion time. To implement this we have to create a variable for storing the actual number of seconds elapsed from the start of the game, and to show it for the player in the game. Let's define the variables in the `create` function first: ```js this.timer = 0; // time elapsed in the current level @@ -471,7 +471,7 @@ this.totalTimeText = this.game.add.text( ); ``` -We’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second: +We're defining the top and left positions of the text, the content that will be shown and the styling applied to the text. We have this printed out on the screen, but it would be good to update the values every second: ```js this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this); @@ -487,11 +487,11 @@ updateCounter: function() { }, ``` -As you can see we’re incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time. +As you can see we're incrementing the `this.timer` variable and updating the content of the text objects with the current values on each iteration, so the player sees the elapsed time. #### Finishing the level and the game -The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let’s set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole. +The ball is rolling on the screen, the timer is working and we have the hole created that we have to reach. Now let's set up the possibility to actually finish the level! The following line in the `update()` function adds a listener that fires when the ball gets to the hole. ```js this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this); @@ -529,7 +529,7 @@ If the current level is lower than 5, all the neccesary variables are reset and ## Ideas for new features -This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There’s also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination. +This is merely a working demo of a game that could have lots of additional features. We can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. There's also room for the traps which will slow the ball down or make it more difficult to reach the hole. You can create more levels of increasing difficulty. You can even implement achievements, leaderboards and medals for different actions in the game. There are endless possibilities — they only depend on your imagination. ## Summary diff --git a/files/ko/glossary/abstraction/index.md b/files/ko/glossary/abstraction/index.md index 0898a6cb421419..36a5d4834258d2 100644 --- a/files/ko/glossary/abstraction/index.md +++ b/files/ko/glossary/abstraction/index.md @@ -2,6 +2,7 @@ title: 추상화 slug: Glossary/Abstraction --- + {{Glossary("computer programming", "컴퓨터 프로그래밍")}}에서의 **추상화**란 복잡한 소프트웨어 시스템을 효율적으로 설계하고 구현할 수 있는 방법입니다. 추상화는 뒷편 시스템의 기술적 복잡함을 단순한 {{Glossary("API")}} 뒤에 숨깁니다. ## 데이터 추상화의 장점 @@ -14,24 +15,24 @@ slug: Glossary/Abstraction ## 예 ```js - class ImplementAbstraction { - // method to set values of internal members - set(x, y) { - this.a = x; - this.b = y; - } - - display() { - console.log('a = ' + this.a); - console.log('b = ' + this.b); - } - } - - const obj = new ImplementAbstraction(); - obj.set(10, 20); - obj.display(); - // a = 10 - // b = 20 +class ImplementAbstraction { + // method to set values of internal members + set(x, y) { + this.a = x; + this.b = y; + } + + display() { + console.log("a = " + this.a); + console.log("b = " + this.b); + } +} + +const obj = new ImplementAbstraction(); +obj.set(10, 20); +obj.display(); +// a = 10 +// b = 20 ``` ## 더 알아보기 diff --git a/files/ko/glossary/attribute/index.md b/files/ko/glossary/attribute/index.md index 35ea65ac7b9724..6af4d9dc697545 100644 --- a/files/ko/glossary/attribute/index.md +++ b/files/ko/glossary/attribute/index.md @@ -2,6 +2,7 @@ title: 특성 slug: Glossary/Attribute --- + {{QuickLinksWithSubpages("/ko/docs/Glossary")}} **특성**(attribute)은 {{glossary("tag", "태그")}}를 확장해 동작 방식을 바꾸거나 메타데이터를 제공합니다. @@ -11,11 +12,11 @@ slug: Glossary/Attribute 등호 또는 값 없는 특성이 보일 때도 있습니다. {{glossary("HTML")}}에서는 빈 문자열을 제공하는 단축 표기법이고, {{glossary("XML")}}에서는 특성 이름을 제공하는 단축 표기법입니다. ```html - + - + - + ``` ## 더 알아보기 diff --git a/files/ko/glossary/block-level_content/index.md b/files/ko/glossary/block-level_content/index.md index 96704ff75057f4..ca2a38fc591369 100644 --- a/files/ko/glossary/block-level_content/index.md +++ b/files/ko/glossary/block-level_content/index.md @@ -17,13 +17,18 @@ original_slug: Web/HTML/Block-level_elements ### HTML ```html -

이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 입혔습니다.

+

+ 이 문단은 블록 레벨 요소입니다. 부모 요소와 구분할 수 있도록 배경 색을 + 입혔습니다. +

``` ### CSS ```css -p { background-color: #8ABB55; } +p { + background-color: #8abb55; +} ``` {{EmbedLiveSample('블록_레벨_요소')}} diff --git a/files/ko/glossary/breadcrumb/index.md b/files/ko/glossary/breadcrumb/index.md index dd1568eac0e176..2288cd2cc13b1d 100644 --- a/files/ko/glossary/breadcrumb/index.md +++ b/files/ko/glossary/breadcrumb/index.md @@ -2,6 +2,7 @@ title: Breadcrumb (브레드크럼) slug: Glossary/Breadcrumb --- + **브레드크럼**, 또는 브레드크럼 트레일은 일반적으로 사이트의 header와 기본 컨텐츠 사이에 배치되는 탐색 보조 도구로, 사이트 구조와 관련된 현재 페이지의 계층 구조, 최상위에서부터 현재 페이지까지를 사용자의 링크 목록 등으로 표시합니다. 현재 페이지까지 방문한 순서대로 보입니다. 이 문서의 위치 탐색 경로는 다음과 같습니다.: diff --git a/files/ko/glossary/call_stack/index.md b/files/ko/glossary/call_stack/index.md index eb9274c3f75b39..9155df48fca3b2 100644 --- a/files/ko/glossary/call_stack/index.md +++ b/files/ko/glossary/call_stack/index.md @@ -14,12 +14,12 @@ slug: Glossary/Call_stack ```js function greeting() { - // [1] Some codes here - sayHi(); - // [2] Some codes here + // [1] Some codes here + sayHi(); + // [2] Some codes here } function sayHi() { - return "Hi!"; + return "Hi!"; } // Invoke the `greeting` function @@ -34,23 +34,23 @@ greeting(); 2. `greeting()` 함수를 호출합니다. 3. `greeting()` 함수를 호출 스택 리스트에 추가합니다. - > **참고:** 호출 스택 리스트: - > \- greeting + > **참고:** 호출 스택 리스트: + > \- greeting 4. `greeting` 함수 내부의 모든 코드를 실행합니다. 5. `sayHi()` 함수를 얻습니다. 6. `sayHi()` 함수를 호출 스택 리스트에 추가합니다. - > **참고:** 호출 스택 리스트: - > \- greeting - > \- sayHi + > **참고:** 호출 스택 리스트: + > \- greeting + > \- sayHi 7. `sayHi()` 함수의 끝에 도달할 때까지, 함수 내부의 모든 코드를 실행합니다. 8. `sayHi()` 가 호출된 라인으로 돌아와 `greeting()` 함수의 나머지를 계속 실행합니다. 9. 호출 스택 리스트에서 `sayHi()` 함수를 제거합니다. - > **참고:** 호출 스택 리스트: - > \- greeting + > **참고:** 호출 스택 리스트: + > \- greeting 10. `greeting()` 함수 내부의 모든 코드가 실행되었을 때, 이를 호출한 라인으로 돌아와 JS 코드의 나머지를 계속 실행합니다. 11. 호출 스택 리스트에서 `greeting()` 함수를 제거합니다. diff --git a/files/ko/glossary/character/index.md b/files/ko/glossary/character/index.md index 802aaf6a0b3862..affa440c375a0b 100644 --- a/files/ko/glossary/character/index.md +++ b/files/ko/glossary/character/index.md @@ -2,6 +2,7 @@ title: Character slug: Glossary/Character --- + 문자는 기호(글자, 숫자, 문장 부호) 또는 비출력 "제어"(예: 캐리지 리턴 또는 소프트 하이픈)이다. {{glossary("UTF-8")}}은 가장 보편적인 문자 세트이며 유명한 인간 언어들의 문자를 포함한다. ## 더 알아보기 diff --git a/files/ko/glossary/character_encoding/index.md b/files/ko/glossary/character_encoding/index.md index 282a1e0fdc2d17..007ab8e50a2bbc 100644 --- a/files/ko/glossary/character_encoding/index.md +++ b/files/ko/glossary/character_encoding/index.md @@ -8,7 +8,7 @@ slug: Glossary/Character_encoding 예를 들어, HTML에서 우리는 일반적으로 아래 줄과 같이 UTF-8의 문자 인코딩을 선언한다 : ```html - + ``` 이것은 당신이 당신의 HTML 문서에서 인간 언어의 문자를 사용할 수 있도록 보장하며, 그것들은 신뢰성 있게 표시될 것이다. diff --git a/files/ko/glossary/character_set/index.md b/files/ko/glossary/character_set/index.md index bcf56730639a88..34807b3bd46c98 100644 --- a/files/ko/glossary/character_set/index.md +++ b/files/ko/glossary/character_set/index.md @@ -15,11 +15,11 @@ slug: Glossary/Character_set 1. Wikipedia articles - 1. [Character encoding](https://en.wikipedia.org/wiki/Character_encoding) + 1. [Character encoding](https://en.wikipedia.org/wiki/Character_encoding) 2. [Glossary](/ko/docs/Glossary) - 1. {{Glossary("Character")}} - 2. {{Glossary("Unicode")}} + 1. {{Glossary("Character")}} + 2. {{Glossary("Unicode")}} diff --git a/files/ko/glossary/chrome/index.md b/files/ko/glossary/chrome/index.md index d0297d820d5b38..78cec8f9ffb2ca 100644 --- a/files/ko/glossary/chrome/index.md +++ b/files/ko/glossary/chrome/index.md @@ -2,6 +2,7 @@ title: Chrome slug: Glossary/Chrome --- + 브라우저에서 chrome은 웹페이지를 제외한 브라우저의 모든 가시적인 요소이다. (예: 도구 모음, 메뉴 바, 탭) 이것은 {{glossary("Google Chrome")}} 브라우저와 혼동해서는 안 된다. ## 더 알아보기 diff --git a/files/ko/glossary/compile/index.md b/files/ko/glossary/compile/index.md index 95349061824b6e..94bde17126fe16 100644 --- a/files/ko/glossary/compile/index.md +++ b/files/ko/glossary/compile/index.md @@ -2,6 +2,7 @@ title: Compile slug: Glossary/Compile --- + 컴파일(Compile)은 주어진 {{Glossary("computer programming", "language")}}로 작성된 컴퓨터 프로그램을 다른 언어의 동등한 프로그램으로 변환하는 프로세스입니다. 컴파일러는이 작업을 실행하는 소프트웨어입니다. 때로는이 작업을 "조립(assembling)"또는 "빌드(build)"라고도 합니다. 이 작업들은 보통 컴파일과 같은 것(예를 들면 바이너리 형식으로 패키지를 만드는 일) 이상의 작업을 수행합니다 . 일반적으로 컴파일러는 C 또는 {{Glossary("Java")}} 와 같은 고급 언어를 CPU가 이해할 수 있는, 즉 어셈블리어와 같은 기계 언어로 변환합니다. 유사한 수준의 언어 사이에서 번역하는 일부 컴파일러를 트랜스파일러 또는 크로스 컴파일러 라고 합니다. 예를 들어 TypeScript에서 {{Glossary("JavaScript")}}로 컴파일합니다. 그것들은 생산성 도구로 간주됩니다. diff --git a/files/ko/glossary/computer_programming/index.md b/files/ko/glossary/computer_programming/index.md index b0f64349e4878c..023d09e64e062e 100644 --- a/files/ko/glossary/computer_programming/index.md +++ b/files/ko/glossary/computer_programming/index.md @@ -2,6 +2,7 @@ title: Computer Programming slug: Glossary/Computer_Programming --- + 컴퓨터 프로그래밍은 명령어 모음집을 작성하고 구성하는 과정이다. 이것들은 컴퓨터/소프트웨어 프로그램에게 컴퓨터가 이해하는 언어로 무엇을 해야 하는지 알려준다. 이러한 지침은 C++, Java, JavaScript, HTML, Python, Ruby, Rust와 같은 다양한 언어의 형태로 나온다. 적절한 언어를 사용하면 모든 종류의 소프트웨어를 프로그래밍/생성할 수 있다. 이것의 예시에는 복잡한 계산을 하여 과학자들을 돕는 프로그램, 엄청난 양의 데이터를 저장하는 데이터베이스, 음악을 다운받을 수 있는 웹 사이트, 애니메이션 영화를 만들 수 있는 애니메이션 소프트웨어를 들 수 있다. diff --git a/files/ko/glossary/copyleft/index.md b/files/ko/glossary/copyleft/index.md index 12e036b15ab6d1..4ccc614732424b 100644 --- a/files/ko/glossary/copyleft/index.md +++ b/files/ko/glossary/copyleft/index.md @@ -2,6 +2,7 @@ title: Copyleft slug: Glossary/Copyleft --- + Copyleft는 일반적으로 라이선스를 지칭하는 용어로서, 그러한 라이선스는 해당 저작물의 재배포가 원래 라이선스와 동일한 라이선스의 대상이 되어야 한다는 것을 나타내기 위해 사용된다. copyleft 라이선스의 예로는 GNU {{Glossary("GPL")}}(소프트웨어용)과 Creative Commons SA(Share Alike) 라이선스(예술 작품에서)가 있다. ## 더 알아보기 diff --git a/files/ko/glossary/cors/index.md b/files/ko/glossary/cors/index.md index 26737de0773df7..5a2d409d21bdeb 100644 --- a/files/ko/glossary/cors/index.md +++ b/files/ko/glossary/cors/index.md @@ -2,6 +2,7 @@ title: CORS slug: Glossary/CORS --- + 다른 도메인({{glossary("domain","domains")}})에서의 자원을 호출하는 행위에 제한이 없을 경우 안전하지 않습니다. **CORS** (Cross-Origin Resource Sharing)는 이렇게 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것입니다. ## 더 보기 diff --git a/files/ko/glossary/csp/index.md b/files/ko/glossary/csp/index.md index a85ab16114ba1d..0960d1aaff546a 100644 --- a/files/ko/glossary/csp/index.md +++ b/files/ko/glossary/csp/index.md @@ -2,6 +2,7 @@ title: CSP slug: Glossary/CSP --- + CSP (Content Security Policy)는 {{Glossary("XSS")}}이나 데이터 주입과 같은 특정 웹사이트 관련 공격을 탐지 하거나 완화 하기 위해 사용된다. 기본적인 구현은 `Content-Security-Policy`라고 불리는 {{Glossary("HTTP")}} 헤더를 기반으로 한다. diff --git a/files/ko/glossary/css/index.md b/files/ko/glossary/css/index.md index 13fb58b5704d9c..9bdb9f5ace1cb8 100644 --- a/files/ko/glossary/css/index.md +++ b/files/ko/glossary/css/index.md @@ -18,7 +18,7 @@ p { color: yellow; /* The "background-color" property defines the background color, in this case black. */ - background-color: black + background-color: black; } ``` diff --git a/files/ko/glossary/doctype/index.md b/files/ko/glossary/doctype/index.md index 925df02266066f..e2190ba515686c 100644 --- a/files/ko/glossary/doctype/index.md +++ b/files/ko/glossary/doctype/index.md @@ -2,7 +2,8 @@ title: 문서 타입 정의 slug: Glossary/Doctype --- -{{Glossary("HTML")}}에서, doctype은 모든 문서의 최상단에서 찾을 수 있는 "``" 필수 서문이다. doctype은 {{Glossary("브라우저")}}가 문서를 렌더링 할 때 [“quirks mode”](/ko/docs/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적이다. "``" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다. + +{{Glossary("HTML")}}에서, doctype은 모든 문서의 최상단에서 찾을 수 있는 "``" 필수 서문이다. doctype은 {{Glossary("브라우저")}}가 문서를 렌더링 할 때 ["quirks mode"](/ko/docs/Quirks_Mode_and_Standards_Mode)로 바뀌지 않도록하는 것이 유일한 목적이다. "``" doctype은 브라우저가 일부 스펙과 맞지 않는 다른 렌더링 모드를 사용하기 보다는 적절한 스펙을 따르는 최선의 시도를 하도록 한다. ## 더보기 diff --git a/files/ko/glossary/domain_name/index.md b/files/ko/glossary/domain_name/index.md index 3f4805c1bb109a..58f34cdaa7e5d5 100644 --- a/files/ko/glossary/domain_name/index.md +++ b/files/ko/glossary/domain_name/index.md @@ -2,6 +2,7 @@ title: 도메인 이름 slug: Glossary/Domain_name --- + **도메인 이름**은 {{Glossary("Internet", "인터넷")}} 웹 사이트의 주소로, {{glossary("URL")}}에서 특정 웹 페이지가 속하는 서버를 식별할 때 사용합니다. 도메인 이름은 마침표(점)로 구분한 계층적인 이름(레이블)의 연속으로 구성되며, {{glossary("TLD", "확장")}}으로 끝납니다. ## 더 알아보기 diff --git a/files/ko/glossary/endianness/index.md b/files/ko/glossary/endianness/index.md index 64e7fc633933b5..211e97dde7a28a 100644 --- a/files/ko/glossary/endianness/index.md +++ b/files/ko/glossary/endianness/index.md @@ -2,6 +2,7 @@ title: 엔디언 slug: Glossary/Endianness --- + **엔디언**(endian, endianness) 또는 **바이트 순서**는 숫자를 구성하는 바이트를 컴퓨터가 정렬하는 방법입니다. 메모리의 저장 공간은 인덱스, 또는 주소를 가지고 있습니다. 각각의 바이트는 8비트 숫자(`0x00` 이상, `0xff` 이하)를 저장할 수 있으므로, 그보다 큰 숫자에 대해서는 두 개 이상의 바이트가 필요합니다. 여러 개의 바이트를 정렬하는, 지금까지 가장 많이 쓰이는 방법은 모든 Intel 프로세서가 사용하는 **리틀 엔디언**입니다. 리틀 엔디언은 작은 단위부터 정렬하는 방식으로, 가장 작은 단위의 바이트가 맨 앞 혹은 앞쪽 주소를 차지합니다. 이 방식은 유럽식 날짜 표기(31-12-2050)에 대입할 수 있습니다. diff --git a/files/ko/glossary/entity_header/index.md b/files/ko/glossary/entity_header/index.md index c8d72fba387731..6e5ad515dc8ddc 100644 --- a/files/ko/glossary/entity_header/index.md +++ b/files/ko/glossary/entity_header/index.md @@ -2,6 +2,7 @@ title: 엔티티 헤더 slug: Glossary/Entity_header --- + 엔티티 헤더는 메시지 바디의 컨텐츠를 나타내는 {{glossary("header", "HTTP 헤더")}}입니다. 엔티티 헤더는 HTTP 요청 및 응답 모두에서 사용됩니다. {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Encoding")}}과 같은 헤더는 엔티티 헤더입니다. 엔티티 헤더가 요청이나 응답 헤더가 아님에도 불구하고, 이러한 용어로 종종 포함됩니다. diff --git a/files/ko/glossary/falsy/index.md b/files/ko/glossary/falsy/index.md index 84a14c95e931ec..fca3336ce0657b 100644 --- a/files/ko/glossary/falsy/index.md +++ b/files/ko/glossary/falsy/index.md @@ -9,15 +9,15 @@ slug: Glossary/Falsy 다음은 8가지 거짓 같은 값들입니다: -| `false` | 키워드 [false](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#구형_표준의_확장_예약_키워드) | -| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -| `0` | 숫자 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입) | -| `-0` | 음수 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입) | -| `0n` | [BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt). 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. `0n`은 거짓 같은 값. | -| `""` | 빈 [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) | -| {{Glossary("null")}} | [null](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) - 아무런 값도 없음 | +| `false` | 키워드 [false](/ko/docs/Web/JavaScript/Reference/Lexical_grammar#구형_표준의_확장_예약_키워드) | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| `0` | 숫자 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입) | +| `-0` | 음수 [zero](/ko/docs/Web/JavaScript/Data_structures#Number_타입) | +| `0n` | [BigInt](/ko/docs/Web/JavaScript/Reference/Global_Objects/BigInt). 불리언으로 사용될 경우, 숫자와 같은 규칙을 따름. `0n`은 거짓 같은 값. | +| `""` | 빈 [string](/ko/docs/Web/JavaScript/Reference/Global_Objects/String) | +| {{Glossary("null")}} | [null](/ko/docs/Web/JavaScript/Reference/Global_Objects/null) - 아무런 값도 없음 | | {{Glossary("undefined")}} | [undefined](/ko/docs/Web/JavaScript/Reference/Global_Objects/undefined) - 원시값 | -| {{Glossary("NaN")}} | [NaN](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) - 숫자가 아님 | +| {{Glossary("NaN")}} | [NaN](/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN) - 숫자가 아님 | > **참고:** 오브젝트는 [\[\[IsHTMLDDA\]\] internal slot](https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot) 을 가지고 있어야 거짓같은 값이 됩니다. 이 슬롯은 [`document.all`](/ko/docs/Web/API/Document/all) 에만 존재하며 자바스크립트로 설정될 수 없습니다. @@ -41,10 +41,10 @@ if ("") 첫 번째 객체가 거짓 같은 값이라면, 해당 객체를 반환합니다. ```js -false && "dog" +false && "dog"; // ↪ false -0 && "dog" +0 && "dog"; // ↪ 0 ``` diff --git a/files/ko/glossary/first-class_function/index.md b/files/ko/glossary/first-class_function/index.md index 80ff39fbc2efaa..c16ba07c4ed5d7 100644 --- a/files/ko/glossary/first-class_function/index.md +++ b/files/ko/glossary/first-class_function/index.md @@ -23,8 +23,8 @@ foo(); // 변수를 사용해 호출 {{glossary("Variable", "변수")}}에 '익명함수'를 할당한 다음, 끝에 괄호 `()`를 추가하면서 함수를 호출할 해당 변수를 사용합니다. > **참고:** 함수가 이름을 가지고 있더라도, 변수 이름을 사용하여 함수를 호출할 수 있습니다. -함수에 이름을 지정하는 것은 코드를 디버깅할 때 도움이 됩니다. -하지만 함수를 호출하는 방식에는 영향을 미치지 않을 것입니다. +> 함수에 이름을 지정하는 것은 코드를 디버깅할 때 도움이 됩니다. +> _하지만 함수를 호출하는 방식에는 영향을 미치지 않을 것입니다._ ### 함수에 전달인자로 전달 diff --git a/files/ko/glossary/flex_container/index.md b/files/ko/glossary/flex_container/index.md index d4df3413303957..06f46a66313cca 100644 --- a/files/ko/glossary/flex_container/index.md +++ b/files/ko/glossary/flex_container/index.md @@ -2,6 +2,7 @@ title: 플렉스 컨테이너 slug: Glossary/Flex_Container --- + {{glossary("flexbox", "플렉스박스")}} 레이아웃은 부모 요소의 `display` 속성에 `flex` 또는 `inline-flex` 값을 지정해 정의합니다. 이 때, 부모 요소는 **플렉스 컨테이너**, 각각의 자식 요소를 {{glossary("flex item", "플렉스 항목")}}이 됩니다. `flex` 값은 요소를 블록 레벨 플렉스 컨테이너로 지정하고, `inline-flex`는 인라인 레벨 플렉스 컨테이너로 지정합니다. 두 값은 요소에 새로운 **플렉스 서식 맥락**을 생성합니다. 플렉스 서식 맥락은 블록 서식 맥락과 유사하여 플로팅 요소가 컨테이너를 침범하지 않으며, 컨테이너의 바깥 여백이 자기 아래 플렉스 항목의 바깥 여백과 상쇄되지 않습니다. diff --git a/files/ko/glossary/flex_item/index.md b/files/ko/glossary/flex_item/index.md index 1fc365775d67d1..4d35030532d90d 100644 --- a/files/ko/glossary/flex_item/index.md +++ b/files/ko/glossary/flex_item/index.md @@ -2,6 +2,7 @@ title: 플렉스 항목 slug: Glossary/Flex_Item --- + {{glossary("Flex Container", "플렉스 컨테이너")}}(`display: flex` 또는 `display: inline-flex`를 지정한 요소)의 바로 아래 자식은 **플렉스 항목**이 됩니다. 플렉스 컨테이너 내의 텍스트 역시 플렉스 항목입니다. diff --git a/files/ko/glossary/fork/index.md b/files/ko/glossary/fork/index.md index 626112b4a63a46..601b1288700371 100644 --- a/files/ko/glossary/fork/index.md +++ b/files/ko/glossary/fork/index.md @@ -2,6 +2,7 @@ title: Fork slug: Glossary/Fork --- + 포크는 프로젝트에 누군가의 자신의 수정 사항을 추가하기 위한 어떤 시점에 있는 기존 소프트웨어 프로젝트의 사본이다. 기본적으로, 만약 원본 소프트웨어의 라이센스가 허가한다면, 당신은 코드를 복사하여 자신의 추가사항을 가지고 그 코드를 개발할 수 있는데, 이것이 "포크"가 될 것이다. 포크는 종종 무료 오픈소스 소프트웨어 개발에서 볼 수 있다. 이는 Git(또는 GitHub 플랫폼)을 사용한 기여 모델 덕분에 더 많이 사용되는 용어다. diff --git a/files/ko/glossary/function/index.md b/files/ko/glossary/function/index.md index 16d6cc1022ee9f..c1e2da66f975be 100644 --- a/files/ko/glossary/function/index.md +++ b/files/ko/glossary/function/index.md @@ -23,7 +23,7 @@ slug: Glossary/Function ```js // Function declaration -function foo() {}; +function foo() {} // Named function expression (function bar() {}); @@ -35,17 +35,17 @@ const foo = () => {}; **안쪽 함수**는 다른함수 내부에서 정의된 함수이다(아래 예에서는 square). **바깥 함수**는 함수를 포함하고 있는 함수이다(아래 예에서는 addSquares): ```js -function addSquares(a,b) { - function square(x) { - return x * x; - } - return square(a) + square(b); -}; +function addSquares(a, b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} //Using ECMAScript 2015 arrow notation -const addSquares = (a,b) => { - const square = x => x*x; - return square(a) + square(b); +const addSquares = (a, b) => { + const square = (x) => x * x; + return square(a) + square(b); }; ``` @@ -53,16 +53,14 @@ const addSquares = (a,b) => { ```js function loop(x) { - if (x >= 10) - return; - loop(x + 1); -}; + if (x >= 10) return; + loop(x + 1); +} //Using ECMAScript 2015 arrow notation -const loop = x => { - if (x >= 10) - return; - loop(x + 1); +const loop = (x) => { + if (x >= 10) return; + loop(x + 1); }; ``` @@ -79,14 +77,14 @@ function foo() { // Function expressions, named or anonymous, can be called immediately (function foo() { - console.log("Hello Foo"); -}()); + console.log("Hello Foo"); +})(); (function food() { - console.log("Hello Food"); + console.log("Hello Food"); })(); -(() => console.log('hello world'))(); +(() => console.log("hello world"))(); ``` IIFE에 대해 더 많은 설명이 필요하다면 위키피디아의 다음 페이지를 확인 바란다: [Immediately Invoked Function Expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) diff --git a/files/ko/glossary/global_object/index.md b/files/ko/glossary/global_object/index.md index 12f8232173b9be..7b452abb1bff36 100644 --- a/files/ko/glossary/global_object/index.md +++ b/files/ko/glossary/global_object/index.md @@ -2,6 +2,7 @@ title: 전역 객체 slug: Glossary/Global_object --- + 전역 객체 {{glossary("object")}} 는 전역 범위 {{glossary("global scope")}} 에 항상 존재하는 객체를 의미합니다. 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 그것들은 전역 객체의 멤버로서 생성됩니다. (이것은 {{Glossary("Node.js")}} 에서는 예외입니다.) 전역 객체의 {{Glossary("interface")}} 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 예를 들어: @@ -28,14 +29,14 @@ foo === window.foo; // Returns: true 전역 객체 `foo` 는 `window` 객체에 아래와 같이 저장됩니다: ```js -foo: "foobar" +foo: "foobar"; ``` ### 전역 함수 접근 ```js function greeting() { - console.log("Hi!"); + console.log("Hi!"); } window.greeting(); // It is the same as the normal invoking: greeting(); @@ -49,7 +50,7 @@ window.greeting(); // It is the same as the normal invoking: greeting(); ```js greeting: function greeting() { - console.log("Hi!"); + console.log("Hi!"); } ``` diff --git a/files/ko/glossary/gpl/index.md b/files/ko/glossary/gpl/index.md index 29d05b33734939..ebdfff8afe46fd 100644 --- a/files/ko/glossary/gpl/index.md +++ b/files/ko/glossary/gpl/index.md @@ -2,6 +2,7 @@ title: GPL slug: Glossary/GPL --- + (GNU) GPL (General Public License)은 Free Software Foundation에서 배포하는 copyleft 무료 소프트웨어 라이선스이다. GPL 라이선스 프로그램의 사용자들은 동일한 면허에 따라 프로그램을 재분배(수정 또는 변경되지 않음)할 경우, 사용, 소스 코드 읽기, 수정 및 변경사항 재분배할 수 있는 자유가 부여된다. ## 더 알아보기 diff --git a/files/ko/glossary/head/index.md b/files/ko/glossary/head/index.md index 995e98c04af363..3e4dffa18e2a1c 100644 --- a/files/ko/glossary/head/index.md +++ b/files/ko/glossary/head/index.md @@ -2,6 +2,7 @@ title: Head slug: Glossary/Head --- + **Head** 란 {{glossary("HTML")}} 문서의 일부분으로써 해당 문서의 {{glossary("metadata")}} 를 포함하는데, 예를 들면 저자, 설명, 그리고 HTML에 적용될 수 있는 {{glossary("CSS")}} 또는 {{glossary("JavaScript")}} 파일들로 연결되는 것들이 이에 해당될 수 있다. ## 더 알아보기 diff --git a/files/ko/glossary/hoisting/index.md b/files/ko/glossary/hoisting/index.md index 2770bab86bf138..5d86aad3634a3b 100644 --- a/files/ko/glossary/hoisting/index.md +++ b/files/ko/glossary/hoisting/index.md @@ -2,6 +2,7 @@ title: 호이스팅 slug: Glossary/Hoisting --- + JavaScript에서 **호이스팅**(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. `var`로 선언한 변수의 경우 호이스팅 시 `undefined`로 변수를 초기화합니다. 반면 `let`과 `const`로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요. @@ -73,8 +74,8 @@ var y = 2; // y를 선언하고 초기화 // 예제 2 // 호이스팅은 없지만, 변수 초기화는 (아직 하지 않은 경우) 변수 선언까지 병행하므로 변수를 사용할 수 있음 -a = '크랜'; // a 초기화 -b = '베리'; // b 초기화 +a = "크랜"; // a 초기화 +b = "베리"; // b 초기화 console.log(a + "" + b); // '크랜베리' ``` diff --git a/files/ko/glossary/html/index.md b/files/ko/glossary/html/index.md index 59154d67979fbf..d049d8792a4b1b 100644 --- a/files/ko/glossary/html/index.md +++ b/files/ko/glossary/html/index.md @@ -2,6 +2,7 @@ title: HTML slug: Glossary/HTML --- + {{QuickLinksWithSubpages("/ko/docs/Glossary")}} **HTML**(Hypertext Markup Language)은 웹페이지의 구조를 지정하는 기술적인 언어입니다. diff --git a/files/ko/glossary/http_3/index.md b/files/ko/glossary/http_3/index.md index df6430e47c5803..3f85cdc7744431 100644 --- a/files/ko/glossary/http_3/index.md +++ b/files/ko/glossary/http_3/index.md @@ -2,6 +2,7 @@ title: HTTP/3 slug: Glossary/HTTP_3 --- + **HTTP/3**는 {{glossary("HTTP 2", "HTTP/2")}} 다음 [HTTP 네크워크 프로토콜](/ko/docs/Web/HTTP/Basics_of_HTTP)입니다. HTTP/3의 요점은 {{glossary("TCP")}} 대신 QUIC이라는 새로운 {{glossary("UDP")}} 프로토콜을 사용하는 것입니다. diff --git a/files/ko/glossary/idempotent/index.md b/files/ko/glossary/idempotent/index.md index 8ac06d9c1b49d1..8cb173f8357022 100644 --- a/files/ko/glossary/idempotent/index.md +++ b/files/ko/glossary/idempotent/index.md @@ -2,6 +2,7 @@ title: 멱등성 slug: Glossary/Idempotent --- + 동일한 요청을 한 번 보내는 것과 여러 번 연속으로 보내는 것이 같은 효과를 지니고, 서버의 상태도 동일하게 남을 때, 해당 HTTP 메서드가 **멱등성**을 가졌다고 말합니다. 다른 말로는, 멱등성 메서드에는 통계 기록 등을 제외하면 어떠한 부수 효과(side effect)도 존재해서는 안됩니다. 올바르게 구현한 경우 {{HTTPMethod("GET")}}, {{HTTPMethod("HEAD")}}, {{HTTPMethod("PUT")}}, {{HTTPMethod("DELETE")}} 메서드는 멱등성을 가지며, {{HTTPMethod("POST")}} 메서드는 그렇지 않습니다. 모든 {{glossary("safe", "안전한")}} 메서드는 멱등성도 가집니다. 멱등성을 따질 땐 실제 서버의 백엔드 상태만 보면 되며, 각 요청에서 반환하는 응답 코드는 다를 수 있습니다. 첫 번째 {{HTTPMethod("DELETE")}} 요청이 {{HTTPStatus("200")}}을 반환한다면, 그 이후는 아마 {{HTTPStatus("404")}}를 반환할 것입니다. `DELETE`가 멱등성을 가진다는 것은, REST API에서 개발자는 `DELETE` 메서드를 사용해 "목록의 마지막 항목 제거" 기능을 구현해서는 안된다는 것입니다. diff --git a/files/ko/glossary/iife/index.md b/files/ko/glossary/iife/index.md index 68e49e6a9b2cd7..21c4d43d7064ae 100644 --- a/files/ko/glossary/iife/index.md +++ b/files/ko/glossary/iife/index.md @@ -7,7 +7,7 @@ slug: Glossary/IIFE ```js (function () { - statements + statements; })(); ``` @@ -21,18 +21,18 @@ slug: Glossary/IIFE ```js (function () { - var aName = "Barry"; + var aName = "Barry"; })(); // IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다. -aName // throws "Uncaught ReferenceError: aName is not defined" +aName; // throws "Uncaught ReferenceError: aName is not defined" ``` IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다. ```js var result = (function () { - var name = "Barry"; - return name; + var name = "Barry"; + return name; })(); // 즉시 결과를 생성한다. result; // "Barry" diff --git a/files/ko/glossary/immutable/index.md b/files/ko/glossary/immutable/index.md index 550517a0cf8755..857db715a568fd 100644 --- a/files/ko/glossary/immutable/index.md +++ b/files/ko/glossary/immutable/index.md @@ -2,6 +2,7 @@ title: Immutable slug: Glossary/Immutable --- + 불변 [객체](/ko/docs/Glossary/Object) 는 내용을 변경할 수 없는 객체입니다. 객체는 다양한 이유로 불변일 수 있습니다. 예를 들어 아래와 같습니다. diff --git a/files/ko/glossary/index.md b/files/ko/glossary/index.md index 2232951fe37f7c..ccd3899c06f1d9 100644 --- a/files/ko/glossary/index.md +++ b/files/ko/glossary/index.md @@ -1,5 +1,5 @@ --- -title: 'MDN Web Docs 용어 사전: 웹 용어 정의' +title: "MDN Web Docs 용어 사전: 웹 용어 정의" slug: Glossary --- diff --git a/files/ko/glossary/inline-level_content/index.md b/files/ko/glossary/inline-level_content/index.md index 4b1b9db80fdad2..b98c6b8f84718c 100644 --- a/files/ko/glossary/inline-level_content/index.md +++ b/files/ko/glossary/inline-level_content/index.md @@ -23,8 +23,10 @@ HTML(**Hypertext Markup Language**)의 요소는 역사적으로 ["블록 레벨 인라인 요소를 보이는 다음 예제를 확인해주세요. ```html -
다음 span은 인라인 요소로, -영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다.
+
+ 다음 span은 인라인 요소로, 영향 범위의 시작과 + 끝을 알 수 있도록 배경색을 지정했습니다. +
``` 이 예제에서 {{HTMLElement("div")}}는 텍스트를 가진 블록 레벨 요소입니다. 그 텍스트 안에는 인라인 요소인 {{HTMLElement("span")}}이 존재합니다. ``은 인라인이기 때문에 전체 문단이 끊기지 않고 하나로 그려집니다. 결과도 확인해보세요. @@ -46,8 +48,11 @@ background-color:#ee3; 이제 아까 만든 ``을 마치 {{htmlelement("p")}}처럼 블록 레벨인 요소로 바꿔보겠습니다. ```html -
다음 p는

블록 레벨 요소

로, -영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다. +
+ 다음 p는 +

블록 레벨 요소

+ 로, 영향 범위의 시작과 끝을 알 수 있도록 배경색을 지정했습니다. +
``` ``` -이 코드로는 라벨이 인풋과 명확하게 연관지어집니다. 스크린 리더 설명은 “Fill in your name: edit text”와 같을 것입니다. +이 코드로는 라벨이 인풋과 명확하게 연관지어집니다. 스크린 리더 설명은 "Fill in your name: edit text"와 같을 것입니다. !['Fill in your name'으로 읽히는 좋은 폼 라벨이 주어진 텍스트 인풋 폼 컨트롤.](voiceover-good-form-label.png) @@ -486,7 +486,7 @@ Fill in your name:

``` -첫번째 이미지는 스크린 리더로 봤을 때 사용자에게 별 도움을 주지 않습니다. 예를 들어 VoiceOver는 "/dinosaur.png, image”라고 읽어줍니다. 조금의 도움이라도 제공하기 위해 파일명을 읽어주는 것이죠. 이 예시에서는 유저가 적어도 어떤 종류의 공룡이라는 점을 알 수 있지만, 대부분의 경우 파일명은 기계(예를 들면 디지털 카메라)가 생성합니다. 아마 이미지 내용에 대한 어떤 맥락도 제공하지 않겠죠. +첫번째 이미지는 스크린 리더로 봤을 때 사용자에게 별 도움을 주지 않습니다. 예를 들어 VoiceOver는 "/dinosaur.png, image"라고 읽어줍니다. 조금의 도움이라도 제공하기 위해 파일명을 읽어주는 것이죠. 이 예시에서는 유저가 적어도 어떤 종류의 공룡이라는 점을 알 수 있지만, 대부분의 경우 파일명은 기계(예를 들면 디지털 카메라)가 생성합니다. 아마 이미지 내용에 대한 어떤 맥락도 제공하지 않겠죠. > **참고:** 이것이 이미지 안에 텍스트 콘텐츠를 포함해서는 안되는 이유입니다. 스크린 리더는 그 정보에 접근할 수 없습니다. 다른 단점도 있습니다. 그것을 선택하거나 복사/붙여넣기 할 수 없습니다. 하지 말라면 하지마세요. @@ -548,7 +548,7 @@ HTML에는 {{htmlelement("figure")}}와 어떤 종류(이미지 외에 어떤 ``` -페이지 디자인에 포함되어 있는 이미지가 시각적인 장식의 목적만을 가지는 경우가 있습니다. 위 코드 예시에서는 이미지의 `alt` 속성이 비어있는 것을 볼 수 있는데, 이는 스크린 리더가 이미지를 인식해도 설명을 시도하지 않게 하기 위함입니다. “이미지” 같은 것을 말하기보다요. +페이지 디자인에 포함되어 있는 이미지가 시각적인 장식의 목적만을 가지는 경우가 있습니다. 위 코드 예시에서는 이미지의 `alt` 속성이 비어있는 것을 볼 수 있는데, 이는 스크린 리더가 이미지를 인식해도 설명을 시도하지 않게 하기 위함입니다. "이미지" 같은 것을 말하기보다요. `alt` 속성을 아예 사용하지 않는 대신 빈 문자열을 넣는 것은 많은 스크린 리더가 `alt` 속성이 없는 경우 이미지 URL 자체를 알려주기 때문입니다. 위 예시의 이미지는 관련된 머릿말을 시각적으로 꾸미는 역할을 합니다. 이런 경우, 또는 정말로 의미있는 내용 없이 장식 요소인 경우 `img` 요소에 빈 `alt` 속성을 추가해야 합니다. 또 다른 방법으로는 aria [`role`](/ko/docs/Web/Accessibility/ARIA/Roles) 속성을 활용해 [`role="presentation"`](/ko/docs/Web/Accessibility/ARIA/Roles/presentation_role) 설정을 할 수 있습니다. 이 역시 스크린 리더가 대체 텍스트를 읽지 않도록 합니다. diff --git a/files/ko/learn/accessibility/mobile/index.md b/files/ko/learn/accessibility/mobile/index.md deleted file mode 100644 index cbfc471130b530..00000000000000 --- a/files/ko/learn/accessibility/mobile/index.md +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: 모바일 접근성 -slug: Learn/Accessibility/Mobile -original_slug: Learn/접근성/모바일 ---- - -{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} - -모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다. - - - - - - - - - - - - -
사전지식: -

- 기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, - 그리고 - 이전 내용들에 대한 이해. -

-
목표: -

- 모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 - 이해한다. -

-
- -## 모바일 장치에서의 접근성 - -접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다). - -The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain). - -These days, mobile devices can usually handle fully-featured websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for [WAI-ARIA](/ko/docs/Learn/Accessibility/WAI-ARIA_basics), too. - -To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices. - -There are some exceptions that need special consideration for mobile; the main ones are: - -- Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard). -- User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). -- Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution screens. - -## Summary of screenreader testing on Android and iOS - -The most common mobile platforms have fully functional screen readers. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations. - -Let's look at the main two: TalkBack on Android and VoiceOver on iOS. - -### Android TalkBack - -The TalkBack screen reader is built into the Android operating system. - -To turn it on, look up what phone model and Android version you have, and then look up where the TalkBack menu is. It tends to differ widely between Android versions and even between different phone models. Some phone manufacturers (e.g. Samsung) don't even have TalkBack in newer phones, and instead opted for their own screen reader. - -When you've found the TalkBack menu, press the slider switch to turn TalkBack on. Follow any additional on-screen prompts that you are presented with. - -When TalkBack is turned on, your Android device's basic controls will be a bit different. For example: - -1. Single-tapping an app will select it, and the device will read out what the app is. -2. Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option. -3. Double-tapping anywhere will open the app/select the option. -4. You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across. - -If you want to turn TalkBack off: - -1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.) -2. Navigate to the slider switch and activate it to turn it off. - -> **참고:** You can get to your home screen at any time by swiping up and left in a smooth motion. If you have more than one home screen, you can move between them by swiping two fingers left and right. - -For a more complete list of TalkBack gestures, see [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827). - -#### Unlocking the phone - -When TalkBack is turned on, unlocking the phone is a bit different. - -You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it. - -You can also explore by touch to find the _Unlock_ button at the bottom middle of the screen, and then double-tap. - -#### Global and local menus - -TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in. - -To get to these menus: - -1. Access the global menu by quickly swiping down, and then right. -2. Access the local menu by quickly swiping up, and then right. -3. Swipe left and right to cycle between the different options. -4. Once you've selected the option you want, double-click to choose that option. - -For details on all the options available under the global and local context menus, see [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066). - -#### Browsing web pages - -You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc. - -For example, with TalkBack turned on: - -1. Open your web browser. -2. Activate the URL bar. -3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: - - - Select the URL bar by swiping left/right till you get to it, and then double-tapping. - - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character. - - Once you've finished, find the Enter key and press it. - -4. Swipe left and right to move between different items on the page. -5. Swipe up and right with a smooth motion to enter the local content menu. -6. Swipe right until you find the "Headings and Landmarks" option. -7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks. -8. To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate. - -**Note:** See [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) for more complete documentation. - -### iOS VoiceOver - -A mobile version of VoiceOver is built into the iOS operating system. - -To turn it on, go to Your _Settings_ app and select _Accessibility > VoiceOver_. Press the _VoiceOver_ slider to enable it (you'll also see a number of other options related to VoiceOver on this page). - -> **참고:** Some older iOS devices have the VoiceOver menu at _Settings app_ > _General_ > _Accessibility_ > _VoiceOver_. - -Once VoiceOver is enabled, iOS's basic control gestures will be a bit different: - -1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on. -2. You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it). -3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen. -4. Swipe with three fingers to scroll through a page. -5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app. - -To turn it off again, navigate back to _Settings > General > Accessibility > VoiceOver_ using the above gestures, and toggle the _VoiceOver_ slider back to off. - -#### Unlock phone - -To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one. - -#### Using the Rotor - -When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it: - -1. Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options. -2. Once you've found the option you want: - - - Release your fingers to select it. - - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item. - -The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example). - -#### Browsing web pages - -Let's have a go at web browsing with VoiceOver: - -1. Open your web browser. -2. Activate the URL bar. -3. Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL: - - - Select the URL bar by swiping left/right until you get to it, and then double-tapping. - - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it. - - Once you've finished, find the Enter key and press it. - -4. Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link). -5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate. -6. Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available: - - - _Speaking Rate_: Change the speaking rate. - - _Containers_: Move between different semantic containers on the page. - - _Headings_: Move between headings on the page. - - _Links_: Move between links on the page. - - _Form Controls_: Move between form controls on the page. - - _Language_: Move between different translations, if they are available. - -7. Select _Headings_. Now you'll be able to swipe up and down to move between headings on the page. - -**Note:** For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3). - -## Control mechanisms - -In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see [Mouse-specific events](/ko/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality. - -As an example, the [click](/ko/docs/Web/API/GlobalEventHandlers/onclick) event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) example ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) to see what we mean. - -Alternatively, mouse-specific events such as [mousedown](/ko/docs/Web/API/GlobalEventHandlers/onmousedown) and [mouseup](/ko/docs/Web/API/GlobalEventHandlers/onmouseup) create problems — their event handlers cannot be invoked using non-mouse controls. - -If you try to control our [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following: - -``` -div.onmousedown = function() { - initialBoxX = div.offsetLeft; - initialBoxY = div.offsetTop; - movePanel(); -} - -document.onmouseup = stopMove; -``` - -To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices: - -``` -div.ontouchstart = function(e) { - initialBoxX = div.offsetLeft; - initialBoxY = div.offsetTop; - positionHandler(e); - movePanel(); -} - -panel.ontouchend = stopMove; -``` - -We've provided a simple example that shows how to use the mouse and touch events together — see [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) also). - -> **참고:** You can also see fully functional examples showing how to implement different control mechanisms at [Implementing game control mechanisms](/ko/docs/Games/Techniques/Control_mechanisms). - -## Responsive design - -[Responsive design](/ko/docs/Web/Apps/Progressive/Responsive) is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types. - -In particular, the most common problems that need to be addressed for mobile are: - -- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/ko/docs/Web/CSS/Media_Queries), [viewport](/ko/docs/Mozilla/Mobile/Viewport_meta_tag), and [flexbox](/ko/docs/Learn/CSS/CSS_layout/Flexbox). -- Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). -- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Adding vector graphics to the web](/ko/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details). - -**Note:** We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links). - -### Specific mobile considerations - -There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them. - -#### Not disabling zoom - -Using [viewport](/ko/docs/Mozilla/Mobile/Viewport_meta_tag), it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}: - -```html - -``` - -You should never set `user-scalable=no` if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI. - -#### Keeping menus accessible - -Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu". - -When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in [Control mechanisms](#control_mechanisms) above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it. - -Click here for a [good hamburger menu example](http://fritz-weisshart.de/meg_men/). - -## User input - -On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard. - -For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) (see the [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)). - -It is also worth considering the use of HTML5 form input types such as the date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) for some examples (see the [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — try loading these and manipulating them on mobile devices. For example: - -- Types `number`, `tel`, and `email` display suitable virtual keyboards for entering numbers/telephone numbers. -- Types `time` and `date` display suitable pickers for selecting times and dates. - -If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See [input types](http://diveinto.html5doctor.com/detect.html#input-types) for raw information on detecting different input types, and also check out our [feature detection article](/ko/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) for much more information. - -## Summary - -In this article, we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through the usage of the most common screenreaders to aid you in accessibility testing. - -## See also - -- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — A list of articles in _Smashing Magazine_ covering different techniques for mobile web design. -- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Useful article about using touch events to get interactions working on mobile devices. - -{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.md b/files/ko/learn/accessibility/what_is_accessibility/index.md index 095953c1e4322e..eaed31f92bc9ed 100644 --- a/files/ko/learn/accessibility/what_is_accessibility/index.md +++ b/files/ko/learn/accessibility/what_is_accessibility/index.md @@ -110,7 +110,7 @@ l10n: ## 프로젝트에 접근성 구현하기 -실제 프로젝트 구현 단계에서 접근성은 “비싼 추가 사항”으로 간주되는 경우가 많은데, 아래와 같은 경우에는 사실이 될 수 있습니다. +실제 프로젝트 구현 단계에서 접근성은 "비싼 추가 사항"으로 간주되는 경우가 많은데, 아래와 같은 경우에는 사실이 될 수 있습니다. - 심각한 접근성 이슈가 있는 기존의 웹 사이트에 접근성을 추가하며 개조하려고 하는 경우 - 프로젝트가 한참 진행된 뒤에야 접근성을 고려하며 관련된 이슈들을 발견한 경우 @@ -125,7 +125,7 @@ l10n: 접근성을 위한 작업이 필요한 잠재적 문제 영역에 대해 기록하고, 철저하게 테스팅 될 수 있도록 하며 해결 방안과 대안을 생각해야 합니다. 텍스트 콘텐츠는 (다음 아티클에서 살펴볼 것처럼) 쉬운 편이지만, 멀티미디어 콘텐츠나 최신 3D 기술로 만들어진 그래픽들은 어떻게 해야할까요? 프로젝트 예산을 고려해 이런 콘텐츠들을 접근성 있게 만들기 위해서 어떤 일을 할 수 있는지 생각해보세요. 비용은 많이 들겠지만 모든 멀티미디어에 대해 다른 형태의 기록, 음성 등을 제공하는 것도 가능합니다. -동시에 현실적으로 생각하세요. “100% 접근성"은 실현 불가능한 이상입니다. 언제나 예외가 존재하고 어떤 사용자는 어떤 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 하지만 할 수 있는 만큼 노력해야 합니다. 만약 WebGL을 사용해 멋진 3D 파이 차트 그래픽을 만들 계획이라면, 같은 데이터에 대한 데이터 테이블을 접근성 있는 형태로 포함할 수 있습니다. 또는 3D 파이 차트를 테이블로 대체할 수도 있겠습니다. 테이블은 모두에게 접근성 있으며, 더 빠르게 개발 가능하고, CPU 집약적이지도 않으며 유지보수도 더 쉽습니다. +동시에 현실적으로 생각하세요. "100% 접근성"은 실현 불가능한 이상입니다. 언제나 예외가 존재하고 어떤 사용자는 어떤 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 하지만 할 수 있는 만큼 노력해야 합니다. 만약 WebGL을 사용해 멋진 3D 파이 차트 그래픽을 만들 계획이라면, 같은 데이터에 대한 데이터 테이블을 접근성 있는 형태로 포함할 수 있습니다. 또는 3D 파이 차트를 테이블로 대체할 수도 있겠습니다. 테이블은 모두에게 접근성 있으며, 더 빠르게 개발 가능하고, CPU 집약적이지도 않으며 유지보수도 더 쉽습니다. 반면에 흥미로운 3D 아트를 전시하는 갤러리 웹사이트를 작업하고 있다면, 모든 작품이 전적으로 시각적인 매체이므로 시각 장애인에게 완벽한 접근성을 제공하기는 어려울 것입니다. diff --git a/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md b/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md index 0560cea75f8994..16ab5b3b72b4d1 100644 --- a/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md +++ b/files/ko/learn/common_questions/tools_and_setup/checking_that_your_web_site_is_working_properly/index.md @@ -47,7 +47,7 @@ _There is no active learning available yet. [Please, consider contributing](/ko/ 우리의 개인 사이트를 봅시다.(동작x), `http://demozilla.examplehostingprovider.net/`. It's not showing the image we expected! -![Oops, the ‘unicorn’ image is missing](image-missing.png) +![Oops, the 'unicorn' image is missing](image-missing.png) Open Firefox's Network tool (**Tools ➤ Web Developer ➤ Network**) and reload the page: @@ -86,7 +86,7 @@ So what went wrong? At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: `unicorn_pics.png` rather than `unicorn_pic.png`. So correct the typo in your code editor by changing the image's `src` attribute: -![Deleting the ‘s’](code-correct.png) +![Deleting the 's'](code-correct.png) Save, [push to the server](/en-US/Learn/Upload_files_to_a_web_server), and reload the page in your browser: @@ -105,7 +105,7 @@ The most frequent errors that we find are these: #### Typos in the address -We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an “l”: +We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an "l": ![Address unreachable](cannot-find-server.png) @@ -154,7 +154,7 @@ PING mozilla.org (63.245.215.20): 56 data bytes round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms ``` -Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely. +Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an "interrupt" signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely. ### A simple checklist diff --git a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md index 16a292b0363aa6..18d6df9508fd6b 100644 --- a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md +++ b/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md @@ -85,7 +85,7 @@ To publish to this account, please connect through FTP with the following creden ![Our demozilla personal website, seen in a browser: it's empty](demozilla-empty.png) -> **참고:** 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 “This website is hosted by \[Hosting Service].”과 같은 페이지를 보게될 것입니다. +> **참고:** 보이는 화면은 여러분의 호스팅 제공자에 따라 다릅니다. 대부분은 "This website is hosted by \[Hosting Service]."과 같은 페이지를 보게될 것입니다. 이제 우리의 FTP 클라이언트를 멀리 떨어진 서버에 접속하기 위해 _"Create an account..." 버튼을 누릅니다._ 그리고 호스팅제공자로 부터 받은 정보를 해당 필드에 채워줍니다. diff --git a/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md b/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md index 0d915096660839..f12afb46db0ba3 100644 --- a/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md +++ b/files/ko/learn/common_questions/web_mechanics/what_is_a_domain_name/index.md @@ -59,7 +59,7 @@ _아직 이용가능한 Active Learning이 없습니다. [Please, consider contr #### 누가 도메인 이름을 갖고 있나요? -You cannot “buy a domain name”. You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name. +You cannot "buy a domain name". You pay for the right to use a domain name for one or more years. You can renew your right, and your renewal has priority over other people's applications. But you never own the domain name. Companies called registrars use domain name registries to keep track of technical and administrative information connecting you to your domain name. @@ -69,7 +69,7 @@ Companies called registrars use domain name registries to keep track of technica To find out whether a given domain name is available, -- Go to a domain name registrar's website. Most of them provide a “whois” service that tells you whether a domain name is available. +- Go to a domain name registrar's website. Most of them provide a "whois" service that tells you whether a domain name is available. - Alternatively, if you use a system with a built-in shell, type a `whois` command into it, as shown here for `mozilla.org`: ``` @@ -113,7 +113,7 @@ NOT FOUND 과정은 다음과 같습니다. 1. 등록 웹사이트로 가세요. -2. 일반적으로 눈에 띄게 “Get a domain name” 이라는 글자가 있을거에요. 클릭하세요. +2. 일반적으로 눈에 띄게 "Get a domain name" 이라는 글자가 있을거에요. 클릭하세요. 3. 요구하는 상세 정보를 채우세요. 그리고 특별히 원하는 도메인 네임의 스펠링을 정확하게 입력했는지 다시한번 확인해주세요. 한번 지불하면 돌이킬 수 없습니다. 4. 등록이 잘 되었다면 등록 웹사이트에서 연락이 올 것입니다. 그리고 몇시간내로 모든 DNS 서버들이 당신의 DNS 정보를 받을거구요. @@ -121,7 +121,7 @@ NOT FOUND #### DNS 갱신 -DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called “authoritative name server” or “top-level DNS servers.” Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information. +DNS databases are stored on every DNS server worldwide, and all these servers refer to a few ones called "authoritative name server" or "top-level DNS servers." Whenever your registrar creates or updates any information for a given domain, the information must be refreshed in every DNS database. Each DNS server that knows about a given domain stores the information for some time before it is automatically invalidated and then refreshed (the DNS server queries an authoritative server again). Thus, it takes some time for DNS servers that know about this domain name to get the up-to-date information. > **참고:** **Note :** This time is often called **propagation time**. However this term is not precise since the update is not propagating itself (top → down). DNS servers queried by your computer (down) are the ones that fetch the information from the authoritative server (top) when they need it. diff --git a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md index 88e287d43edcc2..a74e3a526a8a37 100644 --- a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -45,8 +45,14 @@ CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 ba ```css .box { - background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, - url(big-star.png) center no-repeat, rebeccapurple; + background: + linear-gradient( + 105deg, + rgba(255, 255, 255, 0.2) 39%, + rgba(51, 56, 57, 1) 96% + ) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, + rebeccapurple; } ``` @@ -179,9 +185,12 @@ CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 ba 다른 `background-*` 속성은 `background-image` 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다: ```css -background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-image: url(image1.png), url(image2.png), url(image3.png), + url(image1.png); background-repeat: no-repeat, repeat-x, repeat; -background-position: 10px 20px, top right; +background-position: + 10px 20px, + top right; ``` 다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, `image1` 의 `background-repeat` 값은 `no-repeat` 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 `background-position` 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — `image3` 에는 첫 번째 위치값이 제공되고, `image4` 에는 두 번째 위치값이 제공됩니다. diff --git a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md index 20c3c9012b9cc7..df0d3cc399f7bf 100644 --- a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -2,6 +2,7 @@ title: 계단식 및 상속 slug: Learn/CSS/Building_blocks/Cascade_and_inheritance --- + {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} 이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다. @@ -175,12 +176,12 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 다음 표는 기분을 전환하기 위해 몇 가지 분리된 예를 보여줍니다. 이것들을 살펴보고 왜 그들이 우리에게 그들에게 주어진 우선 순위를 가지고 있는지 이해하도록 하십시오. 선택자는 아직 자세히 다루지 않았지만, MDN [선택자 참조](/ko/docs/Web/CSS/CSS_Selectors) 에서 각 선택자의 세부 정보를 찾을 수 있습니다. -| 선택자 | Thousands | Hundreds | Tens | Ones | Total specificity | -| ------------------------------------------------------------------------------- | --------- | -------- | ---- | ---- | ----------------- | -| `h1` | 0 | 0 | 0 | 1 | 0001 | -| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | -| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | -| `#identifier` | 0 | 1 | 0 | 0 | 0100 | +| 선택자 | Thousands | Hundreds | Tens | Ones | Total specificity | +| ------------------------------------------------------------------------ | --------- | -------- | ---- | ---- | ----------------- | +| `h1` | 0 | 0 | 0 | 1 | 0001 | +| `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | +| `li > a[href*="en-US"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | +| `#identifier` | 0 | 1 | 0 | 0 | 0100 | | 요소의 {{htmlattrxref("style")}} 속성 안에 규칙이 있는 선택자가 없습니다 | 1 | 0 | 0 | 0 | 1000 | 계속 진행하기 전에, 실제 사례를 살펴보겠습니다. diff --git a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md index 7e4e8caf0be70d..8c71322471a838 100644 --- a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.md @@ -1,7 +1,6 @@ --- title: 텍스트 표시 방향 제어하기 slug: Learn/CSS/Building_blocks/Handling_different_text_directions - --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}} @@ -80,7 +79,7 @@ CSS 레이아웃, 특히 최신 레이아웃 방법을 살펴보기 시작하면 쓰기 모드 외에 텍스트 방향도 있습니다. 위에서 언급한 것처럼, 아랍어와 같은 일부 언어는 가로로 작성되지만, 오른쪽에서 왼쪽으로 작성됩니다. 이것은 창의적 의미에서 사용할 가능성이 있는 것이 아닙니다 — 단순히 오른쪽에 무언가를 정렬하려면 다른 방법이 있습니다 — 그러나 CSS 의 특성의 일부로 이것을 이해하는 것이 중요합니다. 웹은 왼쪽에서 오른쪽으로 표시되는 언어만을 위한 것이 아닙니다! -쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 ***시작** *과 ***끝** *에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다. +쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 _시작_ 과 _끝_ 에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다. ## 논리적 속성 및 값 diff --git a/files/ko/learn/css/building_blocks/images_media_form_elements/index.md b/files/ko/learn/css/building_blocks/images_media_form_elements/index.md index 807c21ac7b6b61..409ec268e38f08 100644 --- a/files/ko/learn/css/building_blocks/images_media_form_elements/index.md +++ b/files/ko/learn/css/building_blocks/images_media_form_elements/index.md @@ -129,8 +129,8 @@ button, input, select, textarea { - font-family : inherit; - font-size : 100%; + font-family: inherit; + font-size: 100%; } ``` @@ -173,7 +173,8 @@ textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; - padding: 0; margin: 0; + padding: 0; + margin: 0; } textarea { diff --git a/files/ko/learn/css/building_blocks/index.md b/files/ko/learn/css/building_blocks/index.md index f57d587987e4ef..48ba52d890c2eb 100644 --- a/files/ko/learn/css/building_blocks/index.md +++ b/files/ko/learn/css/building_blocks/index.md @@ -2,6 +2,7 @@ title: CSS 구성 블록 slug: Learn/CSS/Building_blocks --- + {{LearnSidebar}} 이 강의에서는 [CSS 첫 번째 단계](/ko/docs/Learn/CSS/First_steps) 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다. @@ -35,7 +36,7 @@ slug: Learn/CSS/Building_blocks - [결합자 (combinators)](/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators) - [박스 모델](/ko/docs/Learn/CSS/Building_blocks/The_box_model) - - : CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS ***박스 모델** *을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다. + - : CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS _박스 모델_ 을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다. - [배경 및 테두리](/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) - : 이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴 보겠습니다. 그라데이션 (gradients), 배경 이미지 및 둥근 테두리를 추가하는 경우, 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다. - [다른 텍스트 방향 처리](/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions) diff --git a/files/ko/learn/css/building_blocks/organizing/index.md b/files/ko/learn/css/building_blocks/organizing/index.md index bc70d64595875d..724e5e66ca19f7 100644 --- a/files/ko/learn/css/building_blocks/organizing/index.md +++ b/files/ko/learn/css/building_blocks/organizing/index.md @@ -2,6 +2,7 @@ title: CSS 구성 slug: Learn/CSS/Building_blocks/Organizing --- + {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}} 더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리성을 개선하기 위해, 다른 사용자가 사용하는 해결책을 간략하게 살펴보겠습니다. @@ -63,8 +64,13 @@ slug: Learn/CSS/Building_blocks/Organizing CSS 형식을 볼 수 있는 몇 가지 방법이 있습니다. 일부 개발자는 다음과 같이 모든 규칙을 한 라인에 넣습니다: ```css -.box { background-color: #567895; } -h2 { background-color: black; color: white; } +.box { + background-color: #567895; +} +h2 { + background-color: black; + color: white; +} ``` 다른 개발자는 모든 것을 새로운 라인으로 나누는 것을 선호합니다: @@ -236,7 +242,7 @@ If you are not taking an OOCSS approach you might create custom CSS for the diff } .comment .content { - font-size: .8rem; + font-size: 0.8rem; } .list-item { @@ -246,7 +252,7 @@ If you are not taking an OOCSS approach you might create custom CSS for the diff } .list-item .content { - font-size: .8rem; + font-size: 0.8rem; } ``` @@ -259,14 +265,14 @@ In OOCSS, you would create one pattern called `media` that would have all of the } .media .content { - font-size: .8rem; + font-size: 0.8rem; } .comment img { border: 1px solid grey; } - .list-item { +.list-item { border-bottom: 1px solid grey; } ``` @@ -286,7 +292,7 @@ The list-item would have `media` and `list-item` applied:
  • -
    +
``` @@ -300,9 +306,7 @@ BEM stands for Block Element Modifier. In BEM a block is a standalone entity suc ```html
- +
``` diff --git a/files/ko/learn/css/building_blocks/selectors/index.md b/files/ko/learn/css/building_blocks/selectors/index.md index 28ae67425d4dd8..d5de7052f1447a 100644 --- a/files/ko/learn/css/building_blocks/selectors/index.md +++ b/files/ko/learn/css/building_blocks/selectors/index.md @@ -52,7 +52,7 @@ CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS ## 선택자 목록 -동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 ***선택자 목록** *으로 결합할 수 있습니다. 예를 들어, `h1` 에 대해 동일한 CSS 와 `special` class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다. +동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 _선택자 목록_ 으로 결합할 수 있습니다. 예를 들어, `h1` 에 대해 동일한 CSS 와 `special` class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다. ```css h1 { @@ -66,7 +66,7 @@ h1 { 또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다. -```css +```css-nolint h1, .special { color: blue; } @@ -102,7 +102,8 @@ h1 { 그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 `h1` 또는 class 가 스타일 지정되지 않습니다. ```css -h1, ..special { +h1, +..special { color: blue; } ``` @@ -116,19 +117,22 @@ h1, ..special { 이 그룹에는 `

` 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다. ```css -h1 { } +h1 { +} ``` 또한 class 를 대상으로 하는 선택자가 포함됩니다. ```css -.box { } +.box { +} ``` 또는 ID ```css -#unique { } +#unique { +} ``` ### 속성 선택자 @@ -136,13 +140,16 @@ h1 { } 이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공합니다. ```css -a[title] { } +a[title] { +} ``` 또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오: ```css -a[href="https://example.com"] { } +a[href="https://example.com"] +{ +} ``` ### Pseudo-classes 및 pseudo-elements @@ -150,13 +157,15 @@ a[href="https://example.com"] { } 이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 `:hover` pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다: ```css -a:hover { } +a:hover { +} ``` 또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, `::first-line` 은 항상 `` 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 `

`) 을 선택합니다. ```css -p::first-line { } +p::first-line { +} ``` ### 결합자 (Combinators) @@ -164,7 +173,8 @@ p::first-line { } 최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (`>`) 를 사용하여 `

` 요소의 자식인 단락을 선택합니다: ```css -article > p { } +article > p { +} ``` ## 다음 단계 diff --git a/files/ko/learn/css/building_blocks/styling_tables/index.md b/files/ko/learn/css/building_blocks/styling_tables/index.md index 3ab6a0dc098370..7bec5be1960b8c 100644 --- a/files/ko/learn/css/building_blocks/styling_tables/index.md +++ b/files/ko/learn/css/building_blocks/styling_tables/index.md @@ -32,7 +32,9 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, ```html - + @@ -55,7 +57,7 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, - ... some rows removed for brevity + ... some rows removed for brevity @@ -87,9 +89,9 @@ HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 2. 다음으로, `style.css` 라는 새 파일을 만들고 다른 파일과 같은 디렉토리에 저장하십시오. 3. {{htmlelement("head")}} 안에 다음 HTML 행을 배치하여 CSS 를 HTML 에 연결하십시오: - ```html - - ``` + ```html + + ``` ### 간격 및 레이아웃 @@ -121,7 +123,8 @@ thead th:nth-child(4) { width: 35%; } -th, td { +th, +td { padding: 20px; } ``` @@ -149,7 +152,10 @@ th, td { 먼저, 다음 {{htmlelement("link")}} 요소를 기존 `` 요소 바로 위의 HTML head 에 추가하십시오: ```html - + ``` 이제 이전 CSS 아래의 `style.css` 파일에, 다음 CSS 를 추가하십시오: @@ -158,11 +164,12 @@ th, td { /* typography */ html { - font-family: 'helvetica neue', helvetica, arial, sans-serif; + font-family: "helvetica neue", helvetica, arial, sans-serif; } -thead th, tfoot th { - font-family: 'Rock Salt', cursive; +thead th, +tfoot th { + font-family: "Rock Salt", cursive; } th { @@ -200,14 +207,21 @@ tfoot th { 아래에서 다시 CSS 를 `style.css` 파일에 추가하고, 다시 시작하십시오: ```css -thead, tfoot { +thead, +tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } -thead th, tfoot th, tfoot td { - background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); +thead th, +tfoot th, +tfoot td { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.1), + rgba(0, 0, 0, 0.5) + ); border: 3px solid purple; } ``` @@ -256,7 +270,7 @@ table { ```css caption { - font-family: 'Rock Salt', cursive; + font-family: "Rock Salt", cursive; padding: 20px; font-style: italic; caption-side: bottom; diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.md b/files/ko/learn/css/building_blocks/the_box_model/index.md index 0f5afadc761678..0b446c5edfb16b 100644 --- a/files/ko/learn/css/building_blocks/the_box_model/index.md +++ b/files/ko/learn/css/building_blocks/the_box_model/index.md @@ -160,7 +160,9 @@ CSS 블록 박스 구성하기 위한 우리의 준비물은: html { box-sizing: border-box; } -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: inherit; } ``` diff --git a/files/ko/learn/css/building_blocks/values_and_units/index.md b/files/ko/learn/css/building_blocks/values_and_units/index.md index 78289aa54937ae..71be89c6dff8f4 100644 --- a/files/ko/learn/css/building_blocks/values_and_units/index.md +++ b/files/ko/learn/css/building_blocks/values_and_units/index.md @@ -52,7 +52,7 @@ CSS 사양과 MDN 의 속성 페이지에서 [``](/ko/docs/Web/CSS/color_ ```css h1 { color: black; - background-color: rgb(197,93,161); + background-color: rgb(197, 93, 161); } ``` @@ -64,12 +64,12 @@ CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉 CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다: -| 데이터 형식 | 설명 | -| ---- | --- | -| [``](/ko/docs/Web/CSS/integer) | `` 은 `1024` 또는`-55` 와 같은 정수입니다. | -| [``](/ko/docs/Web/CSS/number) | `` 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: `0.255`, `128` 또는 `-1.2`) 가 있을 수도 있고 없을 수도 있습니다.| -| [``](/ko/docs/Web/CSS/dimension) | `` 은 예를 들어 `45deg`, `5s` 또는 `10px`. 과 같은 단위가 붙어있는 `` 입니다. `` 은 [``](/ko/docs/Web/CSS/length), [``](/ko/docs/Web/CSS/angle), [` - - -
-
- - - -
- - -
+ {% csrf_token %} + +
+
+ + +
+
+ + + +
+ + +
{# Assumes you setup the password_reset view in your URLconf #} @@ -248,7 +248,7 @@ If you navigate to the logout URL () the Create and open /**locallibrary/templates/registration/logged_out.html**. Copy in the text below: -```html +```django {% extends "base_generic.html" %} {% block content %} @@ -271,7 +271,7 @@ The following templates can be used as a starting point. This is the form used to get the user's email address (for sending the password reset email). Create **/locallibrary/templates/registration/password_reset_form.html**, and give it the following contents: -```html +```django {% extends "base_generic.html" %} {% block content %} @@ -290,11 +290,14 @@ This is the form used to get the user's email address (for sending the password This form is displayed after your email address has been collected. Create **/locallibrary/templates/registration/password_reset_done.html**, and give it the following contents: -```html +```django {% extends "base_generic.html" %} {% block content %} -

We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.

+

+ We've emailed you instructions for setting your password. If they haven't + arrived in a few minutes, check your spam folder. +

{% endblock %} ``` @@ -302,7 +305,7 @@ This form is displayed after your email address has been collected. Create **/lo This template provides the text of the HTML email containing the reset link that we will send to users. Create **/locallibrary/templates/registration/password_reset_email.html**, and give it the following contents: -```html +```django Someone asked for password reset for email \{{ email }}. Follow the link below: \{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %} ``` @@ -311,35 +314,35 @@ Someone asked for password reset for email \{{ email }}. Follow the link below: This page is where you enter your new password after clicking the link in the password reset email. Create **/locallibrary/templates/registration/password_reset_confirm.html**, and give it the following contents: -```html +```django {% extends "base_generic.html" %} {% block content %} - {% if validlink %} -

Please enter (and confirm) your new password.

-
- {% csrf_token %} -
A summary of the UK's most famous punk bands + A summary of the UK's most famous punk bands +
BandLondon Calling
The Stranglers\{{ form.username.label_tag }}\{{ form.username }}\{{ form.password.label_tag }}\{{ form.password }}\{{ form.username.label_tag }}\{{ form.username }}\{{ form.password.label_tag }}\{{ form.password }}
- - - - - - - - - - - - -
\{{ form.new_password1.errors }} - \{{ form.new_password1 }}
\{{ form.new_password2.errors }} - \{{ form.new_password2 }}
- - {% else %} -

Password reset failed

-

The password reset link was invalid, possibly because it has already been used. Please request a new password reset.

- {% endif %} + {% if validlink %} +

Please enter (and confirm) your new password.

+
+ {% csrf_token %} + + + + + + + + + + + + + +
\{{ form.new_password1.errors }} + \{{ form.new_password1 }}
\{{ form.new_password2.errors }} + \{{ form.new_password2 }}
+
+ {% else %} +

Password reset failed

+

The password reset link was invalid, possibly because it has already been used. Please request a new password reset.

+ {% endif %} {% endblock %} ``` @@ -387,18 +390,17 @@ This section looks at what we can do to selectively control content the user see Open the base template (**/locallibrary/catalog/templates/base_generic.html**) and copy the following text into the `sidebar` block, immediately before the `endblock` template tag. -```html -
    +```django +
      + ... - ... - - {% if user.is_authenticated %} -
    • User: \{{ user.get_username }}
      • -
    • Logout
      • - {% else %} -
    • Login
      • - {% endif %} -
    + {% if user.is_authenticated %} +
  • User: \{{ user.get_username }}
    • +
  • Logout
    • + {% else %} +
  • Login
    • + {% endif %} +
``` As you can see, we use `if`-`else`-`endif` template tags to conditionally display text based on whether `\{{ user.is_authenticated }}` is true. If the user is authenticated then we know that we have a valid user, so we call **\\{{ user.get_username }}** to display their name. diff --git a/files/ko/learn/server-side/django/deployment/index.md b/files/ko/learn/server-side/django/deployment/index.md index 7db0710980ae1e..3cdab123c038f9 100644 --- a/files/ko/learn/server-side/django/deployment/index.md +++ b/files/ko/learn/server-side/django/deployment/index.md @@ -1,5 +1,5 @@ --- -title: 'Django 튜토리얼 파트 11: Django 웹사이트 공개하기' +title: "Django 튜토리얼 파트 11: Django 웹사이트 공개하기" slug: Learn/Server-side/Django/Deployment --- @@ -199,10 +199,10 @@ git 으로 작업하는 수많은 방법이 있지만, [Github](https://github.c 2. 로그인 해서 꼭대기 툴바의 **+** 링크를 클릭하여 **New repository**를 선택하라. 3. 이 폼의 모든 필드에 기입하라. 그렇지 않으면 진행이 불가한 것은 아니지만, 모두 채울것을 강력 추천한다. - - 새로운 저장소 이름 (예시: _django_local_library_)과 설명 (예시: "Local Library website written in Django")을 입력하라. - - "_Add .gitignore" 선택 목록에서 "_**Python**_"을 선택하라_. - - "_Add a license" 선택 목록에서 선호하는 라이센스 유형을 선택하라_. - - "**Initialize this repository with a README**." 체크박스에 체크하라 + - 새로운 저장소 이름 (예시: _django_local_library_)과 설명 (예시: "Local Library website written in Django")을 입력하라. + - "_Add .gitignore" 선택 목록에서 "_**Python**_"을 선택하라_. + - "_Add a license" 선택 목록에서 선호하는 라이센스 유형을 선택하라_. + - "**Initialize this repository with a README**." 체크박스에 체크하라 4. " **Create repository"** 버튼을 누른다 5. 신규 저장소 페이지에서 초록색의 "**Clone or download**" 버튼을 클릭한다. @@ -213,65 +213,65 @@ git 으로 작업하는 수많은 방법이 있지만, [Github](https://github.c 1. _git을 로컬 컴퓨터에 설치하라_ (플랫폼별 버전은 [이곳](https://git-scm.com/downloads) 에서 찾을 수 있다). 2. 커맨드 프롬프트/터미널 을 열고 위에서 복사한 URL을 이용하여 저장소 내용을 복제(clone) 한다 : - ```bash - git clone https://github.com//django_local_library.git - ``` + ```bash + git clone https://github.com//django_local_library.git + ``` - 이 명령은 현재 프롬프트의 위치에 저장소를 생성할 것이다. + 이 명령은 현재 프롬프트의 위치에 저장소를 생성할 것이다. 3. 새로운 저장소 위치로 이동한다. - ```bash - cd django_local_library.git - ``` + ```bash + cd django_local_library.git + ``` 마지막 단계는 어플리케이션을 복사하여 git을 이용해 저장소에 파일을 추가하는 것이다 : 1. 이 폴더에 Django 어플리케이션을 복사해 넣는다. (locallibrary 폴더를 포함한 위치가 아니라 **manage.py** 와 그 하위 폴더와 같은 위치의 모든 파일에 대해 작업한다). 2. **.gitignore** 파일을 열어서, 아래 코드를 맨 밑에 복사하고, 저장하라 ( 이 파일은 기본 설정에 의해 git에 저장되지 말아야할 파일을 구분하는데 사용된다). - ``` - # Text backup files - *.bak + ``` + # Text backup files + *.bak - #Database - *.sqlite3 - ``` + #Database + *.sqlite3 + ``` 3. 커맨드 프로프트/터미널을 열고 `add`명령으로 모든 파일을 git에 등록한다. - ```bash - git add -A - ``` + ```bash + git add -A + ``` 4. status 명령을 사용하여 등록하고자 하는 파일이 맞는지 확인한다 ( 당신은 소스파일만 등록 하길 원하고 바이너리나 임시 파일은 원치 않을 것이다). 명령을 실행하면 아래와 유사하게 나온다. - ``` - > git status - On branch master - Your branch is up-to-date with 'origin/master'. - Changes to be committed: - (use "git reset HEAD ..." to unstage) - - modified: .gitignore - new file: catalog/__init__.py - ... - new file: catalog/migrations/0001_initial.py - ... - new file: templates/registration/password_reset_form.html - ``` + ``` + > git status + On branch master + Your branch is up-to-date with 'origin/master'. + Changes to be committed: + (use "git reset HEAD ..." to unstage) + + modified: .gitignore + new file: catalog/__init__.py + ... + new file: catalog/migrations/0001_initial.py + ... + new file: templates/registration/password_reset_form.html + ``` 5. 위의 결과에 만족했다면, commit 명령으로 파일의 로컬 저장소 등록을 확정한다: - ```bash - git commit -m "First version of application moved into github" - ``` + ```bash + git commit -m "First version of application moved into github" + ``` 6. 다음 명령을 이용하여 Github 웹사이트와 로컬 저장소를 동기화 한다: - ``` - git push origin master - ``` + ``` + git push origin master + ``` 이런 작업이 완료된 후, repo를 생성한 Github 페이지로 다시 가서, 페이지를 새로 로딩하여, 전체 어플리케이션이 모두 업로드된것인지 확인할 수 있어야 한다. 이후로 파일 변경 사항이 발생하면 add/commit/push 순서로 명령을 사용하여 저장소를 업데이트 할 수 있다. diff --git a/files/ko/learn/server-side/django/development_environment/index.md b/files/ko/learn/server-side/django/development_environment/index.md index 70bc5fd78484f9..555ca2e64ef987 100644 --- a/files/ko/learn/server-side/django/development_environment/index.md +++ b/files/ko/learn/server-side/django/development_environment/index.md @@ -132,8 +132,8 @@ python3 -V 1. 필요한 설치 파일을 다운로드하세요: - 1. 로 가세요. - 2. **Download Python 3.7.0** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다). + 1. 로 가세요. + 2. **Download Python 3.7.0** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다). 2. 파인더를 통해 파일을 찾아, 패키지 파일을 더블클릭 하세요. 그리고선 설치 과정을 따릅니다. @@ -156,8 +156,8 @@ pip3 list 1. 필요한 설치 파일을 다운로드하세요: - 1. 로 가세요 - 2. **Download Python 3.7.1** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다). + 1. 로 가세요 + 2. **Download Python 3.7.1** 버튼을 선택하세요 (정확한 마이너 버전 숫자는 다를 수도 있습니다). 2. 다운로드된 파일을 더블클릭해서 파이썬을 설치하세요. diff --git a/files/ko/learn/server-side/django/forms/index.md b/files/ko/learn/server-side/django/forms/index.md index 841518faaf6cf2..13da9b6592c6d9 100644 --- a/files/ko/learn/server-side/django/forms/index.md +++ b/files/ko/learn/server-side/django/forms/index.md @@ -1,5 +1,5 @@ --- -title: 'Django 튜토리얼 파트 9: 폼(form)으로 작업하기' +title: "Django 튜토리얼 파트 9: 폼(form)으로 작업하기" slug: Learn/Server-side/Django/Forms --- @@ -52,9 +52,13 @@ slug: Learn/Server-side/Django/Forms ```html
- - - + + +
``` @@ -84,17 +88,17 @@ Django의 폼 처리 과정은 (모델에 대한 정보를 보여주는데 있 1. 사용자가 처음으로 폼을 요청할 때 기본 폼을 보여준다. - - 폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우) - - 이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에 unbound 상태라고 불린다. + - 폼은 비어있는 필드가 있을 수 있다 (예를 들면, 새로운 책을 등록할 경우) 아니면 초기값으로 채워진 필드가 있을 수도 있다. ( 예를 들면, 기존의 책을 수정하거나, 흔히 사용하는 초기값이 있을경우) + - 이 시점의 폼은 (초기값이 있긴해도) 유저가 입력한 값에 연관되지 않았기에 unbound 상태라고 불린다. 2. 제출 요청으로 부터 데이타를 수집하고 그것을 폼에 결합한다. - - 데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다. + - 데이타를 폼에 결합(binding) 한다는 것은 사용자 입력 데이타와 유효성을 위반한 경우의 에러메시지가 폼을 재표시할 필요가 있을 때 준비되었다는 의미이다. 3. 데이타를 다듬어서 유효성을 검증한다. - - 데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것) python에서 사용하는 타입의 데이타로 변환하는 것이다. - - 유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등) + - 데이타를 다듬는다는 것은 사용자 입력을 정화(sanitisation) 하고 (예를 들면, 잠재적으로 악의적인 콘덴츠를 서버로 보낼수도 있는 유효하지 않은 문자를 제거하는 것) python에서 사용하는 타입의 데이타로 변환하는 것이다. + - 유효성검증은 입력된 값이 해당 필드에 적절한 값인지 검사한다. (예를 들면, 데이타가 허용된 범위에 있는 값인지, 너무 짧거나 길지 않은지 등등) 4. 입력된 어떤 데이타가 유효하지 않다면, 폼을 다시 표시하는데 이번에는 초기값이 아니라 유저가 입력한 데이타와 문제가 있는 필드의 에러 메시지와 함께 표시한다. 5. 입력된 모든 데이타가 유효하다면, 요청된 동작을 수행한다. (예를 들면, 데이타를 저장하거나, 이메일을 보내거나, 검색결과를 반환하거나, 파일을 업로딩하는 작업 등등) @@ -361,19 +365,19 @@ def renew_book_librarian(request, pk): 뷰 에서 참조되는 템플릿 (**/catalog/templates/catalog/book_renew_librarian.html**)을 생성하고 아래 코드를 복사해넣어라 : -```html +```django {% extends "base_generic.html" %} {% block content %} -

Renew: {{ book_instance.book.title }}

-

Borrower: {{ book_instance.borrower }}

-

if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: {{book_instance.due_back}}

- -
- {% csrf_token %} - {{ form.as_table }} - -
+

Renew: {{ book_instance.book.title }}

+

Borrower: {{ book_instance.borrower }}

+

if book_instance.is_overdue %} class="text-danger"{% endif %}>Due date: {{book_instance.due_back}}

+ +
+ {% csrf_token %} + {{ form.as_table }} + +
{% endblock %} ``` @@ -389,9 +393,16 @@ def renew_book_librarian(request, pk): - +
- Enter date between now and 4 weeks (default 3 weeks). + Enter date between now and 4 weeks (default 3 weeks). ``` @@ -403,14 +414,21 @@ def renew_book_librarian(request, pk): ```html - -
    -
  • Invalid date - renewal in past
    • -
- -
- Enter date between now and 4 weeks (default 3 weeks). - + +
    +
  • Invalid date - renewal in past
    • +
+ +
+ Enter date between now and 4 weeks (default 3 weeks). + ``` @@ -431,8 +449,10 @@ def renew_book_librarian(request, pk): If you accepted the "challenge" in [Django Tutorial Part 8: User authentication and permissions](/ko/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself) you'll have a list of all books on loan in the library, which is only visible to library staff. We can add a link to our renew page next to each item using the template code below. -```html -{% if perms.catalog.can_mark_returned %}- Renew {% endif %} +```django +{% if perms.catalog.can_mark_returned %}- + Renew +{% endif %} ``` > **참고:** Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to access the renew book page (perhaps use your superuser account). @@ -556,19 +576,17 @@ The "create" and "update" views use the same template by default, which will be Create the template file **locallibrary/catalog/templates/catalog/author_form.html** and copy in the text below. -```html -{% extends "base_generic.html" %} +```django +{% extends "base_generic.html" %} {% block content %} - -
+ {% csrf_token %} - {{ form.as_table }} + {{ form.as_table }}
- -
+ {% endblock %} ``` @@ -576,20 +594,18 @@ This is similar to our previous forms, and renders the fields using a table. Not The "delete" view expects to find a template named with the format _model_name_**\_confirm_delete.html** (again, you can change the suffix using `template_name_suffix` in your view). Create the template file **locallibrary/catalog/templates/catalog/author_confirm_delete.html** and copy in the text below. -```html +```django {% extends "base_generic.html" %} {% block content %} +

Delete Author

-

Delete Author

- -

Are you sure you want to delete the author: \{{ author }}?

- -
- {% csrf_token %} - -
+

Are you sure you want to delete the author: \{{ author }}?

+
+ {% csrf_token %} + +
{% endblock %} ``` diff --git a/files/ko/learn/server-side/django/generic_views/index.md b/files/ko/learn/server-side/django/generic_views/index.md index 9808b936f67d1a..95c4263761c231 100644 --- a/files/ko/learn/server-side/django/generic_views/index.md +++ b/files/ko/learn/server-side/django/generic_views/index.md @@ -1,5 +1,5 @@ --- -title: 'Django Tutorial Part 6: Generic list and detail views' +title: "Django Tutorial Part 6: Generic list and detail views" slug: Learn/Server-side/Django/Generic_views --- @@ -126,7 +126,7 @@ class BookListView(generic.ListView): 제네릭 뷰의 템플릿은 다른 템플릿과 비슷합니다 (물론 템플릿에 전달되는 컨텍스트나 정보는 다를지도 모르지만요). 다른 index 템플릿처럼, 우리는 첫번째 줄에 base 템플릿을 넣어 확장한 다음, `content`라는 이름의 블록으로 교체합니다. -```html +```django {% extends "base_generic.html" %} {% block content %} @@ -151,7 +151,7 @@ class BookListView(generic.ListView): [`if`](https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#if), `else` 그리고 `endif` 라는 템플릿 태그들은 `book_list` 이 정의되었는지, 그리고 존재하는지 체크합니다. 만약 `book_list`가 없다면, 책이 존재하지 않는다는 `else` 절의 텍스트 문구가 표시될 것입니다. 만약 `book_list`가 존재한다면, 도서 목록의 갯수만큼 반복만큼 반복해서 실행합니다. -```html +```django {% if book_list %} {% else %} @@ -165,9 +165,9 @@ class BookListView(generic.ListView): [for](https://docs.djangoproject.com/en/2.0/ref/templates/builtins/#for) 와 `endfor` 라는 템플릿 태그들은 아래와 같이 도서 목록을 살펴보는 루프를 위해 사용합니다. 각각의 반복은 `book` 템플릿 변수에 현재 리스트 아이템에 대한 정보를 채웁니다. -```html +```django {% for book in book_list %} -
    • +
    • {% endfor %} ``` @@ -261,10 +261,10 @@ _Regular expressions_ 은 정말로 파워풀한 매핑 툴 입니다. 하지만 몇 가지 실제 패턴 예제를 보도록 합시다: -| Pattern | Description | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **r'^book/(?P\\d+)$'** | 이것은 우리가 URL mapper에서 사용한 Regular Expression입니다. 이 표현식은 먼저 문자열이 `book/` 으로 시작하는지 검사하고 (**^book/**), 그 다음에 한 개이상의 숫자가 오는지 (`\d+`), 그리고 문자열이 끝나기 전에 숫자가 아닌 문자가 들어 있지는 않는 지 검사합니다.또한 이 표현식은 모든 숫자들을 변환하고 **(?P\\d+)** 변환된 값을 view 에 'pk'라는 이름의 parameter로 넘깁니다. **변환된 값은 항상 String type으로 넘어갑니다**!예를 들어, 이 표현식은 `book/1234` 을 매칭합니다. 그리고 변수 `pk='1234'` 를 view에 넘깁니다. | -| **r'^book/(\d+)$'** | 이 표현식은 위의 표현식과 동일한 URL들을 매칭합니다. 변환된 정보는 명명되지 않은 argument로 view에 전달됩니다. | +| Pattern | Description | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **r'^book/(?P\\d+)$'** | 이것은 우리가 URL mapper에서 사용한 Regular Expression입니다. 이 표현식은 먼저 문자열이 `book/` 으로 시작하는지 검사하고 (**^book/**), 그 다음에 한 개이상의 숫자가 오는지 (`\d+`), 그리고 문자열이 끝나기 전에 숫자가 아닌 문자가 들어 있지는 않는 지 검사합니다.또한 이 표현식은 모든 숫자들을 변환하고 **(?P\\d+)** 변환된 값을 view 에 'pk'라는 이름의 parameter로 넘깁니다. **변환된 값은 항상 String type으로 넘어갑니다**!예를 들어, 이 표현식은 `book/1234` 을 매칭합니다. 그리고 변수 `pk='1234'` 를 view에 넘깁니다. | +| **r'^book/(\d+)$'** | 이 표현식은 위의 표현식과 동일한 URL들을 매칭합니다. 변환된 정보는 명명되지 않은 argument로 view에 전달됩니다. | | **r'^book/(?P\[-\w]+)$'** | 이 표현식은 문자열 처음 부분에 `book/` 으로 시작하는지 검사하고 (**^book/**), 그리고 한 개 또는 그 이상의 '-' 나 word character가 오고 (**\[-\w]+**), 그렇게 끝내는지를 매칭합니다. 이 표현식 또한 매칭된 부분을 변환하고 view 에 'stub' 라는 이름의 parameter로 전달합니다.This is a fairly typical pattern for a "stub". Stubs are URL-friendly word-based primary keys for data. You might use a stub if you wanted your book URL to be more informative. For example `/catalog/book/the-secret-garden` rather than `/catalog/book/33`. | 당신은 다양한 패턴들을 한번의 매칭을 통해 변환시킬 수 있습니다. 그러므로 다양한 정보들을 URL안에 인코딩할 수 있습니다. @@ -327,7 +327,7 @@ def book_detail_view(request, primary_key): **/locallibrary/catalog/templates/catalog/book_detail.html** 파일을 만들고, 아래 텍스트를 복사 붙여넣기 하세요. 위에서 설명한대로, 이 파알명은 제네릭 클래스 기반 상세 뷰의 디폴트 파일명입니다. (`catalog` 애플리케이션의 `Book` 모델을 위한 상세 뷰) -```html +```django {% extends "base_generic.html" %} {% block content %} @@ -507,8 +507,11 @@ URL mappers에 필요한 코드들과 view들은 ,사실상, 우리가 위에서 > - 작가 목록 페이지를 위한 URL mapper를 만들고나면, **All authors** base template에 있는 **All authors** 링크 또한 업데이트 해야될 필요를 느끼게 될 겁니다. 우리가 **All books** 링크 업데이트 때 했던, [수행 과정](#Update_the_base_template)을 따라해주세요. > - 작가 세부 사항 페이지에 대한 URL mapper를 만들고나면, 당신은 [book detail view template](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**) 또한 업데이트 해야 합니다. 그래야 작가 링크가 당신이 새로 만든 작가 세부 사항 페이지를 가리키거든요. (비어 있는 URL로 있기 보다는 말이죠). 굵게 되어 있는 부분을 template 내의 태그에 넣어주세요. > -> ```html ->

    Author: \{{ book.author }}

    +> ```django +>

    +> Author: +> \{{ book.author }} +>

    > ``` 모두 마치면, 당신의 페이즈들은 아마 밑의 스크린샷과 비슷하게 보일 겁니다. diff --git a/files/ko/learn/server-side/django/home_page/index.md b/files/ko/learn/server-side/django/home_page/index.md index b29c5899572bf9..ba56d9eb339ad2 100644 --- a/files/ko/learn/server-side/django/home_page/index.md +++ b/files/ko/learn/server-side/django/home_page/index.md @@ -1,5 +1,5 @@ --- -title: 'Django Tutorial Part 5: Creating our home page' +title: "Django Tutorial Part 5: Creating our home page" slug: Learn/Server-side/Django/Home_page --- @@ -174,7 +174,7 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 > **참고:** **주의:** 탬플릿 태그들은 목록을 반복하거나, 변수 값을 기반으로 조건부 연산을 수행하거나, 여타 다른 일들을 할 수 있는 함수입니다. 탬플릿 태그 외에도 탬플릿 구문(syntax)을 사용하면 view에서 탬플릿으로 전달된 변수들을 참조할 수 있고, 탬플릿 필터(filters)를 사용해서 변수의 형식을 지정할 수 있습니다(예를 들어, 문자열을 소문자로 변환). -```html +```django @@ -208,8 +208,8 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 새로운 파일 **base_generic.html** 을 **/locallibrary/catalog/templates/_base_generic.html_** 경로 안에 생성해서 아래 코드를 파일에 복사 붙여넣기 하세요: -```html - +```django + {% block title %}Local Library{% endblock %} @@ -245,9 +245,9 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 ```css .sidebar-nav { - margin-top: 20px; - padding: 0; - list-style: none; + margin-top: 20px; + padding: 0; + list-style: none; } ``` @@ -255,7 +255,7 @@ view 함수의 마지막에선 HTML 페이지를 생성하고 이 페이지를 새로운 HTML 파일 **index.html** 을 **/locallibrary/catalog/templates/** 경로 안에 생성해서 아래 코드를 파일 안에 복사 붙여넣기 하세요. 보시는 바와 같이 첫째 행에서 우리의 기본 탬플릿을 확장하고, 탬플릿의 기본 `content` 블럭을 새로운 블럭으로 대체합니다. -```html +```django {% extends "base_generic.html" %} {% block content %} @@ -295,17 +295,20 @@ return render(request, 'index.html', context=context) 아래 코드 샘플처럼, 탬플릿 안에서 당신은 먼저 탬플릿 라이브러리를 추가하기 위해 "static"을 지정하는 `load` 탬플릿 태그를 호출합니다. 그러고 나서 `static` 탬플릿 태그를 사용할 수 있고 관련 URL을 요구되는 파일에 지정할 수 있습니다. -```html +```django {% load static %} - + ``` 비슷한 방법으로 이미지를 페이지에 추가할 수 있습니다. 예를 들어: -```html +```django {% load static %} -UML diagram +UML diagram ``` > **참고:** **주의**: 위의 샘플은 파일들의 위치를 특정하지만, 장고는 기본적으로 파일을 제공하지 않습니다. 우리는 우리가 웹사이트 뼈대를 생성했을 때([created the website skeleton](/ko/docs/Learn/Server-side/Django/skeleton_website)) 전역 URL 매퍼(/locallibrary/locallibrary/urls.py)를 수정하여 개발 웹 서버가 파일을 제공하도록 설정했습니다만, 제품화되었을(in production)때도 파일을 제공할 수 있어야 합니다. 이것에 관해 차후에 다루겠습니다. @@ -360,7 +363,7 @@ TEMPLATES = [ 1. LocalLibrary 기본 탬플릿([base template](#The_LocalLibrary_base_template))에는 `title` 블록이 정의되어 있습니다. 색인 탬플릿([index template](#The_index_template)) 안에 이 블록을 덮어쓰기하고 페이지를 위한 새로운 제목을 만들어 보세요. - > **참고:** **힌트:** [Extending templates](#Extending_templates) 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다. + > **참고:** **힌트:** [Extending templates](#Extending_templates) 섹션은 블럭(block)을 생성하고 다른 탬플릿에서 블럭을 확장(extend)하는 방법을 설명합니다. 2. 대소문자 구분 없이 특정한 단어를 포함하는 장르와 책들의 개수(count)를 생성하도록 [view](<#View_(function-based)>) 를 수정하고, 결과를 `context`에 전달해 보세요. 이것은 `num_books`와 `num_instances_available`을 생성하고 사용하는 것과 비슷한 방법으로 달성할 수 있습니다. 그리고 나서 이 변수들을 포함시키기 위해 [index template](#The_index_template) 를 업데이트 하세요. diff --git a/files/ko/learn/server-side/django/index.md b/files/ko/learn/server-side/django/index.md index 3c5a4d5f936755..ebd3a66e09c03d 100644 --- a/files/ko/learn/server-side/django/index.md +++ b/files/ko/learn/server-side/django/index.md @@ -2,6 +2,7 @@ title: Django 웹 프레임워크 (파이썬) slug: Learn/Server-side/Django --- + {{LearnSidebar}} Django는 파이썬으로 구성된, 인기 많고 완벽한 기능을 갖춘 서버-사이드 웹 프레임워크입니다. 이 모듈은 Django가 웹 서버 프레임워크 중 가장 유명한 이유, 개발환경을 설정하는 방법, 그리고 이를 통해 자신만의 웹 애플리케이션을 만드는 방법을 알려줍니다. diff --git a/files/ko/learn/server-side/django/introduction/index.md b/files/ko/learn/server-side/django/introduction/index.md index 6cac87585bead2..2ab158fc1b4cd1 100644 --- a/files/ko/learn/server-side/django/introduction/index.md +++ b/files/ko/learn/server-side/django/introduction/index.md @@ -61,7 +61,7 @@ Django는 다음과 같은 소프트웨어를 개발하는데 도움을 줍니 Django 는 SQL 인젝션, 크로스사이트 스크립팅, 크로스사이트 요청 위조 그리고 클릭 하이젝킹 (이러한 공격 방법에 대한 상세 정보는 [Website security](/ko/docs/Learn/Server-side/First_steps/Website_security)에서 볼 수 있습니다)과 같은 보안 취약점을 보완할 방법 기본적으로 제공합니다. - Scalable(확장성 있는) - - : Django는 컴포넌트 기반의 “[shared-nothing](https://en.wikipedia.org/wiki/Shared_nothing_architecture)” 아키텍쳐(각각의 아키텍쳐가 독립적이어서 필요하다면 교체 및 변경할 수 있는)를 사용합니다. 각 부분이 분명하게 분리되면 어떤 레벨에서든(예를 들면 캐싱 서버, 데이터베이스 서버, 혹은 어플리케이션 서버) 하드웨어를 추가해서 발생하는 늘어난 트래픽에 대응해 크기를 변경할 수 있게 됩니다. 사용자가 가장 많은 몇몇 사이트는 요구사항에 맞춰서 Django의 크기를 성공적으로 변경했습니다. (예를들면 Instagram, Disqus 등) + - : Django는 컴포넌트 기반의 "[shared-nothing](https://en.wikipedia.org/wiki/Shared_nothing_architecture)" 아키텍쳐(각각의 아키텍쳐가 독립적이어서 필요하다면 교체 및 변경할 수 있는)를 사용합니다. 각 부분이 분명하게 분리되면 어떤 레벨에서든(예를 들면 캐싱 서버, 데이터베이스 서버, 혹은 어플리케이션 서버) 하드웨어를 추가해서 발생하는 늘어난 트래픽에 대응해 크기를 변경할 수 있게 됩니다. 사용자가 가장 많은 몇몇 사이트는 요구사항에 맞춰서 Django의 크기를 성공적으로 변경했습니다. (예를들면 Instagram, Disqus 등) - Maintainable(유지보수가 쉬운) - : Django 코드는 유지보수가 쉽고 재사용하기 좋게끔 하는 디자인 원칙들과 패턴들을 이용하여 작성됩니다. 특히 Don't Repeat Yourself (DRY) 원칙을 적용해서 불필요한 중복이 없고 많은 양의 코드를 줄였습니다. 또한 Django는 관련된 기능들을 재사용 가능한 "applications"로 그룹화했고, 더 낮은 레벨에서 관련된 코드들을 모듈로 만들었습니다. ([Model View Controller (MVC)](/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture) 패턴과 유사합니다). - Portable(포터블한) diff --git a/files/ko/learn/server-side/django/models/index.md b/files/ko/learn/server-side/django/models/index.md index 780b03c1e2f5c0..96544b24ac18d5 100644 --- a/files/ko/learn/server-side/django/models/index.md +++ b/files/ko/learn/server-side/django/models/index.md @@ -1,5 +1,5 @@ --- -title: 'Django Tutorial Part 3: Using models' +title: "Django Tutorial Part 3: Using models" slug: Learn/Server-side/Django/Models --- diff --git a/files/ko/learn/server-side/django/sessions/index.md b/files/ko/learn/server-side/django/sessions/index.md index 99e5ea05745f44..4bd5d98e729773 100644 --- a/files/ko/learn/server-side/django/sessions/index.md +++ b/files/ko/learn/server-side/django/sessions/index.md @@ -1,5 +1,5 @@ --- -title: 'Django Tutorial Part 7: Sessions framework' +title: "Django Tutorial Part 7: Sessions framework" slug: Learn/Server-side/Django/Sessions --- @@ -138,7 +138,7 @@ def index(request): 메인 HTML template(**/locallibrary/catalog/templates/index.html**) "Dynamic content" 섹션 밑 부분에 context 변수가 보일 수 있도록 밑에 보이는 굵은 선으로 표시된 코드를 추가해주세요: -```html +```django

    Dynamic content

    The library has the following record counts:

    @@ -149,7 +149,10 @@ def index(request):
  • Authors: \{{ num_authors }}
    • -

    You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.

    +

    + You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% + else %} times{% endif %}. +

    ``` 바뀐 것을 저장해주시고 테스트 서버를 재시작해주세요. 페이지를 새로고침할 때 마다, 숫자가 업데이트되는 것을 보실 수 있을겁니다. diff --git a/files/ko/learn/server-side/django/skeleton_website/index.md b/files/ko/learn/server-side/django/skeleton_website/index.md index dac9489ec392bf..15e40aedf8251e 100644 --- a/files/ko/learn/server-side/django/skeleton_website/index.md +++ b/files/ko/learn/server-side/django/skeleton_website/index.md @@ -1,5 +1,5 @@ --- -title: '장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기' +title: "장고 튜토리얼 강좌 2 : 뼈대 사이트 만들기" slug: Learn/Server-side/Django/skeleton_website --- @@ -41,7 +41,7 @@ slug: Learn/Server-side/Django/skeleton_website 1. 프로젝트 폴더, 기본적인 파일 템플릿과 프로젝트 관리 스크립트(**manage.py**)를 만들기 위해서 `django-admin`을 사용합니다. 2. 하나 또는 그 이상의 애플리케이션을 만들기 위해서 **manage.py**를 사용합니다. - > **참고:** 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다. + > **참고:** 하나의 웹사이트는 하나 또는 그 이상의 섹션으로 구성될 수 있습니다. (예를 들어 main site, blog, wiki, downloads area 등). 장고는 필요할 때에 다른 프로젝트에서 재사용이 가능할 수 있게 , 이 요소들을 분리된 어플리케이션으로 개발하는 것을 추천합니다. 3. 프로젝트에 포함시키기 위해 새 어플리케이션들을 등록(register)합니다. 4. 각 어플리케이션에 대해 url/mapper를 연결(hook up)합니다. diff --git a/files/ko/learn/server-side/django/testing/index.md b/files/ko/learn/server-side/django/testing/index.md index 375a978ee36748..709c5baa09a837 100644 --- a/files/ko/learn/server-side/django/testing/index.md +++ b/files/ko/learn/server-side/django/testing/index.md @@ -1,5 +1,5 @@ --- -title: 'Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기' +title: "Django 튜토리얼 파트 10: Django 웹 어플리케이션 테스트하기" slug: Learn/Server-side/Django/Testing --- diff --git a/files/ko/learn/server-side/django/tutorial_local_library_website/index.md b/files/ko/learn/server-side/django/tutorial_local_library_website/index.md index f56fa36771d759..1cd0f4fbdd6ffb 100644 --- a/files/ko/learn/server-side/django/tutorial_local_library_website/index.md +++ b/files/ko/learn/server-side/django/tutorial_local_library_website/index.md @@ -1,5 +1,5 @@ --- -title: 'Django 튜토리얼: 지역 도서관 웹사이트' +title: "Django 튜토리얼: 지역 도서관 웹사이트" slug: Learn/Server-side/Django/Tutorial_local_library_website --- diff --git a/files/ko/learn/server-side/django/web_application_security/index.md b/files/ko/learn/server-side/django/web_application_security/index.md index 7dce64725cfc33..a81d1b82cad7b6 100644 --- a/files/ko/learn/server-side/django/web_application_security/index.md +++ b/files/ko/learn/server-side/django/web_application_security/index.md @@ -46,7 +46,7 @@ Django 문서를 여기로 복사해오기보다, 이 문서에서 우리는 Dja ### Cross site scripting (XSS) -XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts _through_ the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser. +XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts _through_ the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker's JavaScript to be executed by the user's browser. Django's template system protects you against the majority of XSS attacks by [escaping specific characters](https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping) that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in [Django Tutorial Part 9: Working with forms](/ko/docs/Learn/Server-side/Django/Forms). @@ -54,10 +54,10 @@ Django's template system protects you against the majority of XSS attacks by [es 2. Open the site in your local browser and login to your superuser account. 3. Navigate to the author-creation page (which should be at URL: [`http://127.0.0.1:8000/catalog/author/create/`](http://127.0.0.1:8000/catalog/author/create/)). 4. Enter names and date details for a new user, and then append the following text to the Last Name field: - ``. - ![Author Form XSS test](author_create_form_alert_xss.png) + ``. + ![Author Form XSS test](author_create_form_alert_xss.png) - > **참고:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats. + > **참고:** This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats. 5. Press **Submit** to save the record. 6. When you save the author it will be displayed as shown below. Because of the XSS protections the `alert()` should not be run. Instead the script is displayed as plain text.![Author detail view XSS test](author_detail_alert_xss.png) @@ -65,7 +65,10 @@ Django's template system protects you against the majority of XSS attacks by [es If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. `>` is now `>`) ```html -

    Author: Boon, David (Boonie)

    +

    + Author: Boon<script>alert('Test alert');</script>, David + (Boonie) +

    ``` Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the `help_text` in a form field is usually not user-supplied, so Django doesn't escape those values). @@ -74,7 +77,7 @@ It is also possible for XSS attacks to originate from other untrusted source of ### Cross site request forgery (CSRF) protection -CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary. +CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user's knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary. > **참고:** Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.) @@ -82,19 +85,56 @@ In order to do this, they might create an HTML file like the one below, which co ```html - - -
    - - - - - -
    - -
    - - + +
    + + + + + + + + + + + + + + + + + +
    + +
    + +
    + +
    + +
    + +
    + ``` @@ -103,7 +143,10 @@ Run the development web server, and log in with your superuser account. Copy the The way the protection is enabled is that you include the `{% csrf_token %}` template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser. ```html - + ``` Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser. @@ -117,7 +160,7 @@ Django's CSRF protection is turned on by default. You should always use the `{% Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate): - SQL injection protection - - : SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection. + - : SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django's querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection. - Clickjacking protection - : In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible [` + -
    -
    +
    ``` ### JavaScript @@ -98,8 +95,8 @@ var info = document.getElementById("info"); var target = frameDoc.getElementById("overview"); frameDoc.scrollingElement.scrollTop = target.offsetTop; -info.innerText = "스크롤 후 Y축 차이: " + - frame.contentWindow.pageYOffset + " 픽셀"; +info.innerText = + "스크롤 후 Y축 차이: " + frame.contentWindow.pageYOffset + " 픽셀"; ``` The JavaScript code begins by getting into `frame` and `info` the ` + ``` ### 예시: 전체 화면에서 자동 재생 허용 @@ -188,9 +189,7 @@ Feature-Policy: autoplay 'self'; fullscreen ` + ``` ### 예시: 특정 리소스만 자동 재생 허용 @@ -204,9 +203,11 @@ Feature-Policy: autoplay 'self' https://example.media 그리하여 {{HTMLElement("iframe")}} 역시 자신과 자식 프레임에서 자동 재생 정책을 사용하기 위해 아래와 같이 작성할 수 있습니다: ```html - ``` @@ -221,9 +222,7 @@ Feature-Policy: autoplay 'none' ` + ``` ## 유용한 사례 @@ -235,7 +234,7 @@ Feature-Policy: autoplay 'none' 자동 재생하는 대표적인 케이스는 본문이나 광고 또는 페이지의 메인 기능에 대한 프리뷰로써 짧은 비디오 클립을 자동으로 재생하는 경우입니다. 이 경우 두 가지 선택지가 있습니다: 오디오가 없는 비디오를 재생하거나, 오디오가 있어도 기본적으로 음소거하거나, 아래처럼요: ```html -` 닫기 태그가 필요하다는 것을 잊지 마세요. @@ -1740,20 +1739,18 @@ Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사 1. WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠. - ```js - - ``` + ```js + + ``` 2. MP4 컨테이너에 비디오 코덱으로 [HEVC](#hevc_h.265) 를 쓰되 프로파일은 Main 4:2:2 10/12 bit 색 깊이, 최대 Main 4:4:4 16 bit 색 깊이 수준의 고급 Main 프로파일을 사용합니다. 비트레이트를 높이면 놀라운 색 재현과 훌륭한 그래픽 퀄리티를 보여줄 것입니다. 또한 하이 다이나믹 레인지 비디오를 위한 HDR 메타데이터도 추가할 수 있습니다. 오디오는 ACC 인코딩 시 높은 샘플링 레이트(최소 48 kHz, 96 kHz 권장)에 fast-encoding이 아닌 complex-encoding을 사용합니다. - ```html - - ``` + ```html + + ``` ### 비디오 보존, 편집, 믹싱을 위한 추천 @@ -1777,11 +1774,11 @@ x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile ```js const kbps = 1024; -const Mbps = kbps*kbps; +const Mbps = kbps * kbps; const options = { mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"', - bitsPerSecond: 800*Mbps, + bitsPerSecond: 800 * Mbps, }; let recorder = new MediaRecorder(sourceStream, options); diff --git a/files/ko/web/performance/how_browsers_work/index.md b/files/ko/web/performance/how_browsers_work/index.md index d81909d6ac987b..c1d34bedd3bc3e 100644 --- a/files/ko/web/performance/how_browsers_work/index.md +++ b/files/ko/web/performance/how_browsers_work/index.md @@ -57,7 +57,7 @@ HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰 웹서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신에 초기 [HTTP `GET` request](/ko/docs/Web/HTTP/Methods)를 보냅니다. 웹사이트는 대게 HTML 파일을 요청합니다. 서버가 요청을 받으면, 관련 응답 해더와 함께 HTML의 내용을 응답하게 됩니다. ```html - + diff --git a/files/ko/web/performance/understanding_latency/index.md b/files/ko/web/performance/understanding_latency/index.md index a8cd0cfffdc063..7ab9dde6cfadc0 100644 --- a/files/ko/web/performance/understanding_latency/index.md +++ b/files/ko/web/performance/understanding_latency/index.md @@ -27,16 +27,16 @@ slug: Web/Performance/Understanding_latency 개발자 도구에서 network 테이블의 스로틀링 옵션을 통해 2G, 3G 혹은 다른 대역폭으로 전환할 수 있습니다. 다양한 브라우저의 개발자 도구에는 서로 다른 사전 설정 옵션이 있으며, 모방되는 특성에는 다운로드 속도, 업로드 속도, 최소 대기 시간 또는 데이터 패킷을 보내는 데 필요한 최소 타입이 포함됩니다. 일부 사전 설정의 대략적인 값은 다음과 같습니다. -| 선택 | 다운로드 속도 | 업로드 속도 | 최소 대기 시간 (ms) | -| -------------- | -------------- | ------------ | -------------------- | -| GPRS | 50 Kbps | 20 Kbps | 500 | -| 일반적인 2G | 250 Kbps | 50 Kbps | 300 | -| 좋은 2G | 450 Kbps | 150 Kbps | 150 | -| 일반적인 3G | 750 Kbps | 250 Kbps | 100 | -| 좋은 3G | 1.5 Mbps | 750 Kbps | 40 | -| 일반적인 4G/LTE | 4 Mbps | 3 Mbps | 20 | -| DSL | 2 Mbps | 1 Mbps | 5 | -| Wi-Fi | 30 Mbps | 15 Mbps | 2 | +| 선택 | 다운로드 속도 | 업로드 속도 | 최소 대기 시간 (ms) | +| --------------- | ------------- | ----------- | ------------------- | +| GPRS | 50 Kbps | 20 Kbps | 500 | +| 일반적인 2G | 250 Kbps | 50 Kbps | 300 | +| 좋은 2G | 450 Kbps | 150 Kbps | 150 | +| 일반적인 3G | 750 Kbps | 250 Kbps | 100 | +| 좋은 3G | 1.5 Mbps | 750 Kbps | 40 | +| 일반적인 4G/LTE | 4 Mbps | 3 Mbps | 20 | +| DSL | 2 Mbps | 1 Mbps | 5 | +| Wi-Fi | 30 Mbps | 15 Mbps | 2 | ## 네트워크 시간 측정 diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png deleted file mode 100644 index 4610c68f4bfc24..00000000000000 Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-a2hs-banner.png and /dev/null differ diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png deleted file mode 100644 index 8edd73c055bf07..00000000000000 Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/chrome-desktop-a2hs-banner.png and /dev/null differ diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png deleted file mode 100644 index 4cb887765a10b7..00000000000000 Binary files a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/fx-a2hs-banner.png and /dev/null differ diff --git a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md b/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md deleted file mode 100644 index 171069b0f984c0..00000000000000 --- a/files/ko/web/progressive_web_apps/guides/making_pwas_installable/index.md +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Add to home screen -slug: Web/Progressive_web_apps/Guides/Making_PWAs_installable -original_slug: Web/Progressive_web_apps/Add_to_home_screen ---- - -Add to Home screen (or A2HS for short) is a feature available in modern smartphone browsers that allows developers to easily and conveniently add a shortcut to their Home screen representing their favorite web app (or site) so they can subsequently access it with a single tap. This guide explains how A2HS is used, and what you need to do as a developer to allow your users to take advantage of it. - -## Why A2HS? - -A2HS is thought to be part of the [Progressive Web App](/ko/docs/Web/Progressive_web_apps) philosophy — giving web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars. Part of this is the simple gesture of accessing an app by tapping its icon on your Home screen, and then having it appear neatly in its own window. A2HS makes this possible. - -## What browsers support A2HS? - -A2HS is supported by Mobile Chrome/Android Webview since version 31, Opera for Android since version 32, and Firefox for Android since [version 58](/ko/docs/Mozilla/Firefox/Releases/58). - -## How do you use it? - -We've written a very simple example web site ([see our demo live](https://mdn.github.io/pwa-examples/a2hs/), and also [see the source code](https://github.com/mdn/pwa-examples/tree/master/a2hs)) that doesn't do much, but was developed with the necessary code to allow it to be added to a Home screen, as well as a service worker to enable it to be used offline. The example displays a series of fox pictures. - -If you have Firefox for Android available, use it to navigate to our demo at `https://mdn.github.io/pwa-examples/a2hs/`. You'll see fox pictures, but more important, you'll see a "home" icon with a plus (+) icon inside it — this is the "Add to Home screen" icon displayed for any site that has the necessary features in place. - -![](add-to-home-screen-icon.png) - -Tapping this will show a confirmation banner — pressing the big + _ADD TO HOME SCREEN_ button completes the action, adding the app to the Home screen. (Note: In Android 8 and higher, a system-level "Add to Home screen" permission dialog will be shown first.) - -![](fx-a2hs-banner.png) - -If you have Mobile Chrome available, the experience is slightly different; upon loading our site, you'll see an install banner pop up asking whether you want to add this app to your Home screen. - -![](chrome-a2hs-banner.png) - -> **참고:** You can find out a lot more about Chrome install banners from the article [Web App Install Banners](https://developers.google.com/web/fundamentals/app-install-banners/). - -If you choose not to add it to your Home screen at this point, you can do so later using the _Add to Home screen_ icon in the main Chrome menu. - -Regardless of which browser you are using, when you choose to add the app to your Home screen, you'll see it appear along with a short title, in the same way that native apps do. - -![](a2hs-on-home-screen.png) - -Tapping this icon opens it up, but as a fullscreen app, you'll no longer see the browser UI around it. - -## How do you make an app A2HS-ready? - -To enable your app to be added to a Home screen, it needs the following: - -- To be served over HTTPs — the web is increasingly being moved in a more secure direction, and many modern web technologies (A2HS included) will work only on secure contexts. -- To have a manifest file with the correct fields filled in, linked from the HTML head. -- To have an appropriate icon available for displaying on the Home screen. -- Chrome additionally requires the app to have a service worker registered (e.g., so it can function when offline). - -### Manifest - -The web manifest is written in standard JSON format and should be placed somewhere inside your app directory (in the root is probably best) with the name `somefilename.webmanifest` (we've chosen `manifest.webmanifest`). It contains multiple fields that define certain information about the web app and how it should behave. - -> **참고:** The `.webmanifest` extension is specified in the [Media type registration](https://w3c.github.io/manifest/#media-type-registration) section of the specification, but generally browsers will support manifests with other appropriate extensions, e.g. `.json`. - -The fields needed for A2HS are as follows: - -- `background_color`: Specifies a background color to be used in some app contexts. The most relevant one to A2HS is the splash screen displayed when the app icon on the Home screen is tapped and it first starts to load (this currently appears only when apps have been added to the Home screen by Chrome). -- `display`: Specifies how the app should be displayed. To make it feel like a distinct app (and not just a web page), you should choose a value such as `fullscreen` (no UI is shown at all) or `standalone` (very similar, but system-level UI elements such as the status bar might be visible). -- `icons`: Specifies icons for the browser to use when representing the app in different places (such as on the task switcher, or more important, the Home screen). We've included only one in our demo. -- `name`/`short_name`: These fields provide an app name to be displayed when representing the app in different places. `name` provides the full app name, and `short_name` provides a shortened name to be used when there is insufficient space to display the full name. You are advised to provide both if your app's name is particularly long. -- `start_url`: Provides a path to the asset that should be loaded when the added-to-Home screen app is launched. Note that this has to be a relative URL pointing to the site index, relative to the url of the manifest. Also, be aware that Chrome requires this before it will display the install banner, whereas Firefox doesn't require it for showing the home-with-a-plus icon. - -The manifest for our sample app looks like this: - -```js -{ - "background_color": "purple", - "description": "Shows random fox pictures. Hey, at least it isn't cats.", - "display": "fullscreen", - "icons": [ - { - "src": "icon/fox-icon.png", - "sizes": "192x192", - "type": "image/png" - } - ], - "name": "Awesome fox pictures", - "short_name": "Foxes", - "start_url": "/pwa-examples/a2hs/index.html" -} -``` - -### Appropriate icon - -As shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. You can include more sizes if you want; Android will choose the most appropriate size for each different use case. You could also decide to include different types of icons so devices can use the best one they are able to (e.g., Chrome already supports the WebP format). - -Note that the `type` member in each icon's object specifies the icon's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it. - -In terms of how to design the icon, you should follow the same best practices you'd follow for any Android icon (see the [Android icon design guidelines](https://developer.android.com/guide/practices/ui_guidelines/icon_design.html)). - -### Link the HTML to the manifest - -To finish setting up your manifest, you need to reference it from the HTML of your application's home page: - -```html - -``` - -Browsers that support A2HS will know where to look for your manifest once this is in place. - -## What does A2HS not give you? - -Bear in mind that when you add an app to your Home screen, it just makes the app easily accessible — it doesn't download the app's assets and data to your device and make the app available offline, or anything like that. To make your app work offline, you have to use the [Service Worker API](/ko/docs/Web/API/Service_Worker_API) to handle storing the assets offline, and if required, [Web storage](/ko/docs/Web/API/Web_Storage_API) or [IndexedDB](/ko/docs/Web/API/IndexedDB_API) to store its data. - -In our example app, we've just used a service worker to store all necessary files. The service worker is registered against the site with the final code block in the [`index.js`](https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js) file. We then cache all the site's assets using the [Cache API](/ko/docs/Web/API/Cache), and serve them from the cache instead of the network using the code in the [sw.js](https://github.com/mdn/pwa-examples/blob/master/a2hs/sw.js) file. - -## A2HS on desktop - -While originally intended to improve user experience on mobile OSes, there is movement to make PWAs installable on desktop platforms too. - -> **참고:** At the time of writing, the functionality described below was only supported in newer versions of Chrome — by default on Windows, and behind the `#enable-desktop-pwas` flag on macOS. - -### Adding an install button - -To make our PWA installable on desktop, we first added a button to our document to allow users to do the installation — this isn't made available automatically on desktop apps, and the installation needs to be triggered by a user gesture: - -```html - -``` - -We then gave it some simple styling: - -```css -.add-button { - position: absolute; - top: 1px; - left: 1px; -} -``` - -### JavaScript for handling the install - -At the bottom of our [`index.js` file](https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js), we added some JavaScript to handle the installation. First of all, we declare a `deferredPrompt` variable (which we'll explain later on), get a reference to our install button, and set it to `display: none` initially: - -```js -let deferredPrompt; -const addBtn = document.querySelector('.add-button'); -addBtn.style.display = 'none'; -``` - -We hide the button initially because the PWA will not be available for install until it follows the A2HS criteria. When this happens, supporting browsers will fire a `beforeinstallprompt` event. We can then use a handler like the one below to handle the installation: - -```js -window.addEventListener('beforeinstallprompt', (e) => { - // Prevent Chrome 67 and earlier from automatically showing the prompt - e.preventDefault(); - // Stash the event so it can be triggered later. - deferredPrompt = e; - // Update UI to notify the user they can add to home screen - addBtn.style.display = 'block'; - - addBtn.addEventListener('click', (e) => { - // hide our user interface that shows our A2HS button - addBtn.style.display = 'none'; - // Show the prompt - deferredPrompt.prompt(); - // Wait for the user to respond to the prompt - deferredPrompt.userChoice.then((choiceResult) => { - if (choiceResult.outcome === 'accepted') { - console.log('User accepted the A2HS prompt'); - } else { - console.log('User dismissed the A2HS prompt'); - } - deferredPrompt = null; - }); - }); -}); -``` - -So here we: - -- Call {{domxref("Event.preventDefault()")}} to stop Chrome 67 and earlier from calling the install prompt automatically (this behavior changed in Chrome 68). -- Store the event object in the `deferredPrompt` variable so it can be used later on to perform the actual installation. -- Set the button to `display: block` so it appears in the UI for the user to click. -- Set a `click` handler for the button. - -The click handler contains the following steps: - -- Hide the button again with `display: none` — it is no longer needed once the app is installed. -- Use the `prompt()` method available on the `beforeinstallprompt` event object (stored in `deferredPrompt`) to trigger showing the install prompt. -- Respond to the user's interaction with the prompt using the `userChoice` property, again available on the `beforeinstallprompt` event object. -- Set `deferredPrompt` to null since it is no longer needed. - -So when the button is clicked, the install prompt appears. - -![](chrome-desktop-a2hs-banner.png) - -If the user selects _Install_, the app is installed (available as standalone desktop app), and the Install button no longer shows (the `onbeforeinstallprompt` event no longer fires if the app is already installed). When you open the app, it will appear in its own window: - -![](a2hs-installed-desktop.png) - -If the user selects _Cancel_, the state of the app goes back to how it was before the button was clicked. - -> **참고:** The code for this section was mostly taken from [App install banners/Add to Home Screen](https://developers.google.com/web/fundamentals/app-install-banners/) by Pete LaPage. - -## See also - -- [Progressive web apps](/ko/docs/Web/Progressive_web_apps) -- [Service Worker API](/ko/docs/Web/API/Service_Worker_API) -- [Web manifest reference](/ko/docs/Web/Manifest) -- [App install banners](https://developers.google.com/web/fundamentals/app-install-banners/) - -{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} diff --git a/files/ko/web/progressive_web_apps/index.md b/files/ko/web/progressive_web_apps/index.md index 6fd831646414b9..2839feeabca928 100644 --- a/files/ko/web/progressive_web_apps/index.md +++ b/files/ko/web/progressive_web_apps/index.md @@ -52,4 +52,4 @@ PWA는 발견 가능, 설치 가능, 연결 가능해야 하고, 네트워크에 - [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) — web-app auditing tool that includes PWA-auditing features - [localForage](https://localforage.github.io/localForage/) — `localStorage`-like _async_ storage, to improve your PWA's offline experience -{{QuickLinksWithSubpages("/en-US/docs/Web/Progressive_web_apps/")}} +{{QuickLinksWithSubpages("/ko/docs/Web/Progressive_web_apps/")}} diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md index e73c7577f65919..10a0c4f8107eff 100644 --- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md +++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/app_structure/index.md @@ -64,38 +64,55 @@ Streams API는 개발자가 서버로부터의 데이터 스트리밍에 직접 HTML의 관점에서보면 app shell은 컨텐츠 섹션 외부의 모든 영역입니다. ```html - + - - - js13kGames A-Frame entries - - - - - - - - - - - - -
    -

    -
    -
    -

    js13kGames A-Frame entries

    -

    List of games submitted to the A-Frame category in the js13kGames 2017 competition. You can fork js13kPWA on GitHub to check its source code.

    - -
    - // Content inserted in here -
    -
    - - + + + js13kGames A-Frame entries + + + + + + + + + + + + +
    +

    + +

    +
    +
    +

    js13kGames A-Frame entries

    +

    + List of games submitted to the + A-Frame category in the + js13kGames 2017 competition. + You can + fork js13kPWA on GitHub + to check its source code. +

    + +
    // Content inserted in here
    +
    + + ``` @@ -112,7 +129,8 @@ CSS도 평범합니다. {{cssxref("@font-face")}}를 사용해 커스텀 폰트 app.js 파일은 다음 문서에서 자세히 살펴볼 몇 가지 것들을 합니다. 먼저, 다음 템플릿을 기반으로 컨텐츠를 생성합니다. ```js -var template = "
    \n\ +var template = + ""; -var content = ''; -for(var i=0; i','-'); - content += entry; -}; -document.getElementById('content').innerHTML = content; +var content = ""; +for (var i = 0; i < games.length; i++) { + var entry = template + .replace(/POS/g, i + 1) + .replace(/SLUG/g, games[i].slug) + .replace(/NAME/g, games[i].name) + .replace(/AUTHOR/g, games[i].author) + .replace(/TWITTER/g, games[i].twitter) + .replace(/WEBSITE/g, games[i].website) + .replace(/GITHUB/g, games[i].github); + entry = entry.replace("", "-"); + content += entry; +} +document.getElementById("content").innerHTML = content; ``` 다음으로, service worker를 등록합니다. ```js -if('serviceWorker' in navigator) { - navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js'); -}; +if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js"); +} ``` 다음 코드 블럭은 버튼을 클릭했을 때 알림에 대한 권한을 요청합니다. ```js var button = document.getElementById("notifications"); -button.addEventListener('click', function(e) { - Notification.requestPermission().then(function(result) { - if(result === 'granted') { - randomNotification(); - } - }); +button.addEventListener("click", function (e) { + Notification.requestPermission().then(function (result) { + if (result === "granted") { + randomNotification(); + } + }); }); ``` @@ -163,16 +182,16 @@ button.addEventListener('click', function(e) { ```js function randomNotification() { - var randomItem = Math.floor(Math.random()*games.length); - var notifTitle = games[randomItem].name; - var notifBody = 'Created by '+games[randomItem].author+'.'; - var notifImg = 'data/img/'+games[randomItem].slug+'.jpg'; - var options = { - body: notifBody, - icon: notifImg - } - var notif = new Notification(notifTitle, options); - setTimeout(randomNotification, 30000); + var randomItem = Math.floor(Math.random() * games.length); + var notifTitle = games[randomItem].name; + var notifBody = "Created by " + games[randomItem].author + "."; + var notifImg = "data/img/" + games[randomItem].slug + ".jpg"; + var options = { + body: notifBody, + icon: notifImg, + }; + var notif = new Notification(notifTitle, options); + setTimeout(randomNotification, 30000); } ``` @@ -181,36 +200,36 @@ function randomNotification() { 빠르게 살펴볼 마지막 파일(sw\.js)은 service worker입니다. 이는 먼저 games.js 파일로부터 데이터를 불러옵니다. ```js -self.importScripts('data/games.js'); +self.importScripts("data/games.js"); ``` 다음으로, app shell과 컨텐츠 모두로부터 캐싱할 모든 파일의 리스트를 생성합니다. ```js -var cacheName = 'js13kPWA-v1'; +var cacheName = "js13kPWA-v1"; var appShellFiles = [ - '/pwa-examples/js13kpwa/', - '/pwa-examples/js13kpwa/index.html', - '/pwa-examples/js13kpwa/app.js', - '/pwa-examples/js13kpwa/style.css', - '/pwa-examples/js13kpwa/fonts/graduate.eot', - '/pwa-examples/js13kpwa/fonts/graduate.ttf', - '/pwa-examples/js13kpwa/fonts/graduate.woff', - '/pwa-examples/js13kpwa/favicon.ico', - '/pwa-examples/js13kpwa/img/js13kgames.png', - '/pwa-examples/js13kpwa/img/bg.png', - '/pwa-examples/js13kpwa/icons/icon-32.png', - '/pwa-examples/js13kpwa/icons/icon-64.png', - '/pwa-examples/js13kpwa/icons/icon-96.png', - '/pwa-examples/js13kpwa/icons/icon-128.png', - '/pwa-examples/js13kpwa/icons/icon-168.png', - '/pwa-examples/js13kpwa/icons/icon-192.png', - '/pwa-examples/js13kpwa/icons/icon-256.png', - '/pwa-examples/js13kpwa/icons/icon-512.png' + "/pwa-examples/js13kpwa/", + "/pwa-examples/js13kpwa/index.html", + "/pwa-examples/js13kpwa/app.js", + "/pwa-examples/js13kpwa/style.css", + "/pwa-examples/js13kpwa/fonts/graduate.eot", + "/pwa-examples/js13kpwa/fonts/graduate.ttf", + "/pwa-examples/js13kpwa/fonts/graduate.woff", + "/pwa-examples/js13kpwa/favicon.ico", + "/pwa-examples/js13kpwa/img/js13kgames.png", + "/pwa-examples/js13kpwa/img/bg.png", + "/pwa-examples/js13kpwa/icons/icon-32.png", + "/pwa-examples/js13kpwa/icons/icon-64.png", + "/pwa-examples/js13kpwa/icons/icon-96.png", + "/pwa-examples/js13kpwa/icons/icon-128.png", + "/pwa-examples/js13kpwa/icons/icon-168.png", + "/pwa-examples/js13kpwa/icons/icon-192.png", + "/pwa-examples/js13kpwa/icons/icon-256.png", + "/pwa-examples/js13kpwa/icons/icon-512.png", ]; var gamesImages = []; -for(var i=0; i + ``` > **참고:** 과거에 manifest로 사용되던 몇 가지 흔한 확장자들이 있습니다: `manifest.webapp` 은 Firefox OS 웹 manifest로 유명하며, 많은 사람들이 JSON 구조로 내용이 구성된 `manifest.json`을 사용합니다. 하지만, `.webmanifest` 확장자는 [W3C manifest 명세](https://w3c.github.io/manifest/)에 명시적으로 언급되고 있으므로 이를 그대로 사용하도록 하겠습니다. @@ -37,26 +37,26 @@ original_slug: Web/Progressive_web_apps/Installable_PWAs ```json { - "name": "js13kGames Progressive Web App", - "short_name": "js13kPWA", - "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", - "icons": [ - { - "src": "icons/icon-32.png", - "sizes": "32x32", - "type": "image/png" - }, - // ... - { - "src": "icons/icon-512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "start_url": "/pwa-examples/js13kpwa/index.html", - "display": "fullscreen", - "theme_color": "#B12A34", - "background_color": "#B12A34" + "name": "js13kGames Progressive Web App", + "short_name": "js13kPWA", + "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", + "icons": [ + { + "src": "icons/icon-32.png", + "sizes": "32x32", + "type": "image/png" + }, + // ... + { + "src": "icons/icon-512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "start_url": "/pwa-examples/js13kpwa/index.html", + "display": "fullscreen", + "theme_color": "#B12A34", + "background_color": "#B12A34" } ``` diff --git a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md index cf9f2cca248aa3..e62e946e66572c 100644 --- a/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md +++ b/files/ko/web/progressive_web_apps/tutorials/js13kgames/offline_service_workers/index.md @@ -37,9 +37,9 @@ Service Worker는 매우 강력하기때문에 안전한 컨텍스트(HTTPS를 app.js 파일에서 새로운 Service Worker를 등록하는 코드를 살펴보는 것으로 시작할 것입니다. ```js -if('serviceWorker' in navigator) { - navigator.serviceWorker.register('/pwa-examples/js13kpwa/sw.js'); -}; +if ("serviceWorker" in navigator) { + navigator.serviceWorker.register("/pwa-examples/js13kpwa/sw.js"); +} ``` 브라우저에서 Service worker API를 지원한다면, {{domxref("ServiceWorkerContainer.register()")}} 메소드를 사용해 사이트에대해 등록됩니다. 컨텐츠는 sw\.js 파일안에 있으며 등록이 성공한 후에 실행됩니다. 이것이 app.js 파일안에 있는 Service Worker 코드의 유일한 부분입니다. Service Worker에 대한 다른 모든 것들은 sw\.js 파일에 작성되어 있습니다. @@ -53,8 +53,8 @@ if('serviceWorker' in navigator) { API는 우리가 관심있는 주요 이벤트에 대한 이벤트 리스너를 추가할 수 있게 해줍니다. 첫 번째 것은 `install` 이벤트 입니다. ```js -self.addEventListener('install', function(e) { - console.log('[Service Worker] Install'); +self.addEventListener("install", function (e) { + console.log("[Service Worker] Install"); }); ``` @@ -63,26 +63,26 @@ self.addEventListener('install', function(e) { 먼저, 캐시 이름을 저장할 변수를 생성하고, app shell 파일들을 하나의 배열에 나열합니다. ```js -var cacheName = 'js13kPWA-v1'; +var cacheName = "js13kPWA-v1"; var appShellFiles = [ - '/pwa-examples/js13kpwa/', - '/pwa-examples/js13kpwa/index.html', - '/pwa-examples/js13kpwa/app.js', - '/pwa-examples/js13kpwa/style.css', - '/pwa-examples/js13kpwa/fonts/graduate.eot', - '/pwa-examples/js13kpwa/fonts/graduate.ttf', - '/pwa-examples/js13kpwa/fonts/graduate.woff', - '/pwa-examples/js13kpwa/favicon.ico', - '/pwa-examples/js13kpwa/img/js13kgames.png', - '/pwa-examples/js13kpwa/img/bg.png', - '/pwa-examples/js13kpwa/icons/icon-32.png', - '/pwa-examples/js13kpwa/icons/icon-64.png', - '/pwa-examples/js13kpwa/icons/icon-96.png', - '/pwa-examples/js13kpwa/icons/icon-128.png', - '/pwa-examples/js13kpwa/icons/icon-168.png', - '/pwa-examples/js13kpwa/icons/icon-192.png', - '/pwa-examples/js13kpwa/icons/icon-256.png', - '/pwa-examples/js13kpwa/icons/icon-512.png' + "/pwa-examples/js13kpwa/", + "/pwa-examples/js13kpwa/index.html", + "/pwa-examples/js13kpwa/app.js", + "/pwa-examples/js13kpwa/style.css", + "/pwa-examples/js13kpwa/fonts/graduate.eot", + "/pwa-examples/js13kpwa/fonts/graduate.ttf", + "/pwa-examples/js13kpwa/fonts/graduate.woff", + "/pwa-examples/js13kpwa/favicon.ico", + "/pwa-examples/js13kpwa/img/js13kgames.png", + "/pwa-examples/js13kpwa/img/bg.png", + "/pwa-examples/js13kpwa/icons/icon-32.png", + "/pwa-examples/js13kpwa/icons/icon-64.png", + "/pwa-examples/js13kpwa/icons/icon-96.png", + "/pwa-examples/js13kpwa/icons/icon-128.png", + "/pwa-examples/js13kpwa/icons/icon-168.png", + "/pwa-examples/js13kpwa/icons/icon-192.png", + "/pwa-examples/js13kpwa/icons/icon-256.png", + "/pwa-examples/js13kpwa/icons/icon-512.png", ]; ``` @@ -90,8 +90,8 @@ var appShellFiles = [ ```js var gamesImages = []; -for(var i=0; ip { mask: url(#my-mask); } + ``` 위의 예제에서, 모든 문단은 [ID](/ko/docs/Web/HTML/Global_attributes/id)가 `my-mask`인 [SVG ``](/ko/docs/Web/SVG/Element/mask)에 의해 마스크 처리됩니다. @@ -27,11 +31,11 @@ CSS 스타일을 이용해 SVG 효과를 적용하기 위해서, 먼저 적용 - - + + - - + + ``` @@ -53,14 +57,15 @@ Applying the SVG effect to (X)HTML is accomplished by assigning the `target` cla ```html

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    - Lorem ipsum dolor sit amet, consectetur adipisicing - elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. - Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam.

    ``` @@ -74,22 +79,23 @@ This example demonstrates using SVG to clip HTML content. Notice that even the c ```html

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

    - Lorem ipsum dolor sit amet, consectetur adipisicing - elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. - Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam.

    - - + + ``` @@ -112,7 +118,7 @@ You can make changes to the SVG in real time and see them immediately affect the ```js function toggleRadius() { var circle = document.getElementById("circle"); - circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; + circle.r.baseVal.value = 0.4 - circle.r.baseVal.value; } ``` @@ -124,15 +130,16 @@ This demonstrates applying a filter to HTML content using SVG. It establishes se ```html

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. 

    lorem

    - Lorem ipsum dolor sit amet, consectetur adipisicing - elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. - Ut enim ad minim veniam. + Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam.

    ``` @@ -141,7 +148,7 @@ Any SVG filter can be applied this way. For example, to apply a blur effect, you ```html - + ``` @@ -151,10 +158,11 @@ You could also apply a color matrix: ```html - + ``` @@ -164,20 +172,29 @@ And some more filters: ```html - + - - + + - + ``` @@ -185,12 +202,24 @@ And some more filters: The five filters are applied using the following CSS: ```css -p.target { filter:url(#f3); } -p.target:hover { filter:url(#f5); } -b.target { filter:url(#f1); } -b.target:hover { filter:url(#f4); } -pre.target { filter:url(#f2); } -pre.target:hover { filter:url(#f3); } +p.target { + filter: url(#f3); +} +p.target:hover { + filter: url(#f5); +} +b.target { + filter: url(#f1); +} +b.target:hover { + filter: url(#f4); +} +pre.target { + filter: url(#f2); +} +pre.target:hover { + filter: url(#f3); +} ``` {{EmbedLiveSample('Example_Filtering', 650, 200)}} @@ -206,7 +235,7 @@ In order to blur text, Webkit based browsers have a (prefixed) CSS filter called - + @@ -215,7 +244,9 @@ In order to blur text, Webkit based browsers have a (prefixed) CSS filter called You can apply the SVG and the CSS filter in the same class: ```css -.blur { filter: url(#wherearemyglasses); } +.blur { + filter: url(#wherearemyglasses); +} ``` {{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }} @@ -229,7 +260,9 @@ SVG used for clipping, masking, and filtering can be loaded from an external sou For example, if your CSS is in a file named `default.css`, it can look like this: ```css -.target { clip-path: url(resources.svg#c1); } +.target { + clip-path: url(resources.svg#c1); +} ``` The SVG is then imported from a file named `resources.svg`, using the clip path with the ID `c1`. diff --git a/files/ko/web/svg/attribute/cx/index.md b/files/ko/web/svg/attribute/cx/index.md index c19dfaf10915cd..dde01fccc3c67e 100644 --- a/files/ko/web/svg/attribute/cx/index.md +++ b/files/ko/web/svg/attribute/cx/index.md @@ -16,17 +16,21 @@ slug: Web/SVG/Attribute/cx ## Example ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - + - + @@ -55,7 +59,7 @@ html,body,svg { height:100% } -> **Note:** SVG2 `cx`로 시작하는 것은 *기하학적 속성* 입니다. 즉, 이 속성은 circle의 CSS 속성으로도 사용할 수 있습니다. +> **Note:** SVG2 `cx`로 시작하는 것은 _기하학적 속성_ 입니다. 즉, 이 속성은 circle의 CSS 속성으로도 사용할 수 있습니다. ## ellipse @@ -78,7 +82,7 @@ html,body,svg { height:100% } -> **Note:** SVG2 `cx`로 시작하는 것은 *기하학적 속성* 입니다. 이는 이 속성이 ellipse의 CSS 속성으로도 사용될 수 있음을 의미합니다. +> **Note:** SVG2 `cx`로 시작하는 것은 _기하학적 속성_ 입니다. 이는 이 속성이 ellipse의 CSS 속성으로도 사용될 수 있음을 의미합니다. ## radialGradient @@ -104,34 +108,56 @@ html,body,svg { height:100% } #### 예제 ```css hidden -html,body,svg { height:100% } +html, +body, +svg { + height: 100%; +} ``` ```html - - + + - - + + - - + + - - - + + + ``` diff --git a/files/ko/web/svg/attribute/d/index.md b/files/ko/web/svg/attribute/d/index.md index 75f17cd9a52283..4b93ff7d2b5fe7 100644 --- a/files/ko/web/svg/attribute/d/index.md +++ b/files/ko/web/svg/attribute/d/index.md @@ -346,13 +346,13 @@ Below is a list of all of the attributes available in SVG along with links to re - Core attributes - - : [Core attributes](/en-US/docs/Web/SVG/Attribute/Core) + - : [Core attributes](/ko/docs/Web/SVG/Attribute/Core) {{SVGAttr("id")}}, {{SVGAttr("lang")}}, {{SVGAttr("tabindex")}}, {{SVGAttr("xml:base")}}, {{SVGAttr("xml:lang")}}, {{SVGAttr("xml:space")}} - Style attributes - - : [Style attributes](/en-US/docs/Web/SVG/Attribute/Styling) + - : [Style attributes](/ko/docs/Web/SVG/Attribute/Styling) {{SVGAttr("class")}}, {{SVGAttr("style")}} @@ -365,7 +365,7 @@ Below is a list of all of the attributes available in SVG along with links to re ### Presentation attributes -> **Note:** All [SVG presentation attributes](/en-US/docs/Web/SVG/Attribute/Presentation) can be used as CSS properties. +> **Note:** All [SVG presentation attributes](/ko/docs/Web/SVG/Attribute/Presentation) can be used as CSS properties. - {{SVGAttr("alignment-baseline")}} - {{SVGAttr("baseline-shift")}} @@ -454,30 +454,30 @@ Below is a list of all of the attributes available in SVG along with links to re - Animation event attributes - - : [Animation event attributes](/en-US/docs/Web/SVG/Attribute/Events#animation_event_attributes) + - : [Animation event attributes](/ko/docs/Web/SVG/Attribute/Events#animation_event_attributes) **`onbegin`**, **`onend`**, **`onrepeat`** - Document event attributes - - : [Document event attributes](/en-US/docs/Web/SVG/Attribute/Events#document_event_attributes) + - : [Document event attributes](/ko/docs/Web/SVG/Attribute/Events#document_event_attributes) **`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`** - Global event attributes - - : [Global event attributes](/en-US/docs/Web/SVG/Attribute/Events#global_event_attributes) + - : [Global event attributes](/ko/docs/Web/SVG/Attribute/Events#global_event_attributes) **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`** - Graphical event attributes - - : [Graphical event attributes](/en-US/docs/Web/SVG/Attribute/Events#graphical_event_attributes) + - : [Graphical event attributes](/ko/docs/Web/SVG/Attribute/Events#graphical_event_attributes) **`onactivate`**, **`onfocusin`**, **`onfocusout`** ## 같이 보기 -- [SVG element reference](/en-US/docs/Web/SVG/Element) -- [SVG Tutorial](/en-US/docs/Web/SVG/Tutorial) -- [SVG interface reference](/en-US/docs/Web/API/Document_Object_Model#svg_interfaces) +- [SVG element reference](/ko/docs/Web/SVG/Element) +- [SVG Tutorial](/ko/docs/Web/SVG/Tutorial) +- [SVG interface reference](/ko/docs/Web/API/Document_Object_Model#svg_interfaces) diff --git a/files/ko/web/svg/attribute/keytimes/index.md b/files/ko/web/svg/attribute/keytimes/index.md index b40b401f4688c1..6b64b01fbcfaf4 100644 --- a/files/ko/web/svg/attribute/keytimes/index.md +++ b/files/ko/web/svg/attribute/keytimes/index.md @@ -2,6 +2,7 @@ title: keyTimes slug: Web/SVG/Attribute/keyTimes --- + « [SVG Attribute reference home](/ko/docs/Web/SVG/Attribute) `keyTimes` 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. `keyTimes` 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다. @@ -23,7 +24,7 @@ If the duration is indefinite, any `keyTimes` specification will be ignored. | Categories | Animation value attribute | | ------------------ | -------------------------------------------------------------------------------- | -| Value | \ | +| Value | \ | | Animatable | No | | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute) | @@ -31,27 +32,29 @@ If the duration is indefinite, any `keyTimes` specification will be ignored. ```html - - - - - - - - - + + + + + + ``` diff --git a/files/ko/web/svg/attribute/values/index.md b/files/ko/web/svg/attribute/values/index.md index e1f347ce3696c5..b2270f89952a93 100644 --- a/files/ko/web/svg/attribute/values/index.md +++ b/files/ko/web/svg/attribute/values/index.md @@ -2,6 +2,7 @@ title: values slug: Web/SVG/Attribute/values --- + « [SVG Attribute reference home](/en/SVG/Attribute) `values` 속성은 사용하는 맥락에 따라 크게 두 가지 의미가 있습니다. @@ -27,7 +28,7 @@ If the attribute is not specified, then the default behavior depends on the valu | Categories | Animation value attribute | | ------------------ | -------------------------------------------------------------------------------- | -| Value | \ | +| Value | \ | | Animatable | No | | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute) | @@ -35,7 +36,7 @@ If the attribute is not specified, then the default behavior depends on the valu | Categories | _None_ | | ------------------ | --------------------------------------------------------------------------------------------- | -| Value | \ \| [\](/en/SVG/Content_type#Number) | +| Value | \ \| [\](/en/SVG/Content_type#Number) | | Animatable | Yes | | Normative document | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute) | diff --git a/files/ko/web/svg/attribute/version/index.md b/files/ko/web/svg/attribute/version/index.md index 63e8cd86922572..e72e92b4dfaf7c 100644 --- a/files/ko/web/svg/attribute/version/index.md +++ b/files/ko/web/svg/attribute/version/index.md @@ -2,6 +2,7 @@ title: version slug: Web/SVG/Attribute/version --- + **`version`** 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 [\](/ko/docs/Web/SVG/Element/svg) 요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다. 버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다. @@ -10,6 +11,6 @@ slug: Web/SVG/Attribute/version | Categories | None | | ------------------ | ------------------------------------------------------------------------------------------------------------- | -| Value | [\](/en/SVG/Content_type#Number) | +| Value | [\](/en/SVG/Content_type#Number) | | Animatable | No | | Normative document | [SVG 1.1 (2nd Edition): version attribute](http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute) | diff --git a/files/ko/web/svg/attribute/viewbox/index.md b/files/ko/web/svg/attribute/viewbox/index.md index 0c681ec3158c26..ddbd9ac24c060d 100644 --- a/files/ko/web/svg/attribute/viewbox/index.md +++ b/files/ko/web/svg/attribute/viewbox/index.md @@ -2,6 +2,7 @@ title: viewBox slug: Web/SVG/Attribute/viewBox --- + « [SVG Attribute reference home](/en/SVG/Attribute) `viewBox` 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다. diff --git a/files/ko/web/svg/element/a/index.md b/files/ko/web/svg/element/a/index.md index daf6f90bebeac6..985675b4da56a4 100644 --- a/files/ko/web/svg/element/a/index.md +++ b/files/ko/web/svg/element/a/index.md @@ -72,13 +72,13 @@ svg|a:active { 값 유형: **\** ; 기본 값: 없음; 애니메이션 가능: **아니요** - {{SVGAttr("href")}} - : 하이퍼링크가 가리키는 URL 또는 URL 조각입니다. - 값 유형: **[\](/en-US/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예** + 값 유형: **[\](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예** - {{htmlattrxref("hreflang", "a")}} - : 하이퍼링크가 가리키는 URL 또는 URL 조각의 사람 언어입니다. 값 유형: **\** ; 기본값: 없음; 애니메이션 가능: **예** - {{htmlattrxref("ping", "a")}} {{experimental_inline}} - : 공백으로 구분된 URL 목록으로, 하이퍼링크를 따라갈 때 `PING` 본문이 포함된 {{HTTPMethod("POST")}} 요청이 브라우저에서 전송됩니다(백그라운드에서). 일반적으로 추적에 사용됩니다. 동일한 사용 사례를 다루는 보다 광범위하게 지원되는 기능은 {{domxref("Navigator.sendBeacon()")}}을 참조하십시오. - 값 유형: **[\](/en-US/docs/Web/SVG/Content_type#list-of-ts)** ; 기본값: 없음; 애니메이션 가능: **아니요** + 값 유형: **[\](/ko/docs/Web/SVG/Content_type#list-of-ts)** ; 기본값: 없음; 애니메이션 가능: **아니요** - {{htmlattrxref("referrerpolicy", "a")}} - : {{Glossary("URL")}}을 가져올 때 보내는 [리퍼러](/ko/docs/Web/HTTP/Headers/Referer)입니다. 값 유형: `no-referrer`|`no-referrer-when-downgrade`|`same-origin`|`origin`|`strict-origin`|`origin-when-cross-origin`|`strict-origin-when-cross-origin`|`unsafe-url` ; 기본 값: 없음; 애니메이션 가능: **아니요** @@ -93,7 +93,7 @@ svg|a:active { 값 유형: **\** ; 기본 값: 없음; 에니메이션 가능: **예** - {{SVGAttr("xlink:href")}} {{deprecated_inline}} - : 하이퍼링크가 가리키는 URL 또는 URL 조각입니다. 이전 브라우저의 이전 버전과의 호환성을 위해 필요할 수 있습니다. - 값 유형: **[\](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예** + 값 유형: **[\](/ko/docs/Web/SVG/Content_type#url)** ; 기본값: 없음; 애니메이션 가능: **예** ### 전역 속성 diff --git a/files/ko/web/svg/index.md b/files/ko/web/svg/index.md index fd9092e08782ff..92c9e771db7786 100644 --- a/files/ko/web/svg/index.md +++ b/files/ko/web/svg/index.md @@ -1,7 +1,8 @@ --- -title: 'SVG: Scalable Vector Graphics' +title: "SVG: Scalable Vector Graphics" slug: Web/SVG --- + {{SVGRef}} ## SVG 시작하기 diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.md b/files/ko/web/svg/tutorial/basic_shapes/index.md index 71b042a39871ca..8a76e3aec4b735 100644 --- a/files/ko/web/svg/tutorial/basic_shapes/index.md +++ b/files/ko/web/svg/tutorial/basic_shapes/index.md @@ -2,6 +2,7 @@ title: 기본 도형 slug: Web/SVG/Tutorial/Basic_Shapes --- + {{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }} SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다. @@ -62,7 +63,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 당신이 추측한 것 처럼, [circle](/en-US/Web/SVG/Element/circle) 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다. ```html - + ``` - `r` @@ -77,7 +78,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 [Ellipse](/en-US/Web/SVG/Element/ellipse)는 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다. ```html - + ``` - `rx` @@ -94,7 +95,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 [Line](/en-US/Web/SVG/Element/line)s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다. ```html - + ``` - `x1` @@ -111,7 +112,8 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 [Polyline](/en-US/Web/SVG/Element/polyline)s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다. ```html - + ``` - points @@ -122,7 +124,8 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 [Polygon](/en-US/Web/SVG/Element/polygon)s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다. ```html - + ``` - points @@ -133,7 +136,7 @@ SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적 [패스](/ko/Web/SVG/Element/path)는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 [the next section](/en-US/Web/SVG/Tutorial/Paths) 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다. ```html - + ``` - `d` diff --git a/files/ko/web/svg/tutorial/getting_started/index.md b/files/ko/web/svg/tutorial/getting_started/index.md index c85964de7de457..1f0fa04409de00 100644 --- a/files/ko/web/svg/tutorial/getting_started/index.md +++ b/files/ko/web/svg/tutorial/getting_started/index.md @@ -32,9 +32,9 @@ slug: Web/SVG/Tutorial/Getting_Started 1. SVG 루트 요소(Element)부터 시작합니다. - - DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다. - - 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다. - - XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은[네임 스페이스 충돌 과정](/ko/docs/Web/SVG/Namespaces_Crash_Course) 페이지를 참조하십시오. + - DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다. + - 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다. + - XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은[네임 스페이스 충돌 과정](/ko/docs/Web/SVG/Namespaces_Crash_Course) 페이지를 참조하십시오. 2. 전체 이미지 영역을 포함하는 사각형 \을 그려 배경을 빨간색으로 설정합니다. 3. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 \이 그려집니다 diff --git a/files/ko/web/svg/tutorial/patterns/index.md b/files/ko/web/svg/tutorial/patterns/index.md index f6e584b4ea62ee..787254c927c9ff 100644 --- a/files/ko/web/svg/tutorial/patterns/index.md +++ b/files/ko/web/svg/tutorial/patterns/index.md @@ -2,6 +2,7 @@ title: 패턴 slug: Web/SVG/Tutorial/Patterns --- + {{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }} ## 패턴 @@ -12,22 +13,27 @@ slug: Web/SVG/Tutorial/Patterns - - + + - - + + - - - + + + - + ``` diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.md b/files/ko/web/svg/tutorial/svg_image_tag/index.md index ba7290f4c15c5b..8026910fa8a433 100644 --- a/files/ko/web/svg/tutorial/svg_image_tag/index.md +++ b/files/ko/web/svg/tutorial/svg_image_tag/index.md @@ -2,6 +2,7 @@ title: SVG 이미지 요소 slug: Web/SVG/Tutorial/SVG_Image_Tag --- + {{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }} SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다. diff --git a/files/ko/web/tutorials/index.md b/files/ko/web/tutorials/index.md index 73b7e74d8a2a6b..1ebcf99fd55510 100644 --- a/files/ko/web/tutorials/index.md +++ b/files/ko/web/tutorials/index.md @@ -2,6 +2,7 @@ title: 학습서 slug: Web/Tutorials --- + 이 페이지에는 다양한 학습서 및 교육 자료에 대한 링크가 있습니다. 여러분이 웹 개발을 이제 시작하는 사람이든지, 기초를 공부하는 사람이든지, 이미 개발을 해본 사람이든지 모범 사례에 대한 유용한 자료를 찾으실 수 있습니다. 이들 자료는 웹 개발의 개방형 표준 및 모범 사례를 채택한 미래 지향적 기업 및 웹 개발자가 창작한 것으로서 Creative Commons 등의 개방형 콘텐트 라이선스를 통해 번역을 제공 또는 허용합니다. ## 웹입문자를 위하여 diff --git a/files/ko/web/xml/index.md b/files/ko/web/xml/index.md index 2a9f56a5dadc84..01386661a7a87c 100644 --- a/files/ko/web/xml/index.md +++ b/files/ko/web/xml/index.md @@ -1,8 +1,9 @@ --- -title: 'XML: Extensible Markup Language' +title: "XML: Extensible Markup Language" slug: Web/XML --- -{{QuickLinksWithSubpages("/en-US/docs/Web/XML")}} + +{{QuickLinksWithSubpages("/ko/docs/Web/XML")}} **확장가능한 마크업 언어(XML)는** 엄격하게 직렬화 된 DOM(돔 오브젝트 모델)입니다. diff --git a/files/ko/web/xpath/axes/index.md b/files/ko/web/xpath/axes/index.md index 1e784477536e9b..9ce46c5fceffa2 100644 --- a/files/ko/web/xpath/axes/index.md +++ b/files/ko/web/xpath/axes/index.md @@ -2,6 +2,7 @@ title: Axes slug: Web/XPath/Axes --- + {{ XsltRef() }} [XPath](/ko/XPath) 명세에는 축이 13가지가 있습니다. 축은 문맥 노드와의 관계를 나타내고 트리 위에 문맥 노드에 대응하여 노드를 위치시킬 때 씁니다. 다음은 이용가능한 축 13가지와 [Gecko](/ko/Gecko)에서 가능한 지원 정도에 대한 매우 짧은 설명입니다. XPath 식 사용에 관한 추가 정보는, [Transforming XML with XSLT](/ko/Transforming_XML_with_XSLT) 문서 끝 [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 절을 보세요. diff --git a/files/ko/web/xpath/functions/ceiling/index.md b/files/ko/web/xpath/functions/ceiling/index.md index 52a1b785188a5a..4d7c817ac38071 100644 --- a/files/ko/web/xpath/functions/ceiling/index.md +++ b/files/ko/web/xpath/functions/ceiling/index.md @@ -2,6 +2,7 @@ title: ceiling slug: Web/XPath/Functions/ceiling --- + {{ XsltRef() }} `ceiling` 함수는 10진수를 평가하고 10진수보다 작지 않은 가장 작은 정수를 반환합니다. diff --git a/files/ko/web/xpath/functions/document/index.md b/files/ko/web/xpath/functions/document/index.md index e57de2644b8704..1cb2a12c60a8f5 100644 --- a/files/ko/web/xpath/functions/document/index.md +++ b/files/ko/web/xpath/functions/document/index.md @@ -2,6 +2,7 @@ title: document slug: Web/XPath/Functions/document --- + {{ XsltRef() }} `document` 함수는 하나 또는 여러 외부 문서에서 노드 집합을 찾고 결과 노드 집합을 반환합니다. diff --git a/files/ko/web/xpath/functions/false/index.md b/files/ko/web/xpath/functions/false/index.md index 6e66c7ee7e8939..88a32c9317652e 100644 --- a/files/ko/web/xpath/functions/false/index.md +++ b/files/ko/web/xpath/functions/false/index.md @@ -1,5 +1,5 @@ --- -title: 'false' +title: "false" slug: Web/XPath/Functions/false --- diff --git a/files/ko/web/xpath/functions/format-number/index.md b/files/ko/web/xpath/functions/format-number/index.md index 1bb12348cf0567..61f14069b9ec26 100644 --- a/files/ko/web/xpath/functions/format-number/index.md +++ b/files/ko/web/xpath/functions/format-number/index.md @@ -2,6 +2,7 @@ title: format-number slug: Web/XPath/Functions/format-number --- + {{ XsltRef() }} `format-number` 함수는 수를 평가하고 제공한 형식으로 그 수를 나타내는 문자열을 반환합니다. diff --git a/files/ko/web/xpath/functions/id/index.md b/files/ko/web/xpath/functions/id/index.md index 5946d2e92c8b32..241edec5e7e411 100644 --- a/files/ko/web/xpath/functions/id/index.md +++ b/files/ko/web/xpath/functions/id/index.md @@ -2,6 +2,7 @@ title: id slug: Web/XPath/Functions/id --- + {{ XsltRef() }} `id` 함수는 인수로 준 id와 일치하는 노드를 찾아 그 식별된 노드를 포함하는 노드 집합을 반환합니다. @@ -15,6 +16,7 @@ id(expression ) ### 인수 - `expression` + - : 만약 `expression`이 노드 집합이면, 노드 집합 안 각 노드의 문자열 값은 개별 id로 다룹니다. 반환하는 노드 집합은 그 id와 대응하는 노드입니다. - 만약 `expression` diff --git a/files/ko/web/xpath/functions/index.md b/files/ko/web/xpath/functions/index.md index 39919d12b3ff27..487bf4fce0d1cd 100644 --- a/files/ko/web/xpath/functions/index.md +++ b/files/ko/web/xpath/functions/index.md @@ -2,6 +2,7 @@ title: Functions slug: Web/XPath/Functions --- + {{ XsltRef() }} 다음은 설명, 문법, 인수 목록, 결과형, 해당 W3C 권고안 소스, 현 [Gecko](/ko/Gecko) 지원 정도를 포함하는 기본 [XPath](/ko/XPath) 함수와 XPath에 더해진 [XSLT](/ko/XSLT) 고유의 추가분에 주석을 단 목록입니다. XPath/XSLT 함수 사용에 관한 추가 정보는, [For Further Reading](/ko/Transforming_XML_with_XSLT/For_Further_Reading) 페이지를 봐 주세요. - [boolean()](Functions/boolean) diff --git a/files/ko/web/xpath/functions/name/index.md b/files/ko/web/xpath/functions/name/index.md index 0c263b8d07cac0..caccf9bd883afa 100644 --- a/files/ko/web/xpath/functions/name/index.md +++ b/files/ko/web/xpath/functions/name/index.md @@ -2,6 +2,7 @@ title: name slug: Web/XPath/Functions/name --- + {{ XsltRef() }} `name` 함수는 인수로 준 노드 집합 안 첫 노드의 QName을 나타내는 문자열을 반환합니다. diff --git a/files/ko/web/xpath/functions/position/index.md b/files/ko/web/xpath/functions/position/index.md index d732959fb670bd..a28f615258ac51 100644 --- a/files/ko/web/xpath/functions/position/index.md +++ b/files/ko/web/xpath/functions/position/index.md @@ -2,6 +2,7 @@ title: position slug: Web/XPath/Functions/position --- + {{ XsltRef() }} `position` 함수는 식 평가 문맥(expression evaluation context)와 위치가 같은 숫자를 반환합니다. diff --git a/files/ko/web/xpath/functions/starts-with/index.md b/files/ko/web/xpath/functions/starts-with/index.md index 5dffe39d57b607..dbba28ff4dfd12 100644 --- a/files/ko/web/xpath/functions/starts-with/index.md +++ b/files/ko/web/xpath/functions/starts-with/index.md @@ -2,6 +2,7 @@ title: starts-with slug: Web/XPath/Functions/starts-with --- + {{ XsltRef() }} `starts-with` 함수는 첫 번째 문자열이 두 번째 문자열로 시작하는 지를 확인한 뒤 true나 false를 반환합니다. diff --git a/files/ko/web/xpath/functions/substring-after/index.md b/files/ko/web/xpath/functions/substring-after/index.md index e8a1d65cfe571f..200e4e35b306ec 100644 --- a/files/ko/web/xpath/functions/substring-after/index.md +++ b/files/ko/web/xpath/functions/substring-after/index.md @@ -2,6 +2,7 @@ title: substring-after slug: Web/XPath/Functions/substring-after --- + {{ XsltRef() }} `substring-after` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 다음의 나머지를 반환합니다. diff --git a/files/ko/web/xpath/functions/substring-before/index.md b/files/ko/web/xpath/functions/substring-before/index.md index e4583eccce3211..89995ca76f1132 100644 --- a/files/ko/web/xpath/functions/substring-before/index.md +++ b/files/ko/web/xpath/functions/substring-before/index.md @@ -2,6 +2,7 @@ title: substring-before slug: Web/XPath/Functions/substring-before --- + {{ XsltRef() }} `substring-before` 함수는 첫 번째 인수에서 두 번째 인수가 나타난 앞의 나머지를 반환합니다. diff --git a/files/ko/web/xpath/functions/system-property/index.md b/files/ko/web/xpath/functions/system-property/index.md index dda6d6138e298e..aa3e3608080302 100644 --- a/files/ko/web/xpath/functions/system-property/index.md +++ b/files/ko/web/xpath/functions/system-property/index.md @@ -2,6 +2,7 @@ title: system-property slug: Web/XPath/Functions/system-property --- + {{ XsltRef() }} `system-property` 함수는 인수로 준 시스템 속성을 나타내는 개체를 반환합니다. diff --git a/files/ko/web/xpath/functions/translate/index.md b/files/ko/web/xpath/functions/translate/index.md index 106b8e4467e1de..7b4c1e40326e5c 100644 --- a/files/ko/web/xpath/functions/translate/index.md +++ b/files/ko/web/xpath/functions/translate/index.md @@ -2,6 +2,7 @@ title: translate slug: Web/XPath/Functions/translate --- + {{ XsltRef() }} `translate` 함수는 문자열과 번역할 문자 집합을 평가하고 번역된 문자열을 반환합니다. diff --git a/files/ko/web/xpath/functions/true/index.md b/files/ko/web/xpath/functions/true/index.md index 3f9f683b631421..33d1db5d33c608 100644 --- a/files/ko/web/xpath/functions/true/index.md +++ b/files/ko/web/xpath/functions/true/index.md @@ -1,5 +1,5 @@ --- -title: 'true' +title: "true" slug: Web/XPath/Functions/true --- diff --git a/files/ko/web/xpath/index.md b/files/ko/web/xpath/index.md index 3a3f93d81a0165..830bd3d6d0882b 100644 --- a/files/ko/web/xpath/index.md +++ b/files/ko/web/xpath/index.md @@ -36,15 +36,15 @@ XPath는 XML 문서의 계층 구조를 항해하기 위해 경로 표기법(URL
      -
    1. XSLT
    2. EXSLT
      3. -
    3. XPath
      4. +
    4. XSLT
    5. EXSLT
      6. +
    6. XPath
    7. Guides
        -
      1. Comparison of CSS Selectors and XPath
        2. -
      2. XPath snippets
        3. +
      3. Comparison of CSS Selectors and XPath
        4. +
      4. XPath snippets
      8. -
    8. XPath Axes{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Axes")}}
      9. -
    9. XPath Functions{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Functions")}}
      10. +
    10. XPath Axes{{ListSubpagesForSidebar("/ko/docs/Web/XPath/Axes")}}
      11. +
    11. XPath Functions{{ListSubpagesForSidebar("/ko/docs/Web/XPath/Functions")}}
    diff --git a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md index 31312d8686adc7..7196592643efb4 100644 --- a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md +++ b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.md @@ -3,6 +3,7 @@ title: Introduction to using XPath in JavaScript slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript original_slug: Introduction_to_using_XPath_in_JavaScript --- + 이 문서는 JavaScript 안, 확장기능, 웹사이트에서 [XPath](/ko/XPath)를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 [DOM 3 XPath](http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html)를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다. XPath를 사용하는 주 인터페이스는 [document](/ko/DOM/document) 개체의 [evaluate](/ko/DOM/document.evaluate) 함수입니다. @@ -32,6 +33,7 @@ var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceReso - [`XPathEvaluator`](http://www.xulplanet.com/references/objref/XPathEvaluator.html) 개체의 [`createNSResolver`](/ko/DOM/document.createNSResolver) 메소드를 써서 [만듭니다](#Implementing_a_Default_Namespace_Resolver). 항상 가상으로 이를 쓰면 좋습니다. - HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 `null`. 만약 `xpathExpression`가 namespace 접두사를 포함하면 이는 `NAMESPACE_ERR` 코드를 내는 `DOMException`을 가져옴을 유의하세요. - 사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 [사용자 정의 Namespace Resolver 쓰기](#Implementing_a_User_Defined_Namespace_Resolver) 절을 보세요. + - `resultType`: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 [상수](#XPathResult_Defined_Constants). 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 `XPathResult.ANY_TYPE`입니다. 부록에 [쓸 수 있는 상수](#XPathResult_Defined_Constants) 목록 전체를 포함하는 절이 있습니다. 아래 [반환형 지정](#Specifying_the_Return_Type) 절에서 설명합니다. - `result`: 결과를 반환하는 데 재사용하는 기존 `XPathResult` 개체나 새 `XPathResult` 개체를 만드는 데 쓸 수 있는 `null` 가운데 하나. @@ -50,10 +52,12 @@ var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? Or alternatively by using the `createNSResolver` method of a `XPathEvaluator` object. ```js -var xpEvaluator = new XPathEvaluator(); -var nsResolver = xpEvaluator.createNSResolver( - contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement - ); +var xpEvaluator = new XPathEvaluator(); +var nsResolver = xpEvaluator.createNSResolver( + contextNode.ownerDocument == null + ? contextNode.documentElement + : contextNode.ownerDocument.documentElement, +); ``` 그리고 나서 `document.evaluate` 함수에 `namespaceResolver` 매개변수로 `nsResolver` 변수를 넘겨줍니다. @@ -122,18 +126,23 @@ alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elem ###### 반복자 예 ```js -var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); +var iterator = document.evaluate( + "//phoneNumber", + documentNode, + null, + XPathResult.UNORDERED_NODE_ITERATOR_TYPE, + null, +); try { var thisNode = iterator.iterateNext(); while (thisNode) { - alert( thisNode.textContent ); + alert(thisNode.textContent); thisNode = iterator.iterateNext(); } -} -catch (e) { - dump( 'Error: Document tree modified during iteraton ' + e ); +} catch (e) { + dump("Error: Document tree modified during iteraton " + e); } ``` @@ -151,11 +160,16 @@ Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 ###### Snapshot 예 ```js -var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); - -for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) -{ - dump( nodesSnapshot.snapshotItem(i).textContent ); +var nodesSnapshot = document.evaluate( + "//phoneNumber", + documentNode, + null, + XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, + null, +); + +for (var i = 0; i < nodesSnapshot.snapshotLength; i++) { + dump(nodesSnapshot.snapshotItem(i).textContent); } ``` @@ -173,9 +187,18 @@ for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) ###### First Node 예 ```js -var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); - -dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); +var firstPhoneNumber = document.evaluate( + "//phoneNumber", + documentNode, + null, + XPathResult.FIRST_ORDERED_NODE_TYPE, + null, +); + +dump( + "The first phone number found is " + + firstPhoneNumber.singleNodeValue.textContent, +); ``` #### ANY_TYPE 상수 @@ -209,10 +232,10 @@ HTML이 namespace가 없기 때문에, 우리는 `namespaceResolver` 매개변 ```js var thisHeading = headings.iterateNext(); -var alertText = 'Level 2 headings in this document are:\n' +var alertText = "Level 2 headings in this document are:\n"; while (thisHeading) { - alertText += thisHeading.textContent + '\n'; + alertText += thisHeading.textContent + "\n"; thisHeading = headings.iterateNext(); } ``` @@ -251,9 +274,19 @@ req.send(null); var xmlDoc = req.responseXML; -var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); - -var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); +var nsResolver = xmlDoc.createNSResolver( + xmlDoc.ownerDocument == null + ? xmlDoc.documentElement + : xmlDoc.ownerDocument.documentElement, +); + +var personIterator = xmlDoc.evaluate( + "//person", + xmlDoc, + nsResolver, + XPathResult.ANY_TYPE, + null, +); ``` ## 부록 @@ -273,8 +306,8 @@ var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult ```js function nsResolver(prefix) { var ns = { - 'xhtml' : 'http://www.w3.org/1999/xhtml', - 'mathml': 'http://www.w3.org/1998/Math/MathML' + xhtml: "http://www.w3.org/1999/xhtml", + mathml: "http://www.w3.org/1998/Math/MathML", }; return ns[prefix] || null; } @@ -283,7 +316,13 @@ function nsResolver(prefix) { 그러면 `document.evaluate` 호출은 다음과 같습니다. ```js -document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); +document.evaluate( + "//xhtml:td/mathml:math", + document, + nsResolver, + XPathResult.ANY_TYPE, + null, +); ``` #### XPathResult 정의 상수 diff --git a/files/ko/web/xslt/element/number/index.md b/files/ko/web/xslt/element/number/index.md index 8177ada0181de2..fbbc21476710ed 100644 --- a/files/ko/web/xslt/element/number/index.md +++ b/files/ko/web/xslt/element/number/index.md @@ -32,6 +32,7 @@ original_slug: Web/XSLT/number - `count` - : 소스 트리에서 연속으로 셀 대상을 지정합니다. XPath 식을 씁니다. - `level` + - : 일련번호를 만드는데 소스 트리의 수준을 어떻게 고려해야 하는 지를 정의합니다. 유효한 값은 `single`, `multiple`, `any` 세 가지. 기본값은 `single`입니다. - `single` 목록의 항목대로 연속으로 형제 노드를 번호 매깁니다. 처리기는 `count` 속성과 일치하는 [`ancestor-or-self`](/ko/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self) 축의 첫 번째 노드로 갑니다. 그리고 나서 역시 `count` 속성과 일치하는 앞선 형제(preceding siblings) 노드(있다면, 한 짝인 `from` 속성에 이르러 멈춤)를 모두 더하여 셉니다. 일치하지 않으면, sequence는 빈 목록입니다. @@ -45,6 +46,7 @@ original_slug: Web/XSLT/number - value - : 숫자에 주어진 형식을 적용합니다. 이것이 사용자 제공 숫자(노드 sequence 숫자와는 반대로)를 표준 `` 형식으로 구성하는 빠른 방법입니다. - format + - : 만드는 숫자의 형식을 정의합니다. - format="1" diff --git a/files/ko/web/xslt/index.md b/files/ko/web/xslt/index.md index 5a866d496ce423..589db6cbb746fc 100644 --- a/files/ko/web/xslt/index.md +++ b/files/ko/web/xslt/index.md @@ -7,47 +7,47 @@ slug: Web/XSLT ## Documentation -- [XSLT Element Reference](/en-US/docs/Web/XSLT/Element) +- [XSLT Element Reference](/ko/docs/Web/XSLT/Element) - : Reference. -- [Transforming XML with XSLT](/en-US/docs/Web/XSLT/Transforming_XML_with_XSLT) +- [Transforming XML with XSLT](/ko/docs/Web/XSLT/Transforming_XML_with_XSLT) - : XSLT는 스타일시트 만든 이가 그러길 바란다면 컨텐트를 모조리 다시 정리하고 다른 형식으로 변환하는 것을 포함하는 컨텐트 조작(manipulating)과 정렬이라는 중요한 두 방식으로 본래 XML 문서를 변환하게 합니다. -- [Using the Mozilla JavaScript interface to XSL Transformations](/en-US/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations) +- [Using the Mozilla JavaScript interface to XSL Transformations](/ko/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations) - : 이 문서는 Mozilla 1.2의 자바스크립트 인터페이스와 XSLT 처리 엔진까지 설명합니다. -- [Specifying parameters using processing instructions](/en-US/docs/Web/XSLT/PI_Parameters) +- [Specifying parameters using processing instructions](/ko/docs/Web/XSLT/PI_Parameters) - : Firefox allows stylesheet parameters to be specified when using the `` processing instruction. This is done using the `` PI described in this document. - [XSLT Tutorial](https://www.w3schools.com/xml/xsl_intro.asp) - : 이 [W3Schools](http://www.w3schools.com) 입문서는 읽는 이에게 XML 문서를 XHTML같은 다른 형식으로 변환하기 위해 어떻게 XSLT를 사용하는지를 가르칩니다. - [What is XSLT?](https://www.xml.com/pub/a/2000/08/holman/) - : XSLT와 XPath에 대한 이 방대한 해설은 두 기술에 대한 지식이 없다고 가정하고, 배경, 문맥, 구조, 개념, 입문 용어를 통해 읽는 이를 이끕니다. -- [Common XSLT Errors](/en-US/docs/Web/XSLT/Common_errors) +- [Common XSLT Errors](/ko/docs/Web/XSLT/Common_errors) - : This article lists some common problems using XSLT in Firefox. ## Related Topics -- [XML](/en-US/docs/Web/XML/XML_introduction), [XPath](/en-US/docs/Web/XPath) +- [XML](/ko/docs/Web/XML/XML_introduction), [XPath](/ko/docs/Web/XPath)