diff --git a/files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md b/docs/ko/fully_untranslated_files/Learn_Common_questions_Tools_and_setup_Upload_files_to_a_web_server.md similarity index 100% rename from files/ko/learn/common_questions/tools_and_setup/upload_files_to_a_web_server/index.md rename to docs/ko/fully_untranslated_files/Learn_Common_questions_Tools_and_setup_Upload_files_to_a_web_server.md diff --git a/files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md b/docs/ko/fully_untranslated_files/Learn_Common_questions_Tools_and_setup_What_software_do_I_need.md similarity index 100% rename from files/ko/learn/common_questions/tools_and_setup/what_software_do_i_need/index.md rename to docs/ko/fully_untranslated_files/Learn_Common_questions_Tools_and_setup_What_software_do_I_need.md diff --git a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md b/docs/ko/fully_untranslated_files/Learn_Common_questions_Web_mechanics_Pages_sites_servers_and_search_engines.md similarity index 98% rename from files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md rename to docs/ko/fully_untranslated_files/Learn_Common_questions_Web_mechanics_Pages_sites_servers_and_search_engines.md index 8a676bd7298119..835ba8f7474421 100644 --- a/files/ko/learn/common_questions/web_mechanics/pages_sites_servers_and_search_engines/index.md +++ b/docs/ko/fully_untranslated_files/Learn_Common_questions_Web_mechanics_Pages_sites_servers_and_search_engines.md @@ -10,9 +10,9 @@ slug: Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engine - + diff --git a/docs/ko/guides/glossary-guide.md b/docs/ko/guides/glossary-guide.md index b1688f2a8b6a2c..312631bcaa531b 100644 --- a/docs/ko/guides/glossary-guide.md +++ b/docs/ko/guides/glossary-guide.md @@ -87,6 +87,7 @@ | Instruction | 지침 | [링크](https://github.com/mdn/translated-content/issues/11093#issuecomment-1411005106) | | Naming | 이름 지정 | | | Parameters | 매개변수 | [링크][AudioWorkletNode] | +| Prerequisites | 선행 지식 | | | Requirements | 요구 사항 | | | Value | 값 | [링크][target] | diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index e6c138d23bcb9a..380b11c318ba7d 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -33,7 +33,7 @@ /ja/docs/API/Document/createDocumentFragment /ja/docs/Web/API/Document/createDocumentFragment /ja/docs/API/Document/createElement /ja/docs/Web/API/Document/createElement /ja/docs/API/Document/createElementNS /ja/docs/Web/API/Document/createElementNS -/ja/docs/API/Document/createEntityReference /ja/docs/conflicting/Web/API/Document +/ja/docs/API/Document/createEntityReference /ja/docs/Web/API/Document /ja/docs/API/Document/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/API/Document/createExpression /ja/docs/Web/API/Document/createExpression /ja/docs/API/Document/createNSResolver /ja/docs/Web/API/Document/createNSResolver @@ -2674,7 +2674,7 @@ /ja/docs/Web/API/Document/animationiteration_event /ja/docs/Web/API/Element/animationiteration_event /ja/docs/Web/API/Document/animationstart_event /ja/docs/Web/API/Element/animationstart_event /ja/docs/Web/API/Document/async /ja/docs/Web/API/XMLDocument -/ja/docs/Web/API/Document/createEntityReference /ja/docs/conflicting/Web/API/Document +/ja/docs/Web/API/Document/createEntityReference /ja/docs/Web/API/Document /ja/docs/Web/API/Document/defaultView/storage_event /ja/docs/Web/API/Window/storage_event /ja/docs/Web/API/Document/documentURIObject /ja/docs/orphaned/Web/API/Document/documentURIObject /ja/docs/Web/API/Document/domConfig /ja/docs/Web/API/Document @@ -2751,8 +2751,8 @@ /ja/docs/Web/API/Event/button /ja/docs/Web/API/MouseEvent/button /ja/docs/Web/API/Event/createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/Web/API/EventHandler /ja/docs/Web/Events/Event_handlers -/ja/docs/Web/API/EventListener /ja/docs/conflicting/Web/API/EventTarget/addEventListener_380cb5f366307beb2c072f74e561ee98 -/ja/docs/Web/API/EventListener/handleEvent /ja/docs/conflicting/Web/API/EventTarget/addEventListener +/ja/docs/Web/API/EventListener /ja/docs/Web/API/EventTarget/addEventListener +/ja/docs/Web/API/EventListener/handleEvent /ja/docs/Web/API/EventTarget/addEventListener /ja/docs/Web/API/EventSource/onerror /ja/docs/Web/API/EventSource/error_event /ja/docs/Web/API/EventSource/onmessage /ja/docs/Web/API/EventSource/message_event /ja/docs/Web/API/EventTarget.addEventListener /ja/docs/Web/API/EventTarget/addEventListener @@ -2840,6 +2840,7 @@ /ja/docs/Web/API/HTMLElement/animationiteration_event /ja/docs/Web/API/Element/animationiteration_event /ja/docs/Web/API/HTMLElement/animationstart_event /ja/docs/Web/API/Element/animationstart_event /ja/docs/Web/API/HTMLElement/beforeinput_event /ja/docs/Web/API/Element/beforeinput_event +/ja/docs/Web/API/HTMLElement/cancel_event /ja/docs/Web/API/HTMLElement /ja/docs/Web/API/HTMLElement/contextMenu /ja/docs/orphaned/Web/API/HTMLElement/contextMenu /ja/docs/Web/API/HTMLElement/gotpointercapture_event /ja/docs/Web/API/Element/gotpointercapture_event /ja/docs/Web/API/HTMLElement/input_event /ja/docs/Web/API/Element/input_event @@ -2882,7 +2883,7 @@ /ja/docs/Web/API/HTMLHyperlinkElementUtils/search /ja/docs/Web/API/HTMLAnchorElement/search /ja/docs/Web/API/HTMLHyperlinkElementUtils/toString /ja/docs/Web/API/HTMLAnchorElement/toString /ja/docs/Web/API/HTMLHyperlinkElementUtils/username /ja/docs/Web/API/HTMLAnchorElement/username -/ja/docs/Web/API/HTMLInputElement/mozGetFileNameArray /ja/docs/conflicting/Web/API/HTMLInputElement +/ja/docs/Web/API/HTMLInputElement/mozGetFileNameArray /ja/docs/Web/API/HTMLInputElement /ja/docs/Web/API/HTMLMediaElement/onerror /ja/docs/conflicting/Web/API/HTMLMediaElement/error_event /ja/docs/Web/API/HTMLOrForeignElement /ja/docs/Web/API/HTMLElement /ja/docs/Web/API/HTMLScriptElement/supports /ja/docs/Web/API/HTMLScriptElement/supports_static @@ -3104,8 +3105,8 @@ /ja/docs/Web/API/SpeechRecognition/onstart /ja/docs/Web/API/SpeechRecognition/start_event /ja/docs/Web/API/SpeechRecognitionError /ja/docs/Web/API/SpeechRecognitionErrorEvent /ja/docs/Web/API/StorageEstimate /ja/docs/Web/API/StorageManager/estimate -/ja/docs/Web/API/SyncEvent/registration /ja/docs/conflicting/Web/API/SyncEvent -/ja/docs/Web/API/Text/replaceWholeText /ja/docs/conflicting/Web/API/Text +/ja/docs/Web/API/SyncEvent/registration /ja/docs/Web/API/SyncEvent +/ja/docs/Web/API/Text/replaceWholeText /ja/docs/Web/API/Text /ja/docs/Web/API/TouchList.length /ja/docs/Web/API/TouchList/length /ja/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent /ja/docs/Web/API/Pointer_events /ja/docs/Web/API/UIEvent/layerX /ja/docs/Web/API/MouseEvent/layerX @@ -3746,7 +3747,7 @@ /ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/calc /ja/docs/Web/CSS/calc-constant /ja/docs/Web/CSS/calc-keyword /ja/docs/Web/CSS/clamp() /ja/docs/Web/CSS/clamp -/ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust +/ja/docs/Web/CSS/color-adjust /ja/docs/Web/CSS/print-color-adjust /ja/docs/Web/CSS/color_value/hexadecimal_rgb /ja/docs/orphaned/Web/CSS/color_value/hexadecimal_rgb /ja/docs/Web/CSS/color_value/hsla /ja/docs/Web/CSS/color_value/hsl /ja/docs/Web/CSS/color_value/rgba /ja/docs/Web/CSS/color_value/rgb @@ -4270,7 +4271,7 @@ /ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol /ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /ja/docs/Web/JavaScript/Reference/Errors/Bad_octal /ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal /ja/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield /ja/docs/Web/JavaScript/Reference/Errors/Bad_return -/ja/docs/Web/JavaScript/Reference/Errors/Cant_access_property /ja/docs/conflicting/Web/JavaScript/Reference/Errors/Unexpected_type +/ja/docs/Web/JavaScript/Reference/Errors/Cant_access_property /ja/docs/Web/JavaScript/Reference/Errors/Unexpected_type /ja/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics /ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /ja/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures /ja/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features /ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal /ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal diff --git a/files/ja/conflicting/web/api/document/index.md b/files/ja/conflicting/web/api/document/index.md deleted file mode 100644 index 6f13defa646191..00000000000000 --- a/files/ja/conflicting/web/api/document/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Document.createEntityReference() -slug: conflicting/Web/API/Document -original_slug: Web/API/Document/createEntityReference ---- - -{{ApiRef("DOM")}}{{deprecated_header}} - -Gecko 7.0 より前では、このメソッドはバグ [Firefox バグ 9850](https://bugzil.la/9850) の影響で、常に null のみを返すものとして登場しました。唯一の用途は、テキストノード、 CDATA セクション、属性ノード値など、エンティティから [Unicode エスケープシーケンス](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#unicode_escape_sequences) または [fromCharCode()](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode) を使用して参照される値があるもののみでした。 - -## 仕様書 - -[createEntityReference](https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE) - -## ブラウザーの互換性 - -{{Compat}} diff --git a/files/ja/conflicting/web/api/eventtarget/addeventlistener/index.md b/files/ja/conflicting/web/api/eventtarget/addeventlistener/index.md deleted file mode 100644 index 987fcb7df2a216..00000000000000 --- a/files/ja/conflicting/web/api/eventtarget/addeventlistener/index.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: EventListener.handleEvent() -slug: conflicting/Web/API/EventTarget/addEventListener -original_slug: Web/API/EventListener/handleEvent ---- - -{{APIRef("DOM")}} - -{{domxref("EventListener")}} の **`handleEvent()`** メソッドは、 -監視されている {{domxref("EventTarget")}} 上で発生するイベントを処理するために -`EventListener` へとイベントが送られたとき、 {{Glossary("user agent")}} によって呼び出されます。 - -## 構文 - -```js -eventListener.handleEvent(event); -``` - -### 引数 - -- **`event`** - - : イベントが発火してから、処理が必要となるイベントが記述された {{domxref("Event")}} オブジェクト。 - -### 戻り値 - -None. - -## 仕様 - -{{Specifications}} - -## ブラウザー実装状況 - -{{Compat}} diff --git a/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md b/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md deleted file mode 100644 index 145624b54815fe..00000000000000 --- a/files/ja/conflicting/web/api/eventtarget/addeventlistener_380cb5f366307beb2c072f74e561ee98/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: EventListener -slug: conflicting/Web/API/EventTarget/addEventListener_380cb5f366307beb2c072f74e561ee98 -original_slug: Web/API/EventListener ---- - -{{APIRef("DOM")}} - -**`EventListener`** インターフェイスは、{{domxref("EventTarget")}} オブジェクトによってディスパッチされたイベントを処理できるオブジェクトを表します。 - -> [!NOTE] -> レガシーコンテンツとの互換性が必要なため、`EventListener` は、関数、`handleEvent()` メソッドをもつオブジェクト両方を受け入れます。 -> これを以下の [例](#例) に示します。 - -## プロパティ - -_このインターフェイスはいかなるプロパティを実装も継承もしません。_ - -## メソッド - -_このインターフェイスはメソッドを継承しません。_ - -- {{domxref("EventListener.handleEvent()")}} - - : 指定されたタイプのイベントが発生するたびに呼び出される関数。 - -## 例 - -### HTML - -```html - - -

-

-``` - -### JavaScript - -```js -const buttonElement = document.getElementById('btn'); -const funcOutput = document.getElementById('funcOutput'); -const handleEvtOutput = document.getElementById('handleEvtOutput'); - -// コールバック関数を用意して、'click' イベントのハンドラを追加する。 -// 要素がクリックされたとき、 -// id "funcOutput" の p タグに "Element clicked through function!" と出力されます。 -buttonElement.addEventListener('click', function (event) { - funcOutput.textContent = 'Element clicked through function!'; -}); - -// 互換性のために `handleEvent` プロパティを持つ非関数オブジェクトは、 -// 関数と同じもののように扱われます。 -// コールバック関数と同じように id "handleEvtOutput" の p タグに、 -// "Element clicked through handleEvent property!" と出力されます。 -buttonElement.addEventListener('click', { - handleEvent: function (event) { - handleEvtOutput.textContent = 'Element clicked through handleEvent property!'; - } -}); -``` - -### 結果 - -{{EmbedLiveSample('Example')}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -### 関連情報 - -- [addEventListener](/ja/docs/Web/API/EventTarget/addEventListener) diff --git a/files/ja/conflicting/web/api/htmlinputelement/index.md b/files/ja/conflicting/web/api/htmlinputelement/index.md deleted file mode 100644 index ba0cb8347986d8..00000000000000 --- a/files/ja/conflicting/web/api/htmlinputelement/index.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: HTMLInputElement.mozGetFileNameArray() -slug: conflicting/Web/API/HTMLInputElement -original_slug: Web/API/HTMLInputElement/mozGetFileNameArray ---- - -{{ APIRef("HTML DOM") }}{{Non-standard_header}} - -**`HTMLInputElement.mozGetFileNameArray()`** メソッドは、 HTML の `input` 要素上でユーザーによって選択されたファイルの名前の配列を返します。 - -> [!NOTE] -> このメソッドは Gecko に特有のものであり、他のブラウザーでは利用できません。加えて、ウェブページで利用した場合にエラーが発生します。 - -## 構文 - -```js -inputElement.mozGetFileNameArray(aLength, aFileNames); -``` - -### 引数 - -- `aLength` - - : 指定された場合、返却される配列にあるファイル名の数を受け取ります。 -- `aFileNames` - - : ファイル名が配置される配列です。 - -## 例 - -```js -var numFiles = 0; -var fileArray = {}; - -inputElement.mozGetFileNameArray(numFiles, fileArray); -``` - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{HTMLElement("input")}} -- {{domxref("HTMLInputElement")}} -- {{domxref("Input.mozSetFileNameArray")}} diff --git a/files/ja/conflicting/web/api/syncevent/index.md b/files/ja/conflicting/web/api/syncevent/index.md deleted file mode 100644 index 5c39f5a82cee7b..00000000000000 --- a/files/ja/conflicting/web/api/syncevent/index.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: registration -slug: conflicting/Web/API/SyncEvent -original_slug: Web/API/SyncEvent/registration ---- - -{{Non-standard_header}}{{APIRef("Service Workers API")}} - -{{domxref("SyncEvent")}} インターフェイスの登録読み取り専用プロパティは、 {{domxref("SyncRegistration")}} オブジェクトへの参照を返します。 - -## 構文 - -``` -var syncReg = SyncEvent.registration -``` - -### 値 - -{{domxref("SyncRegistration")}} オブジェクト - -## ブラウザー実装状況 - -{{Compat}} diff --git a/files/ja/conflicting/web/api/text/index.md b/files/ja/conflicting/web/api/text/index.md deleted file mode 100644 index 69f3981382282f..00000000000000 --- a/files/ja/conflicting/web/api/text/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Text.replaceWholeText() -slug: conflicting/Web/API/Text -original_slug: Web/API/Text/replaceWholeText ---- - -{{ApiRef("DOM")}}{{deprecated_header}} - -**`replaceWholeText()`** は {{domxref("Text")}} インターフェイスのメソッドで、ノードのテキストと、*論理的に隣接するすべてのテキストノード*を指定されたテキストで置き換えます。 -置換されたノードは、現在のノードを含め、置換テキストを受け取るものでない限り、削除されます。 - -> [!NOTE] -> 現代のブラウザーで同じ効果を達成するには、 {{domxref("Node.textContent")}}, {{domxref("Element.innerHTML")}}, {{domxref("HTMLElement.innerText")}}, {{domxref("CharacterData.replaceData()")}} を使用することを検討してください。 - -## 構文 - -```js -replaceWholeText(content) -``` - -### 引数 - -- `content` - - : このノードを置き換えるテキストです。 - > **メモ:** `content` 引数は省略不可ですが、空文字列 (`""`) に設定することはできます。 - -### 返値 - -置き換えられた文字列の {{domxref("Text")}} ノード、または置き換える文字列が　`""` であった場合は `null` です。 - -> [!NOTE] -> 返されるノードは、現在のノードが読み取り専用でない限り、現在のノードです。読み取り専用であった場合は、同じ型のテキストノードが新たに生成され、そのノードが置換された位置に挿入されたものとします。 - -### 例外 - -- `NoModificationError` {{domxref("DOMException")}} - - : 置き換えられるテキストノードすべてが読み取り専用であった場合に発生します。 - -## 仕様書 - -このメソッドは、もともと DOM 仕様書に存在していたものです。現在は削除されており、この機能は標準化路線に乗っていません。 - -代わりに、 {{domxref("Node.textContent")}}, {{domxref("Element.innerHTML")}}, {{domxref("HTMLElement.innerText")}}, {{domxref("CharacterData.replaceData()")}} などを使用したアルゴリズムを使うことを検討してください。 - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- 所属先の {{domxref("Text")}} インターフェイス -- {{domxref("Node.textContent")}}, {{domxref("Element.innerHTML")}}, - {{domxref("HTMLElement.innerText")}}, {{domxref("CharacterData.replaceData()")}} diff --git a/files/ja/conflicting/web/css/print-color-adjust/index.md b/files/ja/conflicting/web/css/print-color-adjust/index.md deleted file mode 100644 index beab8c768a2a34..00000000000000 --- a/files/ja/conflicting/web/css/print-color-adjust/index.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: color-adjust -slug: conflicting/Web/CSS/print-color-adjust -original_slug: Web/CSS/color-adjust ---- - -{{CSSRef}} - -**`color-adjust`** は CSS のプロパティで、{{Glossary("user agent", "ユーザーエージェント")}}が出力端末への要素の表示方法を最適化するために何をするかをウェブ作者が制御することができるものです。既定では、ブラウザーは出力端末の種類と機能を考慮して、要素の外観を必要に応じて慎重に調整することが許可されています。 - -## 構文 - -```css -color-adjust: economy; -color-adjust: exact; - -/* グローバル値 */ -color-adjust: inherit; -color-adjust: initial; -color-adjust: revert; -color-adjust: unset; -``` - -`color-adjust` プロパティの値は、以下のキーワードのうちの一つでなければなりません。 - -### 値 - -- `economy` - - : ユーザーエージェントは、描画する機器に合わせて出力を最適化するために、適切かつ賢明と思われるように要素に調整を行うことができます。例えば印刷時に、ブラウザーは背景画像をすべて削除し、白い紙で読むのに最適なコントラストになるようにテキストの色を調整することができます。これが既定値です。 -- **`exact`** - - : その要素の内容物は、色、画像、スタイルを思慮深く、または重要な方法で使用するために、特別に注意深く作られたものであり、ブラウザーによって変更されると、事態が改善されるどころか、むしろ悪化する可能性があります。内容物の外観は、ユーザーの要求以外で変更してはいけません。例えば、ページに背景色が白と薄い灰色の間で交互に変化する行を持つ情報のリストがあるとします。背景色を削除すると、内容物の読みやすさが損なわれます。 - -## 使用上の注意 - -ブラウザーが指定された外観から外したいと思う理由はいくつかあります。 - -- 内容物が、その出力機器上ではテキストと背景の色が似たような色になってしまう場合に、読みやすくするため。 -- 出力機器がプリンターの場合、インクを節約するために、暗い背景画像や非常に濃い背景画像が削除されることがあります。 -- ページを印刷するとき、ブラウザーは、暗い背景と明るい色のテキストを、白い背景と濃い色のテキストに置き換えようとするかもしれません。 - -色や画像の使用を制御するために、ユーザーエージェントがユーザーに提供しているオプションは、`color-adjust` の値よりも優先されます。言い換えれば、`color-adjust` が何かをするという保証はありません。ユーザーが動作を上書きできるだけでなく、各ユーザーエージェントは、与えられた状況で `color-adjust` をどのように扱うかを自分で決定することができます。 - -## 公式定義 - -{{cssinfo}} - -## 形式文法 - -{{csssyntax}} - -## 例 - -

低コントラストの維持

- -この例では、黒の背景色の上に {{cssxref("background-image")}} と半透明の {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} 関数を使用して、中程度の赤のテキストの後ろに濃い青のグラデーションを持つボックスが表示されています。理由はどうあれ、これは紙の上を含めたあらゆるレンダリング環境で望ましい外観ですので、`color-adjust: exact` を使用して、レンダリング時にボックスの色やスタイルを調整しないように指示します。 - -#### CSS - -```css -.my-box { - background-color: black; - background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); - color: #900; - width: 15rem; - height: 6rem; - text-align: center; - font: 24px "Helvetica", sans-serif; - display: flex; - align-items: center; - justify-content: center; - color-adjust: exact; -} -``` - -#### HTML - -```html -
-

Need more contrast!

-
-``` - -#### 結果 - -{{EmbedLiveSample("Preserving_low_contrast", 640, 120)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS を使った HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) -- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}} -- {{cssxref("background-image")}} -- {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md b/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md deleted file mode 100644 index 39f05b42d33b21..00000000000000 --- a/files/ja/conflicting/web/javascript/reference/errors/unexpected_type/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 'TypeError: can''t access property "x" of "y"' -slug: conflicting/Web/JavaScript/Reference/Errors/Unexpected_type -original_slug: Web/JavaScript/Reference/Errors/Cant_access_property ---- - -{{jsSidebar("Errors")}} - -JavaScript の例外 "can't access property" は、 {{jsxref("undefined")}} または {{jsxref("null")}} の値に対してプロパティのアクセスが行われた場合に発生します。 - -## エラーメッセージ - -```js -TypeError: Unable to get property {x} of undefined or null reference (Edge) -TypeError: can't access property {x} of {y} (Firefox) -TypeError: {y} is undefined, can't access property {x} of it (Firefox) -TypeError: {y} is null, can't access property {x} of it (Firefox) - -例: -TypeError: x is undefined, can't access property "prop" of it -TypeError: x is null, can't access property "prop" of it -TypeError: can't access property "prop" of undefined -TypeError: can't access property "prop" of null -``` - -## エラーの種類 - -{{jsxref("TypeError")}} - -## エラーの原因 - -{{jsxref("undefined")}} か {{jsxref("null")}} に対してプロパティアクセスを行いました。 - -## 例 - -### 無効な場合 - -```js example-bad -// undefined and null cases on which the substring method won't work -var foo = undefined; -foo.substring(1); // TypeError: x is undefined, can't access property "substring" of it - -var foo = null; -foo.substring(1); // TypeError: x is null, can't access property "substring" of it -``` - -### 問題の修正 - -`undefined` か `null` のヌルポインターアクセスを修正するには、たとえば [typeof](/ja/docs/Web/JavaScript/Reference/Operators/typeof) 演算子を使用することができます。 - -```js -if (typeof foo !== 'undefined') { - // Now we know that foo is defined, we are good to go. -} -``` - -## 関連情報 - -- {{jsxref("undefined")}} -- {{jsxref("null")}} diff --git a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md index 2ed78efac56737..d09ba642fcd172 100644 --- a/files/ja/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/ja/learn/javascript/first_steps/what_is_javascript/index.md @@ -212,7 +212,7 @@ CSS では {{htmlelement("link")}} 要素を使用することで外部のスタ ### 内蔵 JavaScript 1. まずは [apply-javascript.html](https://github.com/mdn/learning-area/blob/main/javascript/introduction-to-js-1/what-is-js/apply-javascript.html) ファイルを自分のコンピューターにコピーします。どこか適当な場所に保存してください。 -2. キストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。 +2. テキストエディターとウェブブラウザーでそのファイルを開いてください。クリックできるボタンが 1 つあるウェブページを作る HTML だということがわかりますね。 3. 次に、テキストエディターで `` タグの直前に以下のコードを追加します。 ```html diff --git a/files/ja/web/api/htmlbuttonelement/command/index.md b/files/ja/web/api/htmlbuttonelement/command/index.md new file mode 100644 index 00000000000000..5c464e8dca29de --- /dev/null +++ b/files/ja/web/api/htmlbuttonelement/command/index.md @@ -0,0 +1,76 @@ +--- +title: "HTMLButtonElement: command プロパティ" +short-title: command +slug: Web/API/HTMLButtonElement/command +l10n: + sourceCommit: 3556f7aca5478c222368dba8a7bd6a007898b36a +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +**`command`** は {{domxref("HTMLButtonElement")}} インターフェイスのプロパティで、このボタンで制御される要素で実行されるアクションを取得し、設定します。これに効果を持たせるには、[`commandfor`](/ja/docs/Web/HTML/Element/button#commandfor) を設定する必要があります。 + +これは HTML の [`command`](/ja/docs/Web/HTML/Element/button#command) 属性を反映します。 + +## 値 + +文字列です。有効な値については [`command`](/ja/docs/Web/HTML/Element/button#command) 属性の記事を参照してください。 + +## 例 + +### 基本的な例 + +```html + + +
+ +
+``` + +```js +const popover = document.getElementById("mypopover"); +const toggleBtn = document.getElementById("toggleBtn"); + +toggleBtn.command = "show-popover"; +``` + +### イベントを使用した独自の例 + +```html + + + + +[ここに適切な代替テキストを追加] +``` + +```js +const image = document.getElementById("the-image"); + +image.addEventListener("command", (event) => { + if (event.command == "--rotate-left") { + event.target.style.rotate = "-90deg"; + } else if (event.command == "--rotate-right") { + event.target.style.rotate = "90deg"; + } +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.commandForElement")}} +- {{domxref("CommandEvent")}} diff --git a/files/ja/web/api/htmlbuttonelement/commandforelement/index.md b/files/ja/web/api/htmlbuttonelement/commandforelement/index.md new file mode 100644 index 00000000000000..1ce8623f41f62a --- /dev/null +++ b/files/ja/web/api/htmlbuttonelement/commandforelement/index.md @@ -0,0 +1,40 @@ +--- +title: "HTMLButtonElement: commandForElement プロパティ" +short-title: commandForElement +slug: Web/API/HTMLButtonElement/commandForElement +l10n: + sourceCommit: 3556f7aca5478c222368dba8a7bd6a007898b36a +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +**`commandForElement`** は {{domxref("HTMLButtonElement")}} インターフェイスのプロパティで、ボタンを通じて制御する要素を取得または設定します。 + +これは JavaScript における HTML の [`commandfor`](/ja/docs/Web/HTML/Element/button#commandfor) 属性の同等物です。 + +## 値 + +このボタンが制御する既存の要素 ({{domxref("Element")}}) への参照です。 + +## 例 + +```js +const popover = document.getElementById("mypopover"); +const toggleBtn = document.getElementById("toggleBtn"); + +toggleBtn.commandForElement = popover; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("CommandEvent")}} diff --git a/files/ja/web/api/htmlbuttonelement/formaction/index.md b/files/ja/web/api/htmlbuttonelement/formaction/index.md new file mode 100644 index 00000000000000..92c8bcbbe04274 --- /dev/null +++ b/files/ja/web/api/htmlbuttonelement/formaction/index.md @@ -0,0 +1,39 @@ +--- +title: "HTMLButtonElement: formAction プロパティ" +short-title: formAction +slug: Web/API/HTMLButtonElement/formAction +l10n: + sourceCommit: 650feba1ed52078fe6c9342f7a76bafc8ab43891 +--- + +{{APIRef("HTML DOM")}} + +**`formAction`** は {{domxref("HTMLButtonElement")}} インターフェイスのプロパティで、このコントロールを含むフォームが送信された際にサーバー上で実行されるプログラムの URL です。これは、この ` +
これはポップオーバーコンテンツです。
+``` + +JavaScriptのコードでは、最初に `
` および ` - - - - -
-``` - -```css hidden -button, -div { - margin: 0.5rem; -} -``` - -#### JavaScript - -```js -const result = document.querySelector(".result"); - -const dialog = document.querySelector(".example-dialog"); - -dialog.addEventListener("cancel", (event) => { - result.textContent = "dialog was canceled"; -}); - -const openDialog = document.querySelector(".open-dialog"); -openDialog.addEventListener("click", () => { - if (typeof dialog.showModal === "function") { - dialog.showModal(); - result.textContent = ""; - } else { - result.textContent = "The dialog API is not supported by this browser"; - } -}); - -const closeButton = document.querySelector(".close"); -closeButton.addEventListener("click", () => { - dialog.close(); -}); -``` - -#### 結果 - -{{ EmbedLiveSample('ダイアログのキャンセル', '100%', '100px') }} - -### input 要素のキャンセル - -#### HTML - -```html - - - -
-``` - -```css hidden -div { - margin-bottom: 10px; -} -``` - -#### JavaScript - -```js -const elem = document.getElementById("file"); - -const result = document.getElementById("result"); - -elem.addEventListener("cancel", () => { - result.textContent = "キャンセルされました。"; -}); - -elem.addEventListener("change", () => { - if (elem.files.length == 1) { - result.textContent = "ファイルが選択されました。"; - } -}); -``` - -#### 結果 - -{{ EmbedLiveSample('input_要素のキャンセル', '100%', '100px') }} - -ファイルセレクターを開き、選択ダイアログをエスケープキーまたはキャンセルボタンで閉じます。どちらも cancel イベントが発生します。また、マシンのローカルファイルを選択し、ファイル選択ウィンドウを再度開いて同じファイルを再選択してみてください。これも cancel イベントが発生します。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- HTML の {{HTMLElement("input")}} 要素 -- HTML の {{HTMLElement("dialog")}} 要素 -- {{domxref("HTMLDialogElement/close_event", "close")}} diff --git a/files/ja/web/api/htmlformelement/autocomplete/index.md b/files/ja/web/api/htmlformelement/autocomplete/index.md new file mode 100644 index 00000000000000..ab3b4a74e2f0c6 --- /dev/null +++ b/files/ja/web/api/htmlformelement/autocomplete/index.md @@ -0,0 +1,37 @@ +--- +title: "HTMLFormElement: autocomplete プロパティ" +short-title: autocomplete +slug: Web/API/HTMLFormElement/autocomplete +l10n: + sourceCommit: 4c81451d326b3bea82a02d912b9320273ad8572d +--- + +{{ APIRef("HTML DOM") }} + +**`autocomplete`** は {{DOMxRef("HTMLFormElement")}} インターフェイスのプロパティで、ブラウザーによってこのフォームのコントロールの値が自動的に補完できるかどうかを示します。これは、{{htmlelement("form")}} 要素の [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) 属性を反映します。 + +## 値 + +文字列です。 `"off"` の値は明示的に `"off"` が設定された場合で、それ以外は常に `"on"` です。 + +## 例 + +```js +const formElement = document.getElementById("name"); +console.log(formElement.autocomplete); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("form")}} +- HTML の [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) 属性 +- ARIA の [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性 +- [自動補完の無効化](/ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion) diff --git a/files/ja/web/api/htmlformelement/checkvalidity/index.md b/files/ja/web/api/htmlformelement/checkvalidity/index.md new file mode 100644 index 00000000000000..d61edd80b14ef6 --- /dev/null +++ b/files/ja/web/api/htmlformelement/checkvalidity/index.md @@ -0,0 +1,52 @@ +--- +title: "HTMLFormElement: checkValidity() メソッド" +short-title: checkValidity() +slug: Web/API/HTMLFormElement/checkValidity +l10n: + sourceCommit: 2b29051262aa05ce9a630d0dd2d6958f493abe19 +--- + +{{APIRef("HTML DOM")}} + +**`checkValidity()`** は {{domxref("HTMLFormElement")}} インターフェイスのメソッドで、関連付けられたコントロールすべてが適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかを示す論理値を返します。 このメソッドは、値が不正な要素にそれぞれ対して {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを発行しますが、このフォーム要素自体には発行しません。 `checkValidity()` には既定でブラウザーの動作が設定されていないため、この `invalid` イベントをキャンセルしても効果はありません。 + +> [!NOTE] +> CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスは、`
` 要素自体の妥当性ではなく、 `` 要素に所属するフォームコントロールの妥当性に基づいて適用されます。 + +## 構文 + +```js-nolint +checkValidity() +``` + +### 引数 + +なし。 + +### 返値 + +関連付けられたフォームコントロールの値に妥当性の問題がなければ `true` を返し、そうでなければ `false` を返します。 + +## 例 + +次の例では、`checkValidity()` を呼び出すと、`true` または `false` を返します。 + +```js +const element = document.getElementById("myForm"); +console.log(element.checkValidity()); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLFormElement.reportValidity()")}} +- {{HTMLElement("form")}} +- [学習: クライアント側フォーム検証](/ja/docs/Learn/Forms/Form_validation) +- [ガイド: 制約検証](/ja/docs/Web/HTML/Constraint_validation) diff --git a/files/ja/web/api/htmlformelement/encoding/index.md b/files/ja/web/api/htmlformelement/encoding/index.md index 6ce6222173e9cc..e4be1941b0dd88 100644 --- a/files/ja/web/api/htmlformelement/encoding/index.md +++ b/files/ja/web/api/htmlformelement/encoding/index.md @@ -3,13 +3,17 @@ title: "HTMLFormElement: encoding プロパティ" short-title: encoding slug: Web/API/HTMLFormElement/encoding l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: b25d8774aa7bcc6a053e26cf804ad454f51e134b --- {{APIRef("HTML DOM")}} **`HTMLFormElement.encoding`** プロパティは、 DOM の {{domxref("HTMLFormElement")}} オブジェクトの {{domxref("HTMLFormElement.enctype","enctype")}} 要素の別名です。 +## 仕様書 + +{{Specifications}} + ## ブラウザーの互換性 {{Compat}} diff --git a/files/ja/web/api/htmlformelement/index.md b/files/ja/web/api/htmlformelement/index.md index 6c0710ddadb8cf..d3be01f1114fbd 100644 --- a/files/ja/web/api/htmlformelement/index.md +++ b/files/ja/web/api/htmlformelement/index.md @@ -2,7 +2,7 @@ title: HTMLFormElement slug: Web/API/HTMLFormElement l10n: - sourceCommit: 494da677b2f5df61c97ba8b8efe8e80881e9d688 + sourceCommit: d47348199a379f68bea876a403eb510628ec4ccb --- {{APIRef("HTML DOM")}} @@ -53,11 +53,6 @@ _このインターフェイスには親である {{domxref("HTMLElement")}} か - {{domxref("HTMLFormElement.submit", "submit()")}} - : フォームをサーバーへ送信します。 -### 非推奨のメソッド - -- {{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}} - - : ネイティブのブラウザーインターフェイスを起動して、[自動補完フィールド名](https://html.spec.whatwg.org/#autofill-field-name) の値が `off` または `on` ではないフィールドを補完してユーザーを支援します。ユーザーがインターフェイスの操作を終えると、フォームはフィールドが入力された場合は `autocomplete`、問題があった場合は `autocompleteerror` のいずれかのイベントを受け取ります。 - ## イベント これらのイベントを待ち受けするには、`addEventListener()` を使用するか、このインターフェイスの `oneventname` プロパティへイベントリスナーを代入するかしてください。 @@ -73,7 +68,7 @@ _このインターフェイスには親である {{domxref("HTMLElement")}} か ### フォーム要素オブジェクトの取得 -`HTMLFormElement` オブジェクトを取得するには、[CSS セレクター](/ja/docs/Web/CSS/CSS_Selectors)と {{domxref("Document.querySelector", "querySelector()")}} を使うか、document の {{domxref("Document.forms", "forms")}} プロパティを使ってすべてのフォームのリストを取得できます。 +`HTMLFormElement` オブジェクトを取得するには、[CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)と {{domxref("Document.querySelector", "querySelector()")}} を使うか、document の {{domxref("Document.forms", "forms")}} プロパティを使ってすべてのフォームのリストを取得できます。 {{domxref("Document.forms")}} は `HTMLFormElement` オブジェクトの配列、つまりそのページの各フォームの一覧を返します。その後、以下の構文を使用して、個々のフォームを取得することができます。 @@ -96,13 +91,13 @@ _このインターフェイスには親である {{domxref("HTMLElement")}} か 例えば、 -- `` は `` よりも優先されます。つまり `form.id` ではフォームの id を参照せずに、名前が "`id`" である要素を参照します。その他のプロパティも同様であり、例えば `` や `` もそうです。 +- `` は `` よりも優先されます。つまり `form.id` ではフォームの id を参照せずに、名前が `"id"` である要素を参照します。その他のプロパティも同様であり、例えば `` や `` もそうです。 - `` を使うと、`elements` のコレクションがアクセス不能になります。`form.elements` は特定の要素を参照するようになります。 要素名のこうした問題を避けるには、 - _常に_ `elements` のコレクションを使って、要素名とフォームプロパティとのあいまいさを避けましょう。 -- *決して*要素名に "`elements`" を使わないでください。 +- *決して*要素名に `"elements"` を使わないでください。 JavaScript を使っていなければ、これは問題になりません。 @@ -192,10 +187,10 @@ f.submit(); // フォームの submit() メソッド

- +

- +

diff --git a/files/ja/web/css/@media/shape/index.md b/files/ja/web/css/@media/shape/index.md index 9a5b8d02b2c37e..e89d478bae4792 100644 --- a/files/ja/web/css/@media/shape/index.md +++ b/files/ja/web/css/@media/shape/index.md @@ -1,15 +1,17 @@ --- title: shape slug: Web/CSS/@media/shape +l10n: + sourceCommit: c51e0599ea09c0e6d035c635db9f48ad1f241490 --- -{{CSSRef}} +{{CSSRef}}{{SeeCompatTable}} `shape` は [CSS](/ja/docs/Web/CSS) の[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で、端末の形状が矩形であるか丸いディスプレイであるかを区別するために使用することができます。 ## 構文 -`shape` は識別機能であり、四角い画面を表す `rect` または丸や楕円の画面を表す `round` の二つの文字列のうちの一つで指定します。 +`shape` は識別機能であり、受付可能な 2 つの文字列のうちのどちらか指定します。`rect` は四角い画面を表し、`round` は円形、楕円形の画面を表します。 - `rect` - : 形状は長方形か正方形、または角丸矩形などの軸であり、伝統的なデザインが適しています。 @@ -20,8 +22,6 @@ slug: Web/CSS/@media/shape ### 基本的な例 -

HTML

- #### HTML ```html @@ -69,9 +69,9 @@ h1 { ## ブラウザーの互換性 -{{Compat}} +この機能を実装しているブラウザーはありません。 ## 関連情報 -- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) +- [メディアクエリーの使用](/ja/docs/Web/CSS/CSS_media_queries/Using_media_queries) - [@media](/ja/docs/Web/CSS/@media) diff --git a/files/ja/web/css/mask-border-mode/index.md b/files/ja/web/css/mask-border-mode/index.md index ab532b6e8417a9..914cfc7285be59 100644 --- a/files/ja/web/css/mask-border-mode/index.md +++ b/files/ja/web/css/mask-border-mode/index.md @@ -1,11 +1,13 @@ --- title: mask-border-mode slug: Web/CSS/mask-border-mode +l10n: + sourceCommit: 82586e39bd8df5ffabdec58ee3361ed97856f870 --- {{CSSRef}} -**`mask-border-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[マスク境界](/ja/docs/Web/CSS/mask-border)の混合モードを指定します。 +**`mask-border-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[マスク境界](/ja/docs/Web/CSS/mask-border)のブレンドモードを指定します。 ## 構文 @@ -17,7 +19,8 @@ mask-border-mode: alpha; /* グローバル値 */ mask-border-mode: inherit; mask-border-mode: initial; -mask-border-mode: repeat; +mask-border-mode: revert; +mask-border-mode: revert-layer; mask-border-mode: unset; ``` @@ -36,24 +39,13 @@ mask-border-mode: unset; {{csssyntax}} -## 例 - -### 基本的な使用 - -このプロパティは、まだどこでも対応されていないようです。このプロパティが対応されるようになれば、マスク境界に使用される混合モードの種類を、輝度値とアルファ値から指定することができるようになります。 - -```css -mask-border-mode: luminance; -mask-border-mode: alpha; -``` - ## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat}} +このプロパティは、まだどのブラウザーも対応していません。 ## 関連情報 diff --git a/files/ja/web/css/visibility/index.md b/files/ja/web/css/visibility/index.md index 963adaba1e9079..61cd254806f3f4 100644 --- a/files/ja/web/css/visibility/index.md +++ b/files/ja/web/css/visibility/index.md @@ -90,7 +90,7 @@ visibility の値は*可視*及び*不可視*の間で補間可能です。従 } ``` -{{EmbedLiveSample('Basic_example')}} +{{EmbedLiveSample('基本的な例')}} ### 表の例 @@ -132,7 +132,7 @@ td { } ``` -{{EmbedLiveSample('Table_example')}} +{{EmbedLiveSample('表の例')}} ## 仕様書 diff --git a/files/ja/web/html/element/dialog/index.md b/files/ja/web/html/element/dialog/index.md index 8ad30873d61163..39d8a4a15a5a85 100644 --- a/files/ja/web/html/element/dialog/index.md +++ b/files/ja/web/html/element/dialog/index.md @@ -2,43 +2,55 @@ title: ": ダイアログ要素" slug: Web/HTML/Element/dialog l10n: - sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c + sourceCommit: be7cf520036291031985ab0b38c487539b1faa9d --- {{HTMLSidebar}} -**``** は [HTML](/ja/docs/Web/HTML) の要素で、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。 +**``** は [HTML](/ja/docs/Web/HTML) の要素で、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表します。 + +HTML の `` 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。 モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との走査を許可します。 + +`` 要素を表示するには、JavaScript を使用して下さい。モーダルダイアログを表示するには {{domxref("HTMLDialogElement.showModal()", ".showModal()")}} メソッドを、非モーダルダイアログを表示するには {{domxref("HTMLDialogElement.show()", ".show()")}} メソッドを使用して下さい。ダイアログボックスは {{domxref("HTMLDialogElement.close()", ".close()")}} メソッドを使用するか、または `` 要素内に含まれる `` フォームを送信する際に [`dialog`](/ja/docs/Web/HTML/Element/form#method) メソッドを使用して閉じることができます。モーダルダイアログは、Esc キーを押すことでも閉じることができます。 ## 属性 この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。 -> **警告:** `tabindex` 属性を `` 要素で使用してはいけません。 +> **警告:** `tabindex` 属性を `` 要素で使用してはいけません。詳しく[使用上の注意](#使用上の注意)を参照してください。 - `open` - - : ダイアログがアクティブで操作で使用できることを示します。 `open` 属性が設定されていないときは、ダイアログはユーザーに表示する*べきではありません*。 - ダイアログを表示するには、`open` 属性ではなく `.show()` または `.showModal()` メソッドを使用することが推奨されます。もし `` が `open` 属性を使用して開かれた場合、そのダイアログはモーダルになりません。 -## アクセシビリティの考慮 + - : ダイアログボックスがアクティブであり、操作できる状態であることを示します。 `open` が設定されていない場合、ダイアログボックスはユーザーに表示されません。 + ダイアログを表示するには、`open` 属性ではなく `.show()` または `.showModal()` メソッドを使用することが推奨されます。もし `` が `open` 属性を使用して開かれた場合、そのダイアログは非モーダルになります。 -モーダルダイアログの作成には、HTMLネイティブの `` 要素を使用しましょう。これは、ユーザビリティとアクセシビリティの機能を提供するためで、他の要素を同様の目的で使用する場合は、それを再現しなければなりません。ダイアログを表示するには、`.showModal()` または `.show()` メソッドのうち適切な方を使用してください。独自のダイアログの実装を作成する場合は、期待される既定の動作にすべて対応していること、適切なラベル付けが行われていることを確認してください。 + > [!NOTE] + > モーダルではないダイアログボックスの開いた状態と閉じた状態を切り替えるには、`open` 属性の有無を切り替えることができますが、この手法は推奨されません。 -ダイアログを実装する際には、ユーザーのフォーカスを設定する場所として最も適切な場所を検討することが重要です。[autofocus](/ja/docs/Web/HTML/Global_attributes/autofocus) 属性を使用して初期フォーカスの配置を明確に示すと、特定のダイアログに対して最適な初期フォーカスの配置とみなされる要素に初期フォーカスが設定するのに役立ちます。ダイアログの初期フォーカスがどこに設定されるか常にわからない場合、特にダイアログのコンテンツが呼び出されたときに動的に描画される場合、必要であれば `` 要素そのものにフォーカスを当てることが、初期フォーカスの配置として最適と判断されるかもしれません。`` を開くための{{domxref("HTMLDialogElement.showModal()")}}を使用すると、最初にネストしたフォーカス可能な要素にフォーカスが設定されます。 +## 使用上の注意 -ユーザーがダイアログを閉じることができる機構を確実に用意してください。すべてのユーザーが確実にダイアログを閉じることができるようにする最も確実な方法は、閉じるための明確なボタンを記載することです。例えば、確認、キャンセル、閉じるなどのボタンが適切です。また、キーボードを使用する端末では、Esc キーでモーダルダイアログも閉じられると考えるのが一般的です。既定では、`showModal()` メソッドによって呼び出された `` は、Esc によって閉じることができます。非モーダルダイアログでは、既定では Esc キーで閉じませんし、非モーダルダイアログが表すものによっては、この動作が望ましくない場合があります。複数のモーダルダイアログが開いている場合、Esc は最後に示されたダイアログのみを閉じるようにします。`` を使用した場合、この動作はブラウザーによって提供されます。 +- HTML の {{HTMLElement("form")}} 要素は、属性 method=「dialog」 を保有している場合、またはフォームを送信するボタンに [`formmethod="dialog"`](/ja/docs/Web/HTML/Element/input#formmethod) が設定されている場合に、ダイアログボックスを閉じることができます。 `` 内の `` が `dialog` メソッドで確定されると、ダイアログボックスが閉じられ、そのフォームコントロールの状態が保存されますが、送信はされません。また、 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} プロパティは、押されたボタンの値に設定されます。 +- CSS の {{cssxref('::backdrop')}} 擬似要素は、モーダルダイアログの背景をスタイル設定するために使用することができます。これは、{{domxref("HTMLDialogElement.showModal()")}} メソッドを使用してダイアログを表示した際に、`` 要素の背後に表示されます。例えば、この擬似要素を使用して、モーダルダイアログの背後の無効なコンテンツをぼかしたり、暗くしたり、といった方法で分かりにくくすることができます。 +- [`autofocus`](/ja/docs/Web/HTML/Global_attributes/autofocus) 属性を、モーダルダイアログが開いた直後にユーザーが操作することが想定される要素に追加すべきです。他に即座の操作が想定される要素がない場合は、`autofocus` をダイアログ内の［閉じる］ボタンに追加するか、ユーザーがクリック/アクティブにして閉じることが想定される場合はダイアログ自体に追加することをお勧めします。 +- `` 要素に `tabindex` プロパティを追加しないでください。この要素は操作対象ではなく、フォーカスを受け取らないからです。ダイアログの内容は（ダイアログに含まれない閉じるボタンを含め）、フォーカスを受け取ることができ、操作対象となります。 -`` 要素は、ARIA の [role="dialog"](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) 属性を使用したカスタムダイアログと同じような形で、ブラウザーが提供します。`` 要素が `showModal()` メソッドで呼び出された場合、暗黙のうちに [aria-modal="true"](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) となり、一方 `` が `show()` メソッド、または `open` 属性を使用して表示されたり `` の既定の `display` を変更した場合は `[aria-modal="false"]` として表示されます。モーダルダイアログを実装する際には、`` とそのコンテンツ以外は [`inert`](/ja/docs/Web/HTML/Global_attributes/inert) 属性を使って不活性化する必要があります。`` を `HTMLDialogElement.showModal()` メソッドで使用した場合、この動作はブラウザーが提供します。 +## アクセシビリティ -## 使用上の注意 +ダイアログを実装する際には、ユーザーのフォーカスを設定する場所として最も適切な場所を検討することが重要です。{{domxref("HTMLDialogElement.showModal()")}} を用いて `` を開いたとき、フォーカスは内部で最初のフォーカス可能な要素に設定されます。[`autofocus`](/ja/docs/Web/HTML/Global_attributes/autofocus) 属性を使用して初期フォーカスの配置を明確に示すと、特定のダイアログに対して最適な初期フォーカスの配置とみなされる要素に初期フォーカスが設定するのに役立ちます。ダイアログの初期フォーカスがどこに設定されるか常にわからない場合、特にダイアログのコンテンツが呼び出されたときに動的に描画される場合、必要であれば `` 要素そのものにフォーカスを当てることが、初期フォーカスの配置として最適と判断されるかもしれません。 + +ユーザーがダイアログを閉じることができる機構を確実に用意してください。すべてのユーザーが確実にダイアログを閉じることができるようにする最も確実な方法は、閉じるための明確なボタンを記載することです。例えば、確認、キャンセル、閉じるなどのボタンが適切です。 -- {{HTMLElement("form")}} 要素は `method="dialog"` 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} プロパティにフォーム送信するために使用されたボタンの `value` が設定されて、ダイアログが閉じられます。 -- CSS の {{cssxref('::backdrop')}} 擬似要素を使用して、 `` 要素が {{domxref("HTMLDialogElement.showModal()")}} で表示されたときの背後のスタイルを設定することができます。例えば、モーダルダイアログの背後にある操作できないコンテンツを暗くするなどです。 +既定では、`showModal()` メソッドによって呼び出されたダイアログは、Esc によって閉じることができます。非モーダルダイアログでは、既定では Esc キーで閉じませんし、非モーダルダイアログが表すものによっては、この動作が望ましくない場合があります。キーボードの利用者は、Esc キーでモーダルダイアログを閉じることを期待します。この動作が実装され、維持されていることを確認してください。複数のモーダルダイアログが開いている場合、Esc は最後に示されたダイアログのみを閉じるようにします。`` を使用した場合、この動作はブラウザーによって提供されます。 + +ダイアログは他の要素を使用して作成することができますが、ネイティブの `` 要素は、同様の目的で他の要素を使用する場合は再現しなければならないユーザビリティとアクセシビリティ機能を提供します。独自のダイアログ実装を作成する場合は、すべての期待される既定の動作に対応しており、適切なラベル付けの推奨事項に従うことを保証してください。 + +`` 要素は、ARIA の [role="dialog"](/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role) 属性を使用した独自ダイアログと同じような形で、ブラウザーが提供します。`` 要素が `showModal()` メソッドで呼び出された場合、暗黙のうちに [aria-modal="true"](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) となり、一方 `` が `show()` メソッド、または `open` 属性を使用して表示されたり `` の既定の `display` を変更した場合は `[aria-modal="false"]` として表示されます。モーダルダイアログを実装する際には、`` とそのコンテンツ以外は [`inert`](/ja/docs/Web/HTML/Global_attributes/inert) 属性を使って不活性化する必要があります。`` を `HTMLDialogElement.showModal()` メソッドで使用した場合、この動作はブラウザーが提供します。 ## 例 -### シンプルな例 +### HTML のみのダイアログ -以下は、非モーダル、つまりモーダルレスなダイアログを表示します。"OK" ボタンは、起動時にダイアログを閉じられるようになっています。 +この例は、HTML のみを使用して、モーダルではないダイアログの作成方法を示しています。論理属性 `open` が `` 要素にあるため、ページが読み込まれるとダイアログが開いた状態で表示されます。 `` 要素の `method` 属性が `"dialog"` に設定されているため、ダイアログは［OK］ボタンをクリックすることで閉じることができます。 この場合、フォームを閉じるために JavaScript は必要ありません。 ```html @@ -51,39 +63,105 @@ l10n: #### 結果 -{{EmbedLiveSample("Simple_example", "100%", 200)}} +{{EmbedLiveSample("HTML-only_dialog", "100%", 200)}} + +> [!NOTE] +> 出力結果をリセットするには、このページを再読み込みしてください。 + +このダイアログは、`open` 属性が存在するために最初に開かれます。`open` 属性を使用して表示されるダイアログは、モーダルではありません。［OK］をクリックすると、ダイアログは閉じられ、結果フレームは空になります。ダイアログが閉じられた後、それを再度開くための方法は提供されていません。このため、モーダルではないダイアログを表示するには、 {{domxref("HTMLDialogElement.show()")}} メソッドを使用するのが推奨されます。論理属性である `open` を追加または削除することで、ダイアログの表示を切り替えることも可能ですが、推奨される方法ではありません。 -このダイアログは `open` 属性によって開かれたので、モーダルではありません。この例では、ダイアログが閉じられたとき、それを再び開くためのメソッドは提供されていません。{{domxref("HTMLDialogElement.show()")}} でダイアログを開く方が、論理属性の `open` 属性を切り替えるより望ましいです。 +### モーダルダイアログの作成 -### 高度な例 +この例では、[グラデーション](/ja/docs/Web/CSS/gradient)の背景を持つモーダルダイアログを示しています。`.showModal()` メソッドは、［ダイアログを表示］ボタンが押された際に、モーダルダイアログを開くためのものです。ダイアログは、Esc キーを押すか、ダイアログ内の［閉じる］ボタンが押された際に `close()` メソッドを使用することで閉じることができます。 -この例では、"Show the dialog" ボタンをクリックすると、モーダルダイアログを開きます。ダイアログには {{HTMLElement("select")}} と 2 つの {{HTMLElement("button")}} 要素があり、これらは `type="submit"` に既定値として設定されています。` - - - - + + + +

- - + +

- +

``` @@ -102,17 +180,12 @@ showButton.addEventListener("click", () => { favDialog.showModal(); }); -// "Favorite animal" 入力で、送信ボタンの値を設定する -selectEl.addEventListener("change", (e) => { - confirmBtn.value = selectEl.value; -}); - // "Cancel" ボタンで [formmethod="dialog"] による送信を行わずにダイアログを閉じ、close イベントを発行する favDialog.addEventListener("close", (e) => { outputBox.value = favDialog.returnValue === "default" ? "No return value." - : `ReturnValue: ${favDialog.returnValue}.`; // 空文字列ではなく、既定値かどうかを調べる必要がある + : `ReturnValue: ${favDialog.returnValue}`; // 空文字列ではなく、既定値かどうかを調べる必要がある }); // ［確認］ボタンが既定でフォームを送信しないようにし、`close()` メソッドでダイアログを閉じ、"close" イベントを発生させる @@ -122,15 +195,319 @@ confirmBtn.addEventListener("click", (event) => { }); ``` -### 結果 +#### 結果 + +{{EmbedLiveSample("Handling the return value from the dialog", "100%", 300)}} + +上記の例では、上記の例は、モーダルダイアログを閉じる次の 3 つのメソッドを示しています。 -{{EmbedLiveSample("Advanced_example", "100%", 300)}} +- ダイアログフォーム内のフォームを、`dialog` メソッドを使用して確定することによって（例えば、[HTML のみの例](#html_のみのダイアログ)を参照）。 +- Esc キーを押すことよって。 +- {{domxref("HTMLDialogElement.close()")}} メソッドを呼び出すことによって（[モーダルの例](#モーダルダイアログの作成)にあるように）。 + この例では、［キャンセル］ボタンはダイアログフォームメソッドを介してダイアログを閉じ、［確認］ボタンは {{domxref("HTMLDialogElement.close()")}} メソッドを介してダイアログを閉じます。 -このモーダルダイアログは、3 つの方法で閉じることができます。キーボードユーザーの場合、モーダルダイアログは Esc キーで閉じることができます。この例では、［キャンセル］ボタンは `dialog` フォームメソッドで、［確認］ボタンは {{domxref("HTMLDialogElement.close()")}} メソッドでダイアログを閉じます。 ［キャンセル］ボタンには [`formmethod="dialog"`](/ja/docs/Web/HTML/Element/input/submit#formmethod) が含まれており、 {{HTMLElement("form")}} の既定の {{HTTPMethod("GET")}} メソッド ([`method`](/ja/docs/Web/HTML/Element/form#method)) を上書きします。フォームのメソッドが [`dialog`](#usage_notes) の場合、フォームの状態は送信されずに保存され、ダイアログは閉じられます。 + `action` がない場合、既定の {{HTTPMethod("GET")}} メソッドでフォームを送信すると、ページの再読み込みが発生します。JavaScript を使用して、送信を阻止し、ダイアログを閉じるために、それぞれ {{domxref("event.preventDefault()")}} と {{domxref("HTMLDialogElement.close()")}} メソッドを使用しています。 -すべての `dialog` 要素に閉じるための仕組みを提供することが重要です。既定では、非モーダルのダイアログは Esc キーでは閉じませんし、ユーザーが物理キーボードにアクセスすることも想定してはいけません（たとえば、キーボードにアクセスできないタッチスクリーン端末を使用している人もいます）。 +すべての `dialog` 要素で閉じるための仕組みを提供することが重要です。既定では、非モーダルのダイアログは Esc キーでは閉じませんし、ユーザーが物理キーボードにアクセスすることも想定してはいけません（たとえば、キーボードにアクセスできないタッチ画面端末を使用している人もいます）。 + +### 必須フォーム入力付きのダイアログを閉じる + +ダイアログ内のフォームに必須入力項目がある場合、ユーザーエージェントは、必須入力項目に値が入力されるまで、ダイアログを閉じることができません。このようなダイアログを閉じるには、［閉じる］ボタンに [`formnovalidate`](/ja/docs/Web/HTML/Element/input#formnovalidate) 属性を使用するか、［閉じる］ボタンがクリックされたときにダイアログオブジェクトの `close()` メソッドを呼び出すかしてください。 + +```html + +
+

+ +

+
+ + + +
+ + +

+ +

+ +``` + +```css hidden +[type="submit"] { + margin-right: 1rem; +} +``` + +#### JavaScript + +```js +const showBtn = document.getElementById("show-dialog"); +const dialog = document.getElementById("dialog"); +const jsCloseBtn = dialog.querySelector("#js-close"); + +showBtn.addEventListener("click", () => { + dialog.showModal(); +}); + +jsCloseBtn.addEventListener("click", (e) => { + e.preventDefault(); + dialog.close(); +}); +``` + +#### 結果 + +{{EmbedLiveSample("Closing a dialog with a required form input", "100%", 300)}} + +出力から、［通常 閉じる］ボタンを使用してダイアログを閉じることができないことが分かります。しかし、［無検証 閉じる］ボタンの `formnovalidate` 属性を使用してフォームの検証をバイパスすれば、ダイアログを閉じることができます。プログラム上では、`dialog.close()` を使用しても同様にダイアログを閉じることができます。 + +### アニメーションするダイアログ + +`` 要素は、非表示時には [`display: none;`](/ja/docs/Web/CSS/display) 表示時には `display: block;` と設定され、{{glossary("top layer","最上位レイヤー")}}および[アクセシビリティツリー](/ja/docs/Web/Performance/How_browsers_work#building_the_accessibility_tree)から削除されたり、追加されたりします。したがって、 `` 要素をアニメーションさせるには、 {{cssxref("display")}} プロパティをアニメーション化する必要があります。[対応ブラウザー](/ja/docs/Web/CSS/display#ブラウザーの互換性)では、`display` プロパティを[離散的なアニメーション型](/ja/docs/Web/CSS/CSS_animated_properties#離散)で変化させてアニメーション化します。具体的には、ブラウザーは `none` と他の `display` 値を交互に切り替えることで、アニメーション化されたコンテンツがアニメーションの全期間にわたって表示されるようにします。 + +例えば、 + +- `display` を `none` から `block`（あるいは他の可視の `display` 値）にアニメーションする場合、アニメーション再生時間の `0%` で値が `block` に切り替わり、常に表示されます。 +- `display` の `block`（または他の可視の `display` 値）から `none` へのアニメーションでは、アニメーション再生時間の `100%` の時点で値が `none` に切り替わるため、全体を通して表示されます。 + +> **メモ:** [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)を使用してアニメーションを行う場合、上記の動作を有効にするには [`transition-behavior: allow-discrete`](/ja/docs/Web/CSS/transition-behavior) を設定する必要があります。[CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)でアニメーションを行う場合、この動作は既定では利用でき、同等の手順は必要ありません。 + +#### dialog 要素のトランジション + +CSS トランジションで `` をアニメーションさせる場合、以下の機能が要求されます。 + +- [`@starting-style`](/ja/docs/Web/CSS/@starting-style) アットルール + - : `` に設定されたプロパティの、開かれるたびにトランジションする開始値のセットを提供します。これは予期せぬ動作を避けるために必要です。既定では、CSS トランジションは、可視要素のプロパティが 1 つの値から別の値に変更された場合のみ発生します。要素の最初のスタイル更新時や、`display` の型が `none` から別の型に変更された場合には発生しません。 +- [`display`](/ja/docs/Web/CSS/display) プロパティ + - : トランジションのリストに `display` を追加すると、トランジションの再生時間中、`` が `display: block`（またはダイアログが開いている状態として設定されている他の可視 `display` 値）のままになり、他にもトランジションが確実に表示されます。 +- [`overlay`](/ja/docs/Web/CSS/overlay) プロパティ + - : トランジションのリストに `overlay` が含まれていると、最上位レイヤーから `` が確実に除去されるまでトランジションが完了するまで遅延され、トランジションが確実に表示されるようになります。 +- {{cssxref("transition-behavior")}} プロパティ + - : `transition-behavior: allow-discrete` を `display` と `overlay` トランジション（または {{cssxref("transition")}} 一括指定）に設定すると、既定ではアニメーションできないこれら2つのプロパティで離散トランジションが有効になります。 + +この機能がどのようなものか見ていくために、例えば次のような例を挙げてみましょう。 + +##### HTML + +この HTML は `` 要素と、ダイアログを表示させるためのボタンを格納しています。さらに、`` 要素には、それ自体を閉じさせるためのボタンがもう一つ格納されています。 + +```html + + ここがコンテンツ + + + + +``` + +##### CSS + +CSS では、`@starting-style` ブロックを記述して、`opacity` および `transform` プロパティのトランジション開始時のスタイル、`dialog[open]` 状態のトランジション終了時のスタイル、`` が表示された後に元の状態に戻る際の既定の `dialog` 状態のスタイルを定義します。注意してほしいのは、 `` の `transition` リストには、これらのプロパティだけでなく、`display` と `overlay` プロパティも含まれ、それぞれに `allow-discrete` が設定されていることです。 + +また、開いたときに現れる `` の背後に現れる [`::backdrop`](/ja/docs/Web/CSS/::backdrop) の {{cssxref("background-color")}} プロパティに開始時のスタイル値を設定し、素敵な暗転アニメーションを指定しました。 `dialog[open]::backdrop` セレクターは、ダイアログが開いているときに、`` 要素の背景のみを選択します。 + +```css +/* 開いた状態のダイアログ */ +dialog[open] { + opacity: 1; + transform: scaleY(1); +} + +/* 閉じた状態のダイアログ */ +dialog { + opacity: 0; + transform: scaleY(0); + transition: + opacity 0.7s ease-out, + transform 0.7s ease-out, + overlay 0.7s ease-out allow-discrete, + display 0.7s ease-out allow-discrete; + /* transition: all 0.7s allow-discrete; + と等しい*/ +} + +/* 開く前の状態 */ +/* 詳細度が同じであるため、前の dialog[open] ルールの後に置かなければ効果がありません */ +@starting-style { + dialog[open] { + opacity: 0; + transform: scaleY(0); + } +} + +/* ダイアログがモーダルで最上位に来た場合に :backdrop をトランジションする */ +dialog::backdrop { + background-color: rgb(0 0 0 / 0%); + transition: + display 0.7s allow-discrete, + overlay 0.7s allow-discrete, + background-color 0.7s; + /* transition: all 0.7s allow-discrete; + と等しい */ +} + +dialog[open]::backdrop { + background-color: rgb(0 0 0 / 25%); +} + +/* この開始スタイル設定ルールは、上記のセレクター内にネストすることができません。 +入れ子セレクターは擬似要素を表すことができないからです。 */ + +@starting-style { + dialog[open]::backdrop { + background-color: rgb(0 0 0 / 0%); + } +} +``` + +##### JavaScript + +JavaScript で、表示ボタンと閉じるボタンにイベントハンドラーを追加し、クリックされたときに `` を表示させたり閉じたりするイベントを発生させます。 + +```js +const dialogElem = document.getElementById("dialog"); +const showBtn = document.querySelector(".show"); +const closeBtn = document.querySelector(".close"); + +showBtn.addEventListener("click", () => { + dialogElem.showModal(); +}); + +closeBtn.addEventListener("click", () => { + dialogElem.close(); +}); +``` + +##### 結果 + +このコードは次のように表示されます。 + +{{ EmbedLiveSample("dialog 要素のトランジション", "100%", "200") }} + +> **メモ:** ``は、表示される時点では常に `display: none` から `display: block` に変更されるため、項目遷移が発生するたびに、`` は `@starting-style` スタイルから `dialog[open]` スタイルにトランジションします。 `` が閉じられると、`dialog[open]` 状態から既定の `dialog` 状態にトランジションします。 +> +> このような場合、項目への入力時と出力時のスタイル設定のトランジションが異なることが可能です。この例については、「[開始スタイルを使用する場合のデモ](/ja/docs/Web/CSS/@starting-style#demonstration_of_when_starting_styles_are_used)」をご覧ください。 + +#### dialog のキーフレームアニメーション + +CSS のキーフレームアニメーションで `` をアニメーションさせる場合、トランジションとのいくつかの違いに注意する必要があります。 + +- `@starting-style` は提供しません。 +- キーフレームには `display` を記載します。これはアニメーション全体、または別の `none` 以外の表示値が指定されるまでの表示値となります。 +- 離散アニメーションを明示的に有効にする必要はありません。キーフレーム内に `allow-discrete` に相当するものはありません。 +- また、キーフレーム内で `overlay` を設定する必要もありません。 `display` のアニメーションが `` の表示から非表示へのアニメーションを処理します。 + +この例を見て、どのようなものか見ていきましょう。 + +##### HTML + +最初の HTML には、`` 要素と、ダイアログを表示させるためのボタンがあります。さらに、`` 要素には、それ自体を閉じるためのボタンが格納されています。 + +```html + + ここがコンテンツです + + + + +``` + +##### CSS + +CSSでは、``を閉じられた状態と表示させた状態の間でアニメーションさせるためのキーフレームを定義し、さらに、``の背景のフェードインアニメーションも定義しています。ダイアログボックスのアニメーションには、実際のアニメーション効果が再生時間全体にわたって確実に表示されるようにするための `display` のアニメーションが含まれます。 バックグラウンドのフェードアウトのアニメーションは不可能であることに注意してください。背景は、ダイアログボックスが閉じられるとすぐに DOM から除去されるため、アニメーション化する何かがあるわけではありません。 + +```css +dialog { + animation: fade-out 0.7s ease-out; +} + +dialog[open] { + animation: fade-in 0.7s ease-out; +} + +dialog[open]::backdrop { + animation: backdrop-fade-in 0.7s ease-out forwards; +} + +/* Animation keyframes */ + +@keyframes fade-in { + 0% { + opacity: 0; + transform: scaleY(0); + display: none; + } + + 100% { + opacity: 1; + transform: scaleY(1); + display: block; + } +} + +@keyframes fade-out { + 0% { + opacity: 1; + transform: scaleY(1); + display: block; + } + + 100% { + opacity: 0; + transform: scaleY(0); + display: none; + } +} + +@keyframes backdrop-fade-in { + 0% { + background-color: rgb(0 0 0 / 0%); + } + + 100% { + background-color: rgb(0 0 0 / 25%); + } +} + +body, +button { + font-family: system-ui; +} +``` + +##### JavaScript + +最後に、JavaScript でボタンにイベントハンドラーを追加し、`` を表示させたり閉じたりできるようにします。 + +```js +const dialogElem = document.getElementById("dialog"); +const showBtn = document.querySelector(".show"); +const closeBtn = document.querySelector(".close"); + +showBtn.addEventListener("click", () => { + dialogElem.showModal(); +}); + +closeBtn.addEventListener("click", () => { + dialogElem.close(); +}); +``` + +##### 結果 + +このコードは次のように表示されます。 + +{{ EmbedLiveSample("dialog のキーフレームアニメーション", "100%", "200") }} ## 技術的概要 @@ -146,7 +523,7 @@ confirmBtn.addEventListener("click", (event) => {
- + @@ -156,7 +533,7 @@ confirmBtn.addEventListener("click", (event) => { - + @@ -188,8 +565,10 @@ confirmBtn.addEventListener("click", (event) => { ## 関連情報 +- {{domxref("HTMLDialogElement")}} インターフェイス - {{domxref("HTMLDialogElement/close_event", "close")}} イベント -- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} イベント -- [HTML フォームガイド](/ja/docs/Learn/Forms) -- {{cssxref("::backdrop")}} 擬似要素 -- [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) +- {{domxref("HTMLElement/cancel_event", "cancel")}} イベント +- {{domxref("HTMLDialogElement/open", "open")}} プロパティ（`HTMLDialogElement` インターフェイス） +- [`inert`](/ja/docs/Web/HTML/Global_attributes/inert) グローバル属性（HTML 要素） +- CSS の {{CSSXref("::backdrop")}} 擬似要素 +- [ウェブフォーム](/ja/docs/Learn/Forms)（学習領域） diff --git a/files/ja/web/html/element/form/index.md b/files/ja/web/html/element/form/index.md index c3442bed396ded..90cd17681300e7 100644 --- a/files/ja/web/html/element/form/index.md +++ b/files/ja/web/html/element/form/index.md @@ -2,7 +2,7 @@ title: ": フォーム要素" slug: Web/HTML/Element/form l10n: - sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c + sourceCommit: 991385e7cfb9ac8589332b07aadcc4b38edea512 --- {{HTMLSidebar}} @@ -24,29 +24,26 @@ CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス > **メモ:** **この属性は非推奨であり、使用すべきではありません。** 代わりに `` 要素の [`accept`](/ja/docs/Web/HTML/Element/input#accept) 属性を使用してください。 - `accept-charset` + - : サーバーが受け付ける空白区切りの{{Glossary("character encoding", "文字エンコーディング")}}です。ブラウザーは、列挙されたされた順に使用します。既定値は、[ページと同じエンコーディング](/ja/docs/Web/HTTP/Headers/Content-Encoding)を意味します。 （以前のバージョンの HTML では、文字エンコーディングをカンマで区切ることもできました。） -- `autocapitalize` {{non-standard_inline}} - - : これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、`` のものより優先します。指定可能な値は次の通りです。 +- `autocapitalize` - - `none`: 自動大文字化機能を無効にします。 - - `sentences`: 文の先頭文字を自動的に大文字化します。 - - `words`: 単語の先頭文字を自動的に大文字化します。 - - `characters`: すべての文字を自動的に大文字化します。 + - : 入力されたテキストを自動的に大文字にするかどうか、また、その場合はどのような方法で大文字にするかを制御します。 詳細については、 [`autocapitalize`](/ja/docs/Web/HTML/Global_attributes/autocapitalize) グローバル属性のページをご覧ください。 -- `autocomplete` +- [`autocomplete`](/ja/docs/Web/HTML/Attributes/autocomplete) - : input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の `autocomplete` 属性は、 `` のものより優先します。指定可能な値は次の通りです。 - - `off`: ブラウザーは自動的には項目を補完しません。（ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。[autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields)を参照してください。 + - `off`: ブラウザーは自動的には項目を補完しません。（ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。[autocomplete 属性とログインフィールド](/ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#autocomplete_属性とログイン欄)を参照してください。 - `on`: ブラウザーは自動的に項目を補完することがあります。 - `name` - : フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる `form` 要素がある場合は、その中で一意でなければなりません。 -- `rel` +- [`rel`](/ja/docs/Web/HTML/Attributes/rel) - : 注釈や、このフォームが作成するリンク種別を制御します。注釈には [`external`](/ja/docs/Web/HTML/Attributes/rel#external)、[`nofollow`](/ja/docs/Web/HTML/Attributes/rel#nofollow)、[`opener`](/ja/docs/Web/HTML/Attributes/rel#opener)、[`noopener`](/ja/docs/Web/HTML/Attributes/rel#noopener)、[`noreferrer`](/ja/docs/Web/HTML/Attributes/rel#noreferrer) があります。リンク種別には [`help`](/ja/docs/Web/HTML/Attributes/rel#help)、[`prev`](/ja/docs/Web/HTML/Attributes/rel#prev)、[`next`](/ja/docs/Web/HTML/Attributes/rel#next)、[`search`](/ja/docs/Web/HTML/Attributes/rel#search)、[`license`](/ja/docs/Web/HTML/Attributes/rel#license) があります。[`rel`](/ja/docs/Web/HTML/Attributes/rel) の値はこれらの列挙値の空白区切りの値です。 ### フォーム送信のための属性 @@ -85,6 +82,7 @@ CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス - `_blank`: 無名の新しい閲覧コンテキストに読み込みます。 - `_parent`: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、`_self` と同じ動作をします。 - `_top`: 最上位の閲覧コンテキスト（すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの）に読み込みます。親がない場合は、`_self` と同じ動作をします。 + - `_unfencedTop`: 埋め込みの[フェンスフレーム](/ja/docs/Web/API/Fenced_frame_API)内でフォームからレスポンスを読み込み、最上位のフレームに表示します（つまり、他の予約済み出力先とは異なり、フェンスフレームのルートを越えて移動します）。フェンスフレーム内でのみ利用できます。 この値は、 {{HTMLElement("button")}}、[``](/ja/docs/Web/HTML/Element/input/submit)、[``](/ja/docs/Web/HTML/Element/input/image) の [`formtarget`](/ja/docs/Web/HTML/Element/button#formtarget) 属性によって上書きすることが可能です。 @@ -153,7 +151,7 @@ CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} [擬似クラス diff --git a/files/ja/web/http/headers/content-location/index.md b/files/ja/web/http/headers/content-location/index.md index a8b89f688ed907..c7d01bf57cf854 100644 --- a/files/ja/web/http/headers/content-location/index.md +++ b/files/ja/web/http/headers/content-location/index.md @@ -2,7 +2,7 @@ title: Content-Location slug: Web/HTTP/Headers/Content-Location l10n: - sourceCommit: 5bd9fe2b25c6eee2a14d0406ce7116998fa48c13 + sourceCommit: 1176e753733ee9d2e8966cc7cf03df495dce9aba --- {{HTTPSidebar}} diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 902f641a9b2d36..c8e39d3bc0e524 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -280,15 +280,11 @@ /ko/docs/Learn/CSS/Introduction_to_CSS/선택자 /en-US/docs/Learn/CSS/Building_blocks/Selectors /ko/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks /ko/docs/Learn/CSS/Styling_boxes/Backgrounds /en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders -/ko/docs/Learn/Common_questions/HTML_features_for_accessibility /ko/docs/Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility /ko/docs/Learn/Common_questions/How_does_the_Internet_work /ko/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work -/ko/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines /ko/docs/Learn/Common_questions/Web_mechanics/Pages_sites_servers_and_search_engines /ko/docs/Learn/Common_questions/Thinking_before_coding /ko/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding -/ko/docs/Learn/Common_questions/Upload_files_to_a_web_server /ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server /ko/docs/Learn/Common_questions/What_are_hyperlinks /ko/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks /ko/docs/Learn/Common_questions/What_is_a_URL /ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /ko/docs/Learn/Common_questions/What_is_a_web_server /ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server -/ko/docs/Learn/Common_questions/What_software_do_I_need /ko/docs/Learn/Common_questions/Tools_and_setup/What_software_do_I_need /ko/docs/Learn/Common_questions/set_up_a_local_testing_server /ko/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server /ko/docs/Learn/Common_questions/코딩하기_전에_생각하기 /ko/docs/Learn/Common_questions/Design_and_accessibility/Thinking_before_coding /ko/docs/Learn/Front-end_web_developer /ko/docs/orphaned/Learn/Front-end_web_developer diff --git a/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md b/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md deleted file mode 100644 index 4db91b2b02b023..00000000000000 --- a/files/ko/learn/common_questions/design_and_accessibility/html_features_for_accessibility/index.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: 어떤 HTML 기능이 접근성을 촉진할까? -slug: Learn/Common_questions/Design_and_accessibility/HTML_features_for_accessibility ---- - -{{QuicklinksWithSubPages("Learn/Common_questions")}} - -이번 내용은 웹 페이지를 좀 더 서로 다른 장애를 가진 사람들에게 좀 더 접근하기 쉽게 만들 수 있는 HTML의 특정한 기능을 서술합니다. - -## 탭(Tabbing) - -pointing devices를 사용 하지 않거나 사용 할 수 없는 유저들은 Tab 을 links를 통해 할 수 있습니다.(links는 논리적 순서로 이루어져 있어야 합니다.) tabindex 속성은 당신이 이러한 순서를 정의 할 수 있도록 허락합니다. 만약 HTML이 선형이라면, 논리적 탭 순서는 자동적으로 맞춰집니다. - -```html - -``` - -이번 예시는(순수히 데모를 위해 사용되었으니 따라하지 마세요), 탭이 여기서부터 여기저기를 점프합니다. - -## 링크 제목(Link Titles) - -만약 당신이 자신을 설명하지 않는 링크를 가지고 있거나, 링크 목적지가 더 자세하게 설명되지 않으면, 그 링크에 제목 속성을 추가 할 수 있습니다. - -```html -

- I'm really bad at writing link text. - Click here - to find out more. -

-``` - -## 접근 키(Access Keys) - -_접근 키는_ 링크에 사용자가 Alt or Ctrl + 접근 키를 입력하여 얻을 수 있는 키보드 단축키를 할당하여 쉬운 네비게이션을 제공합니다. 정확한 키 조합은 플래폼에 따라 다릅니다. - -```html -Some page -``` - -## 링크 넘어가기(Skip Links) - -탭을 지원하기 위하여, 당신은 유저가 당신의 웹 페이지 모음으로 넘어갈 수 있는 링크를 제공할 수 있습니다. 당신은 아마도 다른 사람이 네비게이션 링크를 따라 점프하기를 원할 것입니다. 그렇게 함으로써, 페이지의 메인 내용을 읽을 수 있습니다. - -```html -
-

The Heading

- Skip to content -
- - - -
- -
-``` diff --git a/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md b/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md index d88253892f14fb..552e0f03c33587 100644 --- a/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md +++ b/files/ko/learn/common_questions/design_and_accessibility/thinking_before_coding/index.md @@ -1,6 +1,8 @@ --- title: 나의 웹사이트를 설계하기 위해서는? slug: Learn/Common_questions/Design_and_accessibility/Thinking_before_coding +l10n: + sourceCommit: 9de3d03957f1d66f02f45400a6981372aa368c1f --- {{QuicklinksWithSubPages("Learn/Common_questions")}} @@ -44,7 +46,7 @@ _아직 가능한 능동 학습이 없다. [기여를 고민해보라](/ko/docs/ 친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다. -> **참고:** **메모:** 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이 [Project Ideation(관념화)](), [Project Planning(계획)](http://en.wikipedia.org/wiki/Project_planning) 그리고 [Project Management(관리)](http://en.wikipedia.org/wiki/Project_management) 라고 부르는 것을 다루는 단순한 방법이다. +> **참고:** 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이 [Project Ideation(관념화)](), [Project Planning(계획)](http://en.wikipedia.org/wiki/Project_planning) 그리고 [Project Management(관리)](http://en.wikipedia.org/wiki/Project_management) 라고 부르는 것을 다루는 단순한 방법이다. ### 내가 정확히 달성하고 싶은 것은 무엇인가? @@ -88,9 +90,9 @@ _아직 가능한 능동 학습이 없다. [기여를 고민해보라](/ko/docs/ ### 내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까? -이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다. +이제 무엇을 성취하고 싶은지 알았으니, 그 목표를 실행 가능한 단계로 바꿀 시간입니다. 참고로, 목표는 반드시 고정된 것이 아닙니다. 프로젝트가 진행되는 동안 예상치 못한 장애물을 만나거나 마음이 바뀌는 경우에 따라 시간이 지나면서 변화할 수 있습니다. -긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다. +긴 설명을 하기보다는, 이 표와 함께 예제로 돌아가 보겠습니다.
요구지식:선행 지식: - how the Internet works(인터넷이 작동하는 법)을 배워야 한다.
許可された内容許可されている内容 フローコンテンツ なし。開始タグと終了タグの両方が必須です。
許可された親要素許可されている親要素 フローコンテンツを受け入れるあらゆる要素
暗黙の ARIA ロール - form（フォームにアクセシブル名がある場合）、それ以外の場合は対応するロールなし。 + form
diff --git a/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md b/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md index 6f0c46a41b22bd..cc5f18be913599 100644 --- a/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md +++ b/files/ko/learn/common_questions/tools_and_setup/set_up_a_local_testing_server/index.md @@ -1,6 +1,8 @@ --- title: 로컬 테스트 서버 설치하기 slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server +l10n: + sourceCommit: 33cada2d06f8d0cd009d9d5348de6e3165bba67f --- {{QuicklinksWithSubPages("Learn/Common_questions")}} @@ -36,62 +38,101 @@ slug: Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server - **비동기 요청인 경우**. 일부 브라우저(크롬을 포함하는)에서는 로컬 파일의 예제를 실행할 경우에 비동기 요청([서버로부터 데이터 가져오기 - Fetching data from the server](/ko/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)를 참고)이 작동하지 않을 것입니다. 이는 보안 제한(웹 보안과 관련된 자세한 내용은 [웹사이트 보안- Website security](/ko/docs/Learn/Server-side/First_steps/Website_security)을 참고하세요) 때문입니다. - **서버측 언어인 경우**. 서버측 언어(PHP나 Python과 같은)는 코드를 해석하고 결과를 내보낼 수 있는 특별한 서버가 필요합니다. +- **다른 파일을 포함하는 경우**. 브라우저는 일반적으로 `file://` 스키마를 사용하여 리소스를 로드하는 요청을 교차 출처 요청으로 처리합니다. + 따라서 다른 로컬 파일을 포함하는 로컬 파일을 불러올 경우, 이는 {{Glossary("CORS")}} 오류를 유발할 수 있습니다. ## 간단한 로컬 HTTP 서버 실행하기 -비동기 요청 문제를 해결하려면 로컬 웹 서버에서 예제를 실행하여 테스트해야 합니다. 이를 위한 가장 쉬운 방법은 파이썬(Python)의 `SimpleHTTPServer` 모듈을 사용하는 것입니다. (설치된 파이썬 버전에 따라 `http.server` 모듈을 사용해야 할 수도 있습니다.) +비동기 요청 문제를 해결하려면 로컬 웹 서버를 통해 이러한 예제를 테스트해야 합니다. -이를 위해. +### 코드 편집기에서 확장 기능 사용하기 -1. 파이썬을 설치합니다. 리눅스나 맥OS 사용자라면 이미 시스템에 설치되어 있을 것입니다. 윈도우 사용자일 경우, 다음과 같이 파이썬 홈페이지로부터 설치 프로그램을 다운 받고 설치합니다. +HTML, CSS, JavaScript만 필요하고 서버 측 언어가 필요하지 않다면, 코드 편집기에서 확장 기능을 확인하는 것이 가장 쉬운 방법일 수 있습니다. 로컬 HTTP 서버의 설치와 설정을 자동화할 뿐만 아니라, 코드 편집기와 잘 통합되어 로컬 파일을 HTTP 서버에서 한 번의 클릭으로 테스트할 수 있습니다. - - 파이썬 홈페이지([python.org](https://www.python.org/))로 이동합니다. - - 다운로드(download) 영역에서 Python "3.xxx" 링크를 클릭합니다. - - 페이지의 아래쪽에 있는 *Windows x86 executable installer*를 선택하고 다운로드 받습니다. - - 다운로드가 완료되면 실행합니다. - - 설치 프로그램의 첫 번째 페이지에서 "Add Python 3.xxx to PATH" 체크박스를 체크해야 합니다. - - *Install*을 클릭하고 설치가 완료되면 *Close*를 클릭합니다. +VSCode의 경우 다음 무료 확장을 확인할 수 있습니다. -2. 명령 실행창(윈도우의 경우는 command prompt, OS/X나 리눅스인 경우에는 터미널창)을 엽니다. 파이썬이 설치되었는지 확인하기 위해 다음 명령을 입력합니다. +- `vscode-preview-server`. [홈페이지](https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server)에서 확인할 수 있습니다. + +### Node.js 사용하기 + +Node.js의 [`http-server`](https://www.npmjs.com/package/http-server) 모듈은 어떤 폴더에서든 HTML 파일을 호스팅할 수 있는 가장 쉬운 방법입니다. + +이 모듈을 사용하려면, + +1. 다음 명령어를 실행하여 Node.js가 이미 설치되어 있는지 확인합니다. + + ```bash + node -v + npm -v + npx -v + ``` + +2. Node.js가 설치되지 않았다면, [설치 가이드](https://nodejs.org/en/download/package-manager)를 참고하여 설치 후 위 명령어를 다시 실행하여 설치가 성공했는지 확인합니다. + +3. 폴더가 `/path/to/project`라고 가정하고, 서버를 시작하려면 다음 명령어를 실행합니다. + + ```bash + npx http-server /path/to/project -o -p 9999 + ``` + + 이 명령어는 `/path/to/project` 폴더 내 모든 파일을 `localhost:9999`에서 호스팅합니다. `-o` 옵션은 `index.html` 페이지를 웹 브라우저에서 자동으로 열어줍니다. `index.html` 파일이 없을 경우, 폴더 목록이 표시됩니다. + +### Python 사용하기 + +또 다른 방법으로 Python의 `http.server` 모듈을 사용할 수 있습니다. + +> [!NOTE] +> Python의 오래된 버전(2.7까지)에는 `SimpleHTTPServer`라는 유사한 모듈이 제공되었습니다. Python 2는 이미 지원이 종료되었으므로 Python 3 사용을 권장합니다. + +이 방법을 사용하려면, + +1. Python이 설치되어 있는지 확인하려면 다음 명령어를 실행합니다. ```bash python -V + # 위 명령어가 실패하면, + python3 -V + # 또는 "py" 명령어가 사용 가능하면, + py -3 -V ``` -3. 이 명령은 버전 번호를 반환합니다. 정상적으로 작동하면, `cd` 명령을 이용해 여러분의 예제가 존재하는 디렉토리로 이동합니다. +2. Python이 설치되어 있지 않으면, [설치 가이드](https://www.python.org/downloads/)를 참고하여 설치하세요. (더 자세한 설명은 [Django 튜토리얼](/ko/docs/Learn/Server-side/Django/development_environment#installing_python_3)에서도 확인할 수 있습니다). 설치가 완료되면 위 명령어를 다시 실행하여 설치가 성공했는지 확인합니다. + +3. Python이 설정되었다면, `cd` 명령어를 사용하여 테스트할 웹사이트 코드가 있는 폴더로 이동합니다. ```bash - # 들어가고자 하는 디렉토리 명을 입력합니다. 예를 들어, + # 폴더 이름을 입력하여 이동합니다, 예를 들어 cd Desktop - # 한 단계 상위 디렉토리로 이동하려면 점 두 개를 사용합니다. + # 상위 폴더로 이동하려면 두 점을 사용합니다 cd .. ``` -4. 그 경로에 있는 서버를 구동하기 위한 명령을 입력합니다. +4. 해당 폴더에서 서버를 시작하는 명령어를 입력합니다. ```bash - # 위에서 반환된 파이썬 버전이 3.X인 경우 - python -m http.server - # 위에서 반환된 파이썬 버전이 2.X인 경우 - python -m SimpleHTTPServer + # Windows에서는 "python -m http.server" 또는 "py -3 -m http.server" 사용 + python3 -m http.server ``` -5. 이 명령은 기본적으로 로컬 웹 서버의 8000번 포트를 이용해 해당 경로의 컨텐츠를 실행시킵니다. 웹 브라우저에서 주소줄에 `localhost:8000`를 입력하면 이 서버로 이동할 수 있습니다. 그러면 그 디렉토리의 컨텐츠 목록을 볼 수 있는데 실행하고자 하는 HTML 파일을 클릭합니다. +5. 기본적으로, 이 명령어는 해당 폴더의 내용을 로컬 웹 서버의 포트 8000에서 실행합니다. 웹 브라우저에서 `localhost:8000` URL로 이동하여 이 서버에 접속할 수 있습니다. 여기서 폴더의 내용이 나열되며, 실행하려는 HTML 파일을 클릭하면 됩니다. > [!NOTE] -> 8000번 포트에 이미 실행 중인 무언가가 있다면 서버 실행 명령에 다음과 같이 대체 포트 번호를 명시함으로써 다른 포트로 서버를 구동할 수 있습니다. -> -> 예: `python -m http.server 7800` (Python 3.x일 경우) 또는 `python -m SimpleHTTPServer 7800` (Python 2.x일 경우). 이 경우, `localhost:7800`를 통해 서버로 이동할 수 있습니다. +> 포트 8000에서 이미 실행 중인 항목이 있는 경우, 서버 명령어 뒤에 다른 포트 번호를 지정하여 실행할 수 있습니다. 예: `python3 -m http.server 7800`. 이 경우 `localhost:7800`에서 콘텐츠에 접근할 수 있습니다. + +## 서버 측 언어를 로컬에서 실행하기 + +Python, PHP, JavaScript 같은 서버 측 언어를 사용하는 경우, 서버 측 언어와 웹 프레임워크 또는 "단독" 코드에 따라 다른 접근 방식이 필요합니다. -## 서버측 언어를 로컬에서 실행하기 +웹 프레임워크를 사용하는 경우, 일반적으로 프레임워크 자체에서 개발 서버를 제공합니다. 예를 들어, 다음 언어/프레임워크는 개발 서버를 함께 제공합니다. -파이썬의 `SimpleHTTPServer (python 2.0) http.server (python 3.0)` 모듈은 유용하기는 하나 파이썬이나 PHP 또는 JavaScript와 같은 언어로 작성된 코드를 실행하지 못합니다. 이런 코드를 처리하기 위해서는 뭔가가 더 필요합니다 — 정확하게 무엇이 필요한지는 실행하고자 하는 서버측 언어가 무엇인지에 따라 다릅니다. 다음에 몇 가지 사례를 소개합니다. +- Python 웹 프레임워크, 예: [Django](/ko/docs/Learn/Server-side/Django), [Flask](https://flask.palletsprojects.com/), 그리고 [Pyramid](https://trypyramid.com/) +- Node/JavaScript 프레임워크, 예: [Express Web Framework (Node.js/JavaScript)](/ko/docs/Learn/Server-side/Express_Nodejs) +- PHP는 [자체 내장 개발 서버](https://www.php.net/manual/en/features.commandline.webserver.php)를 가지고 있습니다. -- 파이썬으로된 서버측 코드를 실행하기 위해서는 파이썬 웹 프레임워크(Python web framework)를 사용할 필요가 있습니다. [Django Web Framework (Python)](/ko/docs/Learn/Server-side/Django)를 읽어보면 Django framework를 이용하는 법을 알 수 있습니다. [Flask](http://flask.pocoo.org/)는 Djang를 대신할 좋은(조금 더 가벼운) 대안이될 수 있습니다. Flask를 실행하기 위해서는 Python/PIP([install Python/PIP](/ko/docs/Learn/Server-side/Django/development_environment#Installing_Python_3))를 설치하고, `pip3 install flask` 명령으로 Flask를 설치해야 합니다. 이 때부터 파이썬 Flask 예제를 실행할 수 있는데, 예를 들어, `python3 python-example.py`명령을 실행하고 브라우저에서 `localhost:5000`으로 이동하면 됩니다. -- Node.js (JavaScript)라는 서버측 코드를 실행하기 위해서는 기본 node(raw node)나 그 위에 설치되는 프레임워크를 이용해야 합니다. Express가 좋은 선택이될 수 있습니다 — [Express Web Framework (Node.js/JavaScript)](/ko/docs/Learn/Server-side/Express_Nodejs)를 살펴보시기 바랍니다. -- PHP로된 서버측 코드를 실행하려면 PHP에 내장된 개발서버([PHP's built-in development server](http://php.net/manual/en/features.commandline.webserver.php))를 실행시킵니다. + ```bash + cd path/to/your/php/code + php -S localhost:8000 + ``` -```bash -cd path/to/your/php/code -php -S localhost:8000 -``` +서버 측 프레임워크나 개발 서버를 제공하는 프로그래밍 언어를 사용하지 않는 경우, Python의 `http.server` 모듈을 사용하여 CGI(Common Gateway Interface) 스크립트를 호출함으로써 Python, PHP, JavaScript 등으로 작성된 서버 측 코드를 테스트할 수 있습니다. +이 기능 사용 예시는 [Execute a Script Remotely Through the Common Gateway Interface (CGI)](https://realpython.com/python-http-server/#execute-a-script-remotely-through-the-common-gateway-interface-cgi)의 *How to Launch an HTTP Server in One Line of Python Code*에서 확인할 수 있습니다. diff --git a/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md b/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md index 53c34be0545ed3..25103a6fcd9102 100644 --- a/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md +++ b/files/ko/learn/common_questions/web_mechanics/how_does_the_internet_work/index.md @@ -1,6 +1,8 @@ --- title: 인터넷은 어떻게 동작하는가? slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work +l10n: + sourceCommit: 9de3d03957f1d66f02f45400a6981372aa368c1f --- {{QuicklinksWithSubPages("Learn/Common_questions")}} @@ -10,7 +12,7 @@ slug: Learn/Common_questions/Web_mechanics/How_does_the_Internet_work
- + - + diff --git a/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md b/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md index 45621b07f8bafc..09c0e696fbe648 100644 --- a/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md +++ b/files/ko/learn/common_questions/web_mechanics/what_is_a_web_server/index.md @@ -1,6 +1,8 @@ --- title: 웹 서버란 무엇일까? slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server +l10n: + sourceCommit: bd48972c8a9c2acf3b8fa6e41248d0952eb0c406 --- {{QuicklinksWithSubPages("Learn/Common_questions")}} @@ -10,18 +12,18 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server
선행지식:선행 지식: 선행지식은 필요없습니다. 하지만 '프로젝트의 목표 설정에 대한 글(
선수지식:선행 지식: - 인터넷이 작동하는 법을 + 인터넷이 작동하는 법을 알아야 하고 - 웹 페이지, 웹사이트, 웹 서버 그리고 검색엔진의 차이에 익숙해야 한다.
- + - +
선수 지식선행 지식: - 웹 페이지와 웹 사이트, 웹 서버, 그리고 검색 엔진의 차이점에 대해 이해하고 - 인터넷이 어떻게 동작하는지 알고있으면 좋습니다.
목표목표: 웹 서버가 무엇인지를 배우고, 어떻게 동작하는지에 대한 전반적인 이해를 얻을 것입니다. @@ -43,9 +45,9 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server 웹 사이트를 공개하기 위해서는, 당신은 정적 혹은 동적 웹 서버가 필요합니다. -정적 웹 서버 혹은 스택은 HTTP 서버 (소프트웨어)가 있는 컴퓨터(하드웨어)로 구성되어 있습니다. 서버가 그 불려진 파일을 당신의 브라우저에게 전송하기 때문에, 저희는 그것을 "정적"이라고 부릅니다. +**정적 웹 서버** 혹은 스택은 HTTP 서버 (소프트웨어)가 있는 컴퓨터(하드웨어)로 구성되어 있습니다. 서버가 그 불려진 파일을 당신의 브라우저에게 전송하기 때문에, 저희는 그것을 "정적"이라고 부릅니다. -동적 웹 서버는 정적 웹 서버와 추가적인 소프트웨어(대부분 일반적인 애플리케이션 서버와 데이터베이스)로 구성되어 있습니다. 애플리케이션 서버가 HTTP 서버를 통해 당신의 브라우저에게 불려진 파일들을 전송하기 전에, 애플리케이션 서버가 업데이트하기 때문에 우리는 이것을 동적이라고 부릅니다. +**동적 웹 서버**는 정적 웹 서버와 추가적인 소프트웨어(대부분 일반적인 애플리케이션 서버와 데이터베이스)로 구성되어 있습니다. 애플리케이션 서버가 HTTP 서버를 통해 당신의 브라우저에게 불려진 파일들을 전송하기 전에, 애플리케이션 서버가 업데이트하기 때문에 우리는 이것을 동적이라고 부릅니다. 예를 들어, 당신이 브라우저에서 보는 최종 웹페이지들을 생성하기 위해, 애플리케이션 서버는 아마 데이터베이스로 온 컨텐츠들로 이루어진 HTML 템플릿을 채울지 모릅니다. MDN 혹은 Wikipedia와 같은 사이트들은 수 천개의 웹페이지들을 가지고 있지만, 그것들은 실제의 HTML 문서가 아니라 오직 약간의 HTML 템플릿과 엄청 큰 데이터베이스로 되어있습니다. 이 구성은 내용들을 전달하고 관리하기 쉽고 빠르게 만들어 줍니다. @@ -64,13 +66,13 @@ slug: Learn/Common_questions/Web_mechanics/What_is_a_web_server - 항상 같은 IP주소를 가지고 있습니다(모든 {{Glossary("ISP", "ISPs")}}가 홈 라인에 대해 고정된 IP주소를 제공하는 것은 아닙니다.) - 제 3자에 의해 유지보수 됩니다 -이러한 이유들로, 좋은 호스팅 제공자를 찾는 것은 당신의 웹 사이트를 구축하는 것의 핵심 부분입니다. 다양한 서비스 회사들의 조건을 살펴보고 당신의 필요와 예산을 충족하는 하나를 선택하세요 (서비스는 무료부터 매달 수 백만원까지 있습니다.) 더 많은 자세한 사항은 [여기서](/en-US/Learn/How_much_does_it_cost#Hosting) 찾을 수 있습니다. +이러한 이유들로, 좋은 호스팅 제공자를 찾는 것은 당신의 웹 사이트를 구축하는 것의 핵심 부분입니다. 다양한 서비스 회사들의 조건을 살펴보고 당신의 필요와 예산을 충족하는 하나를 선택하세요 (서비스는 무료부터 매달 수 백만원까지 있습니다.) 더 많은 자세한 사항은 [여기서](/ko/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#hosting) 찾을 수 있습니다. -당신이 웹 호스팅 솔루션을 설정했다면, 그저 당신의 [웹 서버에 파일들을 업로드 하시면 됩니다.](/ko/docs/Learn/Upload_files_to_a_web_server) +당신이 웹 호스팅 솔루션을 설정했다면, 그저 당신의 [웹 서버에 파일들을 업로드 하시면 됩니다.](/ko/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server) ### HTTP를 이용해 통신하기 -두 번째로, 웹 서버는 {{Glossary("HTTP")}} (hypertext transfer protocol)을 위한 지원합니다. 이름이 의미하듯이, HTTP는 어떻게 두 컴퓨터간의 hypertext(예를 들어, 연결된 웹 문서)를 전송하는지를 서술합니다. +두 번째로, 웹 서버는 {{Glossary("HTTP")}} (Hypertext Transfer Protocol)을 위한 지원합니다. 이름이 의미하듯이, HTTP는 어떻게 두 컴퓨터간의 hypertext(예를 들어, 연결된 웹 문서)를 전송하는지를 서술합니다. 프로토콜은 두 컴퓨터간의 통신를 위한 규칙의 집합입니다. HTTP는 문자로 된, 독립적인 프로토콜입니다. @@ -89,7 +91,9 @@ HTTP는 어떻게 클라이언트와 서버가 통신을 하는지 명확한 규 1. 요청을 받으면, HTTP 서버는 먼저 요청받은 URL이 존재하는 파일과 매칭이 되는지를 확인합니다. 2. 만약 매칭된다면, 웹 서버는 그 파일 내용을 브라우저에게 되돌려줍니다. 만약 그렇지 않다면, 애플리케이션 서버는 필요한 파일을 구축합니다. -3. 만약 위 둘의 과정이 불가능하다면, 웹 서버는 브라우저에게 에러 메시지를 반환합니다, 대부분의 에러 메시지는 "404 Not Found" 입니다.(이 에러는 너무 많이 발생하여 많은 웹 디자이너들은404 error pages를 디자인하는데 많은 시간을 할애합니다. +3. 만약 위 둘의 과정이 불가능하다면, 웹 서버는 브라우저에게 에러 메시지를 반환합니다, 대부분의 에러 메시지는 {{HTTPStatus("404", "404 Not Found")}} 입니다. + 404 오류는 매우 흔하기 때문에 일부 웹 디자이너들은 404 오류 페이지를 디자인하는 데 많은 시간과 노력을 들이기도 합니다. + ![The MDN 404 page as an example of such error page](mdn-404.jpg) ### 정적 vs. 동적 컨텐츠 diff --git a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md index facc3ba673a72e..8c08696ac2d46c 100644 --- a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -57,7 +57,20 @@ CSS 는 **Cascading Style Sheets** 의 약자이며, CSS 라는 단어를 이해 아래 예에서는, `h1` 에 적용할 수 있는 두 가지 규칙이 있습니다. `h1` 은 파란색으로 표시됩니다 — 이러한 규칙에는 동일한 선택자가 있고 동일한 고유성을 가지므로, 소스 순서의 마지막 규칙이 우선합니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} +```html live-sample___cascade-simple +

This is my heading.

+``` + +```css live-sample___cascade-simple +h1 { + color: red; +} +h1 { + color: blue; +} +``` + +{{EmbedLiveSample("cascade-simple")}} ### 우선 순위 (Specificity) @@ -68,7 +81,21 @@ CSS 는 **Cascading Style Sheets** 의 약자이며, CSS 라는 단어를 이해 시간 예제! 아래에는 `h1` 에 적용할 수 있는 두 가지 규칙이 다시 있습니다. 아래 `h1` 은 빨간색으로 표시 됩니다 — class 선택자는 규칙에 더 높은 우선 순위를 부여하므로 요소 선택자가 있는 규칙은 소스 순서에서 더 아래에 표시 되더라도 적용됩니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} +```html live-sample___specificity-simple +

This is my heading.

+``` + +```css live-sample___specificity-simple +.main-heading { + color: red; +} + +h1 { + color: blue; +} +``` + +{{EmbedLiveSample("specificity-simple")}} 우선 순위 점수 및 기타 사항에 대해서는 나중에 설명하겠습니다. @@ -78,7 +105,28 @@ CSS 는 **Cascading Style Sheets** 의 약자이며, CSS 라는 단어를 이해 예를 들어, 요소에 `color` 및 `font-family` 를 설정하면, 다른 색상 및 글꼴 값을 직접 적용하지 않는 한, 해당 요소 내부의 모든 요소에도 해당 색상 및 글꼴로 스타일이 지정됩니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} +```html live-sample___inheritance-simple +

+ As the body has been set to have a color of blue this is inherited through the + descendants. +

+

+ We can change the color by targeting the element with a selector, such as this + span. +

+``` + +```css live-sample___inheritance-simple +body { + color: blue; +} + +span { + color: black; +} +``` + +{{EmbedLiveSample("inheritance-simple")}} 일부 속성은 상속되지 않습니다 — 예를 들어 요소에 {{cssxref("width")}} 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않습니다. 이 경우, CSS 는 사용하기가 매우 어려울 것입니다! @@ -95,7 +143,46 @@ CSS 는 **Cascading Style Sheets** 의 약자이며, CSS 라는 단어를 이해 색상은 직접 자식 항목 뿐만 아니라 간접 자식 항목 (직접 자식 `
  • `) 및 첫 번째 중첩 목록에 있는 자식 항목에도 적용됩니다. 그런 다음 두 번째 중첩 목록에 `special` class 를 추가하고 다른 색상을 적용했습니다. 그런 다음 자식을 통해 상속됩니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} +```html live-sample___inheritance +
      +
    • Item One
      • +
    • + Item Two +
        +
      • 2.1
        • +
      • 2.2
        • +
      +
      • +
    • + Item Three +
        +
      • + 3.1 +
          +
        • 3.1.1
          • +
        • 3.1.2
          • +
        +
        • +
      • 3.2
        • +
      +
      • +
    +``` + +```css live-sample___inheritance +.main { + color: rebeccapurple; + border: 2px solid #ccc; + padding: 1em; +} + +.special { + color: black; + font-weight: bold; +} +``` + +{{EmbedLiveSample("inheritance", "", "280px")}} 너비 (위에서 언급 한 것처럼), 마진, 패딩 및 테두리와 같은 것은 상속되지 않습니다. 만약 우리 목록의 자식들이 테두리를 물려 받았다면, 모든 단일 목록과 목록 항목은 테두리를 얻게 될 것입니다 — 아마도 우리가 원하는 효과는 아닙니다! @@ -126,7 +213,34 @@ CSS 는 상속을 제어하기 위한 4 가지 특수 범용 속성 값을 제 2. 왜 세 번째 와 네 번째 링크가 그 색깔인지 이해합니까? 그렇치 않은 경우 위의 값에 대한 설명을 확인하십시오. 3. `` 요소에 대해 — 예를 들어 `a { color: red; }` 와 같은 새 색상을 정의하는 경우 어떤 링크가 색상이 변경됩니까? -{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} +```html live-sample___keywords + +``` + +```css live-sample___keywords +body { + color: green; +} + +.my-class-1 a { + color: inherit; +} + +.my-class-2 a { + color: initial; +} + +.my-class-3 a { + color: unset; +} +``` + +{{EmbedLiveSample("keywords")}} ### 모든 속성 값 재설정 @@ -134,7 +248,28 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 아래 예제에는 두 개의 인용문이 있습니다. 첫 번째는 인용문 자체에 스타일을 적용하고 두 번째는 `all` 값을 `unset` 하도록 인용문에 적용된 class 를 갖습니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} +```html live-sample___all +
    +

    This blockquote is styled

    +
    + +
    +

    This blockquote is not styled

    +
    +``` + +```css live-sample___all +blockquote { + background-color: orange; + border: 2px solid blue; +} + +.fix-this { + all: unset; +} +``` + +{{EmbedLiveSample("all")}} `all` 의 값을 사용 가능한 다른 값 중 일부로 설정하고 차이가 무엇인지 관찰하십시오. @@ -164,7 +299,29 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 이 동작은 CSS 에서 반복을 피하는 데 도움이 됩니다. 일반적인 방법은 기본 요소의 일반 스타일을 정의한 다음, 다른 요소에 대한 class 를 작성하는 것입니다. 예를 들어, 아래 스타일 시트에서 h2 제목에 대한 일반 스타일을 정의한 다음, 일부 속성과 값만 변경하는 class 를 만들었습니다. 처음에 정의된 값은 모든 표제에 적용되며, 보다 구체적인 값은 class 가 있는 표제에 적용됩니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} +```html live-sample___mixing-rules +

    Heading with no class

    +

    Heading with class of small

    +

    Heading with class of bright

    +``` + +```css live-sample___mixing-rules +h2 { + font-size: 2em; + color: #000; + font-family: Georgia, "Times New Roman", Times, serif; +} + +.small { + font-size: 1em; +} + +.bright { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("mixing-rules", "", "240px")}} 이제 브라우저가 우선 순위 (specificity) 를 계산하는 방법을 살펴보겠습니다. 우리는 이미 요소 선택자가 우선 순위가 낮으며 class 가 덮어 쓸 수 있음을 알고 있습니다. 기본적으로 포인트 단위의 가치가 다른 유형의 선택자에 부여되며, 이를 합산하면 특정 선택자의 가중치가 부여되며, 이는 다른 잠재적 일치 항목에 대해 평가할 수 있습니다. @@ -190,7 +347,73 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 계속 진행하기 전에, 실제 사례를 살펴보겠습니다. -{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} +```html live-sample___specificity-boxes +
    +
    + +
    +
    +``` + +```css live-sample___specificity-boxes +/* 1. specificity: 1-0-1 */ +#outer a { + background-color: red; +} + +/* 2. specificity: 2-0-1 */ +#outer #inner a { + background-color: blue; +} + +/* 3. specificity: 1-0-4 */ +#outer div ul li a { + color: yellow; +} + +/* 4. specificity: 1-1-3 */ +#outer div ul .nav a { + color: white; +} + +/* 5. specificity: 0-2-4 */ +div div li:nth-child(2) a:hover { + border: 10px solid black; +} + +/* 6. specificity: 0-2-3 */ +div li:nth-child(2) a:hover { + border: 10px dashed black; +} + +/* 7. specificity: 0-3-3 */ +div div .nav:nth-child(2) a:hover { + border: 10px double black; +} + +a { + display: inline-block; + line-height: 40px; + font-size: 20px; + text-decoration: none; + text-align: center; + width: 200px; + margin-bottom: 10px; +} + +ul { + padding: 0; +} + +li { + list-style-type: none; +} +``` + +{{EmbedLiveSample("specificity-boxes")}} 우선, 우리는 이 예제의 처음 7개 규칙에만 관심이 있으며, 앞으로 알 수 있듯이 각 규칙 앞에 주석에 우선 순위 값을 포함 시켰습니다. @@ -209,7 +432,30 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 두 개의 단락이 있고, 하나에 ID 가 있는 이 예를 살펴보십시오. -{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} +```html live-sample___important +

    This is a paragraph.

    +

    One selector to rule them all!

    +``` + +```css live-sample___important +#winning { + background-color: red; + border: 1px solid black; +} + +.better { + background-color: gray; + border: none !important; +} + +p { + background-color: blue; + color: white; + padding: 5px; +} +``` + +{{EmbedLiveSample("important")}} 이 과정을 통해 어떤 일이 일어나고 있는지 살펴보겠습니다 — 이해하기 어려운 경우 어떤 일이 발생하는지 확인하려면 일부 속성을 제거해 보십시오. @@ -247,7 +493,46 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 실수한 경우 언제든지 _재설정_ 버튼을 사용하여 재설정 할 수 있습니다. 정말로 막힌다면, [여기에서 해결책을 살펴 보십시오](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade). -{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}} +```html live-sample___cascade-layers +

    A paragraph with a border and background

    +``` + +```css live-sample___cascade-layers +@layer firstLayer, secondLayer; + +p { + /* 0-0-1 */ + background-color: red; + color: grey !important; + border: 5px inset purple; +} +p#addSpecificity { + /* 1-0-1 */ + border-style: solid !important; +} + +@layer firstLayer { + #addSpecificity { + /* 1-0-0 */ + background-color: blue; + color: white !important; + border-width: 5px; + border-style: dashed !important; + } +} + +@layer secondLayer { + p#addSpecificity { + /* 1-0-1 */ + background-color: green; + color: orange !important; + border-width: 10px; + border-style: dotted !important; + } +} +``` + +{{EmbedLiveSample("cascade-layers")}} ## 다음은 뭐죠 @@ -257,4 +542,4 @@ CSS 속기 속성을 `all` 로 사용하면 이러한 상속 값 중 하나를 ( 스타일이 예상대로 적용되지 않는 이상한 문제가 발생하면 여기를 다시 참조 하십시오. 우선 순위 문제일 수 있습니다. -{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Cascade_layers", "Learn/CSS/Building_blocks")}} diff --git a/files/ko/web/accessibility/aria/attributes/index.md b/files/ko/web/accessibility/aria/attributes/index.md index 60e6e8162aaedc..f1fd9574aa4fbd 100644 --- a/files/ko/web/accessibility/aria/attributes/index.md +++ b/files/ko/web/accessibility/aria/attributes/index.md @@ -104,7 +104,7 @@ ARIA 상태와 속성에는 4가지 유형이 있습니다: - [`aria-relevant`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) - [`aria-roledescription`](/ko/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) -"특뱔한 상황에서만 금지된다"는 의미에서 위의 모든 속성들은 전역 속성입니다. 단, `aria-label` 및 `aria-labelledby` 속성은 [`presentation`](/ko/docs/Web/Accessibility/ARIA/Roles/presentation_role) 역할 또는 동일한 의미의 [`none`](/ko/docs/Web/Accessibility/ARIA/Roles/none_role) 역할을 갖는 요소들에는 허용되지 않습니다. +"특별한 상황에서만 금지된다"는 의미에서 위의 모든 속성들은 전역 속성입니다. 단, `aria-label` 및 `aria-labelledby` 속성은 [`presentation`](/ko/docs/Web/Accessibility/ARIA/Roles/presentation_role) 역할 또는 동일한 의미의 [`none`](/ko/docs/Web/Accessibility/ARIA/Roles/none_role) 역할을 갖는 요소들에는 허용되지 않습니다. ## MDN에 정의된 상태와 속성들 diff --git a/files/ko/web/api/file_system_api/index.md b/files/ko/web/api/file_system_api/index.md new file mode 100644 index 00000000000000..e1351793528ed6 --- /dev/null +++ b/files/ko/web/api/file_system_api/index.md @@ -0,0 +1,239 @@ +--- +title: File System API +slug: Web/API/File_System_API +l10n: + sourceCommit: 0c3f18aca2c8a93d3982183f64bf7762c2c310b0 +--- + +{{securecontext_header}}{{DefaultAPISidebar("File System API")}}{{AvailableInWorkers}} + +**File System API**는 파일을 읽고, 쓰고, 관리하는 기능을 제공합니다. [**File System Access API**](https://wicg.github.io/file-system-access/) 명세에서 추가하는 기능을 통해 기기의 파일 시스템에 직접 접근할 수 있습니다. + +## 개념과 사용법 + +File System API를 사용하여 사용자의 로컬 기기 또는 사용자가 접근 가능한 네트워크 파일 시스템의 파일과 상호작용할 수 있습니다. 이 API의 핵심 기능은 파일 읽기, 쓰기 또는 저장, 디렉터리 구조에 대한 접근입니다. + +파일 및 디렉터리와의 상호작용 대부분은 핸들을 통해 진행합니다. 부모 {{domxref('FileSystemHandle')}} 클래스를 기반으로, 각각 파일과 디렉터리 핸들을 정의하는 자식 클래스인 {{domxref('FileSystemFileHandle')}}과 {{domxref('FileSystemDirectoryHandle')}} 클래스가 존재합니다. + +핸들은 사용자 시스템의 어느 파일이나 디렉터리를 나타냅니다. 핸들에 접근하려면 우선 {{domxref('window.showOpenFilePicker()')}}나 {{domxref('window.showDirectoryPicker()')}} 등의 메서드를 호출해 사용자에게 파일 또는 디렉터리 선택창을 보여줘야 합니다. 사용자가 선택창을 통해 파일 또는 디렉터리를 성공적으로 선택하면 핸들이 반환됩니다. + +다음 방법으로도 핸들을 얻을 수 있습니다. + +- [HTML Drag and Drop API](/ko/docs/Web/API/HTML_Drag_and_Drop_API)의 {{domxref('DataTransferItem.getAsFileSystemHandle()')}} 메서드 +- [File Handling API](https://developer.chrome.com/docs/capabilities/web-apis/file-handling) + +각각의 핸들 종류는 자신만의 기능을 가지고 있으며, 서로 약간의 차이가 존재합니다([인터페이스](#인터페이스)에서 자세한 내용을 확인하세요). 이렇게 핸들을 얻은 후에는 파일 데이터에 접근하거나, 선택한 디렉터리의 내용물을 포함한 정보에 접근할 수 있습니다. File System API는 웹이 그동안 부족했던 파일 관련 기능을 제공합니다. 그러나 이 API의 설계에서 제일 중요한 부분은 보안이었고, 파일과 디렉터리로 데이터로의 접근은 사용자가 명시적으로 허용하지 않는 한 불가능합니다([출처 전용 파일 시스템](#출처_전용_파일_시스템)은 일반 파일 시스템과 달리 사용자가 볼 수 없으므로 예외). + +> [!NOTE] 이 API의 구성 기능을 사용할 때 발생할 수 있는 예외들은 명세에 정의된 것과 동일하게 각 기능의 문서에 나열돼있습니다. 그러나 API와 운영체제 사이의 상호작용 중 발생할 수 있는 예외때문에 실제로는 상황이 좀 더 복잡합니다. [오류 매핑을 명세에 추가하자는 제안](https://github.com/whatwg/fs/issues/57)이 올라온 상태며, 이 제안에서도 오류에 대한 유용한 추가 정보를 볼 수 있습니다. + +> [!NOTE] {{domxref("FileSystemHandle")}} 기반 객체는 {{domxref("IndexedDB API", "IndexedDB", "", "nocode")}} 데이터베이스 인스턴스로 직렬화할 수 있고, {{domxref("window.postMessage", "postMessage()")}}로 전송할 수도 있습니다. + +### 출처 전용 파일 시스템 + +출처 전용 파일 시스템(Origin Private File System, OPFS)은 File System API가 제공하는 저장소 엔드포인트로, 일반 파일 시스템과 달리 사용자는 볼 수 없으며 페이지의 출처에서만 접근할 수 있습니다. OPFS는 콘텐츠의 직접 쓰기 접근을 허용하는, 고도로 성능 최적화된 특별한 유형의 파일을 제공합니다. + +[출처 전용 파일 시스템](/ko/docs/Web/API/File_System_API/Origin_private_file_system) 문서에서 사용법을 알아보세요. + +### 파일 저장하기 + +- 비동기 핸들에서는 {{domxref('FileSystemWritableFileStream')}} 인터페이스를 사용하세요. 저장할 데이터를 {{domxref('Blob')}}, {{jsxref("String")}} 객체, 문자열 리터럴, 또는 {{jsxref('ArrayBuffer')}}로 만든 후, 스트림을 열어 데이터를 파일에 저장할 수 있습니다. 대상 파일은 새로운 파일일 수도 있고 기존 파일일 수도 있습니다. +- 동기 핸들인 {{domxref('FileSystemSyncAccessHandle')}}의 경우 {{domxref('FileSystemSyncAccessHandle.write', 'write()')}} 메서드를 사용해 변경점들을 파일에 쓸 수 있습니다. 선택적으로, 특정 시점에 변경점들을 디스크에 작성해야 한다면 {{domxref('FileSystemSyncAccessHandle.flush', 'flush()')}}를 호출할 수 있습니다. (호출하지 않으면 운영체제가 적당한 시점에 처리하며 대부분의 경우 이것으로도 충분합니다) + +## 인터페이스 + +- {{domxref("FileSystemHandle")}} + - : 파일 또는 디렉터리 항목을 나타내는 객체입니다. 다수의 핸들이 같은 항목을 가리킬 수 있습니다. 대부분의 경우 `FileSystemHandle`을 직접 다루지 않고 자식 인터페이스인 {{domxref('FileSystemFileHandle')}}과 {{domxref('FileSystemDirectoryHandle')}}을 사용합니다. +- {{domxref("FileSystemFileHandle")}} + - : 파일 시스템 항목에 대한 핸들을 제공합니다. +- {{domxref("FileSystemDirectoryHandle")}} + - : 파일 시스템 디렉터리에 대한 핸들을 제공합니다. +- {{domxref("FileSystemSyncAccessHandle")}} + - : 파일 시스템 항목에 대한 동기적 핸들을 제공합니다. 단일 파일의 데이터를 디스크에 직접 쓸 수 있는 핸들입니다. 파일 읽기와 쓰기의 동기적 작동 방식을 활용하면 비동기적 작업이 높은 오버헤드를 유발하는 [WebAssembly](/ko/docs/WebAssembly) 등의 컨텍스트에서 고성능을 유지할 수 있습니다. 이 클래스는 전용 [웹 워커](/ko/docs/Web/API/Web_Workers_API)에서만, 그리고 [출처 전용 파일 시스템](#출처_전용_파일_시스템) 내의 파일에 대해서만 사용할 수 있습니다. +- {{domxref("FileSystemWritableFileStream")}} + - : {{domxref('WritableStream')}} 객체에 편의 메서드를 추가한 인터페이스로, 디스크의 단일 파일에서 동작합니다. + +### 다른 인터페이스 확장 + +- {{domxref("Window.showDirectoryPicker()")}} + - : 사용자가 디렉터리를 선택할 수 있는 디렉터리 선택창을 엽니다. +- {{domxref("Window.showOpenFilePicker()")}} + - : 사용자가 파일 한 개 또는 여러 개를 선택할 수 있는 파일 선택창을 엽니다. +- {{domxref("Window.showSaveFilePicker()")}} + - : 사용자가 파일을 저장할 수 있는 파일 선택창을 엽니다. +- {{domxref("DataTransferItem.getAsFileSystemHandle()")}} + - : 드래그된 아이템이 파일이라면 {{domxref('FileSystemFileHandle')}}을, 디렉터리라면 {{domxref('FileSystemDirectoryHandle')}}을 반환합니다. +- {{domxref("StorageManager.getDirectory()")}} + - : [출처 전용 파일 시스템](/ko/docs/Web/API/File_System_API/Origin_private_file_system)의 디렉터리와 콘텐츠에 접근할 때 사용하는 {{domxref("FileSystemDirectoryHandle")}} 객체의 참조를 가져올 때 사용합니다. {{domxref("FileSystemDirectoryHandle")}} 객체로 이행하는 {{jsxref('Promise')}}를 반환합니다. + +## 예제 + +### 파일 접근하기 + +다음 코드는 사용자가 파일을 선택할 수 있는 파일 선택창을 엽니다. + +```js +async function getFile() { + // 파일 선택창을 열고 구조 분해로 첫 번째 핸들을 가져옴 + const [fileHandle] = await window.showOpenFilePicker(); + const file = await fileHandle.getFile(); + return file; +} +``` + +다음 비동기 함수는 파일 선택창을 열고, 사용자가 파일을 선택하면 `getFile()` 메서드를 사용해 그 파일의 내용을 가져옵니다. + +```js +const pickerOpts = { + types: [ + { + description: "Images", + accept: { + "image/*": [".png", ".gif", ".jpeg", ".jpg"], + }, + }, + ], + excludeAcceptAllOption: true, + multiple: false, +}; + +async function getTheFile() { + // 파일 선택창을 열고 구조 분해로 첫 번째 핸들을 가져옴 + const [fileHandle] = await window.showOpenFilePicker(pickerOpts); + + // 파일 내용 가져오기 + const fileData = await fileHandle.getFile(); +} +``` + +### 디렉터리 접근하기 + +다음 예제에서는 주어진 이름을 가진 디렉터리의 핸들을 가져옵니다. 주어진 이름의 디렉터리가 존재하지 않으면 생성됩니다. + +```js +const dirName = "directoryToGetName"; + +// 'currentDirHandle'이라는 이름의 디렉터리 핸들이 이미 존재한다고 가정 +const subDir = currentDirHandle.getDirectoryHandle(dirName, { create: true }); +``` + +다음 비동기 함수는 주어진 디렉터리 핸들을 기준으로, `resolve()`를 사용해 사용자가 선택한 파일의 상대 경로를 찾습니다. + +```js +async function returnPathDirectories(directoryHandle) { + // 파일 선택창을 열어 파일 핸들 가져오기 + const [handle] = await self.showOpenFilePicker(); + if (!handle) { + // 사용자가 취소했거나 다른 이유로 파일 열기 실패 + return; + } + + // 위의 파일 핸들이 주어진 디렉터리 핸들 내에 위치하는지 확인 + const relativePaths = await directoryHandle.resolve(handle); + + if (relativePaths === null) { + // 디렉터리 핸들 밖에 있음 + } else { + // relativePaths는 상대 경로를 구성하는 경로 이름의 배열임 + + for (const name of relativePaths) { + // 각 항목 기록 + console.log(name); + } + } +} +``` + +### 파일 쓰기 + +다음 비동기 함수는 저장 파일 선택창을 엽니다. 저장 파일 선택창은 파일이 선택된 후 {{domxref('FileSystemFileHandle')}}을 반환합니다. 그 후 {{domxref('FileSystemFileHandle.createWritable()')}} 메서드로 쓰기 스트림을 생성할 수 있습니다. + +다음으로, 스트림에 사용자의 {{domxref('Blob')}}을 쓰고, 스트림을 닫습니다. + +```js +async function saveFile() { + // 새 핸들 생성 + const newHandle = await window.showSaveFilePicker(); + + // Blob을 쓸 FileSystemWritableFileStream 생성 + const writableStream = await newHandle.createWritable(); + + // 파일에 쓰기 + await writableStream.write(imgBlob); + + // 파일을 닫아서 콘텐츠 쓰기가 디스크에 반영되도록 하기 + await writableStream.close(); +} +``` + +다음 코드는 `write()` 메서드에 전달할 수 있는 다양한 옵션을 보입니다. + +```js +// 옵션 없이 데이터만 +writableStream.write(data); + +// 스트림에 쓸 때 사전에 결정한 위치부터 시작 +writableStream.write({ type: "write", position, data }); + +// 현재 파일 커서를 지정된 위치로 변경 +writableStream.write({ type: "seek", position }); + +// 파일이 size 바이트 크기가 되도록 변경 +writableStream.write({ type: "truncate", size }); +``` + +### 동기적으로 OPFS 파일 읽고 쓰기 + +이 예제는 [출처 전용 파일 시스템](#출처_전용_파일_시스템)에서 파일을 동기적으로 읽고 쓰는 방법을 보입니다. + +다음은 웹 워커 내의 비동기 이벤트 처리기 함수입니다. 메인 스레드로부터 메시지를 받으면 + +- 동기적 파일 접근 핸들을 생성합니다. +- 파일의 크기를 가져와서, 내용을 담을 {{jsxref("ArrayBuffer")}}를 생성합니다. +- 파일 내용을 읽어 버퍼에 넣습니다. +- 메시지를 인코딩 후 파일 끝에 붙입니다. +- 디스크에 변경점 반영 후 접근 핸들을 닫습니다. + +```js +onmessage = async (e) => { + // 메인 스크립트에서 받은 메시지 회수 + const message = e.data; + + // OPFS 파일 작성을 위한 핸들 가져오기 + const root = await navigator.storage.getDirectory(); + const draftHandle = await root.getFileHandle("draft.txt", { create: true }); + // 동기적 접근 핸들 가져오기 + const accessHandle = await draftHandle.createSyncAccessHandle(); + + // 파일 크기 가져오기 + const fileSize = accessHandle.getSize(); + // 파일 내용을 버퍼에 넣기 + const buffer = new DataView(new ArrayBuffer(fileSize)); + const readBuffer = accessHandle.read(buffer, { at: 0 }); + + // 메시지를 파일 끝에 붙이기 + const encoder = new TextEncoder(); + const encodedMessage = encoder.encode(message); + const writeBuffer = accessHandle.write(encodedMessage, { at: readBuffer }); + + // 디스크에 반영 + accessHandle.flush(); + + // 작업 종료 후엔 항상 FileSystemSyncAccessHandle 닫아주기 + accessHandle.close(); +}; +``` + +> [!NOTE] 초기 명세에서는 {{domxref("FileSystemSyncAccessHandle.close()", "close()")}}, {{domxref("FileSystemSyncAccessHandle.flush()", "flush()")}}, {{domxref("FileSystemSyncAccessHandle.getSize()", "getSize()")}}, {{domxref("FileSystemSyncAccessHandle.truncate()", "truncate()")}}가 비동기 메서드로 정의돼 불편했습니다. [지금은 수정됐지만](https://github.com/whatwg/fs/issues/7), 일부 브라우저에서는 아직 비동기 메서드로서 제공됩니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- [The File System Access API: simplifying access to local files](https://developer.chrome.com/docs/capabilities/web-apis/file-system-access) +- [The origin private file system](https://web.dev/articles/origin-private-file-system) diff --git a/files/ko/web/api/performance/now/index.md b/files/ko/web/api/performance/now/index.md new file mode 100644 index 00000000000000..3647690f9455e1 --- /dev/null +++ b/files/ko/web/api/performance/now/index.md @@ -0,0 +1,105 @@ +--- +title: "Performance: now() method" +short-title: now() +slug: Web/API/Performance/now +l10n: + sourceCommit: 8ab0f2fde2a9c1c7e547884abedf3848f8d7dda5 +--- + +{{APIRef("Performance API")}} {{AvailableInWorkers}} + +**`performance.now()`** 메서드는 밀리초 단위의 고해상도 타임스탬프를 반환합니다. 이는 {{domxref("Performance.timeOrigin")}} (윈도우 맥락에서는 탐색이 시작되었을 때의 시간이나 {{domxref("Worker")}} 혹은 {{domxref("ServiceWorker")}} 맥락에서는 워커가 진행된 시간) 으로부터의 시간 경과를 나타냅니다. + +## 구문 + +```js-nolint +now() +``` + +### 매개변수 + +없습니다. + +### 반환 값 + +밀리초로 측정된 {{domxref("DOMHighResTimeStamp")}} 값을 반환합니다. + +## 설명 + +### `Performance.now` vs. `Date.now` + +[`Date.now`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/now)와는 다르게, `performance.now()` 에 의하여 반환된 타임스탬프 값은 1 밀리초 해상도에 제한되지 않습니다. 대신에 이는 마이크로초 정밀도까지 표현될 수 있는 부동소수점으로 시간을 나타냅니다. + +또한 `Date.now()` 는 유닉스 에포크 (1970-01-01T00:00:00Z) 기준이고, 시스템 시계에 의존하기 때문에 시스템과 시계 왜곡 등과 같은 사용자의 시계 조정에 영향을 받을 수 있습니다. +반면 `performance.now()` 메서드는 현재 시간이 감소하거나 조정되지 않는 [모노토닉 시계](https://w3c.github.io/hr-time/#dfn-monotonic-clock)인 `timeOrigin` 속성을 기준으로 합니다. + +### `performance.now` 명세 변경 + +`performance.now()` 메서드의 의미는 고해상도 시간 단계 1과 단계 2 사이에서 변화했습니다. + +| 변경 사항 | 단계 1 | 단계 2 | +| --------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| 기준 | [`performance.timing.navigationStart`](/ko/docs/Web/API/PerformanceTiming/navigationStart) | {{domxref("Performance.timeOrigin")}} | +| 발생 조건 | 문서 불러오기 혹은 언로드 프롬프트 (만일 있는 경우). | (이전 문서가 없을 경우) 브라우저 맥락 생성, 언로드 프롬프트 (만일 있는 경우), 혹은 탐색 시작 (HTML에서 정의된 것처럼, 불러오기 몇 단계 전). | + +`performance.now()` 메서드는 Navigation Timing 명세의 [`performance.timing.navigationStart`](/ko/docs/Web/API/PerformanceTiming/navigationStart) 속성을 기준으로 합합니다. 이는 `performance.now()` 가 지금은 {{domxref("Performance.timeOrigin")}} 을 기준으로 하도록 변경되었습니다. 이는 웹 페이지 간의 타임스탬프를 비교할 때 시계 변경 위험을 피할 수 있습니다. + +```js +// 단계 1 (시계 변경 위험 있음) +currentTime = performance.timing.navigationStart + performance.now(); + +// 단계 2 (시계 변경 위험 없음) +currentTime = performance.timeOrigin + performance.now(); +``` + +### 수면 중 틱 + +단계 2 명세는 `performance.now()` 의 수면 중 틱을 요구합니다. 수면 중 틱은 오직 윈도우에서 파이어폭스와 크로미움에서만 나타나는 것으로 보입니다. 다른 운영 체제에서 관련된 브라우저 버그는 다음과 같습니다: + +- 크롬/크로미움 ([버그](https://crbug.com/1206450)) +- 파이어폭스 ([버그](https://bugzil.la/1709767)) +- 사파리/웹킷 ([버그](https://webkit.org/b/225610)) + +명세서 상 더 많은 정보는 이슈 [hr-time#115](https://github.com/w3c/hr-time/issues/115#issuecomment-1172985601) 에서 확인할 수 있습니다. + +## 예제 + +### `performance.now()` 사용하기 + +코드에서 특정한 시점으로부터 시간이 얼마나 경과했는지를 파악하기 위해 아래와 같은 코드를 작성할 수 있습니다. + +```js +const t0 = performance.now(); +doSomething(); +const t1 = performance.now(); +console.log(`doSomething 호출에 걸린 시간은 ${t1 - t0} 밀리초.`); +``` + +## 보안 요구사항 + +타이밍 공격과 [핑거프린팅](/ko/docs/Glossary/Fingerprinting) 에 대비하기 위해 `performance.now()` 는 사이트 격리 상태에 따라 정밀도가 조정됩니다. + +- 격리된 맥락에서의 해상도: 5 마이크로초 +- 격리되지 않은 맥락에서의 해상도: 100 마이크로초 + +사이트를 교차 출처로부터 격리하기 위해 {{HTTPHeader("Cross-Origin-Opener-Policy")}} 와 +{{HTTPHeader("Cross-Origin-Embedder-Policy")}} 헤더를 사용합니다. + +```http +Cross-Origin-Opener-Policy: same-origin +Cross-Origin-Embedder-Policy: require-corp +``` + +이 헤더들은 최상위 문서가 교차 출처 문서들과 브라우징 컨텍스트 그룹을 공유하지 않도록 보장합니다. COOP는 문서를 프로세스 단위로 격리하여 잠재적인 공격자가 팝업에서 이를 열더라도 전역 객체에 접근할 수 없게 하여 [XS-Leaks](https://github.com/xsleaks/xsleaks) 같은 교차 출처 공격을 방지합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{domxref("Performance.timeOrigin")}} diff --git a/files/ko/web/api/syncmanager/index.md b/files/ko/web/api/syncmanager/index.md new file mode 100644 index 00000000000000..c80860db842e69 --- /dev/null +++ b/files/ko/web/api/syncmanager/index.md @@ -0,0 +1,29 @@ +--- +title: SyncManager +slug: Web/API/SyncManager +l10n: + sourceCommit: 56df677713fecf43ec0eb8862cb91c141aaa0005 +--- + +{{APIRef("Background Sync")}}{{AvailableInWorkers}} + +{{domxref("Background Synchronization API", "", "", "nocode")}}의 **`SyncManager`** 인터페이스는 동기화 등록들을 등록하고 나열하기 위한 인터페이스를 제공합니다. + +## 인스턴스 속성 + +없음. + +## 인스턴스 메서드 + +- {{domxref("SyncManager.register()")}} + - : 새 동기화 등록을 생성하고 {{jsxref("Promise")}}를 반환합니다. +- {{domxref("SyncManager.getTags()")}} + - : `SyncManager` 등록들에 대한 개발자 정의 식별자 목록을 반환합니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} diff --git a/files/ko/web/css/@layer/index.md b/files/ko/web/css/@layer/index.md new file mode 100644 index 00000000000000..d26d42ea3a13ec --- /dev/null +++ b/files/ko/web/css/@layer/index.md @@ -0,0 +1,210 @@ +--- +title: "@layer" +slug: Web/CSS/@layer +l10n: + sourceCommit: 4cb569f768ec9529724f8fb06539f2903a583a41 +--- + +{{CSSRef}} + +**`@layer`** [CSS](/ko/docs/Web/CSS) [at-rule](/ko/docs/Web/CSS/At-rule)은 캐스케이드 레이어를 선언하는 데 사용되며, 여러 캐스케이드 레이어가 있을 경우 우선순위를 정의하는 데도 사용할 수 있습니다. + +{{EmbedInteractiveExample("pages/tabbed/at-rule-layer.html", "tabbed-standard")}} + +## 구문 + +```css +/* 문 @규칙 */ +@layer layer-name; +@layer layer-name, layer-name, layer-name; + +/* 블록 @규칙 */ +@layer {rules} +@layer layer-name {rules} +``` + +- _layer-name_ : 캐스케이드 레이어의 이름 +- _rules_ : 캐스케이드 레이어에 있는 CSS 규칙 집합 + +## 설명 + +캐스케이드 레이어 내의 규칙들은 함께 캐스케이딩되며, 웹 개발자들에게 캐스케이드에 대한 더 많은 제어권을 제공합니다. 레이어에서 정의되지 않은 스타일은 항상 이름이 있는 레이어와 이름이 없는 레이어에서 선언된 스타일을 무시합니다. + +다음 다이어그램은 1, 2, ..., N 순서로 선언된 레이어의 우선순위를 보여줍니다. + +![캐스케이드 레이어 우선순위를 보여주는 다이어그램](https://mdn.github.io/shared-assets/images/diagrams/css/at-rules/layer-cascade.svg) + +선언 순서가 중요합니다. 먼저 선언된 레이어가 가장 낮은 우선순위를 가지며, 마지막으로 선언된 레이어가 가장 높은 우선순위를 가집니다. 그러나 [`!important`](/ko/docs/Web/CSS/important) 플래그가 사용되면 우선순위가 뒤집힙니다. + +`@layer` @규칙은 세 가지 방법 중 하나로 캐스케이드 레이어를 생성하는 데 사용됩니다 + +첫 번째 방법은 `@layer` 블록 @규칙을 사용하여 특정 이름의 캐스케이드 레이어를 생성하고, 그 레이어 내부에 CSS 규칙을 포함하는 방식입니다. 예를 들면 다음과 같습니다. + +```css +@layer utilities { + .padding-sm { + padding: 0.5rem; + } + + .padding-lg { + padding: 0.8rem; + } +} +``` + +두 번째 방법은 `@layer` 문 @규칙을 사용하여 스타일을 할당하지 않고 쉼표로 구분된 하나 이상의 이름 있는 캐스케이드 레이어를 생성하는 것입니다. 아래와 같이 단일 레이어를 만들 수 있습니다. + +```css +@layer utilities; +``` + +여러 개의 레이어를 한 번에 정의할 수도 있습니다. 아래와 같이 작성할 수 있습니다. + +```css +@layer theme, layout, utilities; +``` + +이 방법이 유용한 이유는 레이어가 선언된 순서가 각 레이어의 우선순위를 나타내기 때문입니다. 선언과 마찬가지로, 여러 레이어에 규칙이 있는 경우 마지막에 나열된 레이어가 우선권을 가집니다. 따라서, 앞서 나온 예시에서 `theme`와 `utilities`에 상충하는 규칙이 있다면, `utilities`에 있는 규칙이 우선권을 가지며 적용됩니다. + +> [!NOTE] +> 레이어 이름을 선언하여 순서를 설정한 후, 이름을 다시 선언하여 해당 레이어에 CSS 규칙을 추가할 수 있습니다. 스타일은 해당 레이어에 추가되며, 레이어의 순서는 변경되지 않습니다. + +세 번째 방법은 레이어 이름을 포함하지 않고 `@layer` 블록 @규칙을 사용하여 이름 없는 레이어를 생성하는 것입니다. 예시는 아래와 같습니다. + +```css +@layer { + p { + margin-block: 1rem; + } +} +``` + +이것은 *익명 캐스케이드 레이어*를 생성합니다. 이 레이어는 이름 있는 레이어와 동일한 방식으로 작동하지만, 이후에 규칙을 추가할 수는 없습니다. 익명 레이어의 우선순위는 이름이 있든 없든 레이어가 선언된 순서에 따르며, 레이어 외부에서 선언된 스타일보다 우선순위가 낮습니다. + +캐스케이드 레이어를 생성하는 또 다른 방법은 {{cssxref("@import")}}를 사용하는 것입니다. 이 경우 규칙은 가져온 스타일 시트에 포함됩니다. `@import` @규칙은 `@charset` 및 `@layer` 규칙을 제외한 모든 유형의 규칙보다 먼저 와야 한다는 점을 기억하세요. + +```css +@import "theme.css" layer(utilities); +``` + +### 중첩 레이어 + +레이어는 중첩될 수 있습니다. 예시는 아래와 같습니다. + +```css +@layer framework { + @layer layout { + } +} +``` + +`framework` 내부의 `layout` 레이어에 규칙을 추가하려면 두 이름을 `.`로 연결합니다. + +```css +@layer framework.layout { + p { + margin-block: 1rem; + } +} +``` + +## 형식 구문 + +{{csssyntax}} + +## 예제 + +### 간단한 예제 + +다음 예제에서는 두 개의 CSS 규칙이 생성됩니다. 하나는 어떤 레이어에도 포함되지 않은 {{htmlelement("p")}} 요소에 대한 규칙이고, 다른 하나는 `type`이라는 레이어 내의 `.box p`에 대한 규칙입니다. + +레이어가 없으면 선택자 `.box p`가 가장 높은 구체성을 가지므로, `Hello, world!`는 녹색으로 표시됩니다. 그러나 `type` 레이어가 레이어 없는 콘텐츠를 포함하기 위해 생성된 익명 레이어보다 먼저 오므로, 텍스트는 보라색으로 표시됩니다. + +또한 순서에 주목하세요. 레이어 없는 스타일을 먼저 선언했음에도 불구하고 여전히 레이어 스타일 *뒤*에 적용됩니다. + +#### HTML + +```html +
    +

    Hello, world!

    +
    +``` + +#### CSS + +```css +p { + color: rebeccapurple; +} + +@layer type { + .box p { + font-weight: bold; + font-size: 1.3em; + color: green; + } +} +``` + +#### 결과 + +{{EmbedLiveSample("Simple_example")}} + +### 기존 레이어에 규칙 할당하기 + +다음 예제에서는 규칙이 적용되지 않은 두 개의 레이어가 생성된 후, 두 레이어에 CSS 규칙이 적용됩니다. `base` 레이어는 `color`, `border`, `font-size`, 및 `padding`을 정의하고, `special` 레이어는 다른 색상을 정의합니다. `special`이 레이어가 정의될 때 마지막에 오기 때문에 제공하는 색상이 사용되며 텍스트는 `rebeccapurple`로 표시됩니다. `base`에서 정의된 다른 모든 규칙은 여전히 적용됩니다. + +#### HTML + +```html +
    + I am displayed in color: rebeccapurple because the + special layer comes after the base layer. My green + border, font-size, and padding come from the base layer. +
    +``` + +#### CSS + +```css +@layer base, special; + +@layer special { + .item { + color: rebeccapurple; + } +} + +@layer base { + .item { + color: green; + border: 5px solid green; + font-size: 1.3em; + padding: 0.5em; + } +} +``` + +#### 결과 + +{{EmbedLiveSample("Assigning_rules_to_existing_layers")}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호완성 + +{{Compat}} + +## 같이 보기 + +- [`@import`](/ko/docs/Web/CSS/@import) +- {{domxref("CSSLayerBlockRule")}} +- {{domxref("CSSLayerStatementRule")}} +- [`!important`](/ko/docs/Web/CSS/important) +- [`revert-layer`](/ko/docs/Web/CSS/revert-layer) +- [Introducing the CSS cascade](/ko/docs/Web/CSS/Cascade) +- [계단식 및 상속](/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) +- [종속 계층](/ko/docs/Learn/CSS/Building_blocks/Cascade_layers) +- [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (2021) diff --git a/files/ko/web/css/abs/index.md b/files/ko/web/css/abs/index.md new file mode 100644 index 00000000000000..a74924fb9585c8 --- /dev/null +++ b/files/ko/web/css/abs/index.md @@ -0,0 +1,82 @@ +--- +title: abs() +slug: Web/CSS/abs +l10n: + sourceCommit: 8e4584c695829f1c404b03fd3ac90cbebdf745d7 +--- + +{{CSSRef}} + +**`abs()`** [CSS](/ko/docs/Web/CSS) [함수](/ko/docs/Web/CSS/CSS_Functions)는 입력된 값의 절댓값을 반환하며, 이 값의 타입은 입력값과 동일합니다. + +## 구문 + +```css +/* property: abs(expression) */ +width: abs(20% - 100px); +``` + +### 매개변수 + +`abs(x)` 함수는 매개변수로 오직 하나의 값을 취합니다. + +- `x` + - : 숫자로 계산되는 식입니다. + +### 반환 값 + +`x` 의 절댓값입니다. + +- 만일 `x` 의 값이 양수이거나 `0⁺` 이라면 `x` 를 반환합니다. +- 그렇지 않으면 `-1 * x` 를 반환합니다. + +### 형식 구문 + +{{CSSSyntax}} + +## 예제 + +### 양수 변수 + +`abs()` 함수는 값이 항상 양수일 것이라고 보장할 수 있습니다. 아래 예제는 CSS 커스텀 속성인 `--font-size` 가 {{CSSxRef("font-size")}} 의 값으로 사용됩니다. 커스텀 속성을 `abs()` 함수로 감싸면 음수는 양수로 반환됩니다. + +```css +h1 { + font-size: abs(var(--font-size)); +} +``` + +### 그라디언트 각도의 방향 제어하기 + +그라디언트의 방향 또한 `abs()` 함수를 이용하여 제어할 수 있습니다. 아래는 -45deg에 해당하는 각을 가진 그라디언트가 빨간색에서 파란색으로 변화하는 예제입니다. `abs()` 를 사용하여 값을 양수로 만들면 그라디언트는 파란색에서 빨간색으로 변화하게 됩니다. + +```css +div { + --deg: -45deg; + background-image: linear-gradient(abs(var(--deg)), blue, red); +} +``` + +### 이전 버전과 호환하기 + +CSS `abs()` 함수를 지원하지 않는 구형 브라우저에서는 CSS {{CSSxRef("max")}} 함수를 이용하여 같은 결과를 도출할 수 있습니다. 다음 예제를 참고해 보세요. + +```css +p { + line-height: max(var(--lh), -1 * var(--lh)); +} +``` + +{{CSSxRef("max")}} 함수를 사용하여 `var(--lh)` 와 `-1 * var(--lh)` 두 값 중 더 큰 양수를 반환합니다. `--lh` 가 양수든 음수이든 상관없이 계산 후 반환된 값은 항상 양수, 즉 절댓값이 됩니다. + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- {{CSSxRef("sign")}} diff --git a/files/ko/web/css/stop-color/index.md b/files/ko/web/css/stop-color/index.md new file mode 100644 index 00000000000000..218c3f5e65b832 --- /dev/null +++ b/files/ko/web/css/stop-color/index.md @@ -0,0 +1,145 @@ +--- +title: stop-color +slug: Web/CSS/stop-color +l10n: + sourceCommit: 8ad43cb18baadffa72a32ba8b4524f09d611f078 +--- + +{{CSSRef}} + +**`stop-color`** [CSS](/ko/docs/Web/CSS) 속성은 그라디언트 내부에서 SVG {{SVGElement("stop")}} 요소에 어떤 색상이 쓰일지를 정의합니다. 이 속성이 존재한다면 요소의 {{SVGAttr("stop-color")}} 속성을 덮어쓰게 됩니다. + +> [!NOTE] > `stop-color` 속성은 {{SVGElement("svg")}} 내 {{SVGElement('stop')}} 요소에만 적용됩니다. 이는 다른 SVG, HTML 혹은 의사 요소에 적용되지 않습니다. + +## 구문 + +```css +/* 값 */ +stop-color: red; +stop-color: hsl(120deg 75% 25% / 60%); +stop-color: currentcolor; + +/* 전역 값 */ +stop-color: inherit; +stop-color: initial; +stop-color: revert; +stop-color: revert-layer; +stop-color: unset; +``` + +### 값 + +- {{cssxref("color_value", "<color>")}} + + - : 채우기 색상입니다. 이는 유효한 모든 CSS {{cssxref("color_value", "<color>")}} 값에 사용될 수 있습니다. + +## 형식 정의 + +{{CSSInfo}} + +## 형식 구문 + +{{csssyntax}} + +## 예제 + +### SVG 그라디언트의 정지 색상 정의하기 + +이 예제는 `stop-color` 의 기본 사용법과 CSS `stop-color` 속성이 `stop-color` 의 특성보다 우선하는 방식에 대해 설명합니다. + +#### HTML + +여기 세 {{SVGElement("rect")}} 사각형 SVG와 세 {{SVGElement("linearGradient")}} 요소들이 있습니다. 각 그라디언트는 검은색에서부터 하얀색, 하얀색에서부터 회식으로 이루어진 네 개의 {{SVGElement("stop")}} 요소를 가집니다. 차이점은 `id` 값 뿐입니다. + +```html + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +#### CSS + +사각형의 외곽선에 {{cssxref("stroke")}}와 {{cssxref("stroke-width")}} 를 포함시킵니다. 각 그라디언트의 처음과 끝 정지 색상을 설정하고, `stop-color` 속성을 이용하여 각각의 `stop-color` 특성을 덮어씁니다. 다양한 CSS {{cssxref("color_value", "<color>")}} 구문을 확인할 수 있습니다. + +```css hidden +svg { + border: 1px solid; + height: calc(100vh - 20px); + margin-bottom: 10px; +} +``` + +```css +rect { + stroke: #333; + stroke-width: 1px; +} + +#myGradient1 { + stop:first-of-type { + stop-color: #66ccff; + } + stop:last-of-type { + stop-color: #f4aab9; + } +} +#myGradient2 { + stop:first-of-type { + stop-color: yellow; + } + stop:last-of-type { + stop-color: purple; + } +} +#myGradient3 { + stop:first-of-type { + stop-color: hsl(0deg 100% 50%); + } + stop:last-of-type { + stop-color: hsl(20deg 100% 50%); + } +} +``` + +#### 결과 + +{{EmbedLiveSample("Defining the color stops of SVG gradients", "300", "200")}} + +## 명세서 + +{{Specifications}} + +## 브라우저 호환성 + +{{Compat}} + +## 같이 보기 + +- SVG {{SVGAttr("stop-color")}} 속성 +- 프레젠테이션 속성: `stop-color`, {{cssxref("clip-rule")}}, {{cssxref("color-interpolation-filters")}}, {{cssxref("fill-opacity")}}, {{cssxref("fill-rule")}}, {{cssxref("fill")}}, {{cssxref("marker-end")}}, {{cssxref("marker-mid")}}, {{cssxref("marker-start")}}, {{cssxref("shape-rendering")}}, {{cssxref("stop-opacity")}}, {{cssxref("stroke")}}, {{cssxref("stroke-dasharray")}}, {{cssxref("stroke-dashoffset")}}, {{cssxref("stroke-linecap")}}, {{cssxref("stroke-linejoin")}}, {{cssxref("stroke-miterlimit")}}, {{cssxref("stroke-opacity")}}, {{cssxref("stroke-width")}}, {{cssxref("text-anchor")}}, and {{cssxref("vector-effect")}} +- {{cssxref("opacity")}} +- {{cssxref("background-color")}} +- {{cssxref("color_value", "<color>")}} +- {{cssxref("basic-shape")}} 데이터 타입 diff --git a/files/ko/web/css/transition-duration/index.md b/files/ko/web/css/transition-duration/index.md new file mode 100644 index 00000000000000..c9f1c3da453d18 --- /dev/null +++ b/files/ko/web/css/transition-duration/index.md @@ -0,0 +1,132 @@ +--- +title: transition-duration +slug: Web/CSS/transition-duration +l10n: + sourceCommit: 1608a85abb1d05dadc63f27c93fc3e4b7e630db0 +--- + +{{CSSRef}} + +**`transition-duration`** [CSS](/ko/docs/Web/CSS) 속성은 트랜지션 애니메이션이 완료되는 데 걸리는 시간을 설정합니다. 기본값은 `0s` 로, 애니메이션이 발생하지 않습니다. + +{{EmbedInteractiveExample("pages/css/transition-duration.html")}} + +여러 개의 지속 시간을 지정할 수 있으며, 각 지속 시간은 마스터 목록 역할을 하는 {{ cssxref("transition-property") }} 속성에 지정된 대로 해당 프로퍼티에 적용됩니다. 지정된 지속 시간 수가 마스터 목록보다 적으면 사용자 에이전트는 지속 시간 목록을 반복합니다. 지정된 기간의 수가 마스터 목록보다 많으면 목록이 적절한 크기로 잘립니다. 두 경우 모두 CSS 선언은 유효하게 유지됩니다. + +## 구문 + +```css +/*

    • 由于其性能高，且无需版税，是图像和动画图像的理想选择。与 PNG 或 JPEG 相比，它的压缩效果更好，支持更高的色深、动画帧、透明度等。请注意，在使用 AVIF 时，应包含浏览器支持更好的回退格式（也就是说，要使用 <picture> 元素）。
    - 以下浏览器支持：Chrome、Firefox（只支持静态图，动态图尚未实现）、Opera、Safari。 + 以下浏览器支持：Chrome、Firefox、Opera、Safari。