CSS - input 포커스 시 placeholder 사라지게 하기

2023/07/26 카테고리 CSS

input에 입력값을 입력하기 전까지 placeholder는 사라지지 않는다.

이는 input 창이 포커싱되어있는지 헷갈리게 할 수 있어 UX를 떨어뜨릴 수 있다.

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  /* WebKit browsers */
  color: transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: transparent;
}

크로스 브라우징을 고려하여 CSS를 추가해주었다.
포커스가 되었을 때, placeholder 색상을 투명하게 설정하도록 해준다.

댓글 공유

<오늘부터 CSS 마스터 1일차> CSS 란?

2023/02/17 카테고리 CSS

공부 목표

<오늘부터 CSS 마스터> 챕터를 시작하게 된 이유는 평소 리액트로 상태관리에 대해서만 생각하다보니 CSS로 화면을 스타일링 하는 것이 쉽게 나오지 않게 되었다.

그래서 이를 개선하고자 매일 CSS 공부를 한개씩 익혀가도록 목표를 세웠습니다!

공부는 W3Cschool) 사이트를 참조하면서 공부를 하거나 Youtube 강의를 보고 배울 수 도 있으며, 간단한 웹 사이트 스타일링을 클론해보는 방향으로 진행할 것입니다.

CSS란?

CSS는 Cascading Style sheet를 의미한다.

말 그대로 폭포처럼 떨어져 내리는 스타일시트이다.

CSS는 HTML 요소가 화면에 어떻게 나타날지를 묘사한다.

CSS를 왜 사용하나요?

CSS는 디자인, 레이아웃, 변화등을 포함한 웹 페이지의 스타일을 다른 기기와 화면 크기에 따라 정의하기 위해 사용한다.

CSS는 큰 문제를 해결한다!

HTML은 웹 페이지를 구성하기 위해 태그를 포함하도록 의도된 적이 없다!

나 색상 속성이 HTML 3.2에 추가되었을 때, 모든 페이지에 글꼴과 색상을 추가하는 것은 매우 비용이 많이 드는 작업이 되었다.

그래서 W3C가 CSS를 만들어 냈고 HTML 페이지에서 스타일 형식을 제거하였다.

CSS 문법

CSS 선택자

CSS 선택자는 스타일링하고 싶은 HTML 요소를 선택한다.

총 5가지의 항목이 있다.

간단한 선택자
- name, id, class 기반으로 요소 선택하기
조합 선택자
- 둘 사이의 특정한 관계를 기반으로 요소 선택하기
Pseudo-class 선택자
- 특정 상태를 기반으로 요소 선택하기
Pseudo-element 선택자
- 요소의 일부분을 스타일링하고 선택하기
Attribute 선택자
- attribute나 attribute 값을 기반으로 요소 선택하기

center class를 포함한 p태그 선택자

p.center {
  text-align: center;
  color: red;
}

❗️ p태그와 .center 사이에 띄어쓰기가 있으면 안된다!

* 전체 선택자

* {
  text-align: center;
  color: blue;
}

Group 선택자

h1 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

/* 같은 스타일이라면 쉼표로 구분하여 한줄로 작성 가능 */
h1,
p {
  text-align: center;
  color: red;
}

CSS 추가하는 방법 3가지

외부 CSS
내부 CSS
inline CSS

다중 CSS 우선순위

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <style>
      h1 {
        color: orange;
      }
    </style>
  </head>
</html>

만약 mystyle.css에서 h1을 blue로 하였더라도 CSS는 가장 나중에 읽은 CSS를 적용하기 때문에 h1의 color는 orange가 될 것이다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: orange;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
  </head>
</html>

만약 mystyle.css가 더 아래에 있어서 나중에 읽힌다면 h1은 mystyle.css에서 정의한 스타일로 적용될 것이다.

Cascading 우선순위

inline style
태그에 있는 외부 CSS와 내부 CSS
브라우저 기본