[TIL 2023.06.08] css 가상선택자 / javascript 요소의 속성 값을 정의하는 메서드

💻오늘 배운 내용

css 가상 선택자 / 가상 요소 선택자

1. 가상 클래스 선택자 (pseudo-class)

먼저, 가상 클래스 선택자(pseudo-class)는 HTML 문서에 작성된 요소에 가상의 클래스를 만들어 부착할 수 있다.
가상 클래스 선택자의 종류는 다음과 같다.

1	:active	<a>,<button>과 함께 사용하는 경우가 많다. 사용자가 활성화한 요소를 나타낸다. (마우스로 요소 클릭 시)
2	:only-child	형제가 없는 요소를 선택할 때 사용된다. :first-child:last-child 와 동일하다.
3	:hover	마우스 커서가 올라가 있을 때(마우스 오버)선택된다. :link, :visited, :active를 함께 쓴다면 css작성시 순서에 주의해야 한다.
4	:only-of-type	같은 유형의 요소 형제가 없을 때 적용된다.
5	:checked	요소를 선택했거나 radio, checkbox의 옵션에 체크한 경우 활성화된다.
6	:invalid	input이나 form 태그 등의 유효성을 검사할 때 사용된다.
7	:out-of-range	input박스에 설정한 max값을 초과하는 등 한계치를 벗어났을 때 사용된다.
8	:nth-child()	형제의 순서에 따라 요소를 선택한다. ()안에는 인덱스(1이상)외에도 odd(홀수), even(짝수)번째, An+B 등의 함수식도 적용할 수 있다.
9	focus	input 태그 등의 입력칸이 포커스되었을 때 사용된다. 포커스 받은 요소만 해당되므로 자식이 포커스를 받았을 때 사용하려면 :focus-within을 사용하면 된다.
10	:link	href 속성을 가진 태그 중, 아직 방문하지 않은 요소에 사용하면 된다. :visited, :hover, :active와 함께 사용한다면 css 작성 순서에 주의해야 한다.
11	:visited	사용자가 방문한 적있는 링크에 해당된다. :link, :hover, :active와 함께 사용한다면 css 작성 순서에 주의해야한다.

2. 가상 요소 선택자 (pseudo-element)

1	::after	::after가 선택된 요소의 맨 마지막 자식으로 요소를 하나 생성한다.
2	::before	::before가 선택된 요소의 맨 첫번째 자식으로 요소를 하나 생성한다.
3	::first-letter	선택한 요소의 첫 번째 글자에 스타일이 적용된다.
4	::first-line	선택한 요소의 첫 번째 줄애 스타일이 적용된다.
5	::selection	선택한 요소의 하이라이트 스타일을 적용한다. color, background, text-decoration과 그 관련 속성, text-shadow와 같은 특정 속성에만 적용된다.

 

.setAttritbe( )

: 선택한 요소(element)의 속성(attribute) 값 을 정한다.

element.setAttribute(name, value);

 

.removeAttribute()는 그 반대. 속성 값을 지운다.

 

1. onFocus

onFocus 이벤트는 엘리먼트(또는 자식 엘리먼트)가 포커스 될때 호출된다. 예를들어 텍스트 인풋을 클릭했을 때 호출된다.

<input onFocus={() => console.log('Focused on input')}

input창을 클릭했을 때 개발자도구에 'on focuesd on input' 이 찍히는 것을 확인할 수 있다.

 

2. onBlur

onBlur 이벤트는 엘리먼트(또는 자식 엘리먼트)에서 포커스가 사라졌을 때 호출된다. 예를 들어, 유저가 포커스된 텍스트 인풋의 바깥 영역을 클릭했을 때 호출된다.

<input onBlur={() => console.log('Triggered because this input lost focus')}

input의 바깥 창을 클릭했을 때 개발자도구에 'Triggered because this input lost focus'가 찍히는 것을 확인할 수 있다.

❓발생한 이슈/고민

input 태그의 placeholder를 동적으로 추가, 제거 하기

💡해결과정

input 태그의 placeholder를 동적으로 추가, 제거 하기

사용자 입장에서는 생각해본 적 없었는데 막상 누군가가 내가 만든 페이지를 쓴다고 생각하니

인풋창에 값을 제대로 입력안하면 안될텐데... 이상하게 적어두면 어쩌지..등등 이래저래 고민이 많아졌다.

입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시하는 placeholder에 대해 알아보았다.

 

요것이 placeholder. 어떤 형식의 비밀번호가 필요한지 힌트를 준다. 하지만 듣지 않지.

 

하지만 스타일이 중요한 내게는 저렇게 바로 표시되는 것은...안된다.

인풋창을 클릭하면 placeholder가 나타나게 하고 싶었다.

 

javascript로 동적 기능을 추가해주면 가능했는데,

setAttribute()메서드를 사용하여 placeholder 텍스트를 나타내도록 설정하고,

input 요소가 포커스를 잃었을 때 placeholder 텍스트를 숨기도록 설정해둔다.

function showPlaceholder() {
  const passwordInput = document.getElementById('password');
  passwordInput.setAttribute('placeholder', '영어 또는 숫자를 입력하세요');
}

function hidePlaceholder() {
  const passwordInput = document.getElementById('password');
  passwordInput.removeAttribute('placeholder');
}

그리고 html input태그에서 바로 함수를 호출해줬다.

<input
    type="text"
    id="password"
    placeholder="영어 대소문자 또는 숫자를 입력하세요"
    required
    onfocus="showPlaceholder()"
    onblur="hidePlaceholder()"
  />

 

완성된 보기 좋은 인풋창

See the Pen Untitled by 양현서 (Ellie) (@-Ellie) on CodePen.

 

🧐궁금점과 부족한 내용

코멘트창 css 때문에 검색하다가 알게된건데 @keyframes? 이걸로 애니메이션을 준다고 하더라.

처음보는 내용이라 추후에 따로 공부해두면 좋을 것 같다.

📋레퍼런스

[JavaScript] Element.setAttribute() :요소의 속성 값을 정의하는 메서드

스크롤바 기능은 하지만 보이지는 않게 하기

[JavaScript] Element.setAttribute() :요소의 속성 값을 정의하는 메서드

http://www.tcpschool.com/html-tag-attrs/input-placeholder