From fe14b18b973e07ce0c92e90c8f980b355de275ae Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 2 Oct 2023 21:38:05 +0200 Subject: [PATCH 01/58] `fr` - CycleTracker - Initial translation for HTML and CSS chapter (#16227) * Initial translation for HTML and CSS chapter * Compress media asset --- .../cycletracker/html_and_css/html.jpg | Bin 0 -> 38085 bytes .../cycletracker/html_and_css/index.md | 352 ++++++++++++++++++ 2 files changed, 352 insertions(+) create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg create mode 100644 files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/html.jpg new file mode 100644 index 0000000000000000000000000000000000000000..8022cd701c6ae1aee3768ebdf6816aa430a08b98 GIT binary patch literal 38085 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 Ai2wiq literal 0 HcmV?d00001 diff --git a/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md new file mode 100644 index 00000000000000..fc32150206b0d6 --- /dev/null +++ b/files/fr/web/progressive_web_apps/tutorials/cycletracker/html_and_css/index.md @@ -0,0 +1,352 @@ +--- +title: "CycleTracker : fondations HTML et CSS" +short-title: Fondations HTML et CSS +slug: Web/Progressive_web_apps/Tutorials/CycleTracker/HTML_and_CSS +l10n: + sourceCommit: ab8736c08a6664970fec04088182b8c5e29a570a +--- + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} + +{{PWASidebar}} + +Pour construire une application web progressive, il faut créer une application web fonctionnelle. Dans cet article, nous mettrons en place la structure HTML d'une page web statique dont nous améliorerons l'apparence avec CSS. + +Notre projet consiste à créer CycleTracker, une application de suivi menstruel. La première étape de ce [tutoriel sur les PWA](/fr/docs/Web/Progressive_web_apps/Tutorials) consiste à écrire le squelette HTML et CSS. Pour notre application, la section située en haut de la page sera un formulaire où la personne pourra saisir les dates de début et de fin de chaque cycle menstruel. La section en bas de la page affichera une liste des cycles précédents. + +On crée un fichier HTML avec les métadonnées au sein de l'élément [``](/fr/docs/Web/HTML/Element/head) et comme contenu un formulaire et un emplacement pour afficher les données saisies. On ajoute ensuite une feuille de styles CSS externe pour améliorer l'apparence du site. + +Pour réaliser ce tutoriel, il est utile d'avoir des notions élémentaire en [HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics), [CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics), et [JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics). Si vous ne connaissez pas ces technologies, MDN contient des [guides pour démarrer sur le Web](/fr/docs/Learn/Getting_started_with_the_web), avec un ensemble d'articles introductifs au développement web. + +Dans les chapitres suivants, nous mettrons en place [un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) et verrons notre avancée avant d'ajouter [des fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir le contenu statique créé ici en une application web fonctionnelle. Une fois cette application fonctionnelle obtenue, nous pourrons l'améliorer progressivement pour obtenir une PWA qui puisse être installée et fonctionner hors-ligne. + +## Contenu web statique + +Notre site HTML statique contient des éléments [``](/fr/docs/Web/HTML/Element/link) et [` + + +``` + +Copiez le contenu de ce HTML dans votre éditeur de texte et enregistrez-le dans un fichier nommé `index.html`. + +## Le contenu HTML + +Même si le contenu HTML du fichier `index.html` vous semble familier, nous vous conseillons de lire cette section avant d'ajouter [temporairement des données en dur](#textes-temporaires-en-dur), d'ajouter du CSS dans la feuille de style externe [`styles.css`](#contenu-css), et de créer le fichier `app.js` qui contiendra [le code JavaScript de l'application](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality). + +La première ligne du document HTML est un préambule [doctype](/fr/docs/Glossary/Doctype) qui permet le bon fonctionnement du contenu. + +```html + +``` + +La balise racine [``](/fr/docs/Web/HTML/Element/html) englobe tout le contenu et possède l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) qui indique la langue principale de la page. + +```html + + + + +``` + +### La tête du document (``) + +L'élément [``](/fr/docs/Web/HTML/Element/head) contient des informations à propos de l'application web, interprétables par une machine et qui ne sont pas visibles à l'exception de [``](/fr/docs/Web/HTML/Element/title) qui affiche le titre de la page dans l'onglet du navigateur. + +`<head>` contient toutes les [métadonnées](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML). Les deux premières informations dans `<head>` devraient toujours être le jeu de caractères, qui définit [l'encodage utilisé pour les caractères](/fr/docs/Glossary/Character_encoding), et [l'instruction sur la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/HTML/Viewport_meta_tag) portée dans une balise [`<meta>`](/fr/docs/Web/HTML/Element/meta) pour que la page soit bien affichée avec la largeur de la zone d'affichage et ne soit pas réduite lorsqu'elle est chargée sur des petits écrans. + +```html +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> +</head> +``` + +On définit le titre de la page avec le texte « Cycle Tracker » dans l'élément [`<title>`](/fr/docs/Web/HTML/Element/title). Même si le reste du contenu de `<head>` n'est pas visible sur la page, on peut voir le contenu de `<title>` dans l'onglet du navigateur lorsque la page est chargée, dans les résultats d'un moteur de recherche ou comme titre par défaut lorsqu'on met un marque-page. Le titre fournit également un nom accessible aux lecteurs d'écran pour les personnes qui se basent sur cette information pour savoir sur quel onglet elles sont. + +Le titre aurait pu être « Application de suivi des cycles menstruels », nous avons préféré une version plus courte et anglophone. + +```html +<title>Cycle Tracker +``` + +Bien qu'ils soient officiellement facultatifs, ces dex balises `` et l'élément `` sont trois composants de l'élément `<head>` qui devraient être présents dans tout document HTML. + +Le dernier composant inclus dans l'élément `<head>` est un élément [`<link>`](/fr/docs/Web/HTML/Element/link) reliant à notre feuille de style externe `styles.css` (qui n'est pas encore écrite) à notre document HTML. + +```html +<link rel="stylesheet" href="style.css" /> +``` + +L'élément HTML `<link>` établit une relation entre le document courant et une ressource externe. Il existe plus de 25 valeurs pour l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) (et de nombreuses autres valeurs ne sont pas spécifiées). La forme la plus fréquente, `rel="stylesheet"`, importe une ressource externe comme feuille de style. + +Nous reverrons cet élément `<link>` et son attribut `rel` dans un prochain chapitre lorsque nous inclurons [un lien vers le manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file#ajouter_le_manifeste_à_lapplication). + +### Le corps du document (`<body>`) + +L'élément [`<body>`](/fr/docs/Web/HTML/Element/body) contient tout le contenu qu'on souhaite afficher aux personnes qui visitent le site sur Internet. + +Dans cet élément `<body>`, on inclut le nom de l'application sous la forme d'un titre de niveau 1 avec un élément [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), puis on place un formulaire avec un élément [`<form>`](/fr/docs/Web/HTML/Element/form). + +```html +<body> + <h1>Suivi des cycles</h1> + <form></form> +</body> +``` + +Le formulaire contiendra les instructions, les contrôles de saisie, un libellé pour chaque contrôle et un bouton pour soumettre une nouvelle entrée. Pour les contrôles de notre formulaire, on doit pouvoir saisir une date de début et une date de fin pour chaque cycle menstruel. + +Au sein de l'élément `<form>`, on inclut un élément [`<fieldset>`](/fr/docs/Web/HTML/Element/fieldset) avec une légende ([`<legend>`](/fr/docs/Web/HTML/Element/legend)) qui décrit l'objectif de ce groupe de champs. + +```html +<form> + <fieldset> + <legend> + Veuillez saisir la date de début et la date de fin de votre cycle + </legend> + </fieldset> +</form> +``` + +Les sélecteurs de date sont des éléments [`<input>`](/fr/docs/Web/HTML/Element/input) avec [`type="date"`](/fr/docs/Web/HTML/Element/input/date). On ajoute l'attribut [`required`](/fr/docs/Web/HTML/Attributes/required) pour réduire le risque d'erreur où la personne soumettrait un formulaire incomplet. + +Pour associer un libellé (`<label>`) avec chaque contrôle de formulaire, on utilise l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes/id) de chaque `<input>` et on fait correspondre la valeur de l'attribut [`for`](/fr/docs/Web/HTML/Attributes/for) de l'élément [`<label>`](/fr/docs/Web/HTML/Element/label) associé. Chaque libellé associé fournit ainsi un [nom accessible](/fr/docs/Glossary/Accessible_name) au champ du formulaire.. + +```html +<label for="start-date">Date de début</label> +<input type="date" id="start-date" required /> +``` + +Pour assembler le tout, on ajoute deux paragraphes ([`<p>`](/fr/docs/Web/HTML/Element/p)) au sein de l'élément `<fieldset>`, chacun contenant un sélecteur date pour le début et la fin du cycle menstruel saisi et les libellés ([`<label>`](/fr/docs/Web/HTML/Element/label)) associés. On ajoute aussi un élément [`<button>`](/fr/docs/Web/HTML/Element/button) pour soumettre le formulaire avec le texte « Ajouter un cycle menstruel » entre les balises de l'élément. L'attribut `type="submit"` est optionnel, en effet `submit` est le type par défaut pour les éléments `<button>`. + +```html +<form> + <fieldset> + <legend> + Veuillez saisir la date de début et la date de fin de votre cycle + </legend> + <p> + <label for="start-date">Date de début</label> + <input type="date" id="start-date" required /> + </p> + <p> + <label for="end-date">Date de fin</label> + <input type="date" id="end-date" required /> + </p> + </fieldset> + <p> + <button type="submit">Ajouter un cycle menstruel</button> + </p> +</form> +``` + +Nous vous invitons [à approfondir la construction de formulaires web accessibles](/fr/docs/Learn/Forms). + +### Textes temporaires en dur + +On ajoute ensuite un élément [`<section>`](/fr/docs/Web/HTML/Element/section) vide. Ce conteneur sera rempli grâce à du code JavaScript. + +```html +<section id="past-periods"></section> +``` + +Lorsque la personne enverra le formulaire, nous utiliserons JavaScript pour intercepter les données et afficheront ainsi une liste des cycles passés, avec un titre pour cette section. + +Pour le moment, nous allons inscrire temporairement du contenu en dur dans cet élément `<section>`, avec un titre `<h2>` et quelques cycles passés. Ce contenu nous permettra de régler la mise en forme lorsque nous écrirons la feuille de style CSS. + +```html +<section id="past-periods"> + <h2>Cycles antérieurs</h2> + <ul> + <li>Du 01/01/2024 au 01/06/2024</li> + <li>Du 01/29/2024 au 02/04/2024</li> + </ul> +</section> +``` + +Le contenu à l'intérieur de `<section id="past-periods"></section>` est temporaire. Nous le retirerons ou le commenterons lorsque nous aurons [terminé la mise en forme CSS](#contenu_css) et que l'apparence de l'application sera satisfaisante. + +### Lien JavaScript + +Avant de fermer l'élément `</body>`, on ajoute un lien vers le fichier JavaScript `app.js` (qui n'est pas encore écrit). On ajoute l'attribut [`defer`](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript#async_et_defer) pour que le chargement du script soit différé après le chargement et l'analyse du document HTML. + +```html +<script src="app.js" defer></script> +``` + +Le fichier `app.js` contiendra tout le fonctionnement de notre application : les gestionnaires d'évènements pour le bouton, l'enregistrement des données dans le stockage local, et l'affichage des cycles dans la section correspondante. + +[Le fichier HTML pour cette étape](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/index.html) est désormais terminé ! Vous pouvez ouvrir le fichier dans votre navigateur. Toutefois, vous verrez qu'il est plutôt basique. Nous améliorerons cet aspect dans la section qui vient. + +## Contenu CSS + +Nous pouvons maintenant mettre en forme notre contenu HTML statique à l'aide de CSS. Voici la feuille de style CSS complète : + +```css +body { + margin: 1vh 1vw; + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +ul { + padding: 0; + font-family: monospace; +} +li, +legend { + list-style-type: none; + padding: 0.2em 0.5em; + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Si vous comprenez chacune de ces lignes, n'hésitez pas à copier les règles précédentes ou à écrire votre propre CSS, puis enregistrez le fichier avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), avant de [finaliser les fichiers HTML et CSS](#finaliser-le-html-statique-et-le-css-de-notre-pwa). Si vous découvrez quoi que ce soit dans cette feuille CSS, n'hésitez pas à poursuivre votre lecture, nous allons expliquer chaque règle. + +![Capture d'écran de la page web où on voit le fond coloré en vert clair, un formulaire avec une légende, deux sélecteurs de date et un bouton. La section inférieure affiche des données fausses pour deux cycles menstruels ainsi qu'un titre.](html.jpg) + +### Explications du CSS + +On utilise la propriété [`background-color`](/fr/docs/Web/CSS/background-color) pour créer un arrière-plan vert clair (`#efe`) sur le corps du document (`body`). Pour la liste non-ordonnée, l'ensemble des champs et la légende, on utilise un arrière-plan blanc (`#fff`) et une fine bordure grâce à la propriété [`border`](/fr/docs/Web/CSS/border). On surcharge la valeur de `background-color` pour la légende et les éléments de la liste en utilisant un vert plus foncé (`#cfc`). + +On utilise [le sélecteur](/fr/docs/Web/CSS/CSS_selectors) de pseudo-classe [`:nth-of-type(even)`](/fr/docs/Web/CSS/:nth-of-type) pour cibler chaque élément pair de la liste et lui affecter [`inherit`](/fr/docs/Web/CSS/inherit) pour qu'il ait la couleur d'arrière-plan de son parent. Ici, cela signifie que les éléments pairs de la liste auront un arrière-plan blanc (`#fff`), comme celui de la liste. + +```css +body { + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +li, +legend { + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Pour que la liste et ses éléments non-ordonnés ne ressemblent pas à une liste, on retire le remplissage (<i lang="en">padding</i>) en indiquant [`padding: 0`](/fr/docs/Web/CSS/padding) sur l'élément `ul`, puis on retire les puces avec [`list-style-type: none`](/fr/docs/Web/CSS/list-style-type). + +```css +ul { + padding: 0; +} +li { + list-style-type: none; +} +``` + +On ajoute un peu d'espace en fixant la marge ([`margin`](/fr/docs/Web/CSS/margin)) du corps en utilisant [les unités relatives à la zone d'affichage (<i lang="en">viewport</i>)](/fr/docs/Web/CSS/length#longueurs_liées_au_viewport) `vw` et `vh`. Ainsi, l'espace laissé autour de l'application sera proportionnel à la taille de la zone d'affichage. On ajoute également un peu de remplissage aux éléments `li` et `legend`. Enfin, pour améliorer l'alignement des données sur les cycles antérieurs, on applique [`font-family: monospace`](/fr/docs/Web/CSS/font-family) sur les éléments `ul` de la section des résultats. Avec une police à chasse fixe, chaque caractère aura ainsi la même largeur. + +```css +body { + margin: 1vh 1vw; +} +ul { + font-family: monospace; +} +li, +legend { + padding: 0.2em 0.5em; +} +``` + +On peut combiner ce qu'on vient de construire en plaçant plusieurs propriétés dans chaque bloc de déclaration. On peut même regrouper les styles pour `li` et `legend`. En effet, les styles qui ne s'appliquent pas à un sélecteur donné (comme la déclaration `list-style-type` pour `legend`) sont ignorés. + +```css +body { + margin: 1vh 1vw; + background-color: #efe; +} +ul, +fieldset, +legend { + border: 1px solid; + background-color: #fff; +} +ul { + padding: 0; + font-family: monospace; +} +li, +legend { + list-style-type: none; + padding: 0.2em 0.5em; + background-color: #cfc; +} +li:nth-of-type(even) { + background-color: inherit; +} +``` + +Si le CSS qui précède vous paraît toujours abscons, n'hésitez pas à lire les définitions des [propriétés CSS](/fr/docs/Glossary/Property/CSS) et [des sélecteurs](/fr/docs/Web/CSS/CSS_selectors), ou à suivre le parcours d'apprentissage [Débuter en CSS](/fr/docs/Learn/CSS/First_steps/Getting_started). + +Que vous utilisiez le CSS précédent tel quel, ou que vous ayez adapté cette mise en forme, voire que vous ayez écrit votre feuille de style à partir de 0, incluez ce contenu CSS dans un nouveau fichier et enregistrez-le avec le nom [`style.css`](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css/style.css), dans le même répertoire que le fichier `index.html`. + +### Finaliser le HTML statique et le CSS de notre PWA + +Avant d'aller plus loin, [commentons](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#commentaires_en_html) ou supprimons les fausses données et le titre correspondant : + +```html +<section id="past-periods"> + <!-- + <h2>Cycles antérieurs</h2> + <ul> + <li>Du 01/01/2024 au 01/06/2024</li> + <li>Du 01/29/2024 au 02/04/2024</li> + </ul> + --> +</section> +``` + +## Pour la suite + +Avant d'ajouter [les fonctionnalités JavaScript](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/JavaScript_functionality) pour convertir notre contenu statique en application web et de l'améliorer progressivement en une PWA grâce à [un manifeste](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Manifest_file) et [un <i lang="en">service worker</i>](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Service_workers), nous allons [créer un environnement de développement local](/fr/docs/Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection) pour voir l'évolution de notre application dans notre navigateur. + +Avant d'aller plus loin, vous pouvez [voir le résultat obtenu à ce chapitre](https://mdn.github.io/pwa-examples/cycletracker/html_and_css) et télécharger [le code source HTML et CSS de CycleTracker](https://github.com/mdn/pwa-examples/tree/master/cycletracker/html_and_css). + +{{PreviousMenuNext("Web/Progressive_web_apps/Tutorials/CycleTracker/", "Web/Progressive_web_apps/Tutorials/CycleTracker/Secure_connection", "Web/Progressive_web_apps/Tutorials/CycleTracker")}} From b7377bf12be68aaf930b27417ecf9267e92783cb Mon Sep 17 00:00:00 2001 From: SphinxKnight <SphinxKnight@users.noreply.github.com> Date: Mon, 2 Oct 2023 23:08:21 +0200 Subject: [PATCH 02/58] Fix #3752 for `fr` - Update `filter` page (#15786) * Update filter translation to finally fix #3752 * Review suggestions --- files/fr/web/css/filter/index.md | 1301 +++--------------------------- 1 file changed, 115 insertions(+), 1186 deletions(-) diff --git a/files/fr/web/css/filter/index.md b/files/fr/web/css/filter/index.md index 81d1d471ab0921..31cb09e2f08aa8 100644 --- a/files/fr/web/css/filter/index.md +++ b/files/fr/web/css/filter/index.md @@ -1,22 +1,21 @@ --- title: filter slug: Web/CSS/filter +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{CSSRef}}{{SeeCompatTable}} +{{CSSRef}} -La propriété CSS **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. +La propriété [CSS](/fr/docs/Web/CSS) **`filter`** permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures. -Plusieurs fonctions sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. Il est également possible d'utiliser un filtre SVG via une URL référençant [un élément SVG `filter`](/fr/docs/Web/SVG/Element/filter). +Plusieurs [fonctions](#fonctions) comme `blur()` et `contrast()` sont incluses dans le standard CSS et permettent d'obtenir des effets prédéfinis. {{EmbedInteractiveExample("pages/css/filter.html")}} ## Syntaxe ```css -/* URL vers un filtre SVG */ -filter: url("filters.svg#filter-id"); - /* Fonctions de filtre */ filter: blur(5px); filter: brightness(0.4); @@ -29,8 +28,12 @@ filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); +/* URL vers un filtre SVG */ +filter: url("filters.svg#filter-id"); + /* On applique plusieurs filtres */ filter: contrast(175%) brightness(3%); +filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue); /* On utilise aucun filtre */ filter: none; @@ -39,13 +42,14 @@ filter: none; filter: inherit; filter: initial; filter: revert; +filter: revert-layer; filter: unset; ``` Avec une fonction, on utilisera la forme suivante : -```css -filter: <filter-function> [<filter-function>] * | none; +```css-nolint +filter: <filter-function> [<filter-function>]* | none; ``` En utilisant un élément SVG [`<filter>`](/fr/docs/Web/SVG/Element/filter), on utilisera la forme suivante : @@ -54,1206 +58,105 @@ En utilisant un élément SVG [`<filter>`](/fr/docs/Web/SVG/Element/filter), on filter: url(file.svg#filter-element-id); ``` -### Interpolation - -Si les deux filtres possèdent chacun une liste de même longueur (sans [`<url>`](</fr/docs/Web/CSS/url()>), chacune des fonctions est interpolée selon ses propres règles. Si les deux listes ont des longueurs différentes, les derniers filtres de la liste la plus longue sont utilisés avec leurs valeurs par défaut afin de compléter la liste la plus courte, ensuite chaque fonction est interpolée selon ses propres règles. Si un filtre vaut `none`, il est remplacé avec la fonction de filtre (avec ses valeurs par défaut) de l'autre liste puis l'ensemble des fonctions est interpolé selon les règles de chacune. Dans les autres cas, on utilise une interpolation discrète. - ## Fonctions -Pour utiliser la propriété CSS `filter`, on utilisera `none` ou une ou plusieurs des fonctions listées ci-après avec, pour chacune, un argument. Si la valeur est invalide, la fonction renverra `none`. Sauf mention contraire, les fonctions qui acceptent des valeurs exprimées en pourcentages (34%) acceptent également des valeurs décimales (0.34). +La propriété `filter` s'utilise avec le mot-clé `none` ou avec une à plusieurs fonctions parmi celles listées ensuite. Si le paramètre fourni à l'une de ces fonctions est invalide, la fonction reverra `none`. Sauf mention contraire, les fonctions qui acceptent une valeur exprimée en pourcentage (par exemple `34%`) acceptent également les valeurs exprimées en décimal (par exemple `0.34`). -Lorsqu'une seule propriété `filter` possède deux fonctions (ou plus), le résultat obtenu sera différent de l'application de deux propriétés `filter` (ou plus) séparées avec chacune une fonction. +Lorsque la valeur de la propriété `filter` contient plusieurs fonctions, les filtres sont appliqués dans l'ordre. -### `url()` +- [`blur()`](/fr/docs/Web/CSS/filter-function/blur) -La fonction `url()` prend comme argument l'emplacement d'un [élément SVG <filter> à appliquer](/fr/docs/Web/SVG/Element/filter). L'URL peut faire référence à une ancre d'un élément spécifique. Cet élément peut être embarqué dans un fichier XML externe. + - : Applique un [flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) à l'image. -```css -filter: url(resources.svg#c1); -``` + ```css + filter: blur(5px); + ``` -### `blur()` +- [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness) -Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé. La valeur par défaut du paramètre est 0. Selon la spécification, le paramètre est une valeur de type [`<length>`](/fr/docs/Web/CSS/length) mais la fonction n'accepte pas de valeurs exprimées en pourcentages. + - : Rend l'image plus claire ou plus sombre en utilisant un coefficient multiplicateur. L'effet est linéaire : `0%` créera une image complètement noire, `100%` ne modifiera pas l'image et les valeurs supérieures à 100% rendront l'image plus claire. -```css -filter: blur(5px); -``` + ```css + filter: brightness(2); + ``` -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col"> - Exemple <i lang="en">live</i> - </th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <img - id="img1" - class="internal default" - src="test_form_2.jpeg" - style="width: 100%;" /> - </td> - <td> - <img - id="img2" - class="internal default" - src="test_form_2.jpeg" - style="width: 100%;" /> - </td> - <td> - <div class="svg-container"> - <svg - id="img3" - overflow="visible" - viewbox="0 0 212 161" - color-interpolation-filters="sRGB"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" /> - </filter> - <image - xlink:href="test_form_2.jpeg" - filter="url(#svgBlur)" - width="212px" - height="161px" /> - </svg> - </div> - </td> - <td> - <img - id="img4" - class="internal default" - src="test_form_2_s.jpg" - style="width: 100%;" /> - </td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -webkit-filter: blur(5px); - -ms-filter: blur(5px); - filter: blur(5px); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0; - margin: 0 0 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```svg -<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%"> - <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> - </filter> -</svg> -``` +- [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast) -{{EmbedLiveSample('','100%','236px','','', 'no-codepen')}} - -> **Note :** Voir [`blur()`](</fr/docs/Web/CSS/filter-function/blur()>) pour plus d'informations. - -### `brightness()` - -La fonction [`brightness()`](</fr/docs/Web/CSS/filter-function/brightness()>) permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal `0%` créera une image totalement noire et une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à `100%` afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est `1`. - -```css -filter: brightness(2); -``` - -```svg -<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> - </feComponentTransfer> - </filter> -</svg> -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="sRGB"> - <filter id="brightness"> - <feComponentTransfer> - <feFuncR type="linear" slope="2"/> - <feFuncG type="linear" slope="2"/> - <feFuncB type="linear" slope="2"/> - </feComponentTransfer> - </filter> - <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: brightness(2); - -webkit-filter: brightness(2); - -ms-filter: brightness(2); - filter: brightness(2); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - height: 100%; - width: 85%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','231px','','', 'no-codepen')}} - -> **Note :** Voir [`brightness()`](</fr/docs/Web/CSS/filter-function/brightness()>) pour plus d'informations. - -### `contrast()` - -La fonction [`contrast()`](</fr/docs/Web/CSS/filter-function/contrast()>) permet d'ajuster le contraste de l'image d'entrée. Une valeur de `0%` créera une image entièrement grise. Une valeur de `100%` conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est `1`. - -```css -filter: contrast(200%); -``` + - : Ajuste le contraste de l'image. Une valeur de `0%` rendra l'image grise, `100%` n'aura pas d'effet et les valeurs supérieures à `100%` renforceront le contraste. -```svg -<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> - </feComponentTransfer> - </filter> -</svg> -``` + ```css + filter: contrast(200%); + ``` -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_3.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="sRGB"> - <filter id="contrast"> - <feComponentTransfer> - <feFuncR type="linear" slope="2" intercept="-0.5"/> - <feFuncG type="linear" slope="2" intercept="-0.5"/> - <feFuncB type="linear" slope="2" intercept="-0.5"/> - </feComponentTransfer> - </filter> - <image xlink:href="test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_3_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` +- [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(200%); - -webkit-filter: contrast(200%); - -ms-filter: contrast(200%); - filter: contrast(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + - : Applique une ombre portée suivant les contours de l'image. Son paramètre suit la même syntaxe que celle de la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) (définie dans le module [Arrière-plans et bordures CSS](/fr/docs/Web/CSS/CSS_backgrounds_and_borders)), sauf que le mot-clé `inset` et le paramètre `spread` ne sont pas autorisés. Tous les filtres appliqués après `drop-shadow()` sont appliqués à l'ombre portée également. -{{EmbedLiveSample('','100%','203px','','', 'no-codepen')}} + ```css + filter: drop-shadow(16px 16px 10px black); + ``` -> **Note :** Voir [`contrast()`](</fr/docs/Web/CSS/filter-function/contrast()>) pour plus d'informations. +- [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale) -### `drop-shadow()` + - : Convertit l'image en niveaux de gris. Un argument de `100%` rendra l'image uniquement avec des niveaux de gris. Un argument de `0%` ne modifiera pas l'image d'entrée. Les valeurs entre `0%` et `100%` appliquent un effet proportionnel. -La fonction [`drop-shadow()`](</fr/docs/Web/CSS/filter-function/drop-shadow()>) permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci. La fonction peut accepter une valeur de type [`<shadow>`](/fr/docs/Web/CSS/shadow) (définie dans la spécification CSS3 sur les arrière-plans), une exception : les mots-clés `inset` et `spread` ne sont pas autorisés. Cette fonction est semblable à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow) plus répandue ; seule différence : les navigateurs utilisent parfois l'accélération matérielle pour les filtres ce qui peut permettre d'obtenir de meilleures performances. Les paramètres de l'argument `<shadow>` sont les suivants : + ```css + filter: grayscale(100%); + ``` -- `<offset-x>` `<offset-y>` (nécessaire) - - : Deux valeurs [`<length>`](/fr/docs/Web/CSS/length) qui indiquent le décalage de l'ombre portée. `<offset-x>` définit la distance horizontale : des valeurs négatives décaleront l'ombre à gauche de l'élément. `<offset-y>` définit la distance verticale : des valeurs négatives décaleront l'ombre au-dessus de l'élément. Se référer à la page [`<length>`](/fr/docs/Web/CSS/length) pour les différentes unités utilisables. - Si les deux valeurs sont nulles, l'ombre sera exactement placée sous l'élément (et pourra servir à générer un effet de flou si `<blur-radius>` et/ou `<spread-radius>` sont utilisés). -- `<blur-radius>` (optionnel) - - : Une troisième valeur de type [`<length>`](/fr/docs/Web/CSS/length). Plus la valeur sera grande, plus le flou sera important (l'ombre sera plus grande et moins prononcée). Les valeurs négatives ne sont pas autorisées. La valeur par défaut est `0`, le bord de l'ombre sera droit. -- `<spread-radius>` (optionnel) - - : Une quatrième valeur de type [`<length>`](/fr/docs/Web/CSS/length). Des valeurs positives agrandiront l'ombre et les valeurs négatives réduiront l'ombre. La valeur par défaut est `0` (l'ombre aura la même taille que l'élément). Note: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added. -- `<color>` (optionnel) - - : Voir [`<color>`](/fr/docs/Web/CSS/color_value) pour les mots-clés et notations possibles. Si ce paramètre n'est pas défini, la couleur choisie dépendra du navigateur. Pour Gecko (Firefox), Presto (Opera) et Trident (Internet Explorer), la valeur de la propriété [`color`](/fr/docs/Web/CSS/color) est utilisée. Pour WebKit, si la couleur est absente, l'ombre sera transparente (donc inutile). +- [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate) -```css -filter: drop-shadow(16px 16px 10px black); -``` + - : Applique une rotation de teinte. L'argument angulaire définit le nombre de degrés pour la rotation sur le cercle des teintes. Une valeur de `0deg` n'aura pas d'effet sur l'image. -```svg -<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> - <filter id="drop-shadow"> - <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> - <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> - <feFlood flood-color="[color]"/> - <feComposite in2="offsetblur" operator="in"/> - <feMerge> - <feMergeNode/> - <feMergeNode in="SourceGraphic"/> - </feMerge> - </filter> -</svg> -``` + ```css + filter: hue-rotate(90deg); + ``` -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_4.jpeg" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img3" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage" xlink:href="test_form_4.jpeg" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="9" dy="9" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="5"/> - </filter> - <use xlink:href="#MyImage" filter="url(#drop-shadow)"/> - <use xlink:href="#MyImage"/> - </svg> - </div> - </td> - <td><img id="img4" class="internal default" src="test_form_4_s.jpg" style="width: 100%;" /></td> - </tr> - <tr> - <td><img alt="test_form_4 distorted border - Image originale" id="img11" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td><img alt="test_form_4 distorted border - Exemple <i lang="en">live</i>" id="img12" class="internal default" src="test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td> - <td> - <div class="svg-container"> - <svg xmlns="http://www.w3.org/2000/svg" id="img13" overflow="visible" viewbox="0 0 213 161" color-interpolation-filters="sRGB"> - <defs> - <image id="MyImage2" xlink:href="test_form_4_irregular-shape_opacity-gradient.png" width="213px" height="161px"/> - </defs> - <filter id="drop-shadow2" x="-50%" y="-50%" width="200%" height="200%"> - <feOffset dx="5" dy="5.5" in="SourceAlpha"/> - <feGaussianBlur stdDeviation="2.5"/> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.8"/> - </feComponentTransfer> - </filter> - <use xlink:href="#MyImage2" filter="url(#drop-shadow2)"/> - <use xlink:href="#MyImage2"/> - </svg> - </div> - </td> - <td><img alt="test_form_4 distorted border drop shadow - Exemple statique" id="img14" class="internal default" src="test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` +- [`invert()`](/fr/docs/Web/CSS/filter-function/invert) -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(16px 16px 10px black); - -webkit-filter: drop-shadow(16px 16px 10px black); - -ms-filter: drop-shadow(16px 16px 10px black); - filter: drop-shadow(16px 16px 10px black); -} -#img12 { - width: 100%; - height: auto; - -moz-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -webkit-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - -ms-filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); - filter: drop-shadow(8px 9px 5px rgba(0, 0, 0, 0.8)); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -#irregular-shape { - width: 64%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3, -#img13 { - width: 100%; - height: auto; -} -``` + - : Inverse les couleurs de l'image. Si l'argument vaut `100%`, on obtiendra le négatif complet de l'image. Si l'argument vaut `0%`, l'image sera inchangée. Les valeurs entre `0%` et `100%` ont des effets proportionnels. -{{EmbedLiveSample('','100%','400px','','', 'no-codepen')}} + ```css + filter: invert(100%); + ``` -> **Note :** Voir [`drop-shadow()`](</fr/docs/Web/CSS/filter-function/drop-shadow()>) pour plus d'informations. +- [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity) -### `grayscale()` + - : Applique un niveau de transparence. Un coefficient de `0%` rendra l'image complètement transparente tandis qu'un coefficient de `100%` laissera l'image inchangée. -Avec la fonction [`grayscale()`](</fr/docs/Web/CSS/filter-function/grayscale()>), l'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de `100%` sera complètement en niveaux de gris. `0%` conservera l'image telle quelle. La valeur par défaut du paramètre est `0`. + ```css + filter: opacity(50%); + ``` -```css -filter: grayscale(100%); -``` +- [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate) -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_5.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184" color-interpolation-filters="sRGB"> - <filter id="grayscale"> - <feColorMatrix type="matrix" - values="0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0.2126 0.7152 0.0722 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_5_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` + - : Sature l'image. Avec un coefficient de `0%`, l'image sera complètement désaturée. `100%` n'aura pas d'effet sur l'image. Les valeurs supérieures à `100%` augmenteront la saturation. -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: grayscale(100%); - -webkit-filter: grayscale(100%); - -ms-filter: grayscale(100%); - filter: grayscale(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` + ```css + filter: saturate(200%); + ``` -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +- [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia) -> **Note :** Voir [`grayscale()`](</fr/docs/Web/CSS/filter-function/grayscale()>) pour plus d'informations. + - : Convertit l'image en sépia. Un coefficient de `100%` rendra l'image complètement sépia tandis qu'un coefficient `0%` n'aura pas d'effet sur l'image. -### `hue-rotate()` + ```css + filter: sepia(100%); + ``` -La fonction [`hue-rotate()`](</fr/docs/Web/CSS/filter-function/hue-rotate()>) applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de `0deg` conservera l'image telle quelle. La valeur par défaut du paramètre est `0deg`. Il n'y a pas de valeur maximale pour l'argument, si une valeur supérieure à `360deg` est utilisée, ce sera la mesure de l'angle correspondante qui sera utilisée. +## Combiner les fonctions -```css -filter: hue-rotate(90deg); -``` - -```css -filter: hue-rotate(90deg); -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_6.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190" color-interpolation-filters="sRGB"> - <filter id="hue-rotate"> - <feColorMatrix type="hueRotate" - values="90"/> - </filter> - <image xlink:href="test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_6_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: hue-rotate(90deg); - -webkit-filter: hue-rotate(90deg); - -ms-filter: hue-rotate(90deg); - filter: hue-rotate(90deg); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -```html -<svg - style="position: absolute; top: -999999px" - xmlns="http://www.w3.org/2000/svg"> - <filter id="svgHueRotate"> - <feColorMatrix type="hueRotate" values="[angle]" /> - </filter> -</svg> -``` - -{{EmbedLiveSample('','100%','221px','','', 'no-codepen')}} - -> **Note :** Voir [`hue-rotate()`](</fr/docs/Web/CSS/filter-function/hue-rotate()>) pour plus d'informations. - -### `invert()` - -La fonction [`invert()`](</fr/docs/Web/CSS/filter-function/invert()>) permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de `100%` inversera complètement les couleurs (tel un négatif) et une valeur `0%` conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est `0`. - -```css -filter: invert(100%); -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_7.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276" color-interpolation-filters="sRGB"> - <filter id="invert"> - <feComponentTransfer> - <feFuncR type="table" tableValues="1 0"/> - <feFuncG type="table" tableValues="1 0"/> - <feFuncB type="table" tableValues="1 0"/> - </feComponentTransfer> - </filter> - <image xlink:href="test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_7_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: invert(100%); - -webkit-filter: invert(100%); - -ms-filter: invert(100%); - filter: invert(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','407px','','', 'no-codepen')}} - -> **Note :** Voir [`invert()`](</fr/docs/Web/CSS/filter-function/invert()>) pour plus d'informations. - -### `opacity()` - -La fonction [`opacity()`](</fr/docs/Web/CSS/filter-function/opacity()>) permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de `0%` rendra l'image complètement transparente et une valeur de `100%` conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est `1`. Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity), toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances. - -```css -filter: opacity(50%); -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_14.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183" color-interpolation-filters="sRGB"> - <filter id="opacity"> - <feComponentTransfer> - <feFuncA type="table" tableValues="0 0.5"> - </feComponentTransfer> - </filter> - <image xlink:href="test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_14_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: opacity(50%); - -webkit-filter: opacity(50%); - -ms-filter: opacity(50%); - filter: opacity(50%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','210px','','', 'no-codepen')}} - -> **Note :** Voir [`opacity()`](</fr/docs/Web/CSS/filter-function/opacity()>) pour plus d'informations. - -### `saturate()` - -La fonction [`saturate()`](</fr/docs/Web/CSS/filter-function/saturate()>) sature l'image d'entrée. La valeur de l'argument indique la force de la saturation. Une valeur de `0%` fera que l'image sera totalement désaturée et une valeur de `100%` conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à `100%` pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est `1`. - -```css -filter: saturate(200%); -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_9.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239" color-interpolation-filters="sRGB"> - <filter id="saturate"> - <feColorMatrix type="saturate" - values="2"/> - </filter> - <image xlink:href="test_form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_9_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: saturate(200%); - -webkit-filter: saturate(200%); - -ms-filter: saturate(200%); - filter: saturate(200%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','332px','','', 'no-codepen')}} - -> **Note :** Voir [`saturate()`](</fr/docs/Web/CSS/filter-function/saturate()>) pour plus d'informations. - -### `sepia()` - -La fonction [`sepia()`](</fr/docs/Web/CSS/filter-function/sepia()>) convertit l'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de `0%`, l'image d'entrée sera inchangée. Les valeurs comprises entre `0%` et `100%` appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est `0`. - -```css -filter: sepia(100%); -``` - -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col">Exemple <i lang="en">live</i></th> - <th style="text-align: left;" scope="col">Équivalent SVG</th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td><img id="img1" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> - <td><img id="img2" class="internal default" src="test_form_12.jpeg" style="width: 100%;" /></td> - <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194" color-interpolation-filters="sRGB"> - <filter id="sepia"> - <feColorMatrix type="matrix" - values="0.393 0.769 0.189 0 0 - 0.349 0.686 0.168 0 0 - 0.272 0.534 0.131 0 0 - 0 0 0 1 0"/> - </filter> - <image xlink:href="test_form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" /> -</svg><div></td> - <td><img id="img4" class="internal default" src="test_form_12_s.jpg" style="width: 100%;" /></td> - </tr> - </tbody> -</table> -``` - -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: sepia(100%); - -webkit-filter: sepia(100%); - -ms-filter: sepia(100%); - filter: sepia(100%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` - -{{EmbedLiveSample('','100%','229px','','', 'no-codepen')}} - -> **Note :** Voir [`sepia()`](</fr/docs/Web/CSS/filter-function/sepia()>) pour plus d'informations. - -## Enchaîner les fonctions - -On peut appliquer autant de fonction que nécessaire pour manipuler le rendu obtenu. Dans l'exemple suivant, on augmente le contraste et la luminosité de l'image : +On peut combiner autant de fonctions que nécessaire pour manipuler le rendu. Les filtres sont alors appliqués dans l'ordre de leur déclaration. Dans l'exemple suivant, on améliore le contraste et la luminosité de l'image : ```css filter: contrast(175%) brightness(103%); ``` -```html hidden -<table class="standard-table"> - <thead> - <tr> - <th style="text-align: left;" scope="col">Image originale</th> - <th style="text-align: left;" scope="col"> - Exemple <i lang="en">live</i> - </th> - <th style="text-align: left;" scope="col">Exemple statique</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <img - id="img1" - class="internal default" - src="test_form_8.jpeg" - style="width: 100%;" /> - </td> - <td> - <img - id="img2" - class="internal default" - src="test_form_8.jpeg" - style="width: 100%;" /> - </td> - <td> - <img - id="img4" - class="internal default" - src="test_form_8_s.jpg" - style="width: 100%;" /> - </td> - </tr> - </tbody> -</table> -``` +### Interpolation -```css hidden -html { - height: 100%; -} -body { - font: - 14px/1.286 "Lucida Grande", - "Lucida Sans Unicode", - "DejaVu Sans", - Lucida, - Arial, - Helvetica, - sans-serif; - color: rgb(51, 51, 51); - height: 100%; - overflow: hidden; -} -#img2 { - width: 100%; - height: auto; - -moz-filter: contrast(175%) brightness(103%); - -webkit-filter: contrast(175%) brightness(103%); - -ms-filter: contrast(175%) brightness(103%); - filter: contrast(175%) brightness(103%); -} -table.standard-table { - border: 1px solid rgb(187, 187, 187); - border-collapse: collapse; - border-spacing: 0px; - margin: 0px 0px 1.286em; - width: 85%; - height: 100%; -} -table.standard-table th { - border: 1px solid rgb(187, 187, 187); - padding: 0px 5px; - background: none repeat scroll 0% 0% rgb(238, 238, 238); - text-align: left; - font-weight: bold; -} -table.standard-table td { - padding: 5px; - border: 1px solid rgb(204, 204, 204); - text-align: left; - vertical-align: top; - width: 25%; - height: auto; -} -#img3 { - height: 100%; -} -``` +Pour les animations, si les filtres du début et de la fin ont une liste de fonctions de la même taille, sans [`url()`](/fr/docs/Web/CSS/url) et dans le même ordre, chaque filtre est interpolé selon ses règles particulières. -{{EmbedLiveSample('','100%','209px','','', 'no-codepen')}} +Si les listes de filtres sont de longueurs différentes, la liste la plus courte est complétée à la fin par les filtres supplémentaires de la liste la plus longue. Les fonctions ajoutées utilisent leur valeur initiale (qui ne modifie pas l'image). Tous les filtres alors présents sont interpolés selon leurs règles particulières. Sinon, c'est une interpolation discrète qui est utilisée. ## Définition formelle @@ -1267,34 +170,60 @@ table.standard-table td { ### Appliquer des fonctions de filtre -Voici un exemple d'utilisation des fonctions prédéfinies abordées ci-avant. Voyez les exemples précédents pour chaque fonction séparément. +On applique la propriété `filter` sur la deuxième image, en appliquant des niveaux de gris et un flou (à l'image et à la bordure). ```css -.mondiv { - filter: grayscale(50%); -} - -/* Appliquer un niveau de gris à 50% et un flou de rayon 10px */ -/* pour toutes les images */ img { - filter: grayscale(0.5) blur(10px); + border: 5px solid yellow; +} +/* On passe à 40% de niveau de gris */ +/* et un flou de 5px de rayon */ +img:nth-of-type(2) { + filter: grayscale(0.4) blur(5px); } ``` -### Appliquer des filtres SVG +```html +<img src="pencil.jpg" alt="L'image originale est nette" /> +<img src="pencil.jpg" alt="L'image et la bordure sont floues et atténuées" /> +``` + +{{EmbedLiveSample('','100%','229px')}} + +### Répéter des filtres -Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressources SVG existantes : +Les fonctions de filtre sont appliquées selon leur ordre d'apparition. On peut donc appliquer plusieurs fois un même filtre. ```css -.target { - filter: url(#c1); +#MDN-logo { + border: 1px solid blue; + filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 + red); } +``` -.mydiv { - filter: url(commonfilters.xml#large-blur); -} +```html hidden +<svg + id="MDN-logo" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 361 104.2" + xml:space="preserve" + role="img"> + <title>MDN Web Docs + + + + + ``` +{{EmbedLiveSample('','100%','229px')}} + +Les filtres sont appliqués dans l'ordre, c'est pour cela que les ombres portées ne sont pas de la même couleur. La teinte de la première ombre portée est modifiée par la fonction `hue-rotate()`, mais pas la teinte de la deuxième. + ## Spécifications {{Specifications}} @@ -1305,8 +234,8 @@ Voici des exemples où on utilise la fonction `url()` pour tirer parti de ressou ## Voir aussi -- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content) -- La propriété [`mask`](/fr/docs/Web/CSS/mask) -- [SVG](/fr/docs/Web/SVG) -- [Un article de HTML5 Rocks : Understanding CSS filters (en anglais)](https://www.html5rocks.com/en/tutorials/filters/understanding-css/) -- [Générateur de filtres CSS](https://cssgenerator.org/filter-css-generator.html) +- La propriété CSS [`backdrop-filter`](/fr/docs/Web/CSS/backdrop-filter) +- [La composition et les modes de fusion en CSS](/fr/docs/Web/CSS/CSS_compositing_and_blending) avec les propriétés CSS [`background-blend-mode`](/fr/docs/Web/CSS/background-blend-mode) et [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode) +- La propriété CSS [`mask`](/fr/docs/Web/CSS/mask) +- [SVG](/fr/docs/Web/SVG) et notamment l'élément [``](/fr/docs/Web/SVG/Element/filter) et l'attribut [`filter`](/fr/docs/Web/SVG/Attribute/filter) +- [Appliquer des effets SVG à du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) From 218b2e236f657d2812439a221842b91cf67f5ee8 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 10:50:47 +0900 Subject: [PATCH 03/58] [ko]: revise index.md for `web/glossary/index.md` (#16088) [add]: add index.md for web/glossary/index.md --- files/ko/glossary/index.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/files/ko/glossary/index.md b/files/ko/glossary/index.md index ccd3899c06f1d9..455f82303de11d 100644 --- a/files/ko/glossary/index.md +++ b/files/ko/glossary/index.md @@ -1,18 +1,14 @@ --- title: "MDN Web Docs 용어 사전: 웹 용어 정의" slug: Glossary +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 --- +{{GlossarySidebar}} + 웹 기술은 문서화 또는 코딩에서 사용되는 전문 용어 및 약어를 많이 포함하고 있습니다. 이 용어 사전은 웹을 성공적으로 이해하고 구축하기 위해 알아야 하는 단어와 약어의 정의를 제공합니다. 사이드바에서 용어 사전의 용어를 골라볼 수 있습니다. -새 항목을 작성하거나 기존 항목을 개선하여 개선하는 데 도움을 줄 수 있습니다. - -> **참고:** 용어 사전은 끝없이 진행 중인 작업입니다. [새 항목을 작성](/ko/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary)하거나 기존 항목을 개선하여 도움을 줄 수 있습니다. - - +> **참고:** 용어 사전은 끝없이 진행 중인 작업입니다. [새 항목을 작성](/ko/docs/MDN/Writing_guidelines/Howto/Write_a_new_entry_in_the_glossary)하거나 기존 항목을 개선하여 도움을 줄 수 있습니다. From 44e30c492f2cc776056c6d9a567d947b71cfdcac Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 10:55:08 +0900 Subject: [PATCH 04/58] [ko]: add index.md for `web/glossary/native` (#16165) [add]: add index.md for web/glossary/native --- files/ko/glossary/native/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 files/ko/glossary/native/index.md diff --git a/files/ko/glossary/native/index.md b/files/ko/glossary/native/index.md new file mode 100644 index 00000000000000..8c0c0e2893974f --- /dev/null +++ b/files/ko/glossary/native/index.md @@ -0,0 +1,18 @@ +--- +title: 네이티브 (Native) +slug: Glossary/Native +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +네이티브(native) 애플리케이션은 대상 아키턱처를 구성하는 하드웨어/소프트웨어 환경에서 실행되도록 컴파일 되었습니다. + +기본 Android 애플리케이션의 예제로는 Android 도구 체인을 사용하여 Java로 작성된 모바일 애플리케이션이 있습니다. + +반면, 브라우저 내에서 실행되는 웹 애플리케이션은 네이티브가 아닙니다. 네이티브 환경 자체가 아닌, 네이티브 환경 위에 있는 웹 브라우저에서 실행됩니다. + +## 같이 보기 + +- 위키백과의 [네이티브 (컴퓨팅)]() From 6eebd48a376bee2e2afc1cf180e2d8c67f3774a7 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 10:57:07 +0900 Subject: [PATCH 05/58] [ko]: add index.md for `web/glossary/script-supporting_element` (#16285) [add]: add index.md for web/glossary/script-supporting_element --- .../script-supporting_element/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 files/ko/glossary/script-supporting_element/index.md diff --git a/files/ko/glossary/script-supporting_element/index.md b/files/ko/glossary/script-supporting_element/index.md new file mode 100644 index 00000000000000..6ea77067d6eafc --- /dev/null +++ b/files/ko/glossary/script-supporting_element/index.md @@ -0,0 +1,18 @@ +--- +title: 스크립트 지원 요소 (Script-supporting element) +slug: Glossary/Script-supporting_element +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +{{Glossary("HTML")}} 문서에서, **스크립트 지원 요소 (script-supporting elements)** 는 페이지의 모양이나 레이아웃에 직접적으로 기여하지 않는 요소입니다. 대신 스크립트이거나 스크립트에서만 사용되는 정보를 포함합니다. + +이러한 요소는 중요할 수 있지만, 페이지의 스크립트가 명시적으로 그렇게 하도록 하지 않는 한 표시된 페이지에 영향을 주지 않습니다. + +스크립트 지원 요소는 {{HTMLElement("script")}} 및 {{HTMLElement("template")}} 두 가지 밖에 없습니다. + +## 같이 보기 + +[Script-supporting elements](/ko/docs/Web/HTML/Content_categories#script-supporting_elements) From b34319fa9e729c304d822a6d87192ff8ee199c12 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 10:59:12 +0900 Subject: [PATCH 06/58] [ko]: revise index.md in `web/glossary/adobe_flash` (#15552) [revise]: revise index.md in web/glossary/adobe_flash --- files/ko/glossary/adobe_flash/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 files/ko/glossary/adobe_flash/index.md diff --git a/files/ko/glossary/adobe_flash/index.md b/files/ko/glossary/adobe_flash/index.md new file mode 100644 index 00000000000000..89db287560cc7e --- /dev/null +++ b/files/ko/glossary/adobe_flash/index.md @@ -0,0 +1,19 @@ +--- +title: Adobe Flash +slug: Glossary/Adobe_Flash +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{GlossarySidebar}} + +[Flash](https://en.wikipedia.org/wiki/Adobe_Flash)는 표현력이 풍부한 웹 애플리케이션, 멀티미디어 콘텐츠, 스트리밍 미디어를 보기 위해 Adobe에서 개발한 오래된 기술입니다. + +2021년부터, Flash는 더 이상 Adobe 또는 주요 웹 브라우저에서 지원되지 않습니다. + +## 같이 보기 + +- [Adobe Flash 수명 종료 발표](https://blog.adobe.com/en/publish/2017/07/25/adobe-flash-update#gs.g8mmgf) +- [Chrome의 Flash에 작별 인사하기](https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/) +- [Flash 수명 종료에 대한 Firefox 로드맵](https://blog.mozilla.org/futurereleases/2017/07/25/firefox-roadmap-flash-end-life/) +- [Microsoft Windows Flash Player 제거](https://blogs.windows.com/msedgedev/2020/09/04/update-adobe-flash-end-support/) From cddbc7154c065942fcfaedd0f332938fd6c10fd4 Mon Sep 17 00:00:00 2001 From: XcantloadX <3188996979@qq.com> Date: Tue, 3 Oct 2023 15:43:55 +0800 Subject: [PATCH 07/58] zh-cn: fix spaces & sync with English version (#16289) Co-authored-by: A1lo --- .../overflowing_content/index.md | 41 ++++++++++--------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md index ea1b08f6a0a2e1..1dbd7072d730b6 100644 --- a/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md +++ b/files/zh-cn/learn/css/building_blocks/overflowing_content/index.md @@ -15,15 +15,14 @@ slug: Learn/CSS/Building_blocks/Overflowing_content 基础的电脑知识，安装了基本的软件, - ，处理文件的基础知识，HTML 基础（学习 Introduction to HTMLHTML 简介），对 CSS 的工作原理有所了解（学习 - CSS first steps.) + CSS 入门概述）。 @@ -35,13 +34,13 @@ slug: Learn/CSS/Building_blocks/Overflowing_content ## 什么是溢出？ -我们知道，CSS 中万物皆盒，因此我们可以通过给{{cssxref("width")}}和{{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写 CSS 的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到 CSS 布局的时候。 +我们知道，CSS 中万物皆盒，因此我们可以通过给 {{cssxref("width")}} 和 {{cssxref("height")}}（或者 {{cssxref("inline-size")}} 和 {{cssxref("block-size")}}）赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的，所以盒子里面的东西也不会老老实实待着。CSS 给了你好几种工具来控制溢出，在学习的早期理解这些概念是很有用的。在你写 CSS 的时候你经常会遇到溢出的情形，尤其是当你以后更加深入到 CSS 布局的时候。 ## CSS 尽力减少“数据损失” 我们从两个展示了在碰到溢出的时候，CSS 默认会如何处理的例子开始吧。 -第一个例子是，一个盒子，在块方向上已经受到`height`的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。 +第一个例子是，一个盒子，在块方向上已经受到 `height` 的限制。然后我们已经加了过多的内容，以至于盒子里面没有空间容纳。内容正在从盒子里面溢出，并让自己把盒子下面的段落弄得一团糟。 {{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}} @@ -53,52 +52,56 @@ slug: Learn/CSS/Building_blocks/Overflowing_content 只要有可能，CSS 就不会隐藏你的内容，隐藏引起的数据损失通常会造成困扰。在 CSS 的术语里面，这会导致一些内容消失，你的访客可能不会注意到这一点，如果消失的是表格上的提交按钮，没有人能填完这个表格，这是很麻烦的事情！所以 CSS 反而会把它以可见的形式溢出出去。这样做的结果就是，你会看到错误的 CSS 导致的一片混乱，或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来，你的网站需要修缮。 -如果你已经用`width`或者`height`限制住了一个盒子，CSS 假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。 +如果你已经用 `width` 或者 `height` 限制住了一个盒子，CSS 假定，你知道你在做什么，而且你已经控制住了溢出的隐患。总之，在盒子里面需要放置文本的时候，限制住块方向的尺寸是会引起问题的，因为可能会有比你在设计网站的时候所预计的文本更多的文本，或者文本变大了——比如用户增加字体大小的时候。 在下面的几节课里，我们会看一下各种不同的控制尺寸的方式，以减少溢出的影响。但是，如果你需要固定的尺寸，你也可以控制溢出表现的形式。那么让我们接着读下去吧！ ## overflow 属性 -{{cssxref("overflow")}}属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。`overflow`的默认值为`visible`，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。 +{{cssxref("overflow")}} 属性是你控制一个元素溢出的方式，它告诉浏览器你想怎样处理溢出。`overflow` 的默认值为 `visible`，这就是我们的内容溢出的时候，我们在默认情况下看到它们的原因。 -如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置`overflow: hidden`。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。 +如果你想在内容溢出的时候把它裁剪掉，你可以在你的盒子上设置 `overflow: hidden`。这就会像它表面上所显示的那样作用——隐藏掉溢出。这可能会很自然地让东西消失掉，所以你只应该在判断隐藏内容不会引起问题的时候这样做。 {{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}} -也许你还会想在有内容溢出的时候加个滚动条？如果你用了`overflow: scroll`，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。 +也许你还会想在有内容溢出的时候加个滚动条？如果你用了 `overflow: scroll`，那么你的浏览器总会显示滚动条，即使没有足够多引起溢出的内容。你可能会需要这样的样式，它避免了滚动条在内容变化的时候出现和消失。 **如果你移除了下面的盒子里的一些内容，你可以看一下，滚动条是否还会在没有能滚动的东西的时候保留。** {{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}} -在以上的例子里面，我们仅仅需要在`y`轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用{{cssxref("overflow-y")}}属性，设置`overflow-y: scroll`来仅在`y`轴方向滚动。 +在以上的例子里面，我们仅仅需要在 `y` 轴方向上滚动，但是我们在两个方向上都有了滚动条。你可以使用 {{cssxref("overflow-y")}} 属性，设置 `overflow-y: scroll` 来仅在 `y` 轴方向滚动。 {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}} -你也可以用{{cssxref("overflow-x")}}，以在 x 轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下{{cssxref("word-break")}}或者{{cssxref("overflow-wrap")}}属性。除此以外，一些[在 CSS 里面调整大小](/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。 +你也可以用 {{cssxref("overflow-x")}}，以在 x 轴方向上滚动，尽管这不是处理长英文词的好办法！如果你真的需要在小盒子里面和长英文词打交道，那么你可能要了解一下 {{cssxref("word-break")}} 或者 {{cssxref("overflow-wrap")}} 属性。除此以外，一些[在 CSS 里面调整大小](/zh-CN/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)这节课里面讨论过的方式可能会帮助你创建可以和有变化容量的内容相协调的盒子。 {{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}} -和`scroll`一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。 +和 `scroll` 一样，在无论是否有多到需要 用滚动条的内容的时候，页面上都会显示一个滚动条。 -> **备注：** 你可以用`overflow`属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对`overflow-x`生效而第二个对`overflow-y`生效。否则，`overflow-x`和`overflow-y`将会被设置成同样的值。例如，`overflow: scroll hidden`会把`overflow-x`设置成`scroll`，而`overflow-y`则为`hidden`。 +> **备注：** 你可以用 `overflow` 属性指定 x 轴和 y 轴方向的滚动，同时使用两个值进行传递。如果指定了两个关键字，第一个对 `overflow-x `生效而第二个对 `overflow-y` 生效。否则，`overflow-x` 和 `overflow-y` 将会被设置成同样的值。例如，`overflow: scroll hidden` 会把 `overflow-x` 设置成 `scroll`，而 `overflow-y` 则为 `hidden`。 -如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用`overflow: auto`。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。 +如果你只是想让滚动条在有比盒子所能装下更多的内容的时候才显示，那么使用 `overflow: auto`。此时由浏览器决定是否显示滚动条。桌面浏览器一般仅仅会在有足以引起溢出的内容的时候这么做。 **在下面的例子里面，移除一些内容，直到能够装在盒子里面，你还会看到滚动条消失了。** -{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}} +{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 700)}} -## 溢出建立了块级排版上下文 +## 溢出建立了区块格式化上下文 -CSS 中有所谓**块级排版上下文**（Block Formatting Context，BFC）**的概念**。现在你不用太过在意，但是你应该知道，在你使用诸如`scroll`或者`auto`的时候，你就建立了一个块级排版上下文。结果就是，你改变了`overflow`的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 +CSS 中有所谓[**区块格式化上下文**（Block Formatting Context，BFC）](/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)的概念。现在你不用太过在意，但是你应该知道，在你使用诸如 `scroll` 或者 `auto` 的时候，你就建立了一个块级排版上下文。结果就是，你改变了 `overflow` 的值的话，对应的盒子就变成了更加小巧的状态。在容器之外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。激活了滚动动作，你的盒子里面所有的内容会被收纳，而且不会遮到页面上其他的物件，于是就产生了一个协调的滚动体验。 ## 网页设计时不需要的溢出 -现代网页布局的方式（正如[CSS layout](/zh-CN/docs/Learn/CSS/CSS_layout)模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。 +现代网页布局的方式（正如 [CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)模块中所介绍的那些）可以很好地处理溢出。我们不一定能预料到网页上会有多少内容，人们很好地设计它们，使得它们能与这种现状协调。但是在以往，开发者会更多地使用固定高度，尽力让毫无关联的盒子的底部对齐。这是很脆弱的，在旧时的应用里面，你偶尔会遇到一些盒子，它们的内容遮到了页面上的其他内容。如果你看到了，那么你现在应该知道，这就是溢出，理论上你应该能重新排布这些布局，使得它不必依赖于盒子尺寸的调整。 在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的 CSS 可以正常地协调。改变溢出属性的值，来隐藏内容或者增加滚动条，会是你仅仅在少数特别情况下需要的，例如在你确实需要一个可滚动盒子的时候。 +## 测试你的技能！ + +你已经到了本文的结尾，但你能记住其中重要的信息吗？你可以在继续前进之前进行一些测试来验证你是否记住了这些内容——见[测试你的技能：溢出](/zh-CN/docs/Learn/CSS/Building_blocks/Overflow_Tasks)。 + ## 小结 这节短短的课已经介绍了溢出的概念，你现在明白，CSS 会尽力不让溢出的内容不可见，因为这会造成数据损失。你已经发现，你可以控制住潜在的溢出，同样，你也应该测试你的作品，确保你不会一下子就弄出令人困扰的溢出。 From 016d5aa0b52b7d63d16212270b666450d6c52978 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 18:42:09 +0900 Subject: [PATCH 08/58] [ko]: add index.md for `web/glossary/css_pixel` (#15817) [add]: add index.md for web/glossary/css_pixel --- files/ko/glossary/css_pixel/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/ko/glossary/css_pixel/index.md diff --git a/files/ko/glossary/css_pixel/index.md b/files/ko/glossary/css_pixel/index.md new file mode 100644 index 00000000000000..96f4dd80943a8e --- /dev/null +++ b/files/ko/glossary/css_pixel/index.md @@ -0,0 +1,14 @@ +--- +title: CSS 픽셀 (CSS pixel) +slug: Glossary/CSS_pixel +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**CSS 픽셀**이라는 용어는 절대 길이 'px'의 CSS 단위와 동의어입니다. 이는 정확히 1 CSS 인치('in')의 1/96으로 [표준적으로 정의됩니다](https://drafts.csswg.org/css-values/#absolute-lengths). + +## 같이 보기 + +- MDN Hacks 블로그의 [CSS 길이 설명](https://hacks.mozilla.org/2013/09/css-length-explained/) From 0367d435a76d9a15c1d5e469080791e8f7d6d147 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 19:14:02 +0900 Subject: [PATCH 09/58] [ko]: add index.md for `web/glossary/grid` (#16008) [add]: add index.md for web/glossary/grid --- files/ko/glossary/grid/index.md | 71 +++++++++++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 files/ko/glossary/grid/index.md diff --git a/files/ko/glossary/grid/index.md b/files/ko/glossary/grid/index.md new file mode 100644 index 00000000000000..c7573f4582a818 --- /dev/null +++ b/files/ko/glossary/grid/index.md @@ -0,0 +1,71 @@ +--- +title: 그리드 (Grid) +slug: Glossary/Grid +l10n: + sourceCommit: d267a8cb862c20277f81bbc223221b36b0c613e6 +--- + +{{GlossarySidebar}} + +'CSS 그리드(grid)'는 {{cssxref("display")}} 속성의 `grid` 값을 사용하여 정의됩니다. {{cssxref("grid-template-rows")}} 및 {{cssxref("grid-template-columns")}} 속성을 사용하여 그리드의 열과 행을 정의할 수 있습니다. + +이러한 속성을 사용해 정의하는 그리드는 '명시적 그리드'라고 할 수 있습니다. + +이 명시적 그리드 외부에 콘텐츠를 배치하거나 자동 배치에 의존하고 그리드 알고리즘이 {{glossary("grid item", "그리드 요소")}}들을 보관하기 위해 추가 행 또는 열 {{glossary("grid tracks", "트랙")}}을 생성해야 하는 경우, 그러면 암시적 그리드에 추가 트랙이 생성됩니다.'암시적 그리드'는 정의된 트랙 외부에 추가되는 콘텐츠로 인해 자동으로 생성되는 그리드입니다. + +아래 예제에서는 3개의 열과 2개의 행으로 구성된 '명시적 그리드'를 만들었습니다. 그리드의 '세 번째' 행은 '암시적 그리드' 행 트랙으로, 명시적 트랙을 채우는 6개 항목보다 많기 때문에 형성됩니다. + +## 예제 + +```css hidden +* { + box-sizing: border-box; +} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +``` + +```css +.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; +} +``` + +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
+``` + +{{ EmbedLiveSample('Example', '500', '330') }} + +## 같이 보기 + +- [그리드 레이아웃의 기본 개념](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- 속성 참고서 + + - {{cssxref("grid-template-columns")}} + - {{cssxref("grid-template-rows")}} + - {{cssxref("grid")}} + - {{cssxref("grid-template")}} From 8d81c0897825e59d63b1430dff94bce8ae055cda Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 19:51:25 +0900 Subject: [PATCH 10/58] [ko] add index.md for `web/glossary/namespace` (#16161) --- files/ko/glossary/namespace/index.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 files/ko/glossary/namespace/index.md diff --git a/files/ko/glossary/namespace/index.md b/files/ko/glossary/namespace/index.md new file mode 100644 index 00000000000000..825392a1dc40f7 --- /dev/null +++ b/files/ko/glossary/namespace/index.md @@ -0,0 +1,22 @@ +--- +title: 네임스페이스 (Namespace) +slug: Glossary/Namespace +l10n: + sourceCommit: 7f7ff219a89982f689b5a6b3c8c0b029ce1b8178 +--- + +{{GlossarySidebar}} + +네임스페이스 (Namespace)는 프로그램에서 사용되는 이름의 논리적 그룹인 식별자의 컨텍스트입니다. 동일한 컨텍스트 및 범위 내에서, 식별자는 엔터티를 고유하게 식별해야 합니다. + +운영체제에서, 디렉터리는 네임스페이스입니다. 디렉토리 내 각 파일이나 하위 디렉토리는 고유한 이름입니다. 동일한 이름을 하위 디렉터리 전체에 걸쳐서 여러 번 사용할 수 있습니다. + +HTML, CSS 와 XML 기반 언어에서, 네임스페이스는 요소(또는 속성)가 명시적으로, 혹은 암시적으로 속한 언어입니다. + +## 같이 보기 + +- [네임스페이스 집중 강의](/ko/docs/Web/SVG/Namespaces_Crash_Course) +- [CSS 네임스페이스](/ko/docs/Web/CSS/CSS_namespaces) 모듈 +- CSS {{CSSXref("@namespace")}} +- [`Document.createElementNS()`](/ko/docs/Web/API/Document/createElementNS) 메소드 +- 위키백과의 [네임스페이스](https://en.wikipedia.org/wiki/Namespace) From 1ac0cfb98b95aaca455926a741f9a13f8b45553e Mon Sep 17 00:00:00 2001 From: mdn-bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 3 Oct 2023 01:25:11 +0000 Subject: [PATCH 11/58] ja: sync translated content --- files/ja/_redirects.txt | 10 +++--- files/ja/_wikihistory.json | 32 +++++++++---------- .../index.md | 3 +- .../index.md | 3 +- 4 files changed, 26 insertions(+), 22 deletions(-) rename files/ja/web/css/{adjacent_sibling_combinator => next-sibling_combinator}/index.md (90%) rename files/ja/web/css/{general_sibling_combinator => subsequent-sibling_combinator}/index.md (92%) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 59b73b963b98b6..a165ef916cc660 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -227,7 +227,7 @@ /ja/docs/CSS/@keyframes /ja/docs/Web/CSS/@keyframes /ja/docs/CSS/@media /ja/docs/Web/CSS/@media /ja/docs/CSS/@page /ja/docs/Web/CSS/@page -/ja/docs/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Adjacent_sibling_combinator +/ja/docs/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Next-sibling_combinator /ja/docs/CSS/Alternative_style_sheets /ja/docs/Web/CSS/Alternative_style_sheets /ja/docs/CSS/At-rule /ja/docs/Web/CSS/At-rule /ja/docs/CSS/Attribute_selectors /ja/docs/Web/CSS/Attribute_selectors @@ -248,7 +248,7 @@ /ja/docs/CSS/Comments /ja/docs/Web/CSS/Comments /ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters /ja/docs/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator -/ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator +/ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/Subsequent-sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS /ja/docs/CSS/Getting_Started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/CSS/Getting_Started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -3536,7 +3536,8 @@ /ja/docs/Web/CSS/@viewport/user-zoom /ja/docs/Web/CSS /ja/docs/Web/CSS/@viewport/viewport-fit /ja/docs/Web/CSS /ja/docs/Web/CSS/@viewport/zoom /ja/docs/Web/CSS -/ja/docs/Web/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Adjacent_sibling_combinator +/ja/docs/Web/CSS/Adjacent_sibling_combinator /ja/docs/Web/CSS/Next-sibling_combinator +/ja/docs/Web/CSS/Adjacent_sibling_selectors /ja/docs/Web/CSS/Next-sibling_combinator /ja/docs/Web/CSS/Background_Backup /ja/docs/Web/CSS/background /ja/docs/Web/CSS/Block_formatting_context /ja/docs/Web/Guide/CSS/Block_formatting_context /ja/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /ja/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support @@ -3614,7 +3615,8 @@ /ja/docs/Web/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator /ja/docs/Web/CSS/Filter_Effects /ja/docs/Web/CSS/CSS_filter_effects /ja/docs/Web/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox -/ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator +/ja/docs/Web/CSS/General_sibling_combinator /ja/docs/Web/CSS/Subsequent-sibling_combinator +/ja/docs/Web/CSS/General_sibling_selectors /ja/docs/Web/CSS/Subsequent-sibling_combinator /ja/docs/Web/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model /ja/docs/Web/CSS/Getting_started/Cascading_and_inheritance /ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index eed0ebf8b00af1..80460fc2333a65 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -16214,10 +16214,6 @@ "modified": "2020-11-30T12:30:31.824Z", "contributors": ["mfuji09", "yyss"] }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2020-10-15T21:20:46.943Z", - "contributors": ["mfuji09", "uknmr", "sii", "lv7777", "ethertank"] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2020-10-15T21:15:43.078Z", "contributors": [ @@ -16853,18 +16849,6 @@ "modified": "2020-10-15T21:22:42.147Z", "contributors": ["mfuji09", "ethertank", "sosleepy"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2020-10-15T21:22:37.143Z", - "contributors": [ - "dlwe", - "h-subaru", - "mfuji09", - "yassh", - "SphinxKnight", - "ethertank", - "sosleepy" - ] - }, "Web/CSS/ID_selectors": { "modified": "2020-12-03T15:27:41.759Z", "contributors": ["mfuji09", "FumiyaShibusawa", "ethertank", "sii"] @@ -16967,6 +16951,10 @@ "Piro" ] }, + "Web/CSS/Next-sibling_combinator": { + "modified": "2020-10-15T21:20:46.943Z", + "contributors": ["mfuji09", "uknmr", "sii", "lv7777", "ethertank"] + }, "Web/CSS/Privacy_and_the_:visited_selector": { "modified": "2020-12-01T21:03:57.973Z", "contributors": ["mfuji09", "SphinxKnight", "ethertank", "sosleepy"] @@ -17029,6 +17017,18 @@ "modified": "2020-04-20T23:20:01.731Z", "contributors": ["mfuji09", "sakai-akinobu", "yoshidax", "ethertank", "sii"] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2020-10-15T21:22:37.143Z", + "contributors": [ + "dlwe", + "h-subaru", + "mfuji09", + "yassh", + "SphinxKnight", + "ethertank", + "sosleepy" + ] + }, "Web/CSS/Syntax": { "modified": "2020-08-16T03:09:34.358Z", "contributors": [ diff --git a/files/ja/web/css/adjacent_sibling_combinator/index.md b/files/ja/web/css/next-sibling_combinator/index.md similarity index 90% rename from files/ja/web/css/adjacent_sibling_combinator/index.md rename to files/ja/web/css/next-sibling_combinator/index.md index 23f618ff969c46..743e76d33278e5 100644 --- a/files/ja/web/css/adjacent_sibling_combinator/index.md +++ b/files/ja/web/css/next-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 隣接兄弟結合子 -slug: Web/CSS/Adjacent_sibling_combinator +slug: Web/CSS/Next-sibling_combinator +original_slug: Web/CSS/Adjacent_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/ja/web/css/general_sibling_combinator/index.md b/files/ja/web/css/subsequent-sibling_combinator/index.md similarity index 92% rename from files/ja/web/css/general_sibling_combinator/index.md rename to files/ja/web/css/subsequent-sibling_combinator/index.md index caef2c61a07ede..6b142845942de6 100644 --- a/files/ja/web/css/general_sibling_combinator/index.md +++ b/files/ja/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: 一般兄弟結合子 -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} From c01da624987a7850bc42b8194bdf645d4d314639 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 8 Jun 2023 01:53:13 +0900 Subject: [PATCH 12/58] =?UTF-8?q?2023/02/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/index.md | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/files/ja/learn/index.md b/files/ja/learn/index.md index 8175e46074c667..6bb5a02c83abfd 100644 --- a/files/ja/learn/index.md +++ b/files/ja/learn/index.md @@ -1,13 +1,15 @@ --- title: ウェブ開発を学ぶ slug: Learn +l10n: + sourceCommit: f22e2f56c6cc82b43b6a14fa213755512e23cd8f --- {{LearnSidebar}} -MDN 学習エリアへようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。 +MDN 学習領域へようこそ。この一連の記事では、ウェブ開発が全くの初心者にとって、シンプルなウェブサイトのコーディングを始めるのに必要な全てを提供することを目標とします。 -MDN のこのエリアの目的は、あなたを「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすることです。そこから、 [MDN のその他の部分](/ja/) や、多くの予備知識を前提とする他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるようになるはずです。 +MDN のこの領域の目的は、あなたを「初心者」から「エキスパート」にすることではなく、「初心者」から「中級者」にすることです。そこから、 [MDN のその他の部分](/ja/) や、多くの予備知識を前提とする他の中級から上級のリソースから学びながら、自分の道を歩み始めることができるようになるはずです。 全くの初心者であれば、ウェブ開発は難しいものです - 私たちはあなたの手を握り、あなたが快適に感じ、適切にトピックを学ぶために十分な詳細を提供します。あなたがウェブ開発を学習している学生（個人またはクラスの一部として）、クラスの教材を探している先生、趣味の人、ウェブ技術の仕組みをもっと理解したい人など、どのような人であっても、安心してください。 @@ -24,7 +26,7 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ - 全くの初心者の方 - : ウェブ開発の全くの初心者なら、[ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web)を一通り読むことをお勧めします。これを読めば、ウェブ開発を始めるのに必要な基本的な知識はすべて見つかるでしょう。 - 基本の次の段階の方 - - : すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールから始めて、 [CSS 入門](/ja/docs/Learn/CSS/Introduction_to_CSS)のモジュールに移動してください。 + - : すでにいくらかの知識があるなら、次のステップは {{glossary("HTML")}} と {{glossary("CSS")}} を詳しく学ぶことです。 [HTML 入門](/ja/docs/Learn/HTML/Introduction_to_HTML)のモジュールから始めて、 [CSS 入門](/ja/docs/Learn/CSS/First_steps)のモジュールに移動してください。 - スクリプト作成まで進む方 - : HTML と CSS を十分知っていたり、主にコーディングに興味があるなら、 {{glossary("JavaScript")}} やサーバーサイド開発に行きたくなるでしょう。 [JavaScript の第一歩](/ja/docs/Learn/JavaScript/First_steps)と[サーバーサイドの第一歩](/ja/docs/Learn/Server-side/First_steps)のモジュールから始めてください。 - フレームワークとツールの利用 @@ -34,14 +36,14 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## カバーするトピック -下記は MDN 学習エリアにてカバーしているすべてのトピック一覧です。 +下記は MDN 学習領域にてカバーしているすべてのトピック一覧です。 - [ウェブ入門](/ja/docs/Learn/Getting_started_with_the_web) - : 完全なウェブ開発初心者用の実用的な入門を提供します。 - [HTML — ウェブの構造化](/ja/docs/Learn/HTML) - : HTML はコンテンツのいろいろな部分を構造化し、意味や目的を定義するのに使う言語です。このトピックでは HTML を詳細に教えます。 -- [CSS — ウェブのスタイルづけ](/ja/docs/Learn/CSS) - - : CSS はウェブのコンテンツをスタイルづけしたりレイアウトしたり、アニメーションのような振る舞いを追加したりする言語です。このトピックでは CSS を包括的にカバーします。 +- [CSS — ウェブのスタイル付け](/ja/docs/Learn/CSS) + - : CSS はウェブのコンテンツウェブコンテンツのスタイルやレイアウトを制御したり、アニメーションのような振る舞いを追加したりするために用いる言語です。このトピックでは CSS を包括的にカバーします。 - [JavaScript — 動的クライアントサイドスクリプティング](/ja/docs/Learn/JavaScript) - : JavaScript はウェブページに動的な機能を追加するスクリプト言語です。このトピックでは JavaScript を書いたり理解するのに十分となるのに必要なすべての要点を教えます。 - [ウェブフォーム — ユーザーデータを扱う](/ja/docs/Learn/Forms) @@ -50,6 +52,8 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ - : アクセシビリティはウェブコンテンツをなるべく多くの人に利用できるようにする実践であり、それは障がいや、端末や、ロケールや、その他の分化させる要素に関係なく利用できるようにします。このトピックでは知る必要のあるすべてが与えられます。 - [ウェブの性能 — ウェブサイトを高速かつレスポンシブにする](/ja/docs/Learn/Performance) - : ウェブの性能は、ウェブアプリケーションのダウンロードを確実に高速化し、ダウンロードを帯域幅、画面の寸法、ネットワーク、端末の能力にかかわらず、ユーザーの操作をレスポンシブにする技術です。 +- [MathML](/ja/docs/Learn/MathML) + - : MathML は、分数、スクリプト、基数、行列、インテグラル、級数などを用いて、ウェブページに数式を記述するために使用する言語です。このトピックでは、MathML を網羅します。 - [ツールとテスト](/ja/docs/Learn/Tools_and_testing) - : このトピックでは、開発者が作業を円滑に進めるために使用するツール、例えばブラウザー間テストツール、リンター、フォーマッター、変換ツール、バージョン管理システム、デプロイツール、クライアント側 JavaScript フレームワークなどについて説明します。 - [サーバーサイドのウェブサイトプログラミング](/ja/docs/Learn/Server-side) @@ -57,13 +61,13 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## コード例の入手 -学習エリアにあるコードの例はすべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。すべてのコードを自分のコンピューターにコピーしたいのであれば、[最新の master コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)のが最も簡単です。 +学習領域にあるコードの例はすべて [GitHub から利用可能](https://github.com/mdn/learning-area/)です。すべてのコードを自分のコンピューターにコピーしたいのであれば、[最新の master コードブランチの ZIP をダウンロードする](https://codeload.github.com/mdn/learning-area/zip/main)のが最も簡単です。 自動更新ができる、より柔軟な方法でリポジトリーをコピーしたい場合は、より複雑な指示に従うことになります。 1. マシンに [Git をインストールします](https://git-scm.com/downloads)。これは GitHub が動作する基盤となっているバージョン管理システムのソフトウェアです。 2. コンピューターで[コマンドプロンプト](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) またはターミナル ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)) を開きます。 -3. 学習エリアのリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。 +3. 学習領域のリポジトリーを、コマンドプロンプト/ターミナルが指している現在位置の learning-area というフォルダーにコピーするには、下記のコマンドを使います。 ```bash git clone https://github.com/mdn/learning-area @@ -87,7 +91,7 @@ MDN のこのエリアの目的は、あなたを「初心者」から「エキ ## 連絡方法 -何か連絡を取りたいことがある場合は、 [Discourse フォーラム](https://discourse.mozilla.org/c/mdn/236)でメッセージを投稿するのがもっともよい方法です。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。 +何か連絡を取りたいことがある場合は、[コミュニケーションチャンネル](/ja/docs/MDN/Community/Communication_channels)を使用してください。サイト上で間違っていると思うことや足りないもの、新しい学習テーマのリクエスト、わからない項目のヘルプなど、どんなことでもお聞かせください。 コンテンツの開発、改善の手助けに興味がある場合、[協力するには？](/ja/docs/MDN/Contribute)を覗いて、始めてください！あなたが初心者でも、先生でも、熟練のウェブ開発者でも、その他学習体験の改善に興味がある人でも、誰でも歓迎です。 From 08924ddc862d33a519b1c5897d8d10b79f3fb0fe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 15 Mar 2023 10:47:36 +0900 Subject: [PATCH 13/58] =?UTF-8?q?2023/02/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/files/ja/web/api/index.md b/files/ja/web/api/index.md index 49bcb7e5be078e..f55d4fa41f24cc 100644 --- a/files/ja/web/api/index.md +++ b/files/ja/web/api/index.md @@ -1,9 +1,11 @@ --- title: Web API slug: Web/API +l10n: + sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f --- -ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス (オブジェクト型) のリストを挙げます。 +ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス（オブジェクト型）のリストを挙げます。 Web API は通常 JavaScript とともに使用されますが、常にそうとは限りません。 From bf82377a841db69118ed694c0ec32222cdee6e55 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 3 Oct 2023 22:04:14 +0900 Subject: [PATCH 14/58] =?UTF-8?q?2023/04/28=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F=20(#1623?= =?UTF-8?q?4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/04/28 時点の英語版に同期 * Update files/ja/web/css/image/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/image/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/image/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/css/image/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ja/web/css/image/index.md | 42 +++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md index 88aae096550aa6..acdb5267c5f2b3 100644 --- a/files/ja/web/css/image/index.md +++ b/files/ja/web/css/image/index.md @@ -1,6 +1,8 @@ --- title: slug: Web/CSS/image +l10n: + sourceCommit: 2a23f650d86d4f5d948614a607224a2bd52cca33 --- {{CSSRef}} @@ -11,25 +13,25 @@ slug: Web/CSS/image `` データ型は以下のいずれかによって表すことができます。 -- {{CSSxRef("url()", "url()")}} データ型で記述された画像 +- {{CSSxRef("url", "url()")}} データ型で記述された画像 - {{CSSxRef("<gradient>")}} データ型 -- {{CSSxRef("element()","element()")}} 関数で定義されたウェブページの一部 -- {{CSSxRef("image/image()","image()")}} 関数で定義された画像、画像フラグメント、単色の色 -- {{CSSxRef("cross-fade()","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 -- {{CSSxRef("image/image-set()","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 +- {{CSSxRef("element","element()")}} 関数で定義されたウェブページの一部 +- {{CSSxRef("image/image","image()")}} 関数で定義された画像、画像フラグメント、単色の色 +- {{CSSxRef("cross-fade","cross-fade()")}} 関数で定義された 2 つ以上の画像の合成 +- {{CSSxRef("image/image-set","image-set()")}} 関数で定義された、解像度に基づいて定義された画像の選択 ## 解説 CSS はさまざま種類の画像を扱うことができます。 -- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_自身の寸法_ (自然の寸法) を持つ画像。 -- 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) -- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 -- CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 +- JPEG、PNG、その他の[ラスター形式](https://ja.wikipedia.org/wiki/ビットマップ画像)の画像のように、_内在的な寸法_ (自然の寸法) を持つ画像。 +- 単一のファイルの中に複数のバージョンが存在する、*複数の内在的な寸法*を持つ画像。（この場合、内在的な寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。） +- SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、内在的な寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 +- CSS グラデーションなど、*内在的な寸法がなく、固有の縦横比もない*画像。 -CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 +CSS はオブジェクトの*実際の*寸法を、 (1) _内在的な寸法_、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 -| オブジェクトの種類 (CSS プロパティ) | 既定のオブジェクトの寸法 | +| オブジェクトの種類（CSS プロパティ） | 既定のオブジェクトの寸法 | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | {{CSSxRef("background-image")}} | 要素の背景が配置される領域の寸法 | | {{CSSxRef("list-style-image")}} | `1em` の文字の寸法 | @@ -38,13 +40,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) | {{CSSxRef("mask-image")}} | ? | | {{CSSxRef("shape-outside")}} | ? | | {{CSSxRef("mask-border-source")}} | ? | -| @counter-style の {{CSSxRef("symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | +| @counter-style の {{CSSxRef("symbols", "symbols()")}} | リスクあり。対応している場合、クライアントのシステムにおける通常のカーソルの寸法に合わせたブラウザー定義の寸法 | | 擬似要素 ({{CSSxRef("::after")}}/{{CSSxRef("::before")}}) の {{CSSxRef("content")}} | 300px × 150px の矩形 | 正しいオブジェクトの寸法は、次のアルゴリズムを使って計算されます。 - 指定された寸法に*幅と高さの両方*が定義されている場合は、その値が実際の寸法に使われます。 -- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像自身の寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 +- 指定された寸法に*幅と高さのどちらかのみ*が定義されている場合は、もう一方の値は、画像自身の比率、指定値が一致するなら画像の内在的な寸法、既定のオブジェクトの寸法の値の何れかを使用して決められます。 - 指定された寸法が*幅も高さも定義していない*場合は、実際のオブジェクトの寸法は、画像自身の縦横比に一致し、かつ既定のオブジェクトの寸法をどちらの方向にも超過しない値が計算されます。画像自身の縦横比がない場合は、適用されるオブジェクト自身の縦横比が使用されます。このオブジェクトにも縦横比が存在しない場合は、残りの幅または高さは既定のオブジェクトの寸法から取られます。 > **メモ:** すべてのブラウザーがすべてのプロパティですべての種類の画像に対応しているわけではありません。詳細は[ブラウザーの互換性の節](#ブラウザーの互換性)を参照してください。 @@ -53,9 +55,13 @@ CSS はオブジェクトの*実際の*寸法を、 (1) _自身の寸法_、 (2) ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。 -- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content) - [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) +## 形式文法 + +{{csssyntax}} + ## 例 ### 有効な画像 @@ -97,7 +103,7 @@ image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 画像セット内の画像はすべて ## 関連情報 - {{CSSxRef("<gradient>")}} -- {{CSSxRef("element()","element()")}} -- {{CSSxRef("image/image()", "image()")}} -- {{CSSxRef("image/image-set()","image-set()")}} -- {{CSSxRef("cross-fade()","cross-fade()")}} +- {{CSSxRef("element","element()")}} {{Experimental_Inline}} +- {{CSSxRef("image/image", "image()")}} +- {{CSSxRef("image/image-set","image-set()")}} +- {{CSSxRef("cross-fade","cross-fade()")}} From 74a09429f7eea2c9eb1c9d04229790dd3d24777c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 3 Oct 2023 22:04:44 +0900 Subject: [PATCH 15/58] =?UTF-8?q?2023/02/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F=20(#1623?= =?UTF-8?q?6)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2023/02/24 時点の英語版に同期 * Update files/ja/web/html/attributes/disabled/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/html/attributes/disabled/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/html/attributes/minlength/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/html/attributes/multiple/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/ja/web/html/attributes/pattern/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/ja/web/html/attributes/accept/index.md | 20 +++++--- .../web/html/attributes/autocomplete/index.md | 6 ++- files/ja/web/html/attributes/capture/index.md | 6 ++- .../web/html/attributes/crossorigin/index.md | 10 ++-- .../ja/web/html/attributes/disabled/index.md | 14 ++++-- .../html/attributes/elementtiming/index.md | 11 +++-- files/ja/web/html/attributes/for/index.md | 2 +- files/ja/web/html/attributes/index.md | 14 +++--- files/ja/web/html/attributes/max/index.md | 10 ++-- .../ja/web/html/attributes/maxlength/index.md | 8 +++- files/ja/web/html/attributes/min/index.md | 12 +++-- .../ja/web/html/attributes/minlength/index.md | 12 +++-- .../ja/web/html/attributes/multiple/index.md | 30 +++++++----- files/ja/web/html/attributes/pattern/index.md | 48 +++++++++++-------- .../ja/web/html/attributes/readonly/index.md | 14 ++++-- .../ja/web/html/attributes/required/index.md | 16 ++++--- files/ja/web/html/attributes/size/index.md | 4 ++ files/ja/web/html/attributes/step/index.md | 10 ++-- 18 files changed, 160 insertions(+), 87 deletions(-) diff --git a/files/ja/web/html/attributes/accept/index.md b/files/ja/web/html/attributes/accept/index.md index f4eb903707c021..e08b4e50de4c04 100644 --- a/files/ja/web/html/attributes/accept/index.md +++ b/files/ja/web/html/attributes/accept/index.md @@ -1,11 +1,19 @@ --- title: "HTML 属性: accept" slug: Web/HTML/Attributes/accept +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 +**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-accept.html", "tabbed-shorter")}} + +## 概要 + +accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。 @@ -49,7 +57,7 @@ slug: Web/HTML/Attributes/accept

``` -{{EmbedLiveSample('simple_example', '100%', 200)}} +{{EmbedLiveSample('Examples', '100%', 200)}} なお、最後の例では複数の画像を選択することができます。詳しくは [`multiple`](multiple) 属性を参照してください。 @@ -95,7 +103,7 @@ div { {{EmbedLiveSample('A_basic_example', 650, 60)}} -> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 +> **メモ:** この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/main/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。 @@ -109,7 +117,7 @@ div { - `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付ける。 - `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付ける。 -- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。) +- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける（また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。） - `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思しきすべてのファイルを受け付ける。 もっと完全な例を見てみましょう。 @@ -148,5 +156,5 @@ div { ## 関連情報 -- [ウェブアプリケーションからのファイルの使用](/ja/docs/Using_files_from_web_applications) -- [File API](/ja/docs/Web/API/File) +- [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications) +- [ファイル API](/ja/docs/Web/API/File) diff --git a/files/ja/web/html/attributes/autocomplete/index.md b/files/ja/web/html/attributes/autocomplete/index.md index 972b4e03a2a409..829aae217beb3f 100644 --- a/files/ja/web/html/attributes/autocomplete/index.md +++ b/files/ja/web/html/attributes/autocomplete/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: autocomplete" slug: Web/HTML/Attributes/autocomplete +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -21,6 +23,8 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 > 2. `
` 要素の子孫であること > 3. フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと +{{EmbedInteractiveExample("pages/tabbed/attribute-autocomplete.html", "tabbed-shorter")}} + ## 値 - "`off`" @@ -115,7 +119,7 @@ HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種 - "`bday-year`" - : 生年月日の年の部分です。 - "`sex`" - - : 性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。 + - : 性別で ("Female", "Fa'afafine", "Hijra", "Male", "Nonbinary" など)、改行のない自由な形式のテキストです。 - "`tel`" - : 国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 diff --git a/files/ja/web/html/attributes/capture/index.md b/files/ja/web/html/attributes/capture/index.md index 889cc262b00f54..6661e840826a74 100644 --- a/files/ja/web/html/attributes/capture/index.md +++ b/files/ja/web/html/attributes/capture/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: capture" slug: Web/HTML/Attributes/capture +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,7 +11,7 @@ slug: Web/HTML/Attributes/capture 値としては、 `user` と `environment` があります。 capture 属性は {{HTMLElement("input/file", "file")}} 入力型が対応しています。 -`capture` 属性は、 [accept](accept) 属性が画像や動画データの入力に使用するカメラの種類を指定する文字列を値とするものです。 +`capture` 属性は、[accept](accept) 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。 | 値 | 説明 | | ------------- | ---------------------------------------- | @@ -18,6 +20,8 @@ slug: Web/HTML/Attributes/capture > **メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。 +{{EmbedInteractiveExample("pages/tabbed/attribute-capture.html", "tabbed-standard")}} + ## 例 ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェースが表示されます。 diff --git a/files/ja/web/html/attributes/crossorigin/index.md b/files/ja/web/html/attributes/crossorigin/index.md index e8904c19c1bf05..af434de6c2544b 100644 --- a/files/ja/web/html/attributes/crossorigin/index.md +++ b/files/ja/web/html/attributes/crossorigin/index.md @@ -1,20 +1,22 @@ --- title: "HTML 属性: crossorigin" slug: Web/HTML/Attributes/crossorigin +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`crossorigin`** 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 [CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 +**`crossorigin`** 属性は、{{HTMLElement("audio")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("video")}} の各要素で有効です。[CORS](/ja/docs/Web/HTTP/CORS) への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。 メディア要素の `crossorigin` コンテンツ属性は CORS 設定属性です。 -これらの属性は列挙型で、以下の値を取ることができます。 +これらの属性は[列挙型](/ja/docs/Glossary/Enumerated)で、以下の値を取ることができます。 - `anonymous` - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'same-origin'` に設定されます。宛先が同一オリジンでない限り、クッキー、クライアントサイド SSL 証明書、HTTP 認証による**ユーザー資格情報**の交換は行われません。 - `use-credentials` - - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**は常に含まれます。 + - : リクエストは CORS ヘッダーを使用し、資格情報フラグには `'include'` に設定され、**ユーザー資格情報**が常に含まれます。 - `""` - : `crossorigin` または `crossorigin=""` のように属性に空の値を設定すると、 `anonymous` と同じになります。 @@ -37,7 +39,7 @@ slug: Web/HTML/Attributes/crossorigin script - {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 + {{domxref('Window.error_event', 'window.onerror')}} によるエラーログへのアクセスが制限されます。 diff --git a/files/ja/web/html/attributes/disabled/index.md b/files/ja/web/html/attributes/disabled/index.md index 4511a3935c23c7..446cb506db246b 100644 --- a/files/ja/web/html/attributes/disabled/index.md +++ b/files/ja/web/html/attributes/disabled/index.md @@ -1,15 +1,21 @@ --- title: "HTML 属性: disabled" slug: Web/HTML/Attributes/disabled +l10n: + sourceCommit: a9323bfa9a5c937633786a29124fd308bfa8d29d --- {{HTMLSidebar}} **`disabled`** は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。ユーザーはそのコントロールやフォームコントロールの子孫を編集したり、フォーカスしたりすることができません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-disabled.html", "tabbed-standard")}} + +## 概要 + フォームコントロールに `disabled` 属性が指定された場合、その要素とフォームコントロールの子孫は制約検証が行われません。多くの場合、ブラウザーはそのようなコントロールをグレーアウトし、マウスクリックやフォーカス関連のイベントなどの閲覧イベントを受け取りません。 -`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 +`disabled` 属性は、 {{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("input")}} が対応しています。 論理属性の disabled は、ユーザーがコントロールやその子孫のコントロールと対話できないことを示します。この属性が指定されていない場合、コントロールは、例えば `fieldset` のような包含要素からその設定を継承します。 `disabled` 属性が設定されている包含要素がなく、コントロール自体がこの属性を持っていない場合、コントロールは有効になります。 {{ HTMLElement("optgroup") }}上で宣言された場合、 select は（特に無効化されていない限り）操作可能になりますが、オプショングループの項目はどれも選択不可能になります。 @@ -70,7 +76,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし

+

@@ -100,7 +106,7 @@ Firefox は他のブラウザーとは異なり、ページを再読み込みし ``` -{{EmbedLiveSample('Examples', 500, 300)}} +{{EmbedLiveSample('Examples', 500, 450)}} ## 仕様書 diff --git a/files/ja/web/html/attributes/elementtiming/index.md b/files/ja/web/html/attributes/elementtiming/index.md index f494d02ee20416..3eb78a6120e88d 100644 --- a/files/ja/web/html/attributes/elementtiming/index.md +++ b/files/ja/web/html/attributes/elementtiming/index.md @@ -2,12 +2,16 @@ title: "HTML 属性: elementtiming" slug: Web/HTML/Attributes/elementtiming l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -**`elementtiming`** 属性は、要素が{{domxref("Element Timing API", "要素タイミング API", "", 1)}} による追跡のためのフラグを立てていることを示すために使用されます。この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 +**`elementtiming`** 属性は、ある要素が {{domxref("PerformanceObserver")}} オブジェクトで `"element"` 型を使用したものによる追跡のためのフラグを立てていることを示すために使用されます。詳細は、 {{domxref("PerformanceElementTiming")}} インターフェイスを参照してください。 + +この属性は {{htmlelement("img")}}、 {{SVGElement("svg")}} の中の {{SVGElement("image")}} 要素、 {{htmlelement("video")}} 要素のポスター画像、 {{cssxref("background-image")}} がある要素、及び {{htmlelement("p")}} などテキストノードを持つ要素に対して適用することができます。 + +DOM では、この属性は {{domxref("Element.elementTiming")}} として反映されます。 ## 使用方法 @@ -34,4 +38,5 @@ l10n: ## 関連情報 -- [Custom metrics](https://web.dev/custom-metrics/) +- {{domxref("PerformanceElementTiming")}} +- {{domxref("Element.elementTiming")}} diff --git a/files/ja/web/html/attributes/for/index.md b/files/ja/web/html/attributes/for/index.md index d45126448402d1..3e8fbad6f40a95 100644 --- a/files/ja/web/html/attributes/for/index.md +++ b/files/ja/web/html/attributes/for/index.md @@ -2,7 +2,7 @@ title: "HTML 属性: for" slug: Web/HTML/Attributes/for l10n: - sourceCommit: bb7e3c7303746408072ddf4cc646e28d7e14214a + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} diff --git a/files/ja/web/html/attributes/index.md b/files/ja/web/html/attributes/index.md index 8f4c567b34e277..f8f76d48bcba45 100644 --- a/files/ja/web/html/attributes/index.md +++ b/files/ja/web/html/attributes/index.md @@ -2,7 +2,7 @@ title: HTML 属性リファレンス slug: Web/HTML/Attributes l10n: - sourceCommit: 076a9f924e4619b4f5129c2ec7440420d05b5ec5 + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar("Attributes")}} @@ -72,7 +72,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - allow + allow {{ HTMLElement("iframe") }} iframe の機能ポリシーを指定します。 @@ -404,7 +404,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - decoding + decoding {{ HTMLElement("img") }} 画像をデコードする推奨の方法を示します。 @@ -696,7 +696,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - intrinsicsize + intrinsicsize {{deprecated_inline}} {{ HTMLElement("img") }} @@ -718,7 +718,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - ismap + ismap {{ HTMLElement("img") }} 画像がサーバーサイドイメージマップの一部であることを示します。 @@ -1098,7 +1098,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - sandbox + sandbox {{ HTMLElement("iframe") }} @@ -1204,7 +1204,7 @@ HTML の要素は**属性**を持ちます。ユーザーが望む条件を満 - srcdoc + srcdoc {{ HTMLElement("iframe") }} diff --git a/files/ja/web/html/attributes/max/index.md b/files/ja/web/html/attributes/max/index.md index 429eaa4c01f91e..a750918d526380 100644 --- a/files/ja/web/html/attributes/max/index.md +++ b/files/ja/web/html/attributes/max/index.md @@ -1,11 +1,13 @@ --- title: "HTML 属性: max" slug: Web/HTML/Attributes/max +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 +**`max`** 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、 [`min`](min) 属性の値以上でなければなりません。 `max` 属性が指定されていないか無効であった場合、 `max` 値は適用されません。 `max` 属性が有効で、値が空でなく、 `max` 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。 これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素で有効であり、 `max` 属性はフォームコントロールで妥当と見なされる最も大きな値を指定する数値です。 @@ -73,7 +75,7 @@ slug: Web/HTML/Attributes/max > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。 {{htmlelement('progress')}} 要素における `max` 属性は、 `progress` 要素で示されたタスクの作業の必要量を記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における `max` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値（[`min`](/ja/docs/Web/HTML/Attributes/min) 属性）よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -129,8 +131,8 @@ slug: Web/HTML/Attributes/max - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`min`](/ja/docs/Web/HTML/Attributes/min) - 他の meter の属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeOverflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/maxlength/index.md b/files/ja/web/html/attributes/maxlength/index.md index e19e9da1dcc26f..f522817ba4297b 100644 --- a/files/ja/web/html/attributes/maxlength/index.md +++ b/files/ja/web/html/attributes/maxlength/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: maxlength" slug: Web/HTML/Attributes/maxlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -15,6 +17,8 @@ maxlength が指定されなかった場合、または無効な値が指定さ ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-maxlength.html", "tabbed-shorter")}} + ## 例 ```html @@ -36,6 +40,6 @@ maxlength が指定されなかった場合、または無効な値が指定さ - [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/min/index.md b/files/ja/web/html/attributes/min/index.md index 65209e6c8d42a6..7decb07cb0299b 100644 --- a/files/ja/web/html/attributes/min/index.md +++ b/files/ja/web/html/attributes/min/index.md @@ -1,11 +1,15 @@ --- title: "HTML 属性: min" slug: Web/HTML/Attributes/min +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#attr-value)) がこれより大きい場合、その要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。この値は、 `max` 属性の値以下でなければなりません。 `min` 属性が指定されていないか無効であった場合、最小値は適用されません。 +**`min`** 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値 ([`value`](/ja/docs/Web/HTML/Element/input#value)) がこれより小さい場合、その要素は[制約検証](/ja/docs/Learn/Forms/Form_validation)に失敗します。この値は、`max` 属性の値以下でなければなりません。 + +入力欄の種類によっては既定の最小値があるものもあります。入力欄に既定の最小値がなく、 `min` に有効な数値に変換できない値が指定された場合（あるいは最小値が設定されなかった場合）、その入力には最小値が設定されません。 これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 `min` 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。 @@ -71,7 +75,7 @@ slug: Web/HTML/Attributes/min > **メモ:** ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。 -詳しくは [クライアント側検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 +詳しくは [クライアント側検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。 {{htmlelement('meter')}} 要素における `min` 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 ([`max`](/ja/docs/Web/HTML/Attributes/max) 属性) よりも小さくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。 @@ -141,8 +145,8 @@ input:invalid { - [`step`](/ja/docs/Web/HTML/Attributes/step) - [`max`](/ja/docs/Web/HTML/Attributes/max) - その他の meter 属性: [`low`](/ja/docs/Web/HTML/Attributes/low), [`high`](/ja/docs/Web/HTML/Attributes/high), [`optimum`](/ja/docs/Web/HTML/Attributes/optimum) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.rangeUnderflow')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/minlength/index.md b/files/ja/web/html/attributes/minlength/index.md index aa3f8a14328283..fbd64fafa83a0c 100644 --- a/files/ja/web/html/attributes/minlength/index.md +++ b/files/ja/web/html/attributes/minlength/index.md @@ -1,14 +1,18 @@ --- title: "HTML 属性: minlength" slug: Web/HTML/Attributes/minlength +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} -**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 +**`minlength`** 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を（UTF-16 コード単位で）定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、入力欄には最小文字数が設定されません。この値は [maxlength](/ja/docs/Web/HTML/Attributes/maxlength) の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。 フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が `true` を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-minlength.html", "tabbed-shorter")}} + ## 例 `minlength="5"` を追加すると、値は空か 5 文字以上でないと有効にはならなくなります。 @@ -18,7 +22,7 @@ slug: Web/HTML/Attributes/minlength ``` -擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 +擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null （空欄）または 5 文字以上であれば有効になります。*ライム色*は無効であり、_レモン色は有効です_。 ```css input { @@ -47,6 +51,6 @@ input:invalid:focus { - [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) - [`size`](/ja/docs/Web/HTML/Attributes/size) - [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{htmlelement('input')}} diff --git a/files/ja/web/html/attributes/multiple/index.md b/files/ja/web/html/attributes/multiple/index.md index fbe61ac7f2270d..b2166cbb123fe8 100644 --- a/files/ja/web/html/attributes/multiple/index.md +++ b/files/ja/web/html/attributes/multiple/index.md @@ -1,23 +1,29 @@ --- title: "HTML 属性: multiple" slug: Web/HTML/Attributes/multiple +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} 論理属性の **`multiple`** 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。 +{{EmbedInteractiveExample("pages/tabbed/attribute-multiple.html", "tabbed-standard")}} + +## 概要 + 型によっては、`multiple` 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに `multiple` 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。 -`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個 ([`required`](/ja/docs/Web/HTML/Attributes/required) がない場合)、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 +`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個（[`required`](/ja/docs/Web/HTML/Attributes/required) がない場合）、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 ```html ``` -`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。 +`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。 -`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (Shift か Control を押したまま、それからクリックするなど) で選択することができます。 +`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法（Shift か Control を押したまま、それからクリックするなど）で選択することができます。 ```html @@ -28,7 +34,7 @@ slug: Web/HTML/Attributes/multiple `multiple` 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。 ```html - @@ -58,11 +64,11 @@ slug: Web/HTML/Attributes/multiple multiple name="emails" id="emails" - list="drawfemails" + list="dwarf-emails" required size="64" /> - + @@ -92,7 +98,7 @@ input:invalid { ```html

- +

- - @@ -137,7 +143,7 @@ input:invalid {

- + + Enter your phone number in the format (123) - 456 - 7890 ()- + size="2" />) - ``` -ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) 属性によってそれぞれ設定されています。 +ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で `pattern` 属性によってそれぞれ設定されています。 値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。 @@ -69,13 +79,13 @@ input:invalid { } ``` -{{EmbedLiveSample("example1", 300, 40)}} +{{EmbedLiveSample("Matching_a_phone_number", 300, 80)}} 代わりに [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) と [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。 ### パターンの指定 -[`pattern`](/ja/docs/Web/HTML/Element/input#pattern) 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 +{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます（正規表現を使用して入力を検証する簡単な集中講座は、[正規表現での検証](/ja/docs/Learn/Forms/Form_validation#正規表現での検証)を参照してください）。 以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。 @@ -115,13 +125,13 @@ input + span { padding-right: 30px; } -input:invalid + span:after { +input:invalid + span::after { position: absolute; content: "✖"; padding-left: 5px; } -input:valid + span:after { +input:valid + span::after { position: absolute; content: "✓"; padding-left: 5px; @@ -148,6 +158,6 @@ This renders like so: ## 関連情報 -- [Constraint validation](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation) -- [Forms: Data form validation](/ja/docs/Web/Guide/HTML/Forms/Data_form_validation) -- [Regular Expressions](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [フォーム: データフォーム検証](/ja/docs/Learn/Forms/Form_validation) +- [正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) diff --git a/files/ja/web/html/attributes/readonly/index.md b/files/ja/web/html/attributes/readonly/index.md index 0f069514b1e91c..4c790a12f5e861 100644 --- a/files/ja/web/html/attributes/readonly/index.md +++ b/files/ja/web/html/attributes/readonly/index.md @@ -1,19 +1,25 @@ --- title: "HTML 属性: readonly" slug: Web/HTML/Attributes/readonly +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} **`readonly`** は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。 +{{EmbedInteractiveExample("pages/tabbed/attribute-readonly.html", "tabbed-shorter")}} + +## 概要 + `readonly` 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。 -`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}` の `{{HTMLElement("input")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、 `{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、 `{{cssxref(':read-write')}}` 擬似クラスが一致します。 +`readonly` 属性はフォームコントロールの `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}` の `{{HTMLElement("input")}}` 型と `{{HTMLElement("textarea")}}` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、`{{cssxref(':read-only')}}` 擬似クラスが一致します。この属性が含まれなかった場合は、`{{cssxref(':read-write')}}` 擬似クラスが一致します。 -この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、 {{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。 {{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。 {{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、 `image` を含め、すべて対応していません。 +この属性は `{{HTMLElement("select")}}` や、 {{HTMLElement("input/checkbox","checkbox")}} や {{HTMLElement("input/radio","radio")}} のように既に変更不可能な入力型、{{HTMLElement("input/file","file")}} 入力型のように定義上初期状態で値を設定できない入力型は対応していません。{{HTMLElement("input/range","range")}} や {{HTMLElement("input/color","color")}} は、どちらも既定値があります。{{HTMLElement("input/hidden","hidden")}} も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。 -> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール (チェックボックスやボタンなど) は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 +> **メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。 入力に `readonly` 属性が設定されている場合、 {{cssxref(":read-only")}} 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 {{cssxref(":read-write")}} 擬似クラスに一致します。 @@ -29,7 +35,7 @@ readonly が付いた値を動的に変更できる唯一の方法は、スク ### ユーザビリティ -ブラウザーは `readonly` 属性を表示します... +ブラウザーは `readonly` 属性を表示します。 ### 制約検証 diff --git a/files/ja/web/html/attributes/required/index.md b/files/ja/web/html/attributes/required/index.md index d1a9d216396224..4be75d16fb4619 100644 --- a/files/ja/web/html/attributes/required/index.md +++ b/files/ja/web/html/attributes/required/index.md @@ -1,23 +1,25 @@ --- title: "HTML 属性: required" slug: Web/HTML/Attributes/required +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} -論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 `required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 +論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 + +`required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 `image` を含むボタンの種類もいずれも対応していません。 なお、 `color` と `range` は `required` に対応していませんが、 `color` 型は既定値が `#000000` であり、 `range` は、 `min` と `max` の中間点が既定値です。 — 宣言されていない場合、ほとんどのブラウザーでは `min` と `max` の既定値はそれぞれ 0 と 100 です。 — 従って、常に値があります。 -入力欄に `required` 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 `required` 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。 - 同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに `required` 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに `required` 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。 同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 `required` 属性がついたチェックボックスのみが必須になります。 -> **メモ:** `aria-required="true"` を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。 +> **メモ:** `aria-required="true"` を設定すると、ある要素（任意の要素）が必須であることを画面リーダーに伝えますが、その要素が任意であるかどうかには関係ありません。 ### 属性の相互作用 @@ -25,7 +27,7 @@ slug: Web/HTML/Attributes/required ### ユーザビリティ -`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ `required` に対応していない場合には問題ありません。 +`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと画面リーダーの組み合わせがまだ `required` に対応していない場合には問題ありません。 ### 制約検証 @@ -55,7 +57,7 @@ slug: Web/HTML/Attributes/required ### 結果 -{{EmbedLiveSample('Examples')}} +{{EmbedLiveSample('Example')}} ## 仕様書 @@ -67,7 +69,7 @@ slug: Web/HTML/Attributes/required ## 関連情報 -- {{cssxref('validityState.valueMissing')}} +- {{domxref('validityState.valueMissing')}} - {{cssxref(':required')}} および {{cssxref(':optional')}} - {{htmlelement('input')}} - {{htmlelement('select')}} diff --git a/files/ja/web/html/attributes/size/index.md b/files/ja/web/html/attributes/size/index.md index 037cc879e2f3b3..0cbaa689a87d3c 100644 --- a/files/ja/web/html/attributes/size/index.md +++ b/files/ja/web/html/attributes/size/index.md @@ -1,6 +1,8 @@ --- title: "HTML 属性: size" slug: Web/HTML/Attributes/size +l10n: + sourceCommit: ba96f2f183353872db6d9242c7d2dffe2dbc0c35 --- {{HTMLSidebar}} @@ -9,6 +11,8 @@ slug: Web/HTML/Attributes/size `size` 属性は制約検証には影響しません。 +{{EmbedInteractiveExample("pages/tabbed/attribute-size.html", "tabbed-standard")}} + ## 例 一部の入力型で `size` を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。 diff --git a/files/ja/web/html/attributes/step/index.md b/files/ja/web/html/attributes/step/index.md index 7e88a2c86b407d..703de8632cd0f4 100644 --- a/files/ja/web/html/attributes/step/index.md +++ b/files/ja/web/html/attributes/step/index.md @@ -1,6 +1,8 @@ --- -title: "HTML attribute: step" +title: "HTML 属性: step" slug: Web/HTML/Attributes/step +l10n: + sourceCommit: cfcbb39cc595bd536b107f6771bfb3f8e13bacca --- {{HTMLSidebar}} @@ -98,7 +100,7 @@ input:invalid { > **メモ:** ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスに一致します。 -詳しくは[クライアント側制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 +詳しくは[クライアント側制約検証](/ja/docs/Web/HTML/Constraint_validation)と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。 ## アクセシビリティの考慮 @@ -116,8 +118,8 @@ input:invalid { - [`max`](/ja/docs/Web/HTML/Attributes/max) - [`min`](/ja/docs/Web/HTML/Attributes/min) -- [制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation) -- [制約検証 API](/ja/docs/Web/API/Constraint_validation) +- [制約検証](/ja/docs/Web/HTML/Constraint_validation) +- [制約検証 API](/ja/docs/Learn/Forms/Form_validation) - {{domxref('validityState.stepMismatch')}} - {{cssxref(':out-of-range')}} - {{htmlelement('input')}} From 27fb293187a2ff593d6cfa401d344f492965f4ca Mon Sep 17 00:00:00 2001 From: Kohei Watanabe Date: Mon, 2 Oct 2023 18:57:01 +0900 Subject: [PATCH 16/58] =?UTF-8?q?"See=20Also"=20=E3=82=92=20"See=20Other"?= =?UTF-8?q?=20=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://developer.mozilla.org/ja/docs/Web/HTTP/Status/303 https://datatracker.ietf.org/doc/html/rfc7231#section-6.4.4 --- files/ja/web/http/headers/location/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/http/headers/location/index.md b/files/ja/web/http/headers/location/index.md index f8bc5d49c78654..bb8a46a5bd68b5 100644 --- a/files/ja/web/http/headers/location/index.md +++ b/files/ja/web/http/headers/location/index.md @@ -9,7 +9,7 @@ slug: Web/HTTP/Headers/Location リダイレクトの場合、 HTTP メソッドは元のメソッドとリダイレクトの種類によって、 `Location` で示されたページにアクセスする新しいリクエストを生成するために使用します。 -- {{HTTPStatus("303")}} (See Also) レスポンスは常に {{HTTPMethod("GET")}} メソッドを使用するように誘導され、 {{HTTPStatus("307")}} (Temporary Redirect) および {{HTTPStatus("308")}} (Permanent Redirect) は元のリクエストにおいて使用されたメソッドを変更しません。 +- {{HTTPStatus("303")}} (See Other) レスポンスは常に {{HTTPMethod("GET")}} メソッドを使用するように誘導され、 {{HTTPStatus("307")}} (Temporary Redirect) および {{HTTPStatus("308")}} (Permanent Redirect) は元のリクエストにおいて使用されたメソッドを変更しません。 - {{HTTPStatus("301")}} (Moved Permanently) と {{HTTPStatus("302")}} (Found) は多くの場合はメソッドを変更しませんが、古いユーザーエージェントは変更することがあります (そのため、基本的に結果は不明です)。 これらのステータスコードを持つすべてのレスポンスは、 `Location` ヘッダーを送信します。 From 89ac9949d9917404f95f1cbb61a2d5702fac7277 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8A=E3=82=8B=E3=81=A8=E3=82=8D?= Date: Tue, 3 Oct 2023 10:57:08 +0900 Subject: [PATCH 17/58] fix japanese typo --- files/ja/web/css/using_css_custom_properties/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/ja/web/css/using_css_custom_properties/index.md b/files/ja/web/css/using_css_custom_properties/index.md index f885d13d2dc377..30d4458c8d594d 100644 --- a/files/ja/web/css/using_css_custom_properties/index.md +++ b/files/ja/web/css/using_css_custom_properties/index.md @@ -13,7 +13,7 @@ l10n: カスタムプロパティはカスケードの対象であり、親から値を継承します。 -> **メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテんなークエリーの中では使用できません。 +> **メモ:** 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。 ## 基本的な使用方法 From 6b31233ddab5d9d751fcc9bfb7cd55f716e6b14b Mon Sep 17 00:00:00 2001 From: yyss Date: Sat, 30 Sep 2023 12:42:34 +0900 Subject: [PATCH 18/58] =?UTF-8?q?Firefox=20117=20for=20developers=E3=82=92?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sep 5, 2023の英語版に対応。 --- files/ja/mozilla/firefox/releases/117/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/mozilla/firefox/releases/117/index.md b/files/ja/mozilla/firefox/releases/117/index.md index 0e33f0f1b9dd47..943e6eaea2165b 100644 --- a/files/ja/mozilla/firefox/releases/117/index.md +++ b/files/ja/mozilla/firefox/releases/117/index.md @@ -2,7 +2,7 @@ title: Firefox 117 for developers slug: Mozilla/Firefox/Releases/117 l10n: - sourceCommit: 7c26f7e821b1793de804fb9a7744ebf3fafe0dc3 + sourceCommit: 062f3961a28054b72c7d406b46867c87208a68b0 --- {{FirefoxSidebar}} @@ -21,8 +21,8 @@ l10n: - [`math-style`](/ja/docs/Web/CSS/math-style) および [`math-depth`](/ja/docs/Web/CSS/math-depth) プロパティをサポートしました。また、[`font-size`](/ja/docs/Web/CSS/font-size#values) プロパティの値 `math` もサポートしました ([Firefox bug 1845516](https://bugzil.la/1845516))。 -- [`contain-intrinsic-size: auto none;`](/ja/docs/Web/CSS/contain-intrinsic-size) の構文をサポートしました。これは、可能であれば最後に記憶した要素のサイズを使用しますが、それ以外の場合は `contain-intrinsic-size: none` にフォールバックすることができます。 - これはグリッドや段組みなど、可変サイズを使用するレイアウトで有益です ([Firefox bug 1835813](https://bugzil.la/1835813))。 +- [`contain-intrinsic-size: auto none`](/ja/docs/Web/CSS/contain-intrinsic-size) の構文をサポートしました。これは、可能であれば最後に記憶した要素のサイズを使用しますが、それ以外の場合は `contain-intrinsic-size: none` にフォールバックすることができます。 + これはグリッドや段組みのレイアウトで、要素を高さ 0px の代わりに、内容物がないかのようにレイアウトすることに役立ちます ([Firefox bug 1835813](https://bugzil.la/1835813))。 ### JavaScript From fb88ceeb4ef559eb59c8ac38cc9eb83f60b13483 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 23:03:47 +0900 Subject: [PATCH 19/58] [ko]: add index.md for `web/glossary/color_wheel` (#15835) [revise]: revise feedback --- files/ko/glossary/color_wheel/index.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 files/ko/glossary/color_wheel/index.md diff --git a/files/ko/glossary/color_wheel/index.md b/files/ko/glossary/color_wheel/index.md new file mode 100644 index 00000000000000..84a3a91c0965a3 --- /dev/null +++ b/files/ko/glossary/color_wheel/index.md @@ -0,0 +1,25 @@ +--- +title: 색상환 (Color wheel) +slug: Glossary/Color_wheel +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**색상환(color wheel 또는 color circle)** 은 원 안에 색상 팔레트를 나타내는 차트입니다. 색상환은 원의 중심인 원점으로부터의 '각도'와 '거리'라는 두 극좌표로 식별되는 색상을 표시할 수 있습니다. + +색상환은 [`hsl()`](/ko/docs/Web/CSS/color_value/hsl), [`hwb()`](/ko/docs/Web/CSS/color_value/hwb) 또는 [`lch()`](/ko/docs/Web/CSS/color_value/lch)와 같이 극좌표나 원통형 좌표로 표현된 색상을 비교할 때 편리합니다. + +이러한 경우, '보색'은 동일한 직경의 반대편에서 주로 발견됩니다. 마찬가지로, '단색 색상'(동일한 '톤'이지만 다른 '음영'의 색상)은 동일한 반경에서 위치하고, '삼중 색상'(색상한 주위에 균일한 간격으로 배치되어 함께 잘 어울리는 색상으로 이어지는 세 가지 색상)도 쉽게 찾을 수 있습니다. + +색상환은 실생활에서 다양한 색상 중에서 선택하려고 할 때 사용됩니다. 예를 들어, 벽 페인트를 선택하거나 가구의 색상을 선택할 때입니다. + +디지털 세계에선, macOS의 기본 색상환([![macOS Monterey의 기본 색상 선택기](color_wheel_macos.png)](/ko/docs/Glossary/Color_wheel/color_wheel_macos.png))처럼, '색상 선택기'에서 색상환이 사용됩니다. + +## 같이 보기 + +- [색상 이론과 색상환](https://www.canva.com/colors/color-wheel/) +- Better Homes & Gardens의 [색상환을 사용하여 완벽한 색상 팔레트를 선택하는 방법](https://www.bhg.com/decorating/color/basics/color-wheel-color-chart/) +- 위키백과의 [색상환](https://en.wikipedia.org/wiki/Color_wheel) +- [``](/ko/docs/Web/CSS/color_value) (CSS 색상 유형) From 9b79d343b6447bfe742131d45af7400c60c6111d Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 23:04:59 +0900 Subject: [PATCH 20/58] [ko]: add index.md for `web/glossary/distributed_denial_of_service` (#15923) [revise]: revise feedback --- .../distributed_denial_of_service/index.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 files/ko/glossary/distributed_denial_of_service/index.md diff --git a/files/ko/glossary/distributed_denial_of_service/index.md b/files/ko/glossary/distributed_denial_of_service/index.md new file mode 100644 index 00000000000000..bb32485d2a39a5 --- /dev/null +++ b/files/ko/glossary/distributed_denial_of_service/index.md @@ -0,0 +1,31 @@ +--- +title: 분산 서비스 거부 (Distributed Denial of Service, DDoS) +slug: Glossary/Distributed_Denial_of_Service +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +분산 서비스 거부(Distributed Denial of Service, DDoS)는 서버 리소스를 마비시키고 합법적인 사용자를 차단하기 위해, 손상된 다수의 시스템이 단일 대상을 공격하도록 만드는 공격입니다. + +일반적으로 많은 사람들이 다수의 봇을 사용해 은행이나 신용 카드 결제 게이트웨이와 같은 유명 웹 {{glossary("server","서버")}}를 공격합니다. DDoS는 컴퓨터 네트워크 및 CPU 리소스 관리와 관련이 있습니다. + +일반적인 DDoS 공격에서, 공격자는 하나의 컴퓨터 시스템의 취약점을 악용하고 이 컴퓨터를 DDoS 마스터로 만드는 것부터 시작합니다. 봇마스터라고 알려지는 공격 마스터는 다른 취약한 시스템을 식별하고 맬웨어로 감염시킵니다. 결국 공격자는 제어되는 기계에 지정된 대상에 공격하도록 지시합니다. + +DDoS 공격에는 두 가지 유형이 있습니다. 네트워크 중심 공격(대역폭을 사용하여 서비스에 과부하) 및 애플리케이션 계층 공격(애플리케이션 호출로 서비스 또는 데이터베이스에 과부하)이 있습니다. 대상에 대한 데이터 오버플로로 인해 대상 시스템이 포화되어 합법적인 트래픽에 응답할 수 없거나 매우 느리게 응답합니다(따라서 '서비스 거부'라는 이름이 붙었습니다). 감염된 컴퓨터의 소유자는 일반적으로 자신의 컴퓨터가 손상되었다는 사실을 알지 못하고, 서비스 손실도 겪게 됩니다. + +침입자의 통제를 받는 컴퓨터를 좀비 또는 봇이라고 합니다. 공동 감염된 컴퓨터의 네트워크는 봇넷 또는 좀비 군대로 알려져 있습니다. Kaspersky Labs과 Symantec은 스팸, 바이러스, 웜이 아닌 봇넷을 인터넷 보안에 대한 가장 큰 위협으로 식별했습니다. + +미국 컴퓨터 비상 준비팀(US-CERT)은 서비스 거부 공격의 증상을 다음과 같이 정의합니다. + +- 비정상적으로 느린 네트워크 성능(파일 열기 또는 웹 사이트 접근) +- 특정 웹사이트를 이용할 수 없음 +- 어떤 웹사이트에도 접속할 수 없음 +- 스팸 이메일 수신량이 급격히 증가함(이러한 유형의 DoS 공격은 이메일 폭탄으로 간주됨) +- 무선 또는 유선 인터넷 연결 끊김 +- 웹이나 인터넷 서비스에 대한 장기간의 접근 거부 + +## 같이 보기 + +- 위키백과의 [서비스 거부 공격](https://en.wikipedia.org/wiki/Denial-of-service_attack) From 3f9043a08b2d83895e29dca67d90b0cb0b536f04 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Tue, 3 Oct 2023 23:06:09 +0900 Subject: [PATCH 21/58] [ko]: add index.md for `web/glossary/dmz` (#15885) [revise]: revise feedback --- files/ko/glossary/dmz/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 files/ko/glossary/dmz/index.md diff --git a/files/ko/glossary/dmz/index.md b/files/ko/glossary/dmz/index.md new file mode 100644 index 00000000000000..f41187a8a26026 --- /dev/null +++ b/files/ko/glossary/dmz/index.md @@ -0,0 +1,16 @@ +--- +title: 비무장지대 (DeMilitarized Zone, DMZ) +slug: Glossary/DMZ +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**비무장지대(DeMilitarized Zone, DMZ)** 는 내부 네트워크(기업 또는 개인)과 신뢰할 수 없는 외부 세계(일반적으로 인터넷) 사이에 격리된 보안 인터페이스를 제공하는 방법입니다. + +정의된 특정 엔드포인트만 노출하며, {{Glossary('node/networking', '외부 노드')}}에서 내부 네트워크에 대한 접근을 거부합니다. + +## 같이 보기 + +- 위키백과의 [DMZ]() From 39e8de8b616ce01ea37f22c0b0fb6fcd0536e7d5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 00:38:00 +0900 Subject: [PATCH 22/58] =?UTF-8?q?2023/03/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/analysernode/fttaudiodata_en.svg | 1 + files/ja/web/api/analysernode/index.md | 154 +++++++++--------- 2 files changed, 79 insertions(+), 76 deletions(-) create mode 100644 files/ja/web/api/analysernode/fttaudiodata_en.svg diff --git a/files/ja/web/api/analysernode/fttaudiodata_en.svg b/files/ja/web/api/analysernode/fttaudiodata_en.svg new file mode 100644 index 00000000000000..ca6bc7304ff1cf --- /dev/null +++ b/files/ja/web/api/analysernode/fttaudiodata_en.svg @@ -0,0 +1 @@ +t0 1 2 3 4t0 1 2 3 4AnalyserNodeFFT変更なしの出力周波数データ \ No newline at end of file diff --git a/files/ja/web/api/analysernode/index.md b/files/ja/web/api/analysernode/index.md index 3f01b7b0b0a638..8ee6f939b8415c 100644 --- a/files/ja/web/api/analysernode/index.md +++ b/files/ja/web/api/analysernode/index.md @@ -1,150 +1,152 @@ --- title: AnalyserNode slug: Web/API/AnalyserNode +l10n: + sourceCommit: 2c9f6f0688db9b4437f998321044fdd22afed546 --- {{APIRef("Web Audio API")}} -**`AnalyserNode`** インタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。{{domxref("AudioNode")}}は、入力から出力の流れにおいて audio stream そのものは変えず、データ加工や音声の可視化をすることができます。 +**`AnalyserNode`** インターフェイスはリアルタイム時間領域/周波数領域分析情報を表現します。 {{domxref("AudioNode")}} は、入力から出力の流れにおいて音声ストリームそのものは変えず、データ加工や音声の可視化をすることができます。 -１つの`AnalyzerNode`は必ず１つの入力と出力を持ちます。出力先がなくても AnalyzerNode は問題ありません。 +1 つの `AnalyserNode` は必ず 1 つの入力と出力を持ちます。出力先がなくてもこのノードは問題ありません。 -![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](fttaudiodata_en.svg) +![音声ストリームを変更することなく、ノードは FFT を使用して、それに関連する周波数と時刻のデータを取得することができます。](fttaudiodata_en.svg) + +{{InheritanceDiagram}} - + - - + + - - + + - - + + - +
Number of inputs入力の数 1
Number of outputs1 (but may be left unconnected)出力の数1 （ただし未接続のままになる）
Channel count mode"explicit"チャンネル数モード"max"
Channel count1チャンネル数2
Channel interpretationチャンネルの解釈 "speakers"
-## Inheritance - -このインタフェースは以下のインタフェースと継承関係にあります。: +## コンストラクター -{{InheritanceDiagram}} +- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} + - : `AnalyserNode` オブジェクトの新しいインスタンスを生成します。 -## Properties +## インスタンスプロパティ -_以下は、{{domxref("AudioNode")}}からプロパティを継承する_. +_親である {{domxref("AudioNode")}} から継承したプロパティもあります_。 - {{domxref("AnalyserNode.fftSize")}} - - : 符号なしの long 型の値で FFT（[高速フーリエ変換](http://en.wikipedia.org/wiki/Fast_Fourier_transform)）において周波数領域を決定するために使われているサイズを表している。 -- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}} - - : 符号なしの long 型で FFT（高速フーリエ変換）のサイズの半分の値。一般的に音声再生時の可視化に用いられる。 + - : 符号なし long 型の値で、 FFT（[高速フーリエ変換](http://en.wikipedia.org/wiki/Fast_Fourier_transform)）において周波数領域を決定するために使われているサイズを表します。 +- {{domxref("AnalyserNode.frequencyBinCount")}} {{ReadOnlyInline}} + - : 符号なし long 型の値で、 FFT のサイズの半分の値。一般的に音声再生時の可視化に用いられます。 - {{domxref("AnalyserNode.minDecibels")}} - - : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。 + - : double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最小値を指定します。 - {{domxref("AnalyserNode.maxDecibels")}} - - : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。 + - : double 型の値で、 unsigned byte 型の値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表します。一般的に、この値は、 `getByteFrequencyData()` の使用時の結果の範囲の最大値を指定します。 - {{domxref("AnalyserNode.smoothingTimeConstant")}} - - : 分析フレームの平均間隔を表す double 型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。 + - : double 型の値で、分析フレームの平均間隔を表します。基本的に、時間的にスペクトルを平滑化させるのに用いられます。 -## Methods +## インスタンスメソッド -_{{domxref("AudioNode")}}からメソッドを継承する_. +_親である {{domxref("AudioNode")}} から継承したメソッドもあります_。 - {{domxref("AnalyserNode.getFloatFrequencyData()")}} - - : 周波数データを引数として渡された Float32Array 配列へコピーする。 - - - + - : 現在の周波数データを、引数として渡された {{jsxref("Float32Array")}} 配列へコピーします。 - {{domxref("AnalyserNode.getByteFrequencyData()")}} - - : 周波数データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。 - - - + - : 現在の周波数データを、引数として渡された {{jsxref("Uint8Array")}} 配列（unsigned byte 配列）へコピーします。 - {{domxref("AnalyserNode.getFloatTimeDomainData()")}} - - : 音声波形データを引数として渡された Float32Array 配列へコピーする。 + - : 現在の波形または時間領域データを、渡された {{jsxref("Float32Array")}} 配列へコピーします。 - {{domxref("AnalyserNode.getByteTimeDomainData()")}} - - : 音声波形データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。 - -## Examples + - : 現在の波形または時間領域データを、引数として渡された {{jsxref("Uint8Array")}} 配列（unsigned byte 配列）へコピーします。 -> **メモ:** オーディオヴィジュアライゼーションのための Web Audio API を使ったヴィジュアライゼーションガイドを御覧ください。 +## 例 -### Basic usage +> **メモ:** 音声の視覚化を作成するための詳細は、[ウェブオーディオ API の視覚化](/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)のガイドを参照してください。 -以下の例では、AudioContext から１つの AnalyserNode を作成しており、requestAnimationFrame と\へ繰り返し時間波形データを繰り返し集め現入力を"オシロスコープスタイル"で出力し描画している。 +### 基本的な使い方 -より多くのサンプルは 我々の [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) デモにご覧頂けます。 (see [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205) for relevant code). +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://mdn.github.io/webaudio-examples/voice-change-o-matic/) のデモを調べてください（関連するコードは [app.js の 108-193 行目](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); -var analyser = audioCtx.createAnalyser(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - ... +// … +const analyser = audioCtx.createAnalyser(); analyser.fftSize = 2048; -var bufferLength = analyser.frequencyBinCount; -var dataArray = new Uint8Array(bufferLength); + +const bufferLength = analyser.frequencyBinCount; +const dataArray = new Uint8Array(bufferLength); analyser.getByteTimeDomainData(dataArray); -// draw an oscilloscope of the current audio source +// Connect the source to be analysed +source.connect(analyser); -function draw() { +// Get a canvas defined with ID "oscilloscope" +const canvas = document.getElementById("oscilloscope"); +const canvasCtx = canvas.getContext("2d"); - drawVisual = requestAnimationFrame(draw); +// draw an oscilloscope of the current audio source - analyser.getByteTimeDomainData(dataArray); +function draw() { + requestAnimationFrame(draw); - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; - canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + analyser.getByteTimeDomainData(dataArray); - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, canvas.width, canvas.height); - canvasCtx.beginPath(); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; - var sliceWidth = WIDTH * 1.0 / bufferLength; - var x = 0; + canvasCtx.beginPath(); - for(var i = 0; i < bufferLength; i++) { + const sliceWidth = (canvas.width * 1.0) / bufferLength; + let x = 0; - var v = dataArray[i] / 128.0; - var y = v * HEIGHT/2; + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * canvas.height) / 2; - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } - x += sliceWidth; - } + x += sliceWidth; + } - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} - draw(); +draw(); ``` -## Specifications +## 仕様書 {{Specifications}} -## Browser compatibility +## ブラウザーの互換性 -{{Compat("api.AnalyserNode")}} +{{Compat}} -## See also +## 関連情報 -- [Using the Web Audio API](/ja/docs/Web_Audio_API/Using_Web_Audio_API) +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From abddcef22a7f7d4ca9e5f9285330c70b9d5481d8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 09:50:01 +0900 Subject: [PATCH 23/58] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/analysernode/analysernode/index.md | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 files/ja/web/api/analysernode/analysernode/index.md diff --git a/files/ja/web/api/analysernode/analysernode/index.md b/files/ja/web/api/analysernode/analysernode/index.md new file mode 100644 index 00000000000000..fbe3a88a7ceaf1 --- /dev/null +++ b/files/ja/web/api/analysernode/analysernode/index.md @@ -0,0 +1,58 @@ +--- +title: "AnalyserNode: AnalyserNode() コンストラクター" +short-title: AnalyserNode() +slug: Web/API/AnalyserNode/AnalyserNode +l10n: + sourceCommit: 2c9f6f0688db9b4437f998321044fdd22afed546 +--- + +{{APIRef("'Web Audio API'")}} + +**`AnalyserNode()`** は[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) のコンストラクターで、新しい {{domxref("AnalyserNode")}} オブジェクトインスタンスを生成します。 + +## 構文 + +```js-nolint +new AnalyserNode(context) +new AnalyserNode(context, options) +``` + +### 引数 + +- `context` + - : {{domxref("AudioContext")}} または {{domxref("OfflineAudioContext")}} への参照です。 +- `options` {{optional_inline}} + + - : 以下のプロパティを持つオブジェクトです。すべて省略可能です。 + + - `fftSize` + - : [周波数領域](https://ja.wikipedia.org/wiki/周波数領域)を解析するための [FFT](https://ja.wikipedia.org/wiki/高速フーリエ変換) の望ましい初期サイズです。 + 既定値は `2048` です。 + - `maxDecibels` + - : FFT 解析のための [dB](https://ja.wikipedia.org/wiki/デシベル) 単位の望ましい初期最大出力です。 + 既定値は `-30` です。 + - `minDecibels` + - : FFT 解析のための dB 単位の望ましい初期最小出力です。 + 既定値は `-100` です。 + - `smoothingTimeConstant` + - : FFT 解析のための望ましい初期スムーズ化定数です。既定値は `0.8` です。 + - `channelCount` + - : ノードへの任意の入力への[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)接続時に使用するチャンネル数を決定するための整数を表します。（詳しくは {{domxref("AudioNode.channelCount")}} を参照してください。）Its usage and precise definition depend on the value of `channelCountMode`. + 使い方や正確な定義は `channelCountMode` の値に依存します。 + - `channelCountMode` + - : ノードの入出力間でチャンネルを一致させる方法を記述する[列挙](/ja/docs/Glossary/Enumerated)値を表します。（既定など、詳細は{{domxref("AudioNode.channelCountMode")}}を参照してください。） + - `channelInterpretation` + - : チャンネルの意味を記述する列挙値を表します。この解釈は音声の[アップミキシングとダウンミキシング](/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing)がどのように行われるかを定義します。 + 使用可能な値は `"speakers"` または `"discrete"` です。（既定値など、詳しくは {{domxref("AudioNode.channelCountMode")}} を参照してください。） + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("BaseAudioContext.createAnalyser()")}}、同様のファクトリーメソッド From a79f95a9a4f8269de0bd995bd244b7e66dff223e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 10:54:20 +0900 Subject: [PATCH 24/58] =?UTF-8?q?2023/05/19=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/analysernode/fftsize/index.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 files/ja/web/api/analysernode/fftsize/index.md diff --git a/files/ja/web/api/analysernode/fftsize/index.md b/files/ja/web/api/analysernode/fftsize/index.md new file mode 100644 index 00000000000000..bfce2bc2a8349d --- /dev/null +++ b/files/ja/web/api/analysernode/fftsize/index.md @@ -0,0 +1,88 @@ +--- +title: "AnalyserNode: fftSize プロパティ" +short-title: fftSize +slug: Web/API/AnalyserNode/fftSize +l10n: + sourceCommit: 1c2fd1d981acb52836d3701f52ac46238972b83b +--- + +{{APIRef("Web Audio API")}} + +**`fftSize`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、このプロパティは符号なし long 値で、周波数領域データを取得するために[高速フーリエ変換](https://ja.wikipedia.org/wiki/高速フーリエ変換) (FFT) を行う際に使用するウィンドウサイズをサンプル数で表します。 + +## 値 + +符号なし整数で、FFT のウィンドウサイズをサンプル数で表します。値を大きくすると、周波数領域での精度は高くなりますが、振幅領域での精度は低くなります。 + +2 のべき乗で、 2^5 と 2^15 の間でなければなりません。すなわち `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, `32768` のいずれかです。既定値は `2048` です。 + +### 例外 + +- `IndexSizeError` {{domxref("DOMException")}} + - : 設定した値が 2 のべき乗でないか、許容範囲外である場合に発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 2048; +const bufferLength = analyser.frequencyBinCount; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// draw an oscilloscope of the current audio source + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + + canvasCtx.beginPath(); + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * HEIGHT) / 2; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From 2d0a6fb9a2c2cfe267d6da6f04897bd6fd2cfea4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 11:03:20 +0900 Subject: [PATCH 25/58] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../analysernode/frequencybincount/index.md | 74 +++++++++++++++++ .../web/api/analysernode/maxdecibels/index.md | 79 ++++++++++++++++++ .../web/api/analysernode/mindecibels/index.md | 76 +++++++++++++++++ .../smoothingtimeconstant/index.md | 81 +++++++++++++++++++ 4 files changed, 310 insertions(+) create mode 100644 files/ja/web/api/analysernode/frequencybincount/index.md create mode 100644 files/ja/web/api/analysernode/maxdecibels/index.md create mode 100644 files/ja/web/api/analysernode/mindecibels/index.md create mode 100644 files/ja/web/api/analysernode/smoothingtimeconstant/index.md diff --git a/files/ja/web/api/analysernode/frequencybincount/index.md b/files/ja/web/api/analysernode/frequencybincount/index.md new file mode 100644 index 00000000000000..d25e76e84ee374 --- /dev/null +++ b/files/ja/web/api/analysernode/frequencybincount/index.md @@ -0,0 +1,74 @@ +--- +title: "AnalyserNode: frequencyBinCount プロパティ" +short-title: frequencyBinCount +slug: Web/API/AnalyserNode/frequencyBinCount +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{APIRef("Web Audio API")}} + +**`frequencyBinCount`** は {{domxref("AnalyserNode")}} インターフェイスの読み取り専用プロパティで、 {{domxref("AudioContext")}} の {{domxref("BaseAudioContext.sampleRate", "sampleRate")}} で利用可能なデータポイントの総数が格納されます。これは {{domxref("AnalyserNode.fftSize")}} の `value` の半分です。 2 つのメソッドのインデックスは、0 から[ナイキスト周波数](https://ja.wikipedia.org/wiki/ナイキスト周波数)の間で、それらが表す周波数と線形関係にあります。 + +## 値 + +符号なし整数で、指定された `TypedArray` にコピーされる {{domxref("AnalyserNode.getByteFrequencyData()")}} と {{domxref("AnalyserNode.getFloatFrequencyData()")}} が値の数に等しいものです。 + +[高速フーリエ変換](https://ja.wikipedia.org/wiki/高速フーリエ変換)を定義する方法に関する技術的な理由から，常に {{domxref("AnalyserNode.fftSize")}} の半分の値になります．したがって、 `16`, `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384` のうちのいずれかになります。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5 - 1; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/maxdecibels/index.md b/files/ja/web/api/analysernode/maxdecibels/index.md new file mode 100644 index 00000000000000..d7fd4c971f8062 --- /dev/null +++ b/files/ja/web/api/analysernode/maxdecibels/index.md @@ -0,0 +1,79 @@ +--- +title: "AnalyserNode: maxDecibels プロパティ" +short-title: maxDecibels +slug: Web/API/AnalyserNode/maxDecibels +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{APIRef("Web Audio API")}} + +**`maxDecibels`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最大出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最大値を指定します。 + +## 値 + +double 値で、 FFT 解析データを拡大縮小する際の最大[デシベル](https://ja.wikipedia.org/wiki/デシベル)値を表します。`0` dB は使用可能な最も大きな音、`-10` dB はその 10 分の 1 などです。既定値は `-30` dB です。 + +`getByteFrequencyData()` からデータを取得した場合、振幅が `maxDecibels` 以上の周波数は `255` として返されます。 + +### 例外 + +- `IndexSizeError` {{domxref("DOMException")}} + - : `AnalyserNode.minDecibels` 以下の値が設定されている場合に発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/mindecibels/index.md b/files/ja/web/api/analysernode/mindecibels/index.md new file mode 100644 index 00000000000000..671d2255e22a08 --- /dev/null +++ b/files/ja/web/api/analysernode/mindecibels/index.md @@ -0,0 +1,76 @@ +--- +title: "AnalyserNode: minDecibels プロパティ" +short-title: minDecibels +slug: Web/API/AnalyserNode/minDecibels +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`minDecibels`** は {{domxref("AnalyserNode")}} インターフェイスのプロパティで、符号なしバイト値に変換するための、 FFT 分析データの拡大縮小する範囲の最小出力値を表す double 値です。基本的には、 `getByteFrequencyData()` を使用したときの結果の範囲の最小値を指定します。 + +## 値 + +double 値で、 FFT 解析データを拡大縮小する際の最小[デシベル](https://ja.wikipedia.org/wiki/デシベル)値を表します。`0` dB は使用可能な最も小さな音、`-10` dB はその 10 分の 1 などです。既定値は `-100` dB です。 + +`getByteFrequencyData()` からデータを取得した場合、振幅が `minDecibels` 以下の周波数は `0` として返されます。 + +> **メモ:** `AnalyserNode.maxDecibels` より大きい値を設定すると、 `INDEX_SIZE_ERR` 例外が発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/ja/web/api/analysernode/smoothingtimeconstant/index.md b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md new file mode 100644 index 00000000000000..46112d53a6da22 --- /dev/null +++ b/files/ja/web/api/analysernode/smoothingtimeconstant/index.md @@ -0,0 +1,81 @@ +--- +title: "AnalyserNode: smoothingTimeConstant プロパティ" +short-title: smoothingTimeConstant +slug: Web/API/AnalyserNode/smoothingTimeConstant +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`smoothingTimeConstant`** は {{ domxref("AnalyserNode") }} インターフェイスのプロパティで、最後の分析フレームとの平均化定数を表す double 値です。これは基本的に、現在のバッファーと `AnalyserNode` が処理した最後のバッファーとの間の平均であり、結果として、よりスムーズな時間による値の変化の集合になります。 + +## 値 + +doublet で、 `0` から `1` までの範囲内です（`0` は平均時間ではありません）。既定値は `0.8` です。 + +0 が設定されている場合、平均化は行われませんが、1 の値は「値を計算する間に前回と現在のバッファーがかなりオーバーラップする」ことを意味しており、実質的に {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 呼び出し間の変化を滑らかにします。 + +専門用語では、[ブラックマンウィンドウ](https://webaudio.github.io/web-audio-api/#blackman-window)を適用し、時間による値の変化を平滑化します。ほとんどの場合、既定値で十分です。 + +> **メモ:** 0～1 の範囲の外の値を設定するには、 `INDEX_SIZE_ERR` 例外が発生します。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +`smoothingTimeConstant()` が持つ効果に興味がある場合は、上記の例を複製して、代わりに `analyser.smoothingTimeConstant = 0;` を設定してみてください。値の変化がより激しくなることがわかるでしょう。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); +analyser.minDecibels = -90; +analyser.maxDecibels = -10; +analyser.smoothingTimeConstant = 0.85; + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From cbdc7af1e360bdd863674eda93fad28af43bbfbb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 11:36:27 +0900 Subject: [PATCH 26/58] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../getbytefrequencydata/index.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 files/ja/web/api/analysernode/getbytefrequencydata/index.md diff --git a/files/ja/web/api/analysernode/getbytefrequencydata/index.md b/files/ja/web/api/analysernode/getbytefrequencydata/index.md new file mode 100644 index 00000000000000..39179fd7aadd46 --- /dev/null +++ b/files/ja/web/api/analysernode/getbytefrequencydata/index.md @@ -0,0 +1,88 @@ +--- +title: "AnalyserNode: getByteFrequencyData() メソッド" +short-title: getByteFrequencyData() +slug: Web/API/AnalyserNode/getByteFrequencyData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getByteFrequencyData()`** は {{domxref("AnalyserNode")}} インターフェースのメソッドで、渡された {{jsxref("Uint8Array")}} （符号なしバイト配列）に現在の周波数データをコピーします． + +周波数データは、 0 から 255 まで の範囲の整数で構成されます。 + +配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。 + +配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +## 構文 + +```js-nolint +getByteFrequencyData(array) +``` + +### 引数 + +- `array` + - : 周波数領域データがコピーされる {{jsxref("Uint8Array")}}。無音のサンプルの場合、値は `-Infinity` です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 256; +const bufferLength = analyser.frequencyBinCount; +console.log(bufferLength); +const dataArray = new Uint8Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + + analyser.getByteFrequencyData(dataArray); + + canvasCtx.fillStyle = "rgb(0, 0, 0)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + const barWidth = (WIDTH / bufferLength) * 2.5; + let barHeight; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + barHeight = dataArray[i]; + + canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`; + canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2); + + x += barWidth + 1; + } +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From 7d9a83e2241a2b358d66bbcf4b1a780a4eaebe9a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 11:50:15 +0900 Subject: [PATCH 27/58] =?UTF-8?q?2023/06/17=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../getbytetimedomaindata/index.md | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 files/ja/web/api/analysernode/getbytetimedomaindata/index.md diff --git a/files/ja/web/api/analysernode/getbytetimedomaindata/index.md b/files/ja/web/api/analysernode/getbytetimedomaindata/index.md new file mode 100644 index 00000000000000..3c47397d68375e --- /dev/null +++ b/files/ja/web/api/analysernode/getbytetimedomaindata/index.md @@ -0,0 +1,92 @@ +--- +title: "AnalyserNode: getByteTimeDomainData() メソッド" +short-title: getByteTimeDomainData() +slug: Web/API/AnalyserNode/getByteTimeDomainData +l10n: + sourceCommit: 7cf0e50d0acfaeba8fd2fa243f9d5612b61d408c +--- + +{{ APIRef("Web Audio API") }} + +**`getByteTimeDomainData()`** は {{ domxref("AnalyserNode") }} インターフェイスのメソッドで、渡される {{jsxref("Uint8Array")}} （符号なしバイト配列）に、現在の波形または時間領域のデータをコピーします。 + +配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +## 構文 + +```js-nolint +getByteTimeDomainData(array) +``` + +### 引数 + +- `array` + - : 時間領域データのコピー先の {{jsxref("Uint8Array")}} です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 2048; +const bufferLength = analyser.fftSize; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// draw an oscilloscope of the current audio source +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + canvasCtx.beginPath(); + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] / 128.0; + const y = (v * HEIGHT) / 2; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(WIDTH, HEIGHT / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From be5e1e604b0e904359c05fc3f7889d2188c39026 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 11:58:48 +0900 Subject: [PATCH 28/58] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../getfloatfrequencydata/index.md | 128 ++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/ja/web/api/analysernode/getfloatfrequencydata/index.md diff --git a/files/ja/web/api/analysernode/getfloatfrequencydata/index.md b/files/ja/web/api/analysernode/getfloatfrequencydata/index.md new file mode 100644 index 00000000000000..820f6ca41bdb36 --- /dev/null +++ b/files/ja/web/api/analysernode/getfloatfrequencydata/index.md @@ -0,0 +1,128 @@ +--- +title: "AnalyserNode: getFloatFrequencyData() メソッド" +short-title: getFloatFrequencyData() +slug: Web/API/AnalyserNode/getFloatFrequencyData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getFloatFrequencyData()`** は {{domxref("AnalyserNode")}} インターフェイスのメソッドで、渡された {{jsxref("Float32Array")}} 配列に現在の周波数データをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。 + +配列の各項目は、固有の周波数のデシベル値を表します。周波数はサンプルレートの 0 から 1/2 まで直線的に広がります。例えば、サンプルレートが `48000` Hz の場合、配列の最後の項目は `24000` Hz のデシベル値を表します。 + +より高いパフォーマンスが必要で、精度を気にしない場合は、代わりに {{jsxref("Uint8Array")}} で動作する {{domxref("AnalyserNode.getByteFrequencyData()")}} を使用することができます。 + +## 構文 + +```js-nolint +getFloatFrequencyData(array) +``` + +### 引数 + +- `array` + - : 周波数領域データのコピー先となる {{jsxref("Float32Array")}} です。無音のサンプルの場合、値は `-Infinity` です。 + 配列の持つ要素が {{domxref("AnalyserNode.frequencyBinCount")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合は、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +```js +const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +// Float32Array should be the same length as the frequencyBinCount +const myDataArray = new Float32Array(analyser.frequencyBinCount); +// fill the Float32Array with data returned from getFloatFrequencyData() +analyser.getFloatFrequencyData(myDataArray); +``` + +### スペクトルの描画 + +次の例では、 {{domxref("AudioContext")}} で {{domxref("MediaElementAudioSourceNode")}} を作成し、 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 + +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```html + + + + +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From 4bad4886843dd9f80ccc0b37fecaeba1ab31ccf8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 12:02:15 +0900 Subject: [PATCH 29/58] =?UTF-8?q?2023/04/06=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../getfloattimedomaindata/index.md | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/ja/web/api/analysernode/getfloattimedomaindata/index.md diff --git a/files/ja/web/api/analysernode/getfloattimedomaindata/index.md b/files/ja/web/api/analysernode/getfloattimedomaindata/index.md new file mode 100644 index 00000000000000..2f3de8d58b46c3 --- /dev/null +++ b/files/ja/web/api/analysernode/getfloattimedomaindata/index.md @@ -0,0 +1,89 @@ +--- +title: "AnalyserNode: getFloatTimeDomainData() メソッド" +short-title: getFloatTimeDomainData() +slug: Web/API/AnalyserNode/getFloatTimeDomainData +l10n: + sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8 +--- + +{{ APIRef("Web Audio API") }} + +**`getFloatTimeDomainData()`** は {{domxref("AnalyserNode")}} 渡された　{{jsxref("Float32Array")}}　配列に、現在の波形、つまり時間領域のデータをコピーします。配列の各値はサンプルで、それぞれの時点における信号の大きさです。 + +## 構文 + +```js-nolint +getFloatTimeDomainData(array) +``` + +### 引数 + +- `array` + - : 時間領域データのコピー先となる {{jsxref("Float32Array")}} です。 + 配列の持つ要素が {{domxref("AnalyserNode.fftSize")}} より少なかった場合、余分な要素は削除されます。必要以上の要素があった場合、余分な要素は無視されます。 + +### 返値 + +なし ({{jsxref("undefined")}})。 + +## 例 + +次の例では、 {{domxref("AudioContext")}} で `AnalyserNode` を作成し、 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} と {{htmlelement("canvas")}} で時刻領域のデータを繰り返し収集し、現在の音声入力の「オシロスコープ」出力を描画する基本的な使用方法を示します。 +より完全な応用例/情報については、 [Voice-change-O-matic](https://github.com/mdn/webaudio-examples/tree/main/voice-change-o-matic) のデモを調べてください（関連するコードは [app.js の 108 ～ 193 行目](https://github.com/mdn/webaudio-examples/blob/main/voice-change-o-matic/scripts/app.js#L108-L193)を参照）。 + +```js +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); + +// … + +analyser.fftSize = 1024; +const bufferLength = analyser.fftSize; +console.log(bufferLength); +const dataArray = new Float32Array(bufferLength); + +canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getFloatTimeDomainData(dataArray); + + canvasCtx.fillStyle = "rgb(200, 200, 200)"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = "rgb(0, 0, 0)"; + canvasCtx.beginPath(); + + const sliceWidth = (WIDTH * 1.0) / bufferLength; + let x = 0; + + for (let i = 0; i < bufferLength; i++) { + const v = dataArray[i] * 200.0; + const y = HEIGHT / 2 + v; + + if (i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height / 2); + canvasCtx.stroke(); +} + +draw(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブオーディオ API の使用](/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) From 70db93bd091e69ae62614df2177f2ec97cea7dcf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 12:31:13 +0900 Subject: [PATCH 30/58] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/authentication/index.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/files/ja/web/http/authentication/index.md b/files/ja/web/http/authentication/index.md index 8b74895d9c8165..f2cd269a790a2d 100644 --- a/files/ja/web/http/authentication/index.md +++ b/files/ja/web/http/authentication/index.md @@ -1,6 +1,8 @@ --- title: HTTP 認証 slug: Web/HTTP/Authentication +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} @@ -85,7 +87,7 @@ IANA は[認証方式の一覧](https://www.iana.org/assignments/http-authscheme - **Bearer** - : {{rfc(6750)}} を参照。 OAuth 2.0 で保護されたリソースにアクセスするベアラートークンです。 - **Digest** - - : {{rfc(7616)}} を参照。 Firefox 93 以降は SHA-256 暗号化に対応しています。以前のバージョンでは MD5 ハッシュだけに対応していまました（非推奨）。 + - : {{rfc(7616)}} を参照。 Firefox 93 以降は SHA-256 アルゴリズムに対応しています。以前のバージョンでは MD5 ハッシュだけに対応していまました（非推奨）。 - **HOBA** - : {{rfc(7486)}} 3 章を参照、 HTTP オリジン認証 (**H**TTP **O**rigin-**B**ound **A**uthentication)、電子署名ベース - **Mutual** @@ -118,7 +120,7 @@ Apache サーバー上のディレクトリをパスワードで保護するに `.htaccess` ファイルは通常、次のようになります。 -``` +```apacheconf AuthType Basic AuthName "Access to the staging site" AuthUserFile /path/to/.htpasswd @@ -127,7 +129,7 @@ Require valid-user `.htaccess` ファイルは `.htpasswd` ファイルを参照しており、このファイルの各行にはユーザー名とパスワードをコロン (`:`) で区切って記述されています。実際のパスワードは（この場合は MD5 ベースのハッシュを使用して）[ハッシュ化されている](https://httpd.apache.org/docs/2.4/misc/password_encryptions.html)ので表示できません。なお、必要に応じて `.htpasswd` ファイルの名前を変更することができますが、このファイルには誰にもアクセスできないようにしてください。（Apache は通常 `.ht*` ファイルへのアクセスを禁止するように構成されています）。 -``` +```apacheconf aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ ``` @@ -136,7 +138,7 @@ user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ nginx の場合は、保護する場所とパスワードで保護された領域に名前を指定する `auth_basic` ディレクティブを指定する必要があります。`auth_basic_user_file` ディレクティブは上の Apache の例のように、暗号化されたユーザー資格情報を含む `.htpasswd` ファイルを指します。 -``` +```apacheconf location /status { auth_basic "Access to the staging site"; auth_basic_user_file /etc/apache2/.htpasswd; @@ -147,12 +149,12 @@ location /status { 多くのクライアントでは次のように、ユーザー名とパスワードを含むエンコードされた URL を使用してログインプロンプトを回避できます。 -```http example-bad +```plain example-bad https://username:password@www.example.com/ ``` **これらの URL の使用は推奨されていません。** -Chrome ではセキュリティ上の理由から、URL の `username:password@` 部分が[削除されます](https://bugs.chromium.org/p/chromium/issues/detail?id=82250#c7)。 Firefox ではサイトが実際に認証を要求するかどうかをチェックし、そうでない場合 Firefox はユーザーに「"www\.example\.com" というサイトに "username" というユーザー名でログインしようとしていますが、このウェブサイトは認証を必要としません。これはあなたを騙そうとしている可能性があります。」と警告します。 +Chrome ではセキュリティ上の理由から、URL の `username:password@` 部分が[削除されます](https://crbug.com/82250#c7)。 Firefox ではサイトが実際に認証を要求するかどうかをチェックし、そうでない場合 Firefox はユーザーに「`www.example.com` というサイトに `username` というユーザー名でログインしようとしていますが、このウェブサイトは認証を必要としません。これはあなたを騙そうとしている可能性があります。」と警告します。 ## 関連情報 From f8ca3fdf1be9a45abe0b87ac9eefed7bdb379f5a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 12:46:27 +0900 Subject: [PATCH 31/58] =?UTF-8?q?2023/07/25=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../identifying_resources_on_the_web/index.md | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md index fa4d1541e0472b..46a5312be69384 100644 --- a/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md +++ b/files/ja/web/http/basics_of_http/identifying_resources_on_the_web/index.md @@ -1,13 +1,13 @@ --- title: ウェブ上のリソースの識別 slug: Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 --- {{HTTPSidebar}} -HTTP 要求の対象は「リソース」と呼ばれ、その本質は細かく定義されていません。ドキュメント、写真、その他の何にでもなりえます。それぞれのリソースは、リソースを特定するために HTTP の至るところで使用される Uniform Resource Identifier ({{Glossary("URI")}}) で特定されます。 - -ウェブ上にあるリソースの身元や場所は、たいていひとつの URL (Uniform Resource Locator、 一種の URI) によって与えられます。時々、同一の URI によって身元や場所が与えられない理由が存在します。要求されたリソースについて、クライアントに別の場所へアクセスしてほしい場合に、HTTP では {{HTTPHeader("Alt-Svc")}} ヘッダーを使用します。 +HTTP リクエストの対象は「リソース」と呼ばれ、その本質は細かく定義されていません。文書、写真、その他の何でもなりえます。それぞれのリソースは、リソースを特定するために HTTP の至るところで使用される Uniform Resource Identifier ({{Glossary("URI")}}) で特定されます。 ## URL と URN @@ -15,7 +15,7 @@ HTTP 要求の対象は「リソース」と呼ばれ、その本質は細かく もっとも一般的な URI の形式は Uniform Resource Locator ({{Glossary("URL")}}) であり、*ウェブアドレス*として知られています。 -``` +```url https://developer.mozilla.org https://developer.mozilla.org/ja/docs/Learn/ https://developer.mozilla.org/ja/search?q=URL @@ -23,22 +23,22 @@ https://developer.mozilla.org/ja/search?q=URL ブラウザーのアドレスバーに URL を入力して、URL に関連付けられているページ (リソース) を読み込むように指示できます。 -URL はさまざまな部品で構成されており、必須のものと省略可能なものがあります。より複雑な URL の例は、以下のようになります: +URL はさまざまな部品で構成されており、必須のものと省略可能なものがあります。より複雑な URL として、例えば次のようなものがあります。 -``` +```url http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument ``` ### URN -Uniform Resource Name (URN) は、特定の名前空間内の名前によってリソースを特定する URI です。 +Uniform Resource Name (URN) は、特定の名前空間内における名前によってリソースを特定する URI です。 -``` +```url urn:isbn:9780141036144 urn:ietf:rfc:7230 ``` -2 つの URN は以下のものに対応します: +2 つの URN は以下のものに対応します。 - George Orwell の書籍 Nineteen Eighty-Four - IETF 仕様書 7230、 Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing @@ -48,13 +48,13 @@ urn:ietf:rfc:7230 ### スキームまたはプロトコル - ![Protocol](mdn-url-protocol@x2.png) - - : `http://` はプロトコルです。これは、ブラウザーが使用すべきプロトコルを示します。通常、 HTTP プロトコルまたは安全なバージョンである HTTPS になります。ウェブではこれら 2 つのうちひとつを必要としますが、ブラウザーは `mailto:` (メールクライアントを開く) やファイル転送を扱う `ftp:` といったほかのプロトコルの扱い方も知っていますので、このようなプロトコルが現れても驚かないでください。主なスキームは以下のとおりです: + - : `http://` はプロトコルです。これは、ブラウザーが使用すべきプロトコルを示します。通常、 HTTP プロトコルまたは安全なバージョンである HTTPS になります。ウェブではこれら 2 つのうちひとつを必要としますが、ブラウザーは `mailto:` （メールクライアントを開く）やファイル転送を扱う `ftp:` といったほかのプロトコルの扱い方も知っていますので、このようなプロトコルが現れても驚かないでください。主なスキームは以下のとおりです。 | スキーム | 説明 | | ----------- | ---------------------------------------------------------------- | -| data | [Data URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) | +| data | [Data URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) | | file | ホスト固有のファイル名 | -| ftp | [File Transfer Protocol](/ja/docs/Glossary/FTP) | +| ftp | {{Glossary("FTP","File Transfer Protocol")}} | | http/https | [Hyper text transfer protocol (安全)](/ja/docs/Glossary/HTTP) | | javascript | URL に埋め込まれた JavaScript のコード | | mailto | 電子メールアドレス | @@ -66,28 +66,28 @@ urn:ietf:rfc:7230 ### オーソリティ -- ![Domaine Name](mdn-url-domain@x2.png) - - : `www.example.com` は、名前空間を統制するドメイン名またはオーソリティです。これは、どのウェブサーバーが要求されているかを示します。代わりに {{Glossary("IP address","IP アドレス")}} を直接使用することもできますが、利便性が低いためウェブではあまり使用されません。 +- ![ドメイン名](mdn-url-domain@x2.png) + - : `www.example.com` は、名前空間を統制するドメイン名またはオーソリティです。これは、どのウェブサーバーがリクエストされているかを示します。代わりに {{Glossary("IP address","IP アドレス")}}を直接使用することもできますが、利便性が低いためウェブではあまり使用されません。 -### ポート +### ポート番号 -- ![Port](mdn-url-port@x2.png) - - : ここで `:80` はポートです。これはウェブサーバー内のリソースへアクセスするために使用する、技術上の "出入口" です。ウェブサーバーがリソースへのアクセスを受け入れるために HTTP プロトコルの標準ポート (HTTP では 80、HTTPS では 443) を使用している場合、通常はポートを省略します。それ以外の場合は、ポートが必須です。 +- ![ポート番号](mdn-url-port@x2.png) + - : ここで `:80` はポート番号です。これはウェブサーバー内のリソースへアクセスするために使用する、技術上の「出入口」です。ウェブサーバーがリソースへのアクセスを受け入れるために HTTP プロトコルの標準ポート（HTTP では 80、HTTPS では 443）を使用している場合、通常はポートを省略します。それ以外の場合は、ポートが必須です。 ### パス -- ![Path to the file](mdn-url-path@x2.png) +- ![ファイルへのパス](mdn-url-path@x2.png) - : `/path/to/myfile.html` は、ウェブサーバー内にあるリソースのパスです。初期のウェブではこのようなパスが、ウェブサーバー内の物理的なファイルの場所を表していました。現代のパスはたいてい物理的な実情と関係がない、ウェブサーバーによって制御される抽象的なものになっています。 -### クエリ +### クエリー -- ![Parameters](mdn-url-parameters@x2.png) - - : `?key1=value1&key2=value2` は、ウェブサーバーに提供する追加パラメーターです。このパラメーターは `&` 記号で区切られた、キーと値のペアのリストです。ウェブサーバーは、ユーザーへリソースを返す前に追加の処理を行うために、このパラメーターを使用できます。それぞれのウェブサーバーはパラメーターについて独自の規則を持っており、特定のウェブサーバーがパラメーターを扱う方法を知るために唯一信頼できる方法は、ウェブサーバーの所有者に尋ねることです。 +- ![引数](mdn-url-parameters@x2.png) + - : `?key1=value1&key2=value2` は、ウェブサーバーに提供する追加の引数です。この引数は `&` 記号で区切られた、キーと値のペアのリストです。ウェブサーバーは、ユーザーへリソースを返す前に追加の処理を行うために、この引数を使用できます。それぞれのウェブサーバーは引数について独自の規則を持っており、特定のウェブサーバーが引数を扱う方法を知るために唯一信頼できる方法は、ウェブサーバーの所有者に尋ねることです。 ### フラグメント -- ![Anchor](mdn-url-anchor@x2.png) - - : `#SomewhereInTheDocument` は、リソース自体の別の場所へのアンカーです。アンカーはリソース内の一種の "ブックマーク" を表しており、 "ブックマーク" 地点にあるコンテンツを表示するようにブラウザーへ指示を与えます。例えば HTML ドキュメントでは、ブラウザーはアンカーが定義されている位置にスクロールします。動画や音声のドキュメントでは、ブラウザーはアンカーが示す位置への移動を試みます。 # より後の部分はフラグメント識別としても知られており、要求でサーバーには送信されないことは注目に値します。 +- ![アンカー](mdn-url-anchor@x2.png) + - : `#SomewhereInTheDocument` は、リソース自体の別の場所へのアンカーです。アンカーはリソース内の一種の「ブックマーク」を表しており、「ブックマーク」地点にあるコンテンツを表示するようにブラウザーへ指示を与えます。例えば HTML 文書では、ブラウザーはアンカーが定義されている位置にスクロールします。動画や音声の文書では、ブラウザーはアンカーが示す位置への移動を試みます。 # より後の部分はフラグメント識別子としても知られており、リクエストでサーバーには送信されないことは注目に値します。 ## 使用上のメモ @@ -97,7 +97,7 @@ FTP は最上位では利用できますが (ブラウザーの URL バーに直 ## 例 -``` +```url https://developer.mozilla.org/ja/docs/Learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git @@ -108,11 +108,9 @@ mailto:help@supercyberhelpdesk.info ## 仕様書 -| 仕様書 | 題名 | -| ------------------------------------------------------ | ------------------------------------------------------------------ | -| {{RFC("7230", "Uniform Resource Identifiers", "2.7")}} | Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing | +{{Specifications}} ## 関連情報 -- [URL とは何か](/ja/docs/Learn/Common_questions/What_is_a_URL) -- [IANA list of URI schemes](http://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) +- [URL とは何か](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL) +- [IANA list of URI schemes](https://www.iana.org/assignments/uri-schemes/uri-schemes.xhtml) From ba7b905919942d5e8a9fb22b754cc406359b96d0 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Tue, 3 Oct 2023 18:10:15 +0200 Subject: [PATCH 32/58] [es] sync translated content (#16301) es: sync translated content --- files/es/_redirects.txt | 6 ++++-- files/es/_wikihistory.json | 16 ++++++++-------- .../index.md | 3 ++- .../index.md | 3 ++- 4 files changed, 16 insertions(+), 12 deletions(-) rename files/es/web/css/{adjacent_sibling_combinator => next-sibling_combinator}/index.md (92%) rename files/es/web/css/{general_sibling_combinator => subsequent-sibling_combinator}/index.md (89%) diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 1d4b11bb0b2e10..b6b5e6ad7f4eff 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1804,6 +1804,7 @@ /es/docs/Web/CSS/:not() /es/docs/Web/CSS/:not /es/docs/Web/CSS/@media/altura /es/docs/Web/CSS/@media/height /es/docs/Web/CSS/@media/resolución /es/docs/Web/CSS/@media/resolution +/es/docs/Web/CSS/Adjacent_sibling_combinator /es/docs/Web/CSS/Next-sibling_combinator /es/docs/Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS /es/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/orphaned/Web/CSS/CSS_Animations/Detecting_CSS_animation_support /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_animations/Using_CSS_animations @@ -1860,6 +1861,7 @@ /es/docs/Web/CSS/Descendant_selectors /es/docs/Web/CSS/Descendant_combinator /es/docs/Web/CSS/Elemento_reemplazo /es/docs/Web/CSS/Replaced_element /es/docs/Web/CSS/Especificidad /es/docs/Web/CSS/Specificity +/es/docs/Web/CSS/General_sibling_combinator /es/docs/Web/CSS/Subsequent-sibling_combinator /es/docs/Web/CSS/Gradiente /es/docs/Web/CSS/gradient /es/docs/Web/CSS/Herramientas /es/docs/conflicting/Web/CSS /es/docs/Web/CSS/Introducción/Content /es/docs/Learn/CSS/Howto/Generated_content @@ -1876,8 +1878,8 @@ /es/docs/Web/CSS/Selectores_CSS /es/docs/Web/CSS/CSS_selectors /es/docs/Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores /es/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors /es/docs/Web/CSS/Selectores_atributo /es/docs/Web/CSS/Attribute_selectors -/es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Adjacent_sibling_combinator -/es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/General_sibling_combinator +/es/docs/Web/CSS/Selectores_hermanos_adyacentes /es/docs/Web/CSS/Next-sibling_combinator +/es/docs/Web/CSS/Selectores_hermanos_generales /es/docs/Web/CSS/Subsequent-sibling_combinator /es/docs/Web/CSS/Sintaxis_definición_de_valor /es/docs/Web/CSS/Value_definition_syntax /es/docs/Web/CSS/Texto_CSS /es/docs/Web/CSS/CSS_text /es/docs/Web/CSS/Tools /es/docs/conflicting/Web/CSS diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 0240f532408de5..10b4a0c9fe4f0f 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -6547,10 +6547,6 @@ "modified": "2020-10-15T21:43:18.021Z", "contributors": ["SJW", "angelf", "MilkSnake"] }, - "Web/CSS/Adjacent_sibling_combinator": { - "modified": "2019-03-23T22:39:30.908Z", - "contributors": ["alkaithil"] - }, "Web/CSS/At-rule": { "modified": "2019-03-23T22:29:55.371Z", "contributors": ["Legioinvicta", "israel-munoz"] @@ -6865,10 +6861,6 @@ "modified": "2019-03-23T23:13:24.480Z", "contributors": ["ExE-Boss", "Makiber"] }, - "Web/CSS/General_sibling_combinator": { - "modified": "2019-03-23T22:39:33.429Z", - "contributors": ["alkaithil"] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T21:52:30.474Z", "contributors": ["lajaso", "israel-munoz"] @@ -6889,6 +6881,10 @@ "modified": "2019-03-23T23:21:23.902Z", "contributors": ["ExE-Boss", "Sebastianz", "teoli", "jota1410"] }, + "Web/CSS/Next-sibling_combinator": { + "modified": "2019-03-23T22:39:30.908Z", + "contributors": ["alkaithil"] + }, "Web/CSS/Pseudo-classes": { "modified": "2020-02-22T08:04:35.419Z", "contributors": [ @@ -6944,6 +6940,10 @@ "Remohir" ] }, + "Web/CSS/Subsequent-sibling_combinator": { + "modified": "2019-03-23T22:39:33.429Z", + "contributors": ["alkaithil"] + }, "Web/CSS/Syntax": { "modified": "2020-09-29T20:54:10.526Z", "contributors": ["lucasmmaidana", "joseanpg", "mili01gm", "Derhks"] diff --git a/files/es/web/css/adjacent_sibling_combinator/index.md b/files/es/web/css/next-sibling_combinator/index.md similarity index 92% rename from files/es/web/css/adjacent_sibling_combinator/index.md rename to files/es/web/css/next-sibling_combinator/index.md index 7559ef9bb31bf9..bb7d5b10fc676f 100644 --- a/files/es/web/css/adjacent_sibling_combinator/index.md +++ b/files/es/web/css/next-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: Selectores de hermanos adyacentes -slug: Web/CSS/Adjacent_sibling_combinator +slug: Web/CSS/Next-sibling_combinator +original_slug: Web/CSS/Adjacent_sibling_combinator --- {{CSSRef("Selectors")}} diff --git a/files/es/web/css/general_sibling_combinator/index.md b/files/es/web/css/subsequent-sibling_combinator/index.md similarity index 89% rename from files/es/web/css/general_sibling_combinator/index.md rename to files/es/web/css/subsequent-sibling_combinator/index.md index 1469beade31eab..f2423cb906c0be 100644 --- a/files/es/web/css/general_sibling_combinator/index.md +++ b/files/es/web/css/subsequent-sibling_combinator/index.md @@ -1,6 +1,7 @@ --- title: Selectores de hermanos generales -slug: Web/CSS/General_sibling_combinator +slug: Web/CSS/Subsequent-sibling_combinator +original_slug: Web/CSS/General_sibling_combinator --- {{CSSRef("Selectors")}} From 9c7186bda318c5caefd334af7bc3432944d79203 Mon Sep 17 00:00:00 2001 From: Javien Lee Date: Wed, 4 Oct 2023 10:40:44 +0900 Subject: [PATCH 33/58] =?UTF-8?q?fix:=20=EC=88=9C=ED=9A=8C=EC=9E=90=20->?= =?UTF-8?q?=20=EB=B0=98=EB=B3=B5=EC=9E=90=20(#15743)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/iteration_protocols/index.md | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/files/ko/web/javascript/reference/iteration_protocols/index.md b/files/ko/web/javascript/reference/iteration_protocols/index.md index e2807b185e92f1..9a26fb947ee7f0 100644 --- a/files/ko/web/javascript/reference/iteration_protocols/index.md +++ b/files/ko/web/javascript/reference/iteration_protocols/index.md @@ -9,7 +9,7 @@ l10n: **순회 프로토콜**은 새로운 내장 객체 또는 구문이 아닌 프로토콜입니다. 이러한 프로토콜은 몇 가지 규칙에 따라 모든 객체에서 구현될 수 있습니다. -프로토콜은 [순회 가능 프로토콜](#순회_가능_프로토콜)과 [순회자 프로토콜](#순회자_프로토콜)로 두 가지가 있습니다. +프로토콜은 [순회 가능 프로토콜](#순회_가능_프로토콜)과 [반복자 프로토콜](#반복자_프로토콜)로 두 가지가 있습니다. ## 순회 가능 프로토콜 @@ -18,53 +18,53 @@ l10n: **순회 가능**이 되기위해 객체는 반드시 `@@iterator` 메서드를 구현해야 합니다. 즉, 객체(또는 [프로토타입 체인](/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)의 객체 중 하나)에 상수 {{jsxref("Symbol.iterator")}}를 통해 이용할 수 있는 `@@iterator` 키가 있는 속성이 있어야 합니다. - `[Symbol.iterator]` - - : [순회자 프로토콜](#순회자_프로토콜)을 준수하는 객체를 반환하는 인수가 없는 함수. + - : [반복자 프로토콜](#반복자_프로토콜)을 준수하는 객체를 반환하는 인수가 없는 함수. -객체를 순회해야 할 때마다(예: {{jsxref("Statements/for...of", "for...of")}} 루프 시작 시) `@@iterator` 메서드는 인수 전달 없이 호출되고, 반환된 **순회자**는 반복할 값을 가져오는 데 사용됩니다. +객체를 순회해야 할 때마다(예: {{jsxref("Statements/for...of", "for...of")}} 루프 시작 시) `@@iterator` 메서드는 인수 전달 없이 호출되고, 반환된 **반복자**는 반복할 값을 가져오는 데 사용됩니다. 이 인수가 없는 함수는, 순회 가능 객체의 메서드로 호출됩니다. 따라서 함수 내에서 `this` 키워드를 사용하여 순회 가능 객체의 속성에 접근하고 순회 중에 제공할 항목을 결정할 수 있습니다. -이 함수는 평범한 함수이거나 제너레이터 함수일 수 있고, 호출 시 순회자 객체가 반환됩니다. 제너레이터 함수 내에서 각 항목은 `yield`를 사용하여 제공될 수 있습니다. +이 함수는 평범한 함수이거나 제너레이터 함수일 수 있고, 호출 시 반복자 객체가 반환됩니다. 제너레이터 함수 내에서 각 항목은 `yield`를 사용하여 제공될 수 있습니다. -## 순회자 프로토콜 +## 반복자 프로토콜 -**순회자 프로토콜**은 유한하거나 무한한 일련의 값을 생성하는 표준 방법을 정의하고, 모든 값이 생성되었을 때 잠재적으로 반환 값을 정의합니다. +**반복자 프로토콜**은 유한하거나 무한한 일련의 값을 생성하는 표준 방법을 정의하고, 모든 값이 생성되었을 때 잠재적으로 반환 값을 정의합니다. -객체는 다음 의미 체계를 사용하여 `next()` 메서드를 구현할 때 순회자가 됩니다. +객체는 다음 의미 체계를 사용하여 `next()` 메서드를 구현할 때 반복자가 됩니다. - `next()` - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스(아래 참조)를 준수하는 객체를 반환하는 함수입니다. 내장 언어 기능(`for...of` 등)이 순회자를 사용할 때 객체가 아닌 값(`false` 또는 `undefined` 등)이 반환되면 {{jsxref("TypeError")}} (`"iterator.next() returned a non-object value"`)가 발생합니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스(아래 참조)를 준수하는 객체를 반환하는 함수입니다. 내장 언어 기능(`for...of` 등)이 반복자를 사용할 때 객체가 아닌 값(`false` 또는 `undefined` 등)이 반환되면 {{jsxref("TypeError")}} (`"iterator.next() returned a non-object value"`)가 발생합니다. -모든 순회자 프로토콜 메서드(`next()`, `return()`, 그리고 `throw()`)는 `IteratorResult` 인터페이스를 구현하는 객체를 반환해야 합니다. 다음 속성이 반드시 있어야 합니다. +모든 반복자 프로토콜 메서드(`next()`, `return()`, 그리고 `throw()`)는 `IteratorResult` 인터페이스를 구현하는 객체를 반환해야 합니다. 다음 속성이 반드시 있어야 합니다. - `done` {{optional_inline}} - - : 불리언 값으로, 순회자가 시퀀스에서 다음 값을 생성할 수 있는 경우엔 `false`입니다. (이는 `done` 속성을 지정하지 않는 것과 같습니다.) + - : 불리언 값으로, 반복자가 시퀀스에서 다음 값을 생성할 수 있는 경우엔 `false`입니다. (이는 `done` 속성을 지정하지 않는 것과 같습니다.) - 순회자가 시퀀스를 완료한 경우에 이 값은 `true`입니다. 이때 `value`는 순회자의 반환 값을 선택적으로 지정합니다. + 반복자가 시퀀스를 완료한 경우에 이 값은 `true`입니다. 이때 `value`는 반복자의 반환 값을 선택적으로 지정합니다. - `value` {{optional_inline}} - - : 순회자가 반환하는 모든 JavaScript 값입니다. `done`이 `true`이면 생략할 수 있습니다. + - : 반복자가 반환하는 모든 JavaScript 값입니다. `done`이 `true`이면 생략할 수 있습니다. 실제로 두 속성이 모두 엄격하게 요구되진 않습니다. 속성이 없는 객체가 반환되면 사실상 `{ done: false, value: undefined }`와 동일합니다. -순회자가 `done: true`로 결과를 반환하면 `next()`에 대한 모든 후속 호출도 `done: true`를 반환할 것으로 예상되지만 이는 언어 수준에서 강제되지 않습니다. +반복자가 `done: true`로 결과를 반환하면 `next()`에 대한 모든 후속 호출도 `done: true`를 반환할 것으로 예상되지만 이는 언어 수준에서 강제되지 않습니다. `next` 메서드는 메서드 본문에서 사용할 수 있는 값을 받을 수 있습니다. 내장 언어 기능은 어떠한 값도 전달하지 않습니다. [제너레이터](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)의 `next` 메서드로 전달된 값은 해당 `yield` 표현식의 값이 됩니다. -순회자는 선택적으로 `return(value)`와 **`throw(exception)`** 메서드를 구현할 수 있습니다. 이 메서드는 호출될 때 호출자가 순회를 완료했으며, 필요한 정리(예: 데이터베이스 연결 닫기)를 수행할 수 있음을 순회자에게 알립니다. +반복자는 선택적으로 `return(value)`와 **`throw(exception)`** 메서드를 구현할 수 있습니다. 이 메서드는 호출될 때 호출자가 순회를 완료했으며, 필요한 정리(예: 데이터베이스 연결 닫기)를 수행할 수 있음을 반복자에게 알립니다. - `return(value)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `value`는 전달된 `vlaue`와 같고 `done`은 `true`입니다. 이 메서드를 호출하면 순회자에게 호출자가 더 이상 `next()`를 호출을 할 의도가 없으며, 정리 작업을 수행할 수 있음을 알립니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `value`는 전달된 `vlaue`와 같고 `done`은 `true`입니다. 이 메서드를 호출하면 반복자에게 호출자가 더 이상 `next()`를 호출을 할 의도가 없으며, 정리 작업을 수행할 수 있음을 알립니다. - `throw(exception)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `done`은 `true`입니다. 이 메서드를 호출하면 순회자에게 호출자가 오류 조건을 감지했음을 알리며, `exception`은 일반적으로 {{jsxref("Error")}} 인스턴스입니다. + - : 0개 또는 1개의 인수를 허용하고 `IteratorResult` 인터페이스를 준수하는 객체를 반환하는 함수입니다. 일반적으로 `done`은 `true`입니다. 이 메서드를 호출하면 반복자에게 호출자가 오류 조건을 감지했음을 알리며, `exception`은 일반적으로 {{jsxref("Error")}} 인스턴스입니다. -> **참고:** 특정 객체가 순회자 프로토콜을 구현하는지 여부를 반사적으로(즉, 실제로 `next()`를 호출하고 반환된 결과를 확인하지 않고는) 알 수 없습니다. +> **참고:** 특정 객체가 반복자 프로토콜을 구현하는지 여부를 반사적으로(즉, 실제로 `next()`를 호출하고 반환된 결과를 확인하지 않고는) 알 수 없습니다. -순회자를 순회 가능으로 만드는 것은 매우 쉽습니다. `this`를 반환하는 `[@@iterator]()` 메서드를 구현하기만 하면 됩니다. +반복자를 순회 가능으로 만드는 것은 매우 쉽습니다. `this`를 반환하는 `[@@iterator]()` 메서드를 구현하기만 하면 됩니다. ```js -// 순회자 프로토콜과 순회 가능을 모두 만족 +// 반복자 프로토콜과 순회 가능을 모두 만족 const myIterator = { next() { // ... @@ -75,7 +75,7 @@ const myIterator = { }; ``` -이러한 객체를 순회 가능 순회자라고 합니다. 이렇게 하면 순회 가능을 기대하는 다양한 구문에서 순회자를 사용할 수 있습니다. 따라서 순회 가능을 구현하지 않고 순회자 프로토콜을 구현하는 것은 거의 유용하지 않습니다. (실제로 거의 모든 구문과 API는 순회자가 아니라 순회 가능을 기대합니다.) [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)가 그 예입니다. +이러한 객체를 순회 가능 반복자라고 합니다. 이렇게 하면 순회 가능을 기대하는 다양한 구문에서 반복자를 사용할 수 있습니다. 따라서 순회 가능을 구현하지 않고 반복자 프로토콜을 구현하는 것은 거의 유용하지 않습니다. (실제로 거의 모든 구문과 API는 반복자가 아니라 순회 가능을 기대합니다.) [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)가 그 예입니다. ```js const aGeneratorObject = (function* () { @@ -85,57 +85,57 @@ const aGeneratorObject = (function* () { })(); console.log(typeof aGeneratorObject.next); -// "function" — next 메서드(올바른 결과를 반환)가 있으므로 순회자입니다. +// "function" — next 메서드(올바른 결과를 반환)가 있으므로 반복자입니다. console.log(typeof aGeneratorObject[Symbol.iterator]); -// "function" — @@iterator 메서드(올바른 순회자를 반환)가 있으므로 순회 가능입니다. +// "function" — @@iterator 메서드(올바른 반복자를 반환)가 있으므로 순회 가능입니다. console.log(aGeneratorObject[Symbol.iterator]() === aGeneratorObject); -// true — @@iterator 메서드는 자신(순회자)을 반환하므로 순회 가능 순회자입니다. +// true — @@iterator 메서드는 자신(반복자)을 반환하므로 순회 가능 반복자입니다. ``` -모든 내장 순회자는 `this`를 반환하는 `[@@iterator]()` 메서드를 구현하는 {{jsxref("Iterator", "Iterator.prototype")}}에서 상속되었기 때문에 내장 순회자도 순회 가능입니다. +모든 내장 반복자는 `this`를 반환하는 `[@@iterator]()` 메서드를 구현하는 {{jsxref("Iterator", "Iterator.prototype")}}에서 상속되었기 때문에 내장 반복자도 순회 가능입니다. 그러나 가능하다면 `iterable[Symbol.iterator]`가 [`Set.prototype[@@iterator]()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator)처럼 항상 처음부터 시작하는 별개의 반복자를 반환하는 것이 좋습니다. -## 비동기 순회자와 비동기 순회 가능 프로토콜 +## 비동기 반복자와 비동기 순회 가능 프로토콜 -**비동기 순회자**와 **비동기 순회 가능** 프로토콜 이라는 비동기 순회에 사용되는 또 다른 프로토콜 쌍이 있습니다. 순회 가능과 순회자 프로토콜과 비교했을 때 매우 유사한 인터페이스를 가지고 있고, 순회자 메서드 호출의 각 반환 값이 프로미스로 래핑된다는 점만 다릅니다. +**비동기 반복자**와 **비동기 순회 가능** 프로토콜 이라는 비동기 순회에 사용되는 또 다른 프로토콜 쌍이 있습니다. 순회 가능과 반복자 프로토콜과 비교했을 때 매우 유사한 인터페이스를 가지고 있고, 반복자 메서드 호출의 각 반환 값이 프로미스로 래핑된다는 점만 다릅니다. 객체는 다음 메서드를 구현할 때 비동기 순회 가능 프로토콜을 구현합니다. - [`[Symbol.asyncIterator]`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator) - - : 비동기 순회자 프로토콜을 준수하는 객체를 반환하는 인수가 없는 함수입니다. + - : 비동기 반복자 프로토콜을 준수하는 객체를 반환하는 인수가 없는 함수입니다. -객체는 다음 메서드를 구현할 때 비동기 순회자 프로토콜을 구현합니다. +객체는 다음 메서드를 구현할 때 비동기 반복자 프로토콜을 구현합니다. - `next()` - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. - `return(value)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. - `throw(exception)` {{optional_inline}} - - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 순회자와 동일한 의미 체계를 갖습니다. + - : 0개 또는 1개의 인수를 허용하고 프로미스를 반환하는 함수입니다. 프로미스는 `IteratorResult` 인터페이스를 준수하는 객체로 이행되며, 속성은 동기 반복자와 동일한 의미 체계를 갖습니다. ## 언어와 순회 프로토콜 간의 상호 작용 -언어는 순회 가능과 순회자를 생성하거나 소비하는 API를 지정합니다. +언어는 순회 가능과 반복자를 생성하거나 소비하는 API를 지정합니다. ### 내장 순회 가능 {{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, 그리고 [`Intl.Segmenter.prototype.segment()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment)에서 반환된 [`Segments`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter/segment/Segments)는 각각의 `prototype` 객체가 `@@iterator` 메서드를 구현하기 때문에 모두 내장 순회 가능입니다. 또한 [`인수`](/ko/docs/Web/JavaScript/Reference/Functions/arguments) 객체와 {{domxref("NodeList")}}와 같은 일부 DOM 컬렉션 유형도 순회 가능입니다. [`ReadableStream`](/ko/docs/Web/API/ReadableStream)은 이 문서를 작성할 당시의 유일한 내장 비동기 순회 가능입니다. -[제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)는 순회 가능 순회자인 [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)를 반환합니다. [비동기 제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/async_function*)는 비동기 순회 가능 순회자인 [비동기 제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator)를 반환합니다. +[제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)는 순회 가능 반복자인 [제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator)를 반환합니다. [비동기 제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/async_function*)는 비동기 순회 가능 반복자인 [비동기 제너레이터 객체](/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator)를 반환합니다. -내장 순회 가능에서 반환된 순회자는 실제로 모두 앞서 언급한 `[Symbol.iterator]() { return this; }` 메서드를 사용하여 순회 가능 순회자로 만드는 공통 클래스(현재 노출되어있지 않음)를 상속받습니다. 앞으로 이러한 내장 순회자는 `next()` 메서드 외에 추가적으로 순회자 프로토콜에서 필요한 [도우미 메서드](https://github.com/tc39/proposal-iterator-helpers)를 가지고 있을 수 있습니다. 그래픽 콘솔에 로그하여 순회자의 프로토타입 체인을 검사해볼 수 있습니다. +내장 순회 가능에서 반환된 반복자는 실제로 모두 앞서 언급한 `[Symbol.iterator]() { return this; }` 메서드를 사용하여 순회 가능 반복자로 만드는 공통 클래스(현재 노출되어있지 않음)를 상속받습니다. 앞으로 이러한 내장 반복자는 `next()` 메서드 외에 추가적으로 반복자 프로토콜에서 필요한 [도우미 메서드](https://github.com/tc39/proposal-iterator-helpers)를 가지고 있을 수 있습니다. 그래픽 콘솔에 로그하여 반복자의 프로토타입 체인을 검사해볼 수 있습니다. ``` console.log([][Symbol.iterator]()); Array Iterator {} - [[Prototype]]: Array Iterator ==> 모든 배열 순회자가 공유하는 프로토타입입니다. + [[Prototype]]: Array Iterator ==> 모든 배열 반복자가 공유하는 프로토타입입니다. next: ƒ next() Symbol(Symbol.toStringTag): "Array Iterator" - [[Prototype]]: Object ==> 모든 내장 순회자가 공유하는 프로토타입입니다. + [[Prototype]]: Object ==> 모든 내장 반복자가 공유하는 프로토타입입니다. Symbol(Symbol.iterator): ƒ [Symbol.iterator]() [[Prototype]]: Object ==> Object.prototype 입니다. ``` @@ -190,7 +190,7 @@ console.log(gen().next()); // { value: "a", done: false } console.log(a); // "a" ``` -내장 구문이 순회자를 순회하고 마지막 결과의 `done`이 `false`(즉, 순회자가 더 많은 값을 생성할 수 있음)이지만 더 이상 값이 필요하지 않은 경우 `return` 메서드가 있는경우, 해당 메서드가 호출됩니다. 예를 들어 `break` 또는 `return`이 `for...of` 루프에서 발생하거나 모든 식별자가 배열 구조 분해에 이미 바인딩된 경우에 이러한 상황이 발생할 수 있습니다. +내장 구문이 반복자를 순회하고 마지막 결과의 `done`이 `false`(즉, 반복자가 더 많은 값을 생성할 수 있음)이지만 더 이상 값이 필요하지 않은 경우 `return` 메서드가 있는경우, 해당 메서드가 호출됩니다. 예를 들어 `break` 또는 `return`이 `for...of` 루프에서 발생하거나 모든 식별자가 배열 구조 분해에 이미 바인딩된 경우에 이러한 상황이 발생할 수 있습니다. ```js const obj = { @@ -233,7 +233,7 @@ for (const b of obj) { ### 잘못 구성된 순회 가능 -순회 가능의 `@@iterator` 메서드가 순회자 객체를 반환하지 않으면 잘못 구성된 순회 가능으로 간주됩니다. +순회 가능의 `@@iterator` 메서드가 반복자 객체를 반환하지 않으면 잘못 구성된 순회 가능으로 간주됩니다. 이렇게 사용하면 런타임 오류 또는 버그가 발생할 수 있습니다. @@ -261,9 +261,9 @@ const myIterable = { console.log([...myIterable]); // [1, 2, 3] ``` -### 간단한 순회자 +### 간단한 반복자 -순회자는 본래 stateful입니다. 위의 예와 같이 [제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)로 정의하지 않으면, 여러분은 상태를 클로저에 캡슐화하고 싶을 것입니다. +반복자는 본래 stateful입니다. 위의 예와 같이 [제너레이터 함수](/ko/docs/Web/JavaScript/Reference/Statements/function*)로 정의하지 않으면, 여러분은 상태를 클로저에 캡슐화하고 싶을 것입니다. ```js function makeIterator(array) { @@ -289,7 +289,7 @@ console.log(it.next().value); // 'ya' console.log(it.next().done); // true ``` -### 무한 순회자 +### 무한 반복자 ```js function idMaker() { @@ -312,7 +312,7 @@ console.log(it.next().value); // 2 // ... ``` -### 제너레이터로 순회자 정의하기 +### 제너레이터로 반복자 정의하기 ```js function* makeSimpleGenerator(array) { @@ -343,7 +343,7 @@ console.log(it.next().value); // 2 // ... ``` -### 클래스로 순회자 정의하기 +### 클래스로 반복자 정의하기 상태 캡슐화는 [프라이빗 속성](/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields)으로도 수행할 수 있습니다. @@ -356,7 +356,7 @@ class SimpleClass { } [Symbol.iterator]() { - // 각 순회자에 대해 새 색인을 사용하세요. + // 각 반복자에 대해 새 색인을 사용하세요. // 이렇게 하면 break 사용 또는 동일한 순회 가능의 중첩 루프와 같은 // 사소한 상황에서 순회 가능에 대한 여러 반복이 안전해집니다. let index = 0; @@ -391,7 +391,7 @@ const someString = "hi"; console.log(typeof someString[Symbol.iterator]); // "function" ``` -`String`의 [기본 순회자](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)는 다음과 같이 문자열의 코드 포인트를 하나씩 반환합니다. +`String`의 [기본 반복자](/ko/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)는 다음과 같이 문자열의 코드 포인트를 하나씩 반환합니다. ```js const iterator = someString[Symbol.iterator](); @@ -410,7 +410,7 @@ const someString = new String("hi"); someString[Symbol.iterator] = function () { return { - // 단일 요소(문자열 "bye")를 반환하는 순회자 객체 + // 단일 요소(문자열 "bye")를 반환하는 반복자 객체 next() { return this._first ? { value: "bye", done: (this._first = false) } @@ -434,7 +434,7 @@ console.log(`${someString}`); // "hi" ## 같이 보기 -- [순회자와 제너레이터](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) +- [반복자와 제너레이터](/ko/docs/Web/JavaScript/Guide/Iterators_and_generators) - {{jsxref("Statements/function*", "function*")}} - {{jsxref("Symbol.iterator")}} - {{jsxref("Iterator")}} From 44c67aadb82979792c6e252a083c722489e4ad00 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:46:04 +0900 Subject: [PATCH 34/58] [ko]: add index.md for `web/glossary/cryptographic_hash_function` (#15788) [add]: add index.md for web/glossary/cryptographic_hash_function --- .../cryptographic_hash_function/index.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 files/ko/glossary/cryptographic_hash_function/index.md diff --git a/files/ko/glossary/cryptographic_hash_function/index.md b/files/ko/glossary/cryptographic_hash_function/index.md new file mode 100644 index 00000000000000..14e02141f60eea --- /dev/null +++ b/files/ko/glossary/cryptographic_hash_function/index.md @@ -0,0 +1,26 @@ +--- +title: 암호화 해시 함수 (Cryptographic hash function) +slug: Glossary/Cryptographic_hash_function +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +종종 '다이제스트 함수 (digest function)'라 불리는, 암호화 해시 함수는 임의의 크기를 가지는 메시지를 {{glossary("digest", "다이제스트")}}라고 하는 고정 크기의 메시지로 변환하는 {{glossary("cryptography", "암호학적")}} 기본 요소입니다. 암호화 해시 함수는 인증, 디지털 서명 및 메시지 인증 코드에 사용됩니다. + +암호화에 사용하려면, 해시 함수에 다음과 같은 특성이 있어야 합니다. + +- 게산이 빠릅니다 (자주 생성되기 때문입니다). +- 되돌릴 수 없습니다 (각 다이제스트는 매우 많은 수의 메시지에서 나올 수 있으며, 무차별 대입 공격만이 특정 다이제스트에 연결되는 메시지를 생성할 수 있습니다) +- 변조가 방지되어야 합니다 (메시지를 변경하면 다이제스트가 달라집니다) +- 충돌이 방지되어야 합니다 (동일한 다이제스트를 생성하는 두 개의 다른 메시지를 찾는 것은 불가능해야 합니다) + +MD5 및 SHA-1와 같은 암호화 해시 함수는 충돌 저항성을 크게 감소시키는 공격이 발견되어 손상된 것으로 생각됩니다. + +## 같이 보기 + +- 위키백과의 [암호화 해시 함수](https://en.wikipedia.org/wiki/Cryptographic_hash_function) +- [MDN 웹 문서 용어사전](/ko/docs/Glossary) + + - {{Glossary("Symmetric-key cryptography", "대칭키 암호화")}} From 19953cffa8966c9ff88abbdd174bc00cc803ab53 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:46:49 +0900 Subject: [PATCH 35/58] [ko]: add index.md for `web/glossary/cssom` (#15819) [add]: add index.md for web/glossary/cssom --- files/ko/glossary/cssom/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/ko/glossary/cssom/index.md diff --git a/files/ko/glossary/cssom/index.md b/files/ko/glossary/cssom/index.md new file mode 100644 index 00000000000000..a82657f1fca883 --- /dev/null +++ b/files/ko/glossary/cssom/index.md @@ -0,0 +1,14 @@ +--- +title: CSS 객체 모델 (CSS Object Model, CSSOM) +slug: Glossary/CSSOM +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[**CSS 객체 모델 (CSS Object Model, CSSOM)**](/ko/docs/Web/API/CSS_Object_Model)은 문서의 스타일 관련 (CSS) 정보를 읽고 수정하기 위한 API 세트입니다. 즉, [DOM](/ko/docs/Web/API/Document_Object_Model)을 사용해 JavaScript에서 문서의 구조와 내용을 읽고 수정할 수 있는 방식과 비슷하게, CSSOM을 사용하여 JavaScript에서 문서의 스타일을 읽고 수정할 수 있습니다. + +## 같이 보기 + +- [페이지 채우기: 브라우저 작동 방식](/ko/docs/Web/Performance/How_browsers_work) From 196bb5f319f0362cfdf9e3936448bae4c3a2a2f7 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:49:38 +0900 Subject: [PATCH 36/58] [ko]: add index.md for `web/glossary/composite_operation` (#15838) [add]: add index.md for web/glossary/composite_operation --- .../ko/glossary/composite_operation/index.md | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 files/ko/glossary/composite_operation/index.md diff --git a/files/ko/glossary/composite_operation/index.md b/files/ko/glossary/composite_operation/index.md new file mode 100644 index 00000000000000..438bb3ce20a464 --- /dev/null +++ b/files/ko/glossary/composite_operation/index.md @@ -0,0 +1,23 @@ +--- +title: 복합 연산 (Composite operation) +slug: Glossary/Composite_operation +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +CSS에서, CSS 규칙의 속성 값은 해당 속성의 '기본 값'이고, [키프레임](/ko/docs/Web/CSS/@keyframes)의 동일한 속성 값은 해당 효과 크기입니다. + +'복합 연산'은 효과 값을 기본 값과 결합하여 생성하는 데 사용되는 특정 작업입니다. 복합 연산에는 세 가지 유형이 있습니다. + +- **대체**: 효과 값이 기본 값을 대체합니다. 이 경우 최종 효과 값은 원래 효과 값 자체입니다. +- **추가**: 효과 값이 기본 값에 추가됩니다. +- **누적**: 효과 값은 기본 값과 결합됩니다. + +> **참고:** CSS의 복합 연산은 애니메이션에만 적용됩니다. + +## 같이 보기 + +- [`animation-composition`](/ko/docs/Web/CSS/animation-composition) +- [`KeyframeEffect.composite`](/ko/docs/Web/API/KeyframeEffect/composite) From 4734394968eb759781b5e517aec5dbbb96e11e88 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:51:05 +0900 Subject: [PATCH 37/58] [ko]: add files for `web/glossary/dsl` (#15891) [add]: add files in web/glossary/dsl --- .../dsl/digital_subscriber_line/index.md | 17 +++++++++++++++++ .../dsl/domain_specific_language/index.md | 17 +++++++++++++++++ files/ko/glossary/dsl/index.md | 16 ++++++++++++++++ 3 files changed, 50 insertions(+) create mode 100644 files/ko/glossary/dsl/digital_subscriber_line/index.md create mode 100644 files/ko/glossary/dsl/domain_specific_language/index.md create mode 100644 files/ko/glossary/dsl/index.md diff --git a/files/ko/glossary/dsl/digital_subscriber_line/index.md b/files/ko/glossary/dsl/digital_subscriber_line/index.md new file mode 100644 index 00000000000000..222fa1370ee02c --- /dev/null +++ b/files/ko/glossary/dsl/digital_subscriber_line/index.md @@ -0,0 +1,17 @@ +--- +title: 디지털 가입자 회선 (Digital Subscriber Line, DSL) +slug: Glossary/DSL/Digital_subscriber_line +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**디지털 가입자 회선**은 전화선을 통해 유선 데이터 전송을 보내는 광대역 인터넷 연결 유형입니다. + +다운로드 속도와 업로드 속도가 동일할 필요는 없습니다. 이러한 경우, 회선은 '비대칭'이라고 하며 ADSL이라는 약어가 사용됩니다. +케이블, 광섬유 또는 전화 접속 연결과 비교됩니다. + +## 같이 보기 + +- 위키백과의 [디지털 가입자 회선](https://en.wikipedia.org/wiki/Digital_subscriber_line) diff --git a/files/ko/glossary/dsl/domain_specific_language/index.md b/files/ko/glossary/dsl/domain_specific_language/index.md new file mode 100644 index 00000000000000..c6a0a7ef23819c --- /dev/null +++ b/files/ko/glossary/dsl/domain_specific_language/index.md @@ -0,0 +1,17 @@ +--- +title: 도메인 특화 언어 (Domain-Specific Language, DSL) +slug: Glossary/DSL/Domain_specific_language +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**도메인 특화 언어 (DSL)**은 응용 프로그램 도메인 내의 특정 문제를 해결하도록 설계된, 제한된 범위의 컴퓨터 언어 유형입니다. + +도메인 전반에 걸쳐 다양한 문제를 해결하도록 설계된 '일반 목적 언어(GPL)'과 DSL를 비교해보세요. + +## 같이 보기 + +- 위키백과의 [도메인 특화 언어](https://en.wikipedia.org/wiki/Domain-specific_language) +- martinfowler.com [DSL 안내서](https://martinfowler.com/dsl.html) diff --git a/files/ko/glossary/dsl/index.md b/files/ko/glossary/dsl/index.md new file mode 100644 index 00000000000000..c01ef4dbc53010 --- /dev/null +++ b/files/ko/glossary/dsl/index.md @@ -0,0 +1,16 @@ +--- +title: DSL +slug: Glossary/DSL +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**DSL**라는 용어는 상황에 따라 여러가지 의미를 가질 수 있습니다. 다음을 참조하세요. + +{{GlossaryDisambiguation}} + +## 같이 보기 + +- 위키백과의 [DSL]() From 952f2ded1b679febd2930e666e769960e423f938 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:51:25 +0900 Subject: [PATCH 38/58] [ko]: add index.md for `web/glossary/decryption` (#15869) [add]: add index.md for web/glossary/decryption --- files/ko/glossary/decryption/index.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 files/ko/glossary/decryption/index.md diff --git a/files/ko/glossary/decryption/index.md b/files/ko/glossary/decryption/index.md new file mode 100644 index 00000000000000..ffb5e8e8e28f0d --- /dev/null +++ b/files/ko/glossary/decryption/index.md @@ -0,0 +1,21 @@ +--- +title: 복호화 (Decryption) +slug: Glossary/Decryption +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{glossary("cryptography", "암호학")}}에서, **복호화**는 {{glossary("ciphertext", "암호문")}}을 {{glossary("Plaintext", "평문")}}으로 변환하는 것입니다. + +복호화는 암호화의 기본 요소입니다. {{glossary("cipher", "암호")}}라는 암호화 알고리즘을 사용하여 암호문 메시지를 일반 텍스트로 변환합니다. +암호화와 마찬가지로, 최신 암호의 복호화는 특정 알고리즘과 {{glossary("key", "키")}}라는 비밀을 사용하여 수행됩니다. 알고리즘은 공개되는 경우가 많아, 암호화가 안전하게 유지된다면 키는 비밀로 유지되어야 합니다. + +![복호화 기본 요소입니다](decryption.png) + +복호화는 {{glossary("encryption")}}의 반대이며 키가 비밀로 유지되는 경우, 특정 비밀을 알지 못한 채 복호화하는 것은 수학적으로 수행하기 어렵습니다. 얼마나 어려운지는 선택한 암호화 알고리즘의 보안에 따라 달라지고 {{glossary("cryptanalysis", "암호화 분석")}}의 진행과 함께 발전합니다. + +## 같이 보기 + +- [암호화와 복호화](/ko/docs/Encryption_and_Decryption) From 6f1f387d49edcab24de2bb7e626d0a02e17ada05 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:52:24 +0900 Subject: [PATCH 39/58] [ko]: add index.md for `web/glossary/dos_attack` (#15907) [add]: add index.md for web/glossary/dos_attack --- files/ko/glossary/dos_attack/index.md | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 files/ko/glossary/dos_attack/index.md diff --git a/files/ko/glossary/dos_attack/index.md b/files/ko/glossary/dos_attack/index.md new file mode 100644 index 00000000000000..bba7bd1bce1f33 --- /dev/null +++ b/files/ko/glossary/dos_attack/index.md @@ -0,0 +1,32 @@ +--- +title: DOS 공격 (DoS attack) +slug: Glossary/DOS_attack +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +DoS (서비스 거부)는 서버에 요청이 너무 많이 들어와 {{glossary("server", "서버")}} 리소스의 합법적인 사용을 방해하는 네트워크 공격입니다. + +컴퓨터에는 계산 능력이나 메모리와 같은 제한된 리소스가 있습니다. 제한된 리소스들이 모두 소모되면, 프로그램이 정지되거나 충돌하여 사용할 수 없게 될 수 있습니다. DoS 공격은 이러한 리소스를 소모시키고 합법적인 사용자가 서버나 네트워크를 이용할 수 없게 만들거나, 최소한 서버 성능 하락을 가져오는 다양한 기술로 이루어져 있습니다. + +공격을 받는 컴퓨터의 계산 용량을 소진시키기 위해 다수의 서버를 사용하는 분산 서비스 거부 공격(Distributed Denial of Service, DDoS)도 있습니다. + +### DoS 공격의 종류 + +DoS 공격은 특정 종류의 공격이라기 보단, 하나의 범주에 가깝습니다. 다음은 DoS 공격 유형의 대략적인 목록입니다. + +- 대역폭 공격 +- 서비스 요청 폭주 +- SYN 플러딩 공격 +- ICMP 플러드 공격 +- peer-to-peer(P2P) 공격 +- 영구적인 DoS 공격 +- 애플리케이션 레벨 플러드 공격 + +## 같이 보기 + +- 위키백과의 [서비스 거부 공격](https://en.wikipedia.org/wiki/Denial-of-service_attack) +- [OWASP의 서비스 거부](https://owasp.org/www-community/attacks/Denial_of_Service) +- {{Glossary("Distributed Denial of Service","DDoS")}} From 70da47b8c0db9086f80e630b24f1f61924e54050 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:53:35 +0900 Subject: [PATCH 40/58] [ko]: add index.md for `web/glossary/effective_connection_type` (#15931) [add]: add index.md for web/glossary/effective_connection_type --- .../effective_connection_type/index.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 files/ko/glossary/effective_connection_type/index.md diff --git a/files/ko/glossary/effective_connection_type/index.md b/files/ko/glossary/effective_connection_type/index.md new file mode 100644 index 00000000000000..8bfbec57721a38 --- /dev/null +++ b/files/ko/glossary/effective_connection_type/index.md @@ -0,0 +1,32 @@ +--- +title: 유효 연결 타입 (Effective connection type) +slug: Glossary/Effective_connection_type +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**유효 연결 타입 (Effective connection type, ECT)**은 실제 연결이 광대역이나 Wi-Fi 테더링이더라도, 브라우저가 페이지를 요청하는 시간과 유효 연결 타입 사이의 시간을 기준으로 3G와 같은 셀룰러 연결 타입을 반환하는, 측정된 네트워크 성능을 나타냅니다. + +'`slow-2g`', '`2g`', '`3g`'과 '`4g`' 값은 관찰되는 왕복 시간과 다운링크 값을 사용하여 결정됩니다. + +| 유효 연결 타입 | 최소 [왕복 시간](/ko/docs/Glossary/Round_Trip_Time) | 최대 다운링크 | 설명 | +| -------------- | --------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------- | +| `slow-2g` | 2000ms | 50 Kbps | 이 네트워크는 텍스트 전용 페이지와 같은 소규모 전송에만 적합합니다. | +| `2g` | 1400ms | 70 Kbps | 이 네트워크는 작은 이미지 전송에 적합합니다. | +| `3g` | 270ms | 700 Kbps | 이 네트워크는 고해상도 이미지, 오디오, SD 비디오 등 대용량 리소스를 전송하는 데 적합합니다. | +| `4g` | 0ms | ∞ | 이 네트워크는 HD 비디오, 실시간 비디오 등에 적합합니다. | + +[유효타입](/ko/docs/Web/API/NetworkInformation/effectiveType)은 [네트워크 정보 API](/ko/docs/Web/API/Network_Information_API)의 속성으로, [navigator.connection](/en-US/docs/Web/API/Navigator/connection) 객체를 통해 JavaScript에 노출됩니다. 유효 연결 타입을 보려면, 지원 브라우저의 개발자 도구 콘솔을 열고 다음을 입력하세요. + +```js +navigator.connection.effectiveType; +``` + +## 같이 보기 + +- [네트워크 정보 API](/ko/docs/Web/API/Network_Information_API) +- {{domxref('NetworkInformation')}} +- {{domxref('NetworkInformation.effectiveType')}} +- {{HTTPHeader("ECT")}} From 623cac132cdab6ef584802e2451a719822f6c3c4 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 10:54:20 +0900 Subject: [PATCH 41/58] [ko]: add index.md for `web/glossary/event` (#15951) [add]: add index.md for web/glossary/event --- files/ko/glossary/event/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 files/ko/glossary/event/index.md diff --git a/files/ko/glossary/event/index.md b/files/ko/glossary/event/index.md new file mode 100644 index 00000000000000..17bca6ad4c78e4 --- /dev/null +++ b/files/ko/glossary/event/index.md @@ -0,0 +1,16 @@ +--- +title: 이벤트 (Event) +slug: Glossary/Event +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +이벤트는 JavaScript 코드로 수정할 수 있는 [DOM](/ko/docs/Glossary/DOM) 요소에 의해 생성된 리소스입니다. + +## 같이 보기 + +- [MDN의 Event 문서](/ko/docs/Web/API/Event) +- [공식 웹사이트](https://www.w3.org/TR/DOM-Level-2-Events/events.html) +- 위키백과의 [DOM 이벤트](https://en.wikipedia.org/wiki/DOM_Events) From 9f25a66e28d2a820820d6905ea19378b44d970c4 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 12:43:51 +0900 Subject: [PATCH 42/58] [ko] add index.md for `web/glossary/minification` (#16134) --- files/ko/glossary/minification/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/ko/glossary/minification/index.md diff --git a/files/ko/glossary/minification/index.md b/files/ko/glossary/minification/index.md new file mode 100644 index 00000000000000..d789bb3ae57d17 --- /dev/null +++ b/files/ko/glossary/minification/index.md @@ -0,0 +1,14 @@ +--- +title: 코드 경량화 (Minification) +slug: Glossary/Minification +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**코드 경량화(Minification)** 는 브라우저에서 리소스를 처리하는 방식에 영향을 주지 않고 불필요하거나 중복되는 데이터를 제거하는 프로세스입니다. + +코드 경량화에는 코드 주석, 공백, 사용되지 않는 코드 제거는 물론 변수 및 함수 이름 줄이는 것도 포함될 수 있습니다. 코드 경량화는 파일 크기를 줄여 웹 성능을 향상시키는 데 사용됩니다. 코드 경량화는 일반적으로 빌드 시 발생하는 자동화된 단계입니다. + +코드 경량화로 인해 코드를 사람이 읽기가 어려워지므로, 개발자 도구에는 코드에 공백을 다시 추가하는 방식으로 좀 더 읽기 쉽게 만들어주는 '코드 정리(prettification)' 기능이 있습니다. From 01fdccbffa693f19199f252bab92bb999c34b93d Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 12:45:39 +0900 Subject: [PATCH 43/58] [ko] add index.md for `web/glossary/non-normative` (#16172) --- files/ko/glossary/non-normative/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/ko/glossary/non-normative/index.md diff --git a/files/ko/glossary/non-normative/index.md b/files/ko/glossary/non-normative/index.md new file mode 100644 index 00000000000000..2d24b040002682 --- /dev/null +++ b/files/ko/glossary/non-normative/index.md @@ -0,0 +1,14 @@ +--- +title: 비표준 (Non-normative) +slug: Glossary/Non-normative +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +소프트웨어 {{Glossary("specification", "명세")}}는 종종 독자가 명세서를 더 잘 이해하도록 도와주거나, 예제와 모범 사례를 보여주기 위해 제공되는 **비표준(non-normative)** 또는 '정보성'으로 표시된 정보가 포함되는 경우가 많습니다. 명세서의 비표준 부분은 지침으로 제공되며, 공식 명세서의 일부로 간주되지 않습니다. 명세서의 공식 부분을 포함하는 섹션은 종종 {{Glossary("normative", "표준")}}으로 표시됩니다. + +## 같이 보기 + +- WHATWG 위키의 [표준 콘텐츠 및 정보성 콘텐츠](https://wiki.whatwg.org/wiki/Specs/howto#Content)에 대한 설명 From 5690064f506c41f320099fec9cce901480a5b629 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 12:48:36 +0900 Subject: [PATCH 44/58] [ko] add index.md for `web/glossary/page_load_time` (#16188) --- files/ko/glossary/page_load_time/index.md | 24 +++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 files/ko/glossary/page_load_time/index.md diff --git a/files/ko/glossary/page_load_time/index.md b/files/ko/glossary/page_load_time/index.md new file mode 100644 index 00000000000000..020d3deb219733 --- /dev/null +++ b/files/ko/glossary/page_load_time/index.md @@ -0,0 +1,24 @@ +--- +title: 페이지 로드 시간 (Page load time) +slug: Glossary/Page_load_time +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**페이지 로드 시간(Page load time)** 은 페이지를 로드하는 데 걸리는 시간으로, [탐색 시작](/ko/docs/Web/API/PerformanceTiming/navigationStart)부터 [로드 이벤트 시작](/en-US/docs/Web/API/PerformanceTiming/loadEventStart)까지 측정됩니다. + +```js +let time = performance.timing; + +let pageloadtime = time.loadEventStart - time.navigationStart; +``` + +페이지 로드 시간은 완벽한 웹 성능 지표처럼 들리지만, 그렇지 않습니다. 로드 시간은 장치 기능, 네트워크 상태 및 서버와의 거리에 따라 사용자마다 크게 다를 수 있습니다. 페이지 로드 시간이 측정되는 개발 환경은 사용자의 현실을 반영하지 않는 최적의 환경일 가능성이 높습니다. 또한, 웹 성능은 로드 이벤트가 발생하는 시점에만 국한되지 않습니다. 또한 페이지 로드 시간은 [인지된 성능](/ko/docs/Glossary/Perceived_performance), 응답성, [jank](/ko/docs/Glossary/Jank) 및 지터와 관련이 있습니다. + +## 같이 보기 + +- [탐색 및 리소스 타이밍](/ko/docs/Web/Performance/Navigation_and_resource_timings) +- {{domxref("PerformanceNavigationTiming")}} +- {{domxref("PerformanceResourceTiming")}}, From b50e63da10d05e70816f16ad889e51561f4119fc Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 12:49:57 +0900 Subject: [PATCH 45/58] [ko] add index.md for w`web/glossary/presto` (#16216) --- files/ko/glossary/presto/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/ko/glossary/presto/index.md diff --git a/files/ko/glossary/presto/index.md b/files/ko/glossary/presto/index.md new file mode 100644 index 00000000000000..c01e5fe444b2a6 --- /dev/null +++ b/files/ko/glossary/presto/index.md @@ -0,0 +1,14 @@ +--- +title: 프레스토 (Presto) +slug: Glossary/Presto +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +프레스토(Presto)는 버전 15까지 {{Glossary("Opera browser", "오페라 브라우저")}}를 구동하는 데 사용된 독점 브라우저 레이아웃 엔진이었습니다. 이후 Opera 브라우저는 {{Glossary('Blink', '블링크')}} 레이아웃을 엔진을 사용하는 Chromium을 기반으로 합니다. + +## 같이 보기 + +- 위키백과의 [프레스토 레이아웃 엔진](https://en.wikipedia.org/wiki/Presto_%28layout_engine%29) From 92f997e7ccbc4b73a229ab26af1d3bc6d3af43d6 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:03:41 +0900 Subject: [PATCH 46/58] [ko] add index.md for `web/glossary/replay_attack` (#16240) --- files/ko/glossary/replay_attack/index.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 files/ko/glossary/replay_attack/index.md diff --git a/files/ko/glossary/replay_attack/index.md b/files/ko/glossary/replay_attack/index.md new file mode 100644 index 00000000000000..b7a23f828e23ae --- /dev/null +++ b/files/ko/glossary/replay_attack/index.md @@ -0,0 +1,16 @@ +--- +title: 재전송 공격 (Replay attack) +slug: Glossary/Replay_attack +l10n: + sourceCommit: 0c163056cfe83fba519b757f15d2e20f83eddaff +--- + +{{GlossarySidebar}} + +웹 보안에서, '재전송 공격 (Replay attack)'은 공격자가 이전에 전송된 메시지를 가로채서 나중에 다시 전송하여 원래의 메시지와 동일한 자격 증명을 얻을 때 발생하며, 잠재적으로 다른 페이로드나 명령이 포함되어 있는 메시지를 다시 보내 공격하는 것을 의미합니다. + +수신자가 전송의 신뢰성을 확인하는 데 사용 가능한 고유하고 일회성의 식별자를 각 메시지에 포함시키고 있으면 재생 공격을 방지할 수 있습니다. 이 식별자는 세션 토큰 또는 '한 번만 사용되는 숫자(number used only once, nonce)' 형식을 가질 수 있습니다. + +## 같이 보기 + +- 위키백과의 [Replay attack](https://en.wikipedia.org/wiki/Replay_attack) From 6020233c2fb477aada5dce077e01c0b57d0fca84 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:04:58 +0900 Subject: [PATCH 47/58] [ko] add index.md for `web/glossary/robots.txt` (#16258) --- files/ko/glossary/robots.txt/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 files/ko/glossary/robots.txt/index.md diff --git a/files/ko/glossary/robots.txt/index.md b/files/ko/glossary/robots.txt/index.md new file mode 100644 index 00000000000000..e6158f44470e2e --- /dev/null +++ b/files/ko/glossary/robots.txt/index.md @@ -0,0 +1,19 @@ +--- +title: Robots.txt +slug: Glossary/Robots.txt +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +Robots.txt는 일반적으로 모든 웹사이트의 루트에 배치되는 파일입니다. {{Glossary("crawler", "크롤러")}}가 웹사이트에 대한 접근을 허용할지 금지할지 결정합니다. + +예를 들어, 사이트 관리자는 일반적으로 다른 검색 엔진에서 해당 파일이 색인화되는 것을 방지하기 위해 크롤러가 특정 폴더(및 그 안에 포함된 모든 파일)를 방문하거나 특정 파일을 크롤링하는 것을 금지할 수 있습니다. + +## 같이 보기 + +- 위키백과의 [Robots.txt](https://en.wikipedia.org/wiki/Robots.txt) +- +- 표준 명세서: [RFC9309](https://www.rfc-editor.org/rfc/rfc9309.html) +- From da5d6cbcbde64ac1423084e2dffbd3bd1c78ef5c Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:21:10 +0900 Subject: [PATCH 48/58] [ko] add index.md for `web/glossary/second-level_domain` (#16295) --- .../ko/glossary/second-level_domain/index.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 files/ko/glossary/second-level_domain/index.md diff --git a/files/ko/glossary/second-level_domain/index.md b/files/ko/glossary/second-level_domain/index.md new file mode 100644 index 00000000000000..25f743538abdbc --- /dev/null +++ b/files/ko/glossary/second-level_domain/index.md @@ -0,0 +1,26 @@ +--- +title: 2단계 도메인 (Second-level Domain, SLD) +slug: Glossary/Second-level_Domain +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +2단계 도메인 (Second-level Domain, {{Glossary("SLD")}})은 최상위 도메인({{Glossary("TLD")}}) 바로 앞에 있는 도메인 이름의 일부입니다. + +예를 들어, `mozilla.org`에서 SLD는 `mozilla`이고 TLD는 `org`입니다. + +도메인 이름은 TLD 및 SLD로 제한되지 않습니다. 서버의 다양한 기능에 대한 추가 정보를 제공하거나 동일한 도메인 아래의 영역을 구분하기 위해 추가 하위 도메인을 만들 수 있습니다. 예를 들어, `www`는 도메인이 웹 서버를 가리킨다는 것을 나타내기 위해 일반적으로 사용되는 하위 도메인입니다. + +또 다른 예로 `developer.mozilla.org`에서, `developer` 하위 도메인은 하위 도메인에 Mozilla 웹사이트의 개발자 섹션이 포함되어 있음을 지정하는 데 사용됩니다. + +## 같이 보기 + +- 위키백과의 [SLD](https://en.wikipedia.org/wiki/Second-level_domain) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("DNS")}} + - {{Glossary("Domain")}} + - {{Glossary("Domain name")}} + - {{Glossary("TLD")}} From 64c2d0daeadcb539fb441cea702ff6350789c877 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:29:11 +0900 Subject: [PATCH 49/58] [ko] add index.md for `web/glossary/smpte` (#16324) --- files/ko/glossary/smpte/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 files/ko/glossary/smpte/index.md diff --git a/files/ko/glossary/smpte/index.md b/files/ko/glossary/smpte/index.md new file mode 100644 index 00000000000000..dd849eb8b77d07 --- /dev/null +++ b/files/ko/glossary/smpte/index.md @@ -0,0 +1,12 @@ +--- +title: 텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE) +slug: Glossary/SMPTE +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**텔레비전 기술자 협회 (Society of Motion Picture and Television Engineers, SMPTE)** (**[SMPTE](https://www.smpte.org/)**) 는 엔터테인먼트 미디어를 제작, 방송, 저장 및 제공하는 데 사용되는 표준과 기술을 개발하고 정의하는 엔지니어와 과학자의 전문 협회입니다. + +예를 들어, SMPTE는 현대 디지털 영화관에서 쓰이는 디지털 영화에 사용되는 표준을 정의합니다. From 1bfcd8930d2e0c54fadccd14a5e538bc6761f39c Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:57:34 +0900 Subject: [PATCH 50/58] [ko]: add index.md for `web/glossary/main_thread` (#16125) [revise]: revise feedback --- files/ko/glossary/main_thread/index.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 files/ko/glossary/main_thread/index.md diff --git a/files/ko/glossary/main_thread/index.md b/files/ko/glossary/main_thread/index.md new file mode 100644 index 00000000000000..218ccb2b54ff75 --- /dev/null +++ b/files/ko/glossary/main_thread/index.md @@ -0,0 +1,21 @@ +--- +title: 메인 스레드 (Main thread) +slug: Glossary/Main_thread +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +**메인 스레드(main thread)** 는 브라우저가 사용자 이벤트와 페인트를 처리하는 곳입니다. 기본적으로, 브라우저는 단일 스레드를 사용하여 페이지의 모든 JavaScript를 실행하고 레이아웃, 리플로우 및 가비지 컬렉션을 수행합니다. 오래 실행되는 JavaScript 함수가 스레드를 차단하여 페이지가 응답하지 않고, 사용자 경험이 저하될 수 있다는 것을 의미합니다. + +[서비스 워커](/ko/docs/Web/API/Service_Worker_API/Using_Service_Workers)와 같은 [웹 워커](/ko/docs/Web/API/Web_Workers_API/Using_web_workers)를 의도적으로 사용하지 않는 한, JavaScript는 메인 스레드에서 실행되기 때문에, 스크립트로 인해 이벤트 처리 또는 페인팅이 지연되기 쉽습니다. 메인 스레드에 필요한 작업이 적을수록, 메인 스레드는 사용자 이벤트, 페인트에 더 많이 응답할 수 있으며, 일반적으로 사용자에게 응답할 수 있습니다. + +## 같이 보기 + +- [비동기 JavaScript](/ko/docs/Learn/JavaScript/Asynchronous) +- [Web worker API](/ko/docs/Web/API/Web_Workers_API) +- [Service worker API](/ko/docs/Web/API/Service_Worker_API) +- [용어 사전](/ko/docs/Glossary) + + - {{Glossary("Thread")}} From d78aa0809f32ae01e9deb1b0cc22b8f165a4edb5 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:59:03 +0900 Subject: [PATCH 51/58] [ko]: add index.md for `web/glossary/mobile_first` (#16138) [revise]: revise feedback --- files/ko/glossary/mobile_first/index.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 files/ko/glossary/mobile_first/index.md diff --git a/files/ko/glossary/mobile_first/index.md b/files/ko/glossary/mobile_first/index.md new file mode 100644 index 00000000000000..a77623e4c8dc5c --- /dev/null +++ b/files/ko/glossary/mobile_first/index.md @@ -0,0 +1,10 @@ +--- +title: 모바일 우선 (Mobile First) +slug: Glossary/Mobile_First +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +{{Glossary("progressive enhancement", "점진적인 향상")}}의 한 형태인 **모바일 우선 (Mobile first)** 은 데스크톱 화면 크기에 대한 디자인 및 개발보다, 모바일 화면 크기에 대한 디자인 및 개발에 우선순위를 두는 웹 개발 및 웹 디자인 접근 방식입니다. 모바일 우선 접근 방식을 사용하는 이유는 작은 화면에서 잘 작동하는 사용자 경험을 만드는 것부터 시작해, 화면 크기가 커짐에 따라 사용자 경험을 더욱 풍부하게 만들어 모든 화면 크기에서 사용자에게 좋은 사용자 경험을 제공하는 것입니다. 모바일 우선 접근 방식은 데스크톱 화면 크기에 맞게 먼저 디자인한 다음, 나중에 작은 화면 크기에 대한 일부 지원을 추가하는 기존 접근 방식과 반대됩니다. From 061fe57a8a737fdce2d4c5063c35b2c6e54ea654 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 13:59:47 +0900 Subject: [PATCH 52/58] [ko]: add index.md in `web/glossary/apple_safari` (#15569) [revise]: revise feedback --- files/ko/glossary/apple_safari/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 files/ko/glossary/apple_safari/index.md diff --git a/files/ko/glossary/apple_safari/index.md b/files/ko/glossary/apple_safari/index.md new file mode 100644 index 00000000000000..399c5f43d7cf0c --- /dev/null +++ b/files/ko/glossary/apple_safari/index.md @@ -0,0 +1,18 @@ +--- +title: 애플 사파리 +slug: Glossary/Apple_Safari +l10n: + sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 +--- + +{{GlossarySidebar}} + +[Safari](https://www.apple.com/safari/)는 Apple에 의해 개발되고 macOS, iPadOS 및 iOS에 올라가는 {{Glossary("Browser","웹 브라우저")}}입니다. 사파리는 [Webkit](https://webkit.org/) 오픈소스 엔진을 기반으로 합니다. + +## 같이 보기 + +- 위키백과의 [Safari]() +- [apple.com의 Safari](https://www.apple.com/safari/) +- [WebKit 프로젝트](https://webkit.org/) +- [WebKit 개발 중인 빌드](https://webkit.org/build-archives/) +- [Safari의 버그 알리기](https://bugs.webkit.org/) From 7a8177516965da8cb1535956e86497e6075e3a61 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Wed, 4 Oct 2023 14:00:55 +0900 Subject: [PATCH 53/58] [ko]: add index.md for `web/glossary/openssl` (#16176) [revise]: revise feedback --- files/ko/glossary/openssl/index.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 files/ko/glossary/openssl/index.md diff --git a/files/ko/glossary/openssl/index.md b/files/ko/glossary/openssl/index.md new file mode 100644 index 00000000000000..6a99e65d400b7e --- /dev/null +++ b/files/ko/glossary/openssl/index.md @@ -0,0 +1,15 @@ +--- +title: OpenSSL +slug: Glossary/OpenSSL +l10n: + sourceCommit: 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94 +--- + +{{GlossarySidebar}} + +OpenSSL은 {{glossary("TLS")}} 와 {{glossary("SSL")}}의 오픈소스 구현체입니다. + +## 같이 보기 + +- 위키백과의 [OpenSSL](https://en.wikipedia.org/wiki/OpenSSL) +- [공식 웹사이트](https://www.openssl.org/) From 268aef7e3548b2764e2aa21c93067ad23f5b7226 Mon Sep 17 00:00:00 2001 From: yyss Date: Sat, 30 Sep 2023 12:57:55 +0900 Subject: [PATCH 54/58] =?UTF-8?q?Firefox=20118=20for=20developers=E3=82=92?= =?UTF-8?q?=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sep 29, 2023の英語版に対応。 --- .../ja/mozilla/firefox/releases/118/index.md | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/ja/mozilla/firefox/releases/118/index.md diff --git a/files/ja/mozilla/firefox/releases/118/index.md b/files/ja/mozilla/firefox/releases/118/index.md new file mode 100644 index 00000000000000..eaadf22e1f07e0 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/118/index.md @@ -0,0 +1,79 @@ +--- +title: Firefox 118 for developers +slug: Mozilla/Firefox/Releases/118 +l10n: + sourceCommit: be0e7680f74b65e4374fc2835b341745c1619308 +--- + +{{FirefoxSidebar}} + +このページでは、開発者に影響する Firefox 118 の変更点をまとめています。Firefox 118 は、米国時間 2023 年 9 月 26 日にリリースされました。 + +## ウェブ開発者向けの変更点一覧 + +### HTML + +- {{HTMLElement('search')}} 要素をサポートしました。`` 要素は、検索やフィルタリング操作に使用するすべての要素を包含する役割を持つグループ要素です ([Firefox bug 1824121](https://bugzil.la/1824121))。 + +### CSS + +- {{cssxref("font-synthesis-position")}} プロパティと、{{cssxref("font-synthesis")}} ショートハンドプロパティの値 `position` をサポートしました。これらは {{cssxref("font-variant-position")}} を使用しているときに、上付き文字や下付き文字のグリフを持たないフォントでそれらを無効にすることができます ([Firefox bug 1849010](https://bugzil.la/1849010))。 +- 以下の CSS [数学関数](/ja/docs/Web/CSS/CSS_Functions#math_functions) をサポートしました: [`abs()`](/ja/docs/Web/CSS/abs)、[`sign()`](/ja/docs/Web/CSS/sign)、[`round()`](/ja/docs/Web/CSS/round)、[`mod()`](/ja/docs/Web/CSS/mod)、[`rem()`](/ja/docs/Web/CSS/rem)、[`pow()`](/ja/docs/Web/CSS/pow)、[`sqrt()`](/ja/docs/Web/CSS/sqrt)、[`hypot()`](/ja/docs/Web/CSS/hypot)、[`log()`](/ja/docs/Web/CSS/log)、[`exp()`](/ja/docs/Web/CSS/exp) (Firefox bug [1814589](https://bugzil.la/1814589))。 +- CSS [`font-size-adjust`](/ja/docs/Web/CSS/font-size-adjust) プロパティで、最初に使用可能なフォントから望まれた `` を取得できるキーワード `from-font` をサポートしました (Firefox bug [1708240](https://bugzil.la/1708240))。 + +### JavaScript + +変更なし。 + +### HTTP + +- HTTP [`Permissions-Policy`](/ja/docs/Web/HTTP/Headers/Permissions-Policy) ヘッダーの [`publickey-credentials-get`](/ja/docs/Web/HTTP/Headers/Permissions-Policy/publickey-credentials-get) ディレクティブをサポートしました。これはクロスオリジンのインラインフレームで、公開鍵証明書を取得するために [Web Authentication API](/ja/docs/Web/API/Web_Authentication_API) インターフェイスを使用可能にします ([Firefox bug 1460986](https://bugzil.la/1460986))。 + +### MathML + +- [``](/ja/docs/Web/MathML/Element/semantics) および [``](/ja/docs/Web/MathML/Element/maction) 要素が、デフォルトで最初の子要素のみ表示するようになりました。設定項目 `mathml.legacy_maction_and_semantics_implementations.disabled` を削除しました (Firefox bug [1788223](https://bugzil.la/1788223))。 +- [`mathvariant`](/ja/docs/Web/MathML/Element/mi#mathvariant) で、`normal` を除くすべての値が非推奨になりました。また、この属性を使う要素が `` に限定されました (Firefox bug [1845461](https://bugzil.la/1845461))。 + +### SVG + +変更なし。 + +### セキュリティ + +変更なし。 + +### API + +- Windows の ⊞ Windows ロゴ キーおよび macOS の Command キーについて、[`KeyboardEvent.key`](/ja/docs/Web/API/KeyboardEvent/key) が値 `"OS"` ではなく `"Meta"` を、[`KeyboardEvent.code`](/ja/docs/Web/API/KeyboardEvent/code) が値 `OSLeft`/`OSRight` ではなく `MetaLeft`/`MetaRight` を返すようになりました (Firefox bug [1232918](https://bugzil.la/1232918))。 +- {{domxref("RTCRtpTransceiver.currentDirection")}} および {{domxref("RTCRtpTransceiver.direction")}} プロパティで、トランシーバーが停止したかを示す値 `"stopped"` をサポートしました。これは、非推奨の {{domxref("RTCRtpTransceiver.stopped")}} プロパティに代わって使用するべきです ([Firefox bug 1568296](https://bugzil.la/1568296))。 +- {{domxref("RTCPeerConnection.getTransceivers()")}} が返す配列で、停止したトランシーバーを除外するようになりました。同様に {{domxref("RTCPeerConnection.getReceivers()")}} および {{domxref("RTCPeerConnection.getSenders()")}} が、停止したトランシーバーに関連づけられたレシーバーおよびセンダーを除外します ([Firefox bug 1568296](https://bugzil.la/1568296))。 +- [`TextMetrics.emHeightDescent`](/ja/docs/Web/API/TextMetrics/emHeightDescent) および [`TextMetrics.emHeightAscent`](/ja/docs/Web/API/TextMetrics/emHeightAscent) プロパティをサポートしました (Firefox bug [1841692](https://bugzil.la/1841692))。 +- [`CSSStyleRule`](/ja/docs/Web/API/CSSStyleRule) が、[`CSSRule`](/ja/docs/Web/API/CSSRule) から直接継承するのではなく [`CSSGroupingRule`](/ja/docs/Web/API/CSSGroupingRule) から継承するようになりました。その結果 [`cssRules`](/ja/docs/Web/API/CSSGroupingRule/cssRules) プロパティと、[`deleteRule()`](/ja/docs/Web/API/CSSGroupingRule/cssRules) および [`insertRule()`](/ja/docs/Web/API/CSSGroupingRule/insertRule) メソッドを追加実装します (Firefox bug [1846251](https://bugzil.la/1846251))。 + +### WebDriver conformance (WebDriver BiDi, Marionette) + +#### 一般 + +- WebDriver BiDi および Marionette で、返されたユーザープロンプトの文字列が空になる現象を引き起こす Android の内部競合を修正しました ([Firefox bug 1848167](https://bugzil.la/1848167))。 +- Marionette の `WebDriver:PerformActions` コマンドおよび WebDriver BiDi の `browsingContext.performActions` コマンドで、高解像度ディスプレイが接続された環境で `wheel` 入力ソースによるスクロールが失敗する問題を修正しました ([Firefox bug 1849229](https://bugzil.la/1849229))。 + +#### WebDriver BiDi + +- ユーザーが指定したバックグラウンドのタブをフォアグラウンドに移動できるコマンド [`browsingContext.activate`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-activate) を追加しました ([Firefox bug 1841004](https://bugzil.la/1841004))。 +- 表示された `alert`、`confirm` または `prompt` 型のユーザープロンプトを受け入れるか拒否できるコマンド [`browsingContext.handleUserPrompt`](https://w3c.github.io/webdriver-bidi/#command-browsingContext-handleUserPrompt) を追加しました ([Firefox bug 1824197](https://bugzil.la/1824197))。 +- `alert`、`confirm` または `prompt` 型のユーザープロンプトが開いたときに発生するイベント [`browsingContext.userPromptOpened`](https://w3c.github.io/webdriver-bidi/#event-browsingContext-userPromptOpened) を追加しました ([Firefox bug 1824224](https://bugzil.la/1824224))。 +- `event` メッセージまたはコマンドの成功状態を識別するためにクライアントへ返される JSON ペイロードに、`type` フィールドを追加しました。これは `success` または `error` のいずれかになります ([Firefox bug 1844009](https://bugzil.la/1844009))。 + +#### Marionette + +- すべての [Web Authentication 拡張機能コマンド](https://www.w3.org/TR/webauthn-2/#sctn-automation) をサポートしました。これは、ユーザーが公開鍵暗号の資格情報で自身を認証できるようにします ([Firefox bug 1846574](https://bugzil.la/1846574))。 + +## アドオン開発者向けの変更点一覧 + +### 廃止 + +- Manifest V3 拡張機能向けの、[`action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/action)、[`options_ui`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui)、[`page_action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action)、[`sidebar_action`](/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action) マニフェストキーにおける [`browser_style`](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles) のサポートを廃止しました ([Firefox bug 1830711](https://bugzil.la/1830711))。Manifest V3 拡張機能で `browser_style` から移行するための情報について、詳しくは [Browser Styles' Manifest v3 migration](/ja/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles#manifest_v3_migration) をご覧ください。 + +## 過去のバージョン + +{{Firefox_for_developers(117)}} From c33d690ae263b53706313716362295c0b2e10828 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 12:59:31 +0900 Subject: [PATCH 55/58] =?UTF-8?q?2023/05/10=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/compression/index.md | 32 ++++++++++++++------------ 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/files/ja/web/http/compression/index.md b/files/ja/web/http/compression/index.md index a6c90a690f96ab..b75362d81d71c6 100644 --- a/files/ja/web/http/compression/index.md +++ b/files/ja/web/http/compression/index.md @@ -1,28 +1,30 @@ --- title: HTTP の圧縮 slug: Web/HTTP/Compression +l10n: + sourceCommit: b0870830e4c02596ca6c501f8f8b468a917eafc2 --- {{HTTPSidebar}} -**圧縮**は、ウェブサイトのパフォーマンスを向上させるための重要な手段です。ドキュメントによっては、必要な帯域を最大 70% 削減するほどサイズが縮減します。長年かけてアルゴリズムはより効率的になり、またクライアントおよびサーバーが新たなアルゴリズムをサポートしました。 +**圧縮**は、ウェブサイトのパフォーマンスを向上させるための重要な手段です。文書によっては、必要な帯域を最大 70% 削減するほどサイズが縮減します。長年かけてアルゴリズムはより効率的になり、またクライアントおよびサーバーが新たなアルゴリズムに対応してきました。 実際のところ、圧縮の仕組みはブラウザーやサーバーがすでに実装していますので、ウェブ開発者が実装する必要性はありません。しかし、サーバーが適切に設定されるように注意しなければなりません。圧縮は、3 種類の異なるレベルで実施します。 - 始めに、一部のファイル形式は、固有の最適化された方法で圧縮されます。 -- そして、一般的な暗号化が HTTP レベルで行われれる場合があります (リソースはエンドツーエンドで圧縮されて転送されます) +- そして、一般的な暗号化が HTTP レベルで行われれる場合があります（リソースはエンドツーエンドで圧縮されて転送されます） - 最後に HTTP コネクションの 2 つのノード間で、コネクションレベルで圧縮が定義される場合があります。 ## ファイル形式の圧縮 -それぞれのデータ形式には、無駄なスペース (_wasted space_) と呼ばれる冗長な領域が内部にあります。テキストが一般的に 60% もの冗長性を持つとして、この割合は音声や動画といった他のメディアよりはるかに高くなります。テキストとは異なり、これらのその他のメディア形式はデータを格納するためにより多くの領域を使用するので、ストレージを最適化し領域を取り戻す必要性はごく初期に明らかになりました。技術者は特定の用途向けに設計されたファイル形式で使用される、最適化された圧縮アルゴリズムを設計しました。メディアファイルで使用される圧縮アルゴリズムは、大きく 2 つのカテゴリーに分類できます。 +それぞれのデータ形式には、無駄なスペース (_wasted space_) と呼ばれる冗長な領域が内部にあります。テキストは一般的に 60% もの冗長性を持つものであり、この割合は音声や動画といった他のメディアよりはるかに高くなります。テキストとは異なり、これらのその他のメディア形式はデータを格納するためにより多くの領域を使用するので、ストレージを最適化し領域を取り戻す必要性はごく初期に明らかになりました。技術者は特定の用途向けに設計されたファイル形式で使用される、最適化された圧縮アルゴリズムを設計しました。メディアファイルで使用される圧縮アルゴリズムは、大きく 2 つのカテゴリーに分類できます。 -- _可逆圧縮_。圧縮・展開のサイクルで取り出したデータが変化しません。これは元のデータに (バイト単位で) 一致します。 +- _可逆圧縮_。圧縮・展開のサイクルで取り出したデータが変化しません。これは元のデータに（バイト単位で）一致します。 画像では `gif` や `png` が可逆圧縮を使用しています。 -- _非可逆圧縮_。圧縮・展開のサイクルで、ユーザーが (できるだけ) 感知できない方法で元のデータを変更します。 +- _非可逆圧縮_。圧縮・展開のサイクルにおいて、ユーザーが（できるだけ）認知できない方法で元のデータを変更します。 ウェブ上の動画形式は非可逆です。 `jpeg` 画像も非可逆です。 -`webp` のように可逆圧縮と非可逆圧縮のいずれかを使用できる形式もありますが、通常は非可逆圧縮で高圧縮・低圧縮を設定でき、当然ながらそれは品質の高低に結びつきます。サイトのパフォーマンスを高めるには、満足できる品質レベルを維持しながら、できるだけ圧縮することが理想です。画像の場合は、ツールが生成する画像はウェブ向けに十分最適化されていない場合があります。要求する品質で可能な限り圧縮するツールを使用することをお勧めします。この用途に特化した [多くのツール](https://www.creativebloq.com/design/image-compression-tools-1132865) があります。 +`webp` のように可逆圧縮と非可逆圧縮のいずれかを使用できる形式もありますが、通常は非可逆圧縮で高圧縮・低圧縮を設定でき、当然ながらそれは品質の高低に結びつきます。サイトのパフォーマンスを高めるには、満足できる品質レベルを維持しながら、できるだけ圧縮することが理想です。画像の場合は、ツールが生成する画像はウェブ向けに十分最適化されていない場合があります。要求する品質で可能な限り圧縮するツールを使用することをお勧めします。この用途に特化した[多くのツール](https://www.creativebloq.com/design/image-compression-tools-1132865)があります。 非可逆圧縮アルゴリズムは一般的に、可逆圧縮より効率がよくなります。 @@ -30,30 +32,30 @@ slug: Web/HTTP/Compression ## エンドツーエンドの圧縮 -エンドツーエンドの圧縮は、ウェブサイトのパフォーマンスをもっとも向上させます。エンドツーエンドの圧縮は、サーバーによって行われるメッセージボディの圧縮を指しており、圧縮されたデータはクライアントに到達するまで変更されません。中間のノードはすべて、ボディ部分に手をつけないままにします。 +エンドツーエンドの圧縮は、ウェブサイトのパフォーマンスをもっとも向上させます。エンドツーエンドの圧縮は、サーバーによって行われるメッセージ本体の圧縮を指しており、圧縮されたデータはクライアントに到達するまで変更されません。中間のノードはすべて、本体部分に手をつけないままにします。 -![](httpenco1.png) +![圧縮された HTTP 本体をネットワークノード経由でクライアントに送信するサーバー。本体がクライアントにリーチするまで、ネットワーク上のどのホップでも展開されません。](httpenco1.png) 現代のすべてのブラウザーやサーバーはこの圧縮をサポートしており、唯一取り決めることは、使用する圧縮アルゴリズムです。これらのアルゴリズムは、テキストに最適化されています。1990 年代に圧縮技術は速いペースで進歩して、いくつものアルゴリズムが、使用可能な選択肢に追加されました。現在妥当なアルゴリズムは、もっとも一般的な `gzip` と新たな挑戦者である `br` の 2 つだけです。 -使用するアルゴリズムを選択するには、ブラウザーとサーバーで [プロアクティブなコンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation) を行います。ブラウザーは {{HTTPHeader("Accept-Encoding")}} ヘッダーで、サポートするアルゴリズムを優先度順に並べて送信します。サーバーはそのうちひとつを選択して、レスポンスのボディの圧縮に使用します。そして {{HTTPHeader("Content-Encoding")}} ヘッダーを使用して、選択したアルゴリズムをブラウザーに伝えます。エンコーディングに基づいて表現を選択するためにコンテンツネゴシエーションを使用したとき、少なくとも {{HTTPHeader("Content-Encoding")}} を含めた {{HTTPHeader("Vary")}} ヘッダーを、レスポンスとともに送信しなければなりません。この方法によって、リソースのさまざまな表現をキャッシュすることができます。 +使用するアルゴリズムを選択するには、ブラウザーとサーバーで[プロアクティブなコンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)を行います。ブラウザーは {{HTTPHeader("Accept-Encoding")}} ヘッダーで、サポートするアルゴリズムを優先度順に並べて送信します。サーバーはそのうちひとつを選択して、レスポンスの本体の圧縮に使用します。そして {{HTTPHeader("Content-Encoding")}} ヘッダーを使用して、選択したアルゴリズムをブラウザーに伝えます。エンコーディングに基づいて表現を選択するためにコンテンツネゴシエーションを使用したとき、少なくとも {{HTTPHeader("Content-Encoding")}} を含めた {{HTTPHeader("Vary")}} ヘッダーを、レスポンスとともに送信しなければなりません。この方法によって、リソースのさまざまな表現をキャッシュすることができます。 -![](httpcompression1.png) +!['Accept-Encoding: br, gzip' ヘッダーでコンテンツをリクエストされたクライアント。サーバは Brotli アルゴリズムで圧縮した本体と、必要な 'Content-Encoding' ヘッダーと 'Vary' ヘッダーでレスポンスします。](httpcompression1.png) 圧縮によってパフォーマンスが大きく向上しますので、画像・音声・動画といったすでに圧縮されているものを除くすべてのファイルで圧縮を有効化することを推奨します。 -Apache は圧縮や [mod_deflate](https://httpd.apache.org/docs/current/mod/mod_deflate.html) をサポートします。 nginx では [ngx_http_gzip_module](https://nginx.org/en/docs/http/ngx_http_gzip_module.html)、 IIS では [``](https://www.iis.net/configreference/system.webserver/httpcompression) 要素があります。 +Apache は圧縮や [mod_deflate](https://httpd.apache.org/docs/current/mod/mod_deflate.html) をサポートします。 Nginx では [ngx_http_gzip_module](https://nginx.org/en/docs/http/ngx_http_gzip_module.html)、 IIS では [``](https://docs.microsoft.com/iis/configuration/system.webServer/httpCompression/) 要素があります。 ## ホップバイホップの圧縮 -ホップバイホップの圧縮はエンドツーエンドの圧縮に似ています。しかし、サーバー内のリソースでは圧縮を行わずに特定の表現形式を生成して転送しますが、クライアントとサーバーの間のパス上にある任意の 2 つのノードの間でメッセージのボディが圧縮されるという根本的な違いがあります。連続した中間ノードの間のコネクションで、*異なる*圧縮が行われることがあります。 +ホップバイホップの圧縮はエンドツーエンドの圧縮に似ています。しかし、サーバー内のリソースでは圧縮を行わずに特定の表現形式を生成して転送しますが、クライアントとサーバーの間のパス上にある任意の 2 つのノードの間でメッセージの本体が圧縮されるという根本的な違いがあります。連続した中間ノードの間のコネクションで、*異なる*圧縮が行われることがあります。 -![](httpte1.png) +![非圧縮 HTTP 本体をネットワークノード経由でクライアントに送信するサーバー。本体はクライアントに到達する前に、'Transfer-Encoding' ヘッダーによってネットワーク上のノードで圧縮・展開されます。](httpte1.png) これを行うために、 HTTP ではエンドツーエンドの圧縮のコンテンツネゴシエーションに似ている仕組みを使用します。リクエストを転送するノードは {{HTTPHeader("TE")}} ヘッダーを使用して圧縮アルゴリズムを伝えます。相手のノードは適切な方式を選択して圧縮を行い、 {{HTTPHeader("Transfer-Encoding")}} ヘッダーを使用して、選択した方式を示します。 -![](httpcomp2.png) +![クライアントが、圧縮関連のヘッダーを持たないコンテンツをサーバーにリクエストされた場合。サーバーは圧縮されていない本体で応答します。本体がクライアントにリーチするまでに、ネットワーク上のノードで圧縮と展開が行われます。](httpcomp2.png) 実際は、ホップバイホップの圧縮はサーバーやクライアントにとって透過的であり、あまり使用されません。 {{HTTPHeader("TE")}} および {{HTTPHeader("Transfer-Encoding")}} は主にチャンク形式でレスポンスを送信するために使用され、長さがわからないリソースの転送を開始することができます。 -ホップレベルで圧縮や {{HTTPHeader("Transfer-Encoding")}} を使用することは Apache、nginx、IIS などほとんどのサーバーでまれであり、簡単に設定する方法はありません。このような設定は、主にプロキシレベルで行います。 +ホップレベルで圧縮や {{HTTPHeader("Transfer-Encoding")}} を使用することは Apache、Nginx、IIS などほとんどのサーバーでまれであり、簡単に設定する方法はありません。このような設定は、主にプロキシーレベルで行います。 From 5591496499e2f5ab2f3a887b80f0965b8df79d73 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 30 Sep 2023 13:16:17 +0900 Subject: [PATCH 56/58] =?UTF-8?q?2023/07/19=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/http/conditional_requests/index.md | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/files/ja/web/http/conditional_requests/index.md b/files/ja/web/http/conditional_requests/index.md index b9409fcca14379..06acc1dc663f04 100644 --- a/files/ja/web/http/conditional_requests/index.md +++ b/files/ja/web/http/conditional_requests/index.md @@ -1,6 +1,8 @@ --- title: HTTP 条件付きリクエスト slug: Web/HTTP/Conditional_requests +l10n: + sourceCommit: fc577878fa29a23248fba29e14eb67beb54aaaa2 --- {{HTTPSidebar}} @@ -13,8 +15,8 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 リクエストで使用したメソッドや前提条件で使用したヘッダー一式によって、さまざまな動作が定義されています。 -- {{HTTPMethod("GET")}} などの{{glossary("safe", "安全な")}}メソッドは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。 -- {{HTTPMethod("PUT")}} などの{{glossary("safe", "安全ではない")}}メソッドは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。 +- {{glossary("Safe/HTTP", "安全な")}}メソッド、例えば {{HTTPMethod("GET")}} などは、一般に文書を取得するメソッドであり、条件付きリクエストは関連する文書のみを返信するために利用することができます。これによって、帯域を節約します。 +- {{glossary("Safe/HTTP", "安全ではない")}}メソッド、例えば {{HTTPMethod("PUT")}} などは、一般に文書をアップロードするメソッドであり、条件付きリクエストは文書がサーバーに格納されているものと同じものに基づいたものである場合に限ってアップロードするようにするために利用することができます。 ## 検証子 @@ -34,7 +36,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 強い検証は、比較対象のリソースがバイト単位で同一であることを保証します。これは一部の条件ヘッダーで必須、また他のヘッダーでは既定の要件です。強い検証はとても厳密であり、サーバーレベルで保証することが困難である場合もありますが、時には性能を犠牲にしても、データが失われていないことを常に保証します。 -{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ (あるいはその派生物) を持つ {{HTTPHeader("ETag")}} を使用します。 +{{HTTPHeader("Last-Modified")}} で強い検証のための一意な識別子を持つことは、とても困難です。多くの場合、リソースの MD5 ハッシュ（あるいはその派生物）を持つ {{HTTPHeader("ETag")}} を使用します。 ### 弱い検証 @@ -45,13 +47,13 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 条件ヘッダーと呼ばれるいくつかの HTTP ヘッダーが、条件付きリクエストをもたらします。 - {{HTTPHeader("If-Match")}} - - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せた etag が等しければ成功します。強い検証を行います。 - {{HTTPHeader("If-None-Match")}} - - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。既定では etag に接頭辞 `'W/'` がついていない限り、強い検証を行います。 + - : 遠方のリソースの {{HTTPHeader("ETag")}} と、このヘッダーに載せたそれぞれの etag が異なっていれば成功します。弱い検証を行います。 - {{HTTPHeader("If-Modified-Since")}} - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より新しければ成功します。 - {{HTTPHeader("If-Unmodified-Since")}} - - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時より過去または同一であれば成功します。 + - : 遠方のリソースの {{HTTPHeader("Last-Modified")}} の日時が、このヘッダーで指定した日時以前であれば成功します。 - {{HTTPHeader("If-Range")}} - : {{HTTPHeader("If-Match")}} や {{HTTPHeader("If-Unmodified-Since")}} に似ていますが、 etag または日時をひとつしか持つことができません。条件が失敗すると範囲指定リクエストも失敗して、 {{HTTPStatus("206")}} `Partial Content` レスポンスの代わりに {{HTTPStatus("200")}} `OK` でリソース全体を送信します。 @@ -65,13 +67,14 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 リソースと共に、ヘッダーで検証子を送信します。この例では {{HTTPHeader("Last-Modified")}} と {{HTTPHeader("ETag")}} の両方を送信していますが、どちらか一方しか使用しません。これらの検証子はリソースと共に (すべてのヘッダーのように) キャッシュへ保存され、キャッシュが陳腐化したときに条件付きリクエストを作成するために使用します。 -キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。 +キャッシュが陳腐化していなければ、条件付きリクエストは行いません。しかしキャッシュが陳腐化すると主に {{HTTPHeader("Cache-Control")}} ヘッダーに制御されて、クライアントはキャッシュされた値を直接使用せず、{{HTTPHeader("If-Modified-Since")}} または {{HTTPHeader("If-None-Match")}} ヘッダーに検証子の値を指定した*条件付きリクエスト*を発行します。 リソースが変更されていなければ、サーバーは {{HTTPStatus("304")}} `Not Modified` レスポンスを返します。これはキャッシュを再び新鮮な状態にして、クライアントはキャッシュされたリソースを使用します。これはリソースをいくらか消費するレスポンスとリクエストのやり取りが発生しますが、通信網でリソース全体を再度転送するよりも効率的です。 ![キャッシュが古くなっている状態では、条件付きのリクエストが送信されます。サーバーは、リソースが変更されたかどうかを判断し、このケースのように、同じものであるため再度送信しないことを決定することができます。](httpcache2.png) -リソースが変更された場合は、サーバーは条件付きではないリクエストと同様に {{HTTPStatus("200")}} `OK` レスポンスで新しいバージョンのリソースを送信します。そして、クライアントは新しいリソースを使用します (また、それをキャッシュします)。 +リソースが変更された場合、サーバーは新しいバージョンのリソースを含む {{HTTPStatus("200", "200 OK")}} レスポンスを返します（リクエストが条件付きでなかったかのように）。 +クライアントはこの新しいリソースを使用します（そしてキャッシュします）。 ![リソースが変更された場合には、リクエストが条件付きでなかったかのように送り返されます。](httpcache3.png) @@ -97,7 +100,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 ![If-Range ヘッダーを使用すると、リソースが変更されている場合、サーバは直接完全なリソースを送り返すことができ、 412 エラーを送信してクライアントが再度ダウンロードを開始するのを待つ必要がありません。](httpresume4.png) -この解決策はより効率的ですが、柔軟性が若干劣ります (条件で etag をひとつしか使用できません)。ただし、これ以上の柔軟性はほとんど必要ありません。 +この解決策はより効率的ですが、柔軟性が若干劣ります（条件で etag をひとつしか使用できません）。ただし、これ以上の柔軟性はほとんど必要ありません。 ### 楽観的ロックで更新が失われる問題を避ける @@ -113,7 +116,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 2 つのクライアントの片方を困らせることなく、この問題に対処する方法はありません。しかし、更新が失われたりや競合状態になったりすることは避けるべきです。予測可能な結果や、クライアントが変更点を却下されたときに通知を受けることを望みます。 -条件付きリクエストで、_楽観的ロックアルゴリズム_ (ほとんどの wiki やソース管理システムで使用されています) を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。 +条件付きリクエストで、_楽観的ロックアルゴリズム_ （ほとんどの wiki やソース管理システムで使用されています）を実装できます。この考え方ではすべてのクライアントに、リソースの複製の取得を許可してローカルで変更することを許可します。そして、最初のクライアントが更新内容を送信することを許可して成功させて、以降の古いバージョンになったリソースに基づく更新は拒否します。 ![条件付きリクエストにより、楽観的なロックを実装することができます。](httplock3.png) @@ -125,7 +128,7 @@ HTTP 条件付きリクエストは、特定のヘッダーの値に応じて異 ![通常のアップロードと同様に、リソースの最初のアップロードには競合状態が発生します。 If-None-Match で防ぐことができます。](httpfirst.png) -`If-None-Match` は HTTP/1.1 (およびそれ以降) に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。 +`If-None-Match` は HTTP/1.1 （およびそれ以降）に準拠するサーバーのみで動作します。サーバーが対応しているかが不明である場合は、始めに確認用の {{HTTPMethod("HEAD")}} リクエストをリソースに対して発行しなければなりません。 ## まとめ From 2e119f9e6699a5ee781b5299cb1bc39cdce01c76 Mon Sep 17 00:00:00 2001 From: MikeCAT Date: Wed, 4 Oct 2023 19:38:05 +0900 Subject: [PATCH 57/58] Translate HTTP 4xx status codes --- files/ja/web/http/status/421/index.md | 20 +++++++++++++++ files/ja/web/http/status/423/index.md | 37 +++++++++++++++++++++++++++ files/ja/web/http/status/424/index.md | 26 +++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 files/ja/web/http/status/421/index.md create mode 100644 files/ja/web/http/status/423/index.md create mode 100644 files/ja/web/http/status/424/index.md diff --git a/files/ja/web/http/status/421/index.md b/files/ja/web/http/status/421/index.md new file mode 100644 index 00000000000000..3e523ed0b43f27 --- /dev/null +++ b/files/ja/web/http/status/421/index.md @@ -0,0 +1,20 @@ +--- +title: 421 Misdirected Request +slug: Web/HTTP/Status/421 +l10n: + sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 +--- + +{{HTTPSidebar}} + +HTTP **`421 Misdirected Request`** クライエントエラーレスポンスコードは、リクエストがレスポンスを生成できないサーバーに送られたことを示します。これは、接続が再利用されたり、代替サービスが選択されたとき起こり得ます。 + +## ステータス + +```plain +421 Misdirected Request +``` + +## 仕様書 + +{{Specifications}} diff --git a/files/ja/web/http/status/423/index.md b/files/ja/web/http/status/423/index.md new file mode 100644 index 00000000000000..2479956ac505cf --- /dev/null +++ b/files/ja/web/http/status/423/index.md @@ -0,0 +1,37 @@ +--- +title: 423 Locked +slug: Web/HTTP/Status/423 +l10n: + sourceCommit: bb25f8e4cb5819b439e370010b4f0c7bcc0fda8e +--- + +{{HTTPSidebar}} + +> **メモ:** リソースを _ロック_ する機能は、{{Glossary("WebDAV")}} サーバーの一部に固有のものです。ウェブページにアクセスしているブラウザーがこのステータスコードを受け取ることは無いはずです。これを受け取る間違った状況では、ブラウザーはこれを一般の `400` ステータスコードとして扱うでしょう。 + +HTTP **`423 Locked`** エラーレスポンスコードは、対象のリソースが _ロックされている_、すなわちアクセスできないことを示します。コンテンツは、WebDAV の XML 形式で情報を含むべきです。 + +## ステータス + +```plain +423 Locked +``` + +### 例 + +```http +HTTP/1.1 423 Locked +Content-Type: application/xml; charset="utf-8" +Content-Length: xxxx + + + + + /workspace/webdav/ + + +``` + +## 仕様書 + +{{Specifications}} diff --git a/files/ja/web/http/status/424/index.md b/files/ja/web/http/status/424/index.md new file mode 100644 index 00000000000000..66da1d3d7abfaf --- /dev/null +++ b/files/ja/web/http/status/424/index.md @@ -0,0 +1,26 @@ +--- +title: 424 Failed Dependency +slug: Web/HTTP/Status/424 +l10n: + sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c +--- + +{{HTTPSidebar}} + +HTTP **`424 Failed Dependency`** クライエントエラーレスポンスコードは、要求されたアクションが他のアクションに依存しており、そのアクションが失敗したため、対象のリソースに対してメソッドを実行できなかったことを示します。 + +普通のウェブサーバーがこのステータスコードを返すことは通常ありません。しかし、{{Glossary("WebDAV")}} などの他のプロトコルが返すことはあります。たとえば、{{Glossary("WebDAV")}} では、`PROPPATCH` 要求が発行され、あるコマンドが失敗した場合は、他のコマンドも自動的に `424 Failed Dependency` で失敗します。 + +## ステータス + +```plain +424 Failed Dependency +``` + +## 仕様書 + +{{Specifications}} + +## 関連情報 + +- {{HTTPStatus("403")}} (Forbidden) From 25438bb34bffda17d6004176e5aa6abaace02e16 Mon Sep 17 00:00:00 2001 From: HoJeong Im <39ghwjd@naver.com> Date: Thu, 5 Oct 2023 00:42:26 +0900 Subject: [PATCH 58/58] [ko]: revise index.md for `web/glossary/function` (#15994) [revise]: revise feedback --- files/ko/glossary/function/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ko/glossary/function/index.md b/files/ko/glossary/function/index.md index fcf3b54c5d28d3..53a2d45aee01d5 100644 --- a/files/ko/glossary/function/index.md +++ b/files/ko/glossary/function/index.md @@ -1,5 +1,5 @@ --- -title: 함수 +title: 함수 (function) slug: Glossary/Function l10n: sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34 @@ -7,13 +7,13 @@ l10n: {{GlossarySidebar}} -**함수**는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 {{Glossary("variable", "변수")}}에 의해 호출될 수 있는 코드 조각입니다. 함수가 호출될 때, 함수의 입력으로 {{Glossary("Argument", "인수")}} 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있습니다. 또한 {{glossary("JavaScript")}}에서 함수는 {{glossary("object", "객체")}}이기도 합니다. +**함수(function)** 는 다른 코드에서 또는 자신에 의해 호출되거나 함수 레퍼런스를 저장한 {{Glossary("variable", "변수")}}에 의해 호출될 수 있는 코드 조각입니다. 함수가 호출될 때, 함수의 입력으로 {{Glossary("Argument", "인수")}} 가 전달되고 함수는 선택적으로 출력값을 반환할 수 있습니다. 또한 {{glossary("JavaScript")}}에서 함수는 {{glossary("object", "객체")}}이기도 합니다. -함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 {{Glossary("identifier","식별자")}}입니다. 함수 이름의 {{Glossary("scope","범위")}}는 함수 이름의 선언식 또는 표현식인지에 따라 결정된다. +함수명은 함수 선언문 또는 함수 표현식의 일부로써 선언된 {{Glossary("identifier","식별자")}}입니다. 함수 이름의 {{Glossary("scope","범위")}}는 함수 이름의 선언식 또는 표현식인지에 따라 결정됩니다. ### 여러 함수 형식들 -**익명 함수**는 함수명이 없는 함수입니다. 함수 표현식만 이름이 없을 수 있으며, 함수 선언식에는 반드시 이름이 있어야합니다. +**익명 함수**는 함수명이 없는 함수입니다. 함수 표현식만 이름이 없을 수 있으며, 함수 선언식에는 반드시 이름이 있어야 합니다. ```js // 함수 표현식으로 만든 익명 함수 @@ -38,7 +38,7 @@ function foo() {} const baz = () => {}; ``` -**내부 함수**는 다른 함수 내부에서 정의된 함수이다(아래 예에서는 `square`). **외부 함수**는 함수를 포함하고 있는 함수이다(아래 예에서는 `addSquares`): +**내부 함수**는 다른 함수 내부에서 정의된 함수입니다(아래 예에서는 `square`). **외부 함수**는 함수를 포함하고 있는 함수입니다(아래 예에서는 `addSquares`). ```js function addSquares(a, b) { @@ -94,9 +94,9 @@ function foo() { }(); ``` -IIFE에 대해 더 많은 설명이 필요하다면, 위키피디아의 다음 페이지를 확인해 주세요. [Immediately Invoked Function Expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) +IIFE에 대해 더 많은 설명이 필요하다면, 위키피디아의 [즉시 실행 함수 표현식(Immediately Invoked Function Expression)](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)을 확인해주세요. ## 같이 보기 -- [Functions](/ko/docs/Web/JavaScript/Guide/Functions) -- [Arrow Functions](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions) +- [함수](/ko/docs/Web/JavaScript/Guide/Functions) +- [화살표 함수](/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions)