[CSS] placeholder-shown vs placeholder

💡 placeholder(자리표시자)는 입력창(input, textarea)에 글을 입력하지 않았을 때, 보이는 글자이다.
placeholder 관련 CSS 가상 선택자, 요소에는 여러가지가 있는데,
이번시간에는 그 중 ::placeholder와 :placeholder-shown에 대해 알아보았다!

1. ::placeholder란?

1) ::placeholder은 무엇인가요?

• ::placeholder는 placeholder 글자의 가상 요소이다.
• 가상 요소란, HTML에는 존재하지 않지만 스타일링을 위해 만든 요소를 말한다.
• ::placeholder를 사용하면, placeholder 글자의 스타일을 변경할 수 있다.

/* 사용 방법 */
input::placeholder {
  ...
}

2) 사용 예시

(1) 글자 스타일 변경 가능

• ::placeholder를 사용하면 placeholder 글자의 크기, 굵기, 색상을 변경할 수 있다.

input {
  width: 250px;
  height: 30px;
}

input::placeholder {
  color: blue;        /* 색상 지정 가능 */
  font-weight: 700;   /* 굵기 지정 가능 */
  font-size: 20px;    /* 크기 지정 가능 */
}

See the Pen placeholder 예시-1 by KumJungMin (@kumjungmin) on CodePen.

(2) 입력창 스타일링은 안돼요, 글자영역 스타일링은 가능!

💡 만약 placeholder 글자가 보일 때 입력창의 배경색 혹은 외곽선을 변경하고 싶다면?
::placeholder로 background-color, border을 지정하면 될까? 안된다 😟

• ::placeholder은 placeholder 글자에 대한 스타일링만 가능하다.
• 그렇기 때문에 ::placeholder로 background-color, border 스타일을 변경하면 입력창이 아닌 글자 박스의 배경과 외곽선 스타일이 변경된다.

input {
  width: 250px;
  height: 30px;
}

input::placeholder {
  color: red;
  font-size: 10px;
  background-color: pink;
  border: 1px solid red;
  border-radius: 10px;
}

See the Pen placeholder 예시-2 by KumJungMin (@kumjungmin) on CodePen.

2. :placeholder-shown이란?

1) :placeholder-shown은 무엇인가요?

• :placeholder-shown은 placeholder 글자가 나타나는지 확인 수 있는 가상클래스이다.

/* 사용 예시 */
input:placeholder-shown {
  ...
}

• :placeholder-shown은 사용하면 placeholder 글자가 나타났을 때 입력창 스타일 변경은 물론,
  주변 요소의 스타일 변경도 가능하다. 예시와 함께 살펴보자!

2) 사용 예시

(1) 글자 스타일링 가능, 글자색상 지정은 불가

• 첫 번째로 :placeholder-shown로 placeholder 글자 스타일을 변경해보았다.
• :placeholder-shown로 글자 크기와 굵기는 변경할 수 있으나, 글자 색상은 변경할 수 없다.

input {
  width: 250px;
  height: 30px;
}

input:placeholder-shown {
  color: blue;   /* 글자색 지정 불가 */
  font-weight: 700;
  font-size: 20px;
}

See the Pen placeholder-shown 예시-1 by KumJungMin (@kumjungmin) on CodePen.

(2) 입력창 스타일링

• 두 번째 예시는 :placeholder-shown로 입력창 스타일을 변경한 모습이다.
• :placeholder-shown로 입력창의 배경색, border, border-radius를 설정할 수 있다.

input:placeholder-shown {
  background-color: pink;      /* 배경색 가능 */
  border: 2px solid darkorange;/* border 가능 */
  border-radius: 5px;          /* border-radius 가능 */
}

See the Pen placeholder-shown 예시-2 by KumJungMin (@kumjungmin) on CodePen.

(3) 주변 요소 스타일링

💡 만약 입력창에 글자가 입력되었을 때 알림문구를 주고 싶다면? :placeholder-shown를 사용해보자!

• 방법은 간단하다. 우선 입력창의 형제요소로 알림문구 요소(class=”alert”)를 추가한다.

<!-- HTML -->
<input class="input" placeholder="안녕~"/>
<span class="alert">글자가 입력됨</span>  <!-- 추가! -->

• 그리고 placeholder 글자가 나타날 때(:placeholder-shown), 알림문구 요소(class=”alert”)을 display:none로 설정하면 된다.

/* CSS */
.input:placeholder-shown ~ .alert {
  display: none;  
}

• 그럼 아래 gif와 같이 글자가 입력되었을 때 알림문구를 줄 수 있다!

• 테스트는 아래 코드에서 할 수 있다 🙂

See the Pen placeholder-shown 예시2 by KumJungMin (@kumjungmin) on CodePen.

3. 공통점과 차이점

💡 앞서 우리는 ::placeholder와 :placeholder-shown에 대해 알아보았다.
그렇다면 이 둘의 공통점은 무엇이고 차이점은 무엇인지 한 번 비교해보자~

1) 공통점

• 입력폼(input, textarea)의 placeholder 관련 스타일링이 가능하다.

2) 차이점

(1) 글자 스타일링 차이

• ::placeholder, :placeholder-shown 둘 다 placeholder 글자 크기, 굵기를 지정할 수 있다.
• 특이한 점은 :placeholder-shown로 글자 크기를 변경하면 글자 크기에 따라 입력창의 높이도 변한다는 것이다.
• 또한 :placeholder-shown으로 글자의 색상을 변경할 수 없다 😟

See the Pen placeholder, placeholder-shown 차이(1) by KumJungMin (@kumjungmin) on CodePen.

(2) 컨트롤 가능 영역의 차이

• ::placeholder은 placeholder 글자에 대한 컨트롤이 가능한데 반해,
• :placeholder-shown은 placeholder 글자가 보일 때 입력창 스타일링과 주변 요소의 스타일링이 가능하다.
• 그래서 ::placeholder와 달리 :placeholder-shown에선 입력창의 배경색, 외곽선 스타일을 변경할 수 있다.

😊 이번 시간에는 ::placeholder와 :placeholder-shown에 대해 알아보았다.
::placeholder, :placeholder-shown은 둘 다 placeholder 관련 스타일링이 가능했지만 차이점이 존재했다.

::placeholder은 placeholder 글자의 스타일만 변경할 수 있기에
입력창의 배경색, 외곽선 변경이 불가했다.
이에 반해 :placeholder-shown은 placeholder 글자가 보일 때
입력창의 배경색, 외곽선을 변경할 수 있었다.

만약 placeholder 글자의 스타일을 변경하고자 한다면 ::placeholder를,
placeholder 글자가 보일 때 입력창의 스타일과 주변 요소의 스타일을 변경하고 싶다면 :placeholder-shown를 사용하면 좋을 듯 하다.