CSS Peek User Manual

 # CSS Peek User Manual

한국어 (Korean)

#1. 기본 사용법

*   활성화 / 비활성화: 브라우저 툴바의 아이콘을 클릭하여 기능을 켜고 끌 수 있습니다. 아이콘에 'ON' 배지가 표시되면 활성화된 상태입니다.

*   CSS 정보 확인: 기능이 켜진 상태에서, 페이지의 요소 위로 마우스를 가져가면 해당 요소의 CSS 정보가 담긴 툴팁이 나타납니다.

*   CSS 복사: 스타일을 복사하고 싶은 요소 위에서 마우스를 한 번 클릭하면, 해당 요소의 CSS 정보가 클립보드에 복사됩니다.

#2. CSS 실시간 편집

*   툴팁 고정: 편집하려는 요소 위에 툴팁을 띄운 후, 키보드의 `Shift` 키를 누르면 툴팁이 화면에 고정됩니다.

*   값 수정: 툴팁이 고정된 상태에서, 속성 값을 클릭하여 원하는 내용으로 수정하면 페이지에 실시간으로 반영됩니다.

*   속성 추가: 툴팁 오른쪽 위의 `+` 버튼을 누르고, 새로 생긴 빈칸에 속성 이름과 값을 입력하여 새로운 스타일을 적용할 수 있습니다.

*   속성 삭제 (비활성화): 각 속성 이름 앞의 체크박스를 해제하면 해당 스타일이 비활성화됩니다.

English (영어)

#1. Basic Usage

*   Activation / Deactivation: You can turn the feature on and off by clicking the icon in the browser toolbar. The feature is active when the 'ON' badge is displayed on the icon.

*   Inspect CSS Information: With the feature turned on, hover your mouse over any element on the page to display a tooltip containing its CSS information.

*   Copy CSS: Click once on an element whose style you want to copy, and its CSS information will be copied to the clipboard.

#2. Live CSS Editing

*   Pin Tooltip: After displaying the tooltip over the element you want to edit, press the `Shift` key on your keyboard to pin the tooltip to the screen.

*   Edit Values: With the tooltip pinned, you can click on property values to edit them. The changes are reflected on the page in real-time.

*   Add Property: Click the `+` button at the top right of the tooltip and enter a property name and value in the new blank fields to apply a new style.

*   Delete (Deactivate) Property: Uncheck the checkbox in front of each property name to deactivate that style.

日本語 (Japanese)

#1. 基本的な使い方

*   有効化/無効化: ブラウザのツールバーにあるアイコンをクリックして、機能をオン/オフにできます。アイコンに「ON」バッジが表示されている場合、機能は有効です。

*   CSS情報の確認: 機能が有効な状態で、ページ上の任意の要素にマウスを合わせると、その要素のCSS情報を含むツールチップが表示されます。

*   CSSのコピー: スタイルをコピーしたい要素上で一度クリックすると、その要素のCSS情報がクリップボードにコピーされます。

#2. CSSのライブ編集

*   ツールチップの固定: 編集したい要素の上にツールチップを表示させた後、キーボードの`Shift`キーを押すと、ツールチップが画面に固定されます。

*   値の編集: ツール팁이 고정된 상태에서, 속성 값을 클릭하여 원하는 내용으로 수정하면 페이지에 실시간으로 반영됩니다.

*   プロパティの追加: ツールチップの右上にある「+」ボタンをクリックし、新しく表示された空白のフィールドにプロパティ名と値を入力して、新しいスタイルを適用します。

*   プロパティの削除（無効化）: 各プロパティ名の前にあるチェックボックスをオフにすると、そのスタイルが無効になります。

中文 (Chinese)

#1. 基本用法

*   激活/停用: 您可以通过点击浏览器工具栏中的图标来开启或关闭此功能。当图标上显示“ON”标记时，表示功能已激活。

*   检查CSS信息: 功能开启后，将鼠标悬停在页面上的任何元素上，即可显示包含其CSS信息工具提示。

*   复制CSS: 在您想要复制样式的元素上单击一次，其CSS信息便会复制到剪贴板。

#2. 实时CSS编辑

*   固定工具提示: 在要编辑的元素上显示工具提示后，按键盘上的`Shift`键可将工具提示固定在屏幕上。

*   编辑值: 在工具提示固定的状态下，您可以点击属性值进行编辑。更改会实时反映在页面上。

*   添加属性: 点击工具提示右上角的“+”按钮，在新增的空白字段中输入属性名称和值，以应用新样式。

*   删除（停用）属性: 取消每个属性名称前的复选框，即可停用该样式。

Français (프랑스어)

#1. Utilisation de base

*   Activation / Désactivation: Vous pouvez activer et désactiver la fonctionnalité en cliquant sur l'icône dans la barre d'outils du navigateur. La fonctionnalité est active lorsque le badge 'ON' est affiché sur l'icône.

*   Inspecter les informations CSS: Lorsque la fonctionnalité est activée, survolez n'importe quel élément de la page avec votre souris pour afficher une infobulle contenant ses informations CSS.

*   Copier le CSS: Cliquez une fois sur un élément dont vous souhaitez copier le style, et ses informations CSS seront copiées dans le presse-papiers.

#2. Édition CSS en direct

*   Épingler l'infobulle: Après avoir affiché l'infobulle sur l'élément que vous souhaitez modifier, appuyez sur la touche `Shift` de votre clavier pour épingler l'infobulle à l'écran.

*   Modifier les valeurs: Une fois l'infobulle épinglée, vous pouvez cliquer sur les valeurs des propriétés pour les modifier. Les modifications sont répercutées sur la page en temps réel.

*   Ajouter une propriété: Cliquez sur le bouton `+` en haut à droite de l'infobulle et saisissez un nom de propriété et une valeur dans les nouveaux champs vides pour appliquer un nouveau style.

*   Supprimer (Désactiver) une propriété: Décochez la case à cocher devant chaque nom de propriété pour désactiver ce style.

Español (스페인어)

#1. Uso básico

*   Activación / Desactivación: Puede activar y desactivar la función haciendo clic en el icono de la barra de herramientas del navegador. La función está activa cuando se muestra la insignia 'ON' en el icono.

*   Inspeccionar información CSS: Con la función activada, pase el ratón sobre cualquier elemento de la página para mostrar un tooltip que contiene su información CSS.

*   Copiar CSS: Haga clic una vez en un elemento cuyo estilo desee copiar, y su información CSS se copiará al portapapeles.

#2. Edición de CSS en vivo

*   Fijar el tooltip: Después de mostrar el tooltip sobre el elemento que desea editar, presione la tecla `Shift` en su teclado para fijar el tooltip a la pantalla.

*   Editar valores: Con el tooltip fijado, puede hacer clic en los valores de las propiedades para editarlos. Los cambios se reflejan en la página en tiempo real.

*   Añadir propiedad: Haga clic en el botón `+` en la esquina superior derecha del tooltip e introduzca un nombre de propiedad y un valor en los nuevos campos en blanco para aplicar un nuevo estilo.

*   Eliminar (Desactivar) propiedad: Desmarque la casilla de verificación delante de cada nombre de propiedad para desactivar ese estilo.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6159897859228287"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-6159897859228287"
     data-ad-slot="1567632148"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>