[CSS] dom style | CSS 가상셀렉터 | 마우스 클릭이벤트 | 텍스트 효과

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🎀 가상셀렉터

Focus 아웃라인 제거하기

input:focus, button:focus, textarea:focus, select:focus {  /* 가상셀렉터를 가지는 요소 */
    outline: none;   
}

🎀 마우스 클릭이벤트

pointer-events : none;

• none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
• auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.Option

🎀 텍스트 효과

element {
    user-select : auto; /* 드래그나 더블클릭시의 효과 */

    /*글자 잘린효과 줄 때, 3가지 다 적용하기..*/
    white-space : nowrap;    /* 공백을 아무리 넣어도 1개만 표시되며, *텍스트의 줄바꿈이 이루어지지 않습니다*. */
    overflow: hidden;        /* 해당 요소가 부모영역을 벗어난 경우, 벗어난 컨텐츠는 감추어집니다. */
    text-overflow: ellipsis; /* 텍스트가 영역을 벗어나면 '...' 가 나타납니다. */
}

element:focus-within{
	/* element가 focus되지 않는 것 일 경우 + 자손중 하나가 focus성질을 가질 때, focus와 일치되는 스타일을 적용할수 잇음 하하하 */
}

element::selection{
	/* 드래그했을 때 효과를 적용할 수 있음 */
}

ex) div:focus-within
div 부모가 < textarea 와 p (text count) >를 포함. textarea가 focus되었을 때, div에 focus 스타일을 부여할 수 있다.

🎀 Table 내의 사이간격만들기

table {
    border-collapse: separate;
    border-spacing: 0 18px; /* 가로 세로 */
}

---

Reference

1) user-select option

CSS 텍스트 선택 드래그 설정, user-select 프로퍼티

2) viewport

모르면 손해모르면! CSS vh / vw의 능숙한 반응형 웹사이트제작를 제작하자!