들어가기 전에

폼 요소들은 브라우저별로 고유의 디자인형태를 가지고 있습니다. 사용하는 브라우저마다 달라보이는 폼 요소는 전체 웹디자인에 영향을 끼칠수도 있기 때문에 많은 곳에서 폼 요소를 전체적인 디자인을 해치지 않는 방향으로 직접 커스텀을 해서 사용하기도 합니다. 하지만 폼 요소들이 모두 css로 스타일링을 하는 것은 쉬운 일이 아닙니다. 

이번 시간에는 여러 폼 요소들 중에서 특별히 css를 이용하여 스타일링하기 어려운 몇가지의 요소들을 선정하여 커스텀하는 방식에 대해서 알아보겠습니다.

텍스트박스와 placeholder 커스텀

텍스트박스가 커스텀된 사이트들

• 네이버 메인 검색창
• 네이버 로그인 화면
  

주요 기능 

• 텍스트박스의 스타일링
• placeholder (기본문구) 스타일링
  

스타일 정보

• 회색(#ddd) 선을 갖는 박스형태

주요 태그 및 속성 

• HTML
  • input
  • textarea
• CSS
  
  • ::placeholder 
  • 비표준 프리픽스(prefix)

제작하기  

HTML 실습

텍스트박스는 input의 type이 text, password, email 등과 같이 한줄 텍스트입력이나 textarea등과 같이 멀티라인을 입력받는 박스창을 이야기 합니다. 이런 텍스트박스에는 placeholder라는 속성으로 미리 볼수 있는 문구등을 넣을 수 있습니다.

우선은 아래처럼 각각의 예제 요소들을 placeholder 속성까지 넣어서 코드를 작성해보겠습니다.

<p><input type="text" placeholder="이름을 입력해주세요."></p>

<p><input type="password" placeholder="비밀번호를 입력해주세요."></p>

<p><textarea name="" id="" cols="30" rows="10" placeholder="문구를 입력해주세요."></textarea></p>

동영상 강의에서는 각 input과 textarea 들을 임의의 태그로 감싸주었습니다. 이는 개발자의 선택사항이지만 각 input에 클래스명을 넣어서 css를 넣어 컨트롤 하는 것 보다는 좀 더 유연한 디자인 적용이 가능하기 때문에 폼 요소 자체의 스타일은 지우고 겉에 디자인만 관장하는 태그를 만들어주는 방법을 선택했습니다. input을 기본형태 그대로 쓰는 경우는 없기때문에 대부분 많이 선택해서 사용하는 방법이기도 합니다.

하지만 이번 실습에서는 input 자체에  css를 넣어서 커스텀하는 방식으로 진행해보겠습니다. 위에서도 언급했다시피 이는 상황에 따라 선택적인 사항이기 때문에 두가지 케이스를 모두 확인할 수 있으면 좋겠다는 생각이기 때문입니다. inline-block 요소인 input과 textarea 영역의 개행을 위해 모든 텍스트박스를 <p> 태그로만 감싼 코드를 작성했습니다.

CSS 실습

1. 텍스트박스 꾸미기

input[type="text"],
input[type="password"] {
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ddd;
    font-size: 15px;
    text-indent: 10px;
    color: #000;
}

textarea {
    width: 280px;
    height: 130px;
    padding: 9px;
    border: 1px solid #ddd;
    font-size: 15px;
    resize: none;
    color: #000;
}

회색 색상(#ddd)의 선으로 둘러쌓인 텍스트 박스 3개를 완성했습니다. 이렇듯 텍스트 박스는 특별한 내용이 없이 일반적인 박스모델 태그를 스타일링 하는 것과 큰 차이가 없습니다.

그리고 텍스트박스에 작성되는 문구는 검은 색상(#000)으로 color값을 부여했습니다. 하지만 여기에서 디자인을 확인해본다면 기본문구는 여전히 회색으로 노출되고 있는 것을 알 수 있습니다.

이처럼 placeholder는 input이나 textarea의 안에 포함된 속성으로 브라우저에서 정한 색상으로 기본 노출되고 color변경값을 상속받지 않는 다는 것을 알 수 있습니다. 하지만 이런 placeholder를 css의 가상선택자로 선택하여 스타일링을 하는 방법이 있습니다.

2.  placeholder 색상 변경하기

input[type="text"],
input[type="password"] {
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ddd;
    font-size: 15px;
    text-indent: 10px;
    color: #000;
}

textarea {
    width: 280px;
    height: 130px;
    padding: 9px;
    border: 1px solid #ddd;
    font-size: 15px;
    resize: none;
    color: #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}
::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;
}

위와 같이 placeholder 속성을 주는 선택자를 이용하여 기본문구의 색상을 모두 빨간색으로 바꿔봤습니다.

하지만 모두 가상선택자인데 앞쪽에 -webkit-, -moz-, -ms- 등의 내용이 붙는 것이 보입니다. 이는 브라우저를 만드는 각 제조사에서 그들이 브라우저를 만들때 사용했던 엔진에서 placeholder를 바꾸는 방식을 결정하고 적용했는데 이런 내용이 아직 공통표준화 되지 않았기 때문에 각 제조사별 브라우저에서 인식할 수 있도록 붙이는 프리픽스 입니다.

css를 작성하다 보면 이런 프리픽스를 붙여야 하는 경우가 매우 많은데요. 이런 코드들은 모두 아직 표준화되지 않은 비표준 속성이라고 생각하면 됩니다. 그리고 각 주석에서는 어떤 브라우저에서 버전별로 적용이 되기 위한 대응 코드인지를 나타내줍니다.

3. 선택적 placeholder 스타일링 적용

input[type="text"],
input[type="password"] {
    width: 198px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #ddd;
    font-size: 15px;
    text-indent: 10px;
    color: #000;
}

textarea {
    width: 280px;
    height: 130px;
    padding: 9px;
    border: 1px solid #ddd;
    font-size: 15px;
    resize: none;
    color: #000;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}
::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;
}

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: blue;
}
textarea::-moz-placeholder { /* Firefox 19+ */
    color: blue;
}
textarea:-ms-input-placeholder { /* IE 10+ */
    color: blue;
}
textarea:-moz-placeholder { /* Firefox 18- */
    color: blue;
}

이번에는 선택적으로 textarea의 기본문구는 파란색으로 바꿔봤습니다. placeholder 속성의 앞에 textarea와 같이 선택자를 사용하게 된다면 그 영역의 placeholder에만 스타일링을 할 수 있습니다.

요약정리 

비표준 코드의 선택자 사용

여기까지 따라오셨고 조금 더 고민해본다면 모두 같은 스타일인데 선택자를 연속적으로 사용할 수 없나? 라는 의문점이 생길 수 있습니다. 하지만 비표준 프리픽스가 붙은 코드들을 적용된 스타일이 같다고하여 붙여쓴다면 브라우저에서 제대로 적용이 되지 않는 것을 보실 수 있습니다. 이것은 브라우저의 엔진이 css의 선택자를 읽어들일때 그 엔진에서 이해할 수 없는 선택자나 문자가 들어간다면 그 선택자 자체를 무시하기 때문입니다. 그러므로 비표준 코드를 작성할 때는 꼭 따로 사용해야 한다는 점을 주의하세요.

참고 링크