당근천국
오늘
어제
전체
본문에 별다른 표시가 없을시 이 조건을 사용합니다.
2013. 4. 11. 17:00
HTML 작업을 하다 보면 'input'을 자주 쓰게 됩니다.
문제는 이 녀석들이 다 같은 태그이면서 타입에 따라서 완전히 다른 모양을 한다는 점입니다.
그렇기 때문에 각각 스타일을 지정해야 합니다.
하지만 컨트롤이 한두 개도 아니고 언제 작업을 하며 매번 컨트롤 추가할 때마다 스타일을 지정해주는 것도 일이죠.
이때 필요한 것이 타입별로 CSS를 지정하는 것입니다.
1. 샘플 코드 만들기
테스트용 html 코드를 만들어 봅시다.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
}
</style>
</head>
<body>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="Radio1" type="radio" />
<br />
<input id="Button2" type="button" value="button" />
<input id="Text2" type="text" />
<input id="Radio2" type="radio" />
</body>
</html>
2. 타입 지정하기
CSS에서 타입을 지정하기 위해서는
태그 이름[속성이름="속성값"]
입니다.
예제를 보세요.
<style type="text/css">
body
{
}
input[type="text"], input[type="password"]
{
background-color:Blue;
}
</style>
이렇게 지정하면 자동으로 본문에 있는 'input' 태그의 속성이 'text'인 태그에 스타일이 적용됩니다.
3. 응용하기
이 방법으로 다른 속성도 지정할 수 있습니다.
다른 속성들도 해봅시다.
input[value="button"]
{
height:30px;
}
마무리
응용하면 커스텀 속성을 만들어서 사용할 수도 있습니다.
예> input[testId="A1"]
핫 포스팅
