div 태그의 contentediatable, background-clip 속성 알아보기

background-clip 속성

background-clip 속성은 배경 이미지를 표시하는 영역을 지정합니다.

기본 CSS

    .box {
        font-size: 2em;
        font-weight: 900;
        text-align: center;
        padding: 30px;
        background-image: url("example.PNG");
        background-position: center;
        border: 10px dashed grey;  
    }

• border-box
  • 배경 이미지는 border까지 표시됩니다.
  • 즉, 배경이 content, padding, 그리고 border 영역에 모두 표시됩니다.

  <div class="box" style="background-clip: border-box;">border-box</div>
  

  border-box

  
  
  

• padding-box :
  • 배경 이미지는 padding까지 표시됩니다.
  • border 영역에는 배경이 표시되지 않습니다.

  <div class="box" style="background-clip: padding-box;">padding-box</div>
  

  padding-box

  
  
  

• content-box
  • 배경 이미지는 content까지 표시됩니다.
  • padding과 border 영역에는 배경이 표시되지 않습니다.

  <div class="box" style="background-clip: content-box;">content-box</div>
  

  content-box

  
  
  

• text : 배경이 텍스트에만 적용됩니다.

  <div class="box" style="-webkit-background-clip: text; color: transparent; background-clip: text;">text</div>
  

  text

  
  
  

contentediatable 속성

contenteditable=’boolean’

• true는 요소가 편집 가능함을 나타냅니다.
• false는 요소가 편집 불가능함을 나타냅니다.

기본 CSS

    .input-box {
        background: #eee;
        border-radius: 5px;
        margin: 16px 0;
    }
    .input-box p {
        padding: 15px;
    }

  <div class="input-box"
    contenteditable="true">
    <p id="result">안녕하세요! 반갑습니다!</p>
  </div>

안녕하세요! 반갑습니다!

  const result = document.getElementById('result').innerText;

  console.log(result);

해당 값도 이런식으로 가져올 수 있습니다.

🧐 오늘의 소감은?

div 태그에 이런 속성이 있는지 처음 알았어요ㅠㅠ 정말 공부할게 너무 많네요 일을 하다보니 이제 새해가 얼마 남지 않았어요! 정말 올해도 너무 알차고 뿌듯하게 열실히 해서 기분이 좋습니다!