Notice
Recent Posts
Recent Comments
Link
ยซ   2025/07   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
๊ด€๋ฆฌ ๋ฉ”๋‰ด

Outputor

Shadow DOM ๋ณธ๋ฌธ

๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ

Shadow DOM

output7 2022. 1. 6. 17:43

Shadow DOM

  1.  ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ์ผ  ์ƒํƒœ์—์„œ F1 ๋ฅผ ๋ˆ„๋ฅด๋ฉด ํ™˜๊ฒฝ์„ค์ •์ด ๋‚˜์˜ด

  2.  Show user agent shadow DOM์„ ์ฒดํฌํ•จ

  3.  ์ˆจ๊ฒจ์ง„ HTML ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Œ

  4. -webkit- : ํฌ๋กฌ, ์˜คํŽ˜๋ผ, ์‚ฌํŒŒ๋ฆฌ, Edge ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉํ•จ

  5. -moz- : ํŒŒ์ด์–ดํญ์Šค์—์„œ ์‚ฌ์šฉํ•จ

  6. -ms- : ์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ ์‚ฌ์šฉํ•จ
  7. progress ์„ค์ •ํ•  ๋•Œ appearance: none์„ ํ•ด์ค˜์•ผ ํ•จ

 

๋”๋ณด๊ธฐ
๋”๋ณด๊ธฐ

 

์ฝ”๋“œ

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* COMMON */
      div {
        margin-bottom: 50px;
      }
      /* LABEL-INPUT */
      .labelInput label {
        padding: 16px 18px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 59px;
        box-sizing: border-box;
        color: #fff;
        background-color: #2f9e44;
        cursor: pointer;
        border-radius: 5px;
      }
      #input-file {
        display: none;
      }
      /* FILE-SHADOWDOM */
      .fileShadowDom input[type='file'] {
        color: #1864ab;
        font-size: 16px;
      }
      .fileShadowDom input[type='file']::-webkit-file-upload-button {
        border: none;
        background-color: #1864ab;
        padding: 16px 12px;
        color: #fff;
        font-weight: bold;
        border-radius: 5px;
      }
      /* TEXT-SHADOWDOM */
      .textShadowDom input[type='text'] {
        padding: 16px 18px;
        font-size: 16px;
        outline: none;
        border: 1px solid #a61e4d;
        border-radius: 5px;
      }
      .textShadowDom input[type='text']::-webkit-input-placeholder {
        color: #ffa94d;
        font-weight: bold;
      }
      /* PROGRESS-SHADOWDOM */
      .progressShadowDom progress {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 230px;
        height: 30px;
      }
      .progressShadowDom progress::-webkit-progress-bar {
        border-radius: 30px;
        background-color: #333;
      }
      .progressShadowDom progress::-webkit-progress-value {
        background-color: #ffd43b;
        border-top-left-radius: 30px;
        border-bottom-left-radius: 30px;
      }
    </style>
  </head>
  <body>
    <div class="labelInput">
      <label for="input-file">์—…๋กœ๋“œ</label>
      <input type="file" id="input-file" />
    </div>

    <div class="fileShadowDom">
      <input type="file" />
    </div>

    <div class="textShadowDom">
      <input type="text" placeholder="์ž…๋ ฅํ•˜์„ธ์š”" />
    </div>

    <div class="progressShadowDom">
      <progress value="0.7"></progress>
    </div>
  </body>
</html>

'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป > ๐Ÿž ํ”„๋กœ์ ํŠธ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

SASS layout 1  (0) 2022.01.14
layout 3  (0) 2022.01.13
layout 2  (0) 2022.01.05
layout 1  (0) 2022.01.05
Landing ํŽ˜์ด์ง€2  (0) 2022.01.04
'๐Ÿฆ‰ ํ”„๋กœ์ ํŠธ ๐Ÿ”ป/๐Ÿž ํ”„๋กœ์ ํŠธ' Related Articles more