css 폼 요소에 스타일 입히기
네 안녕하세요, 이번 포스팅부터는 폼을 꾸미는 시간을 가져보려 합니다.
웹에서 폼이란, 우리가 로그인, 파일 업로드 등과 같이 웹과 사람 간 상호작용을 담당하는 것이라 보시면 됩니다.
그리고 그러한 요소들 역시 css를 입힘으로써 좀 더 시인성이 뛰어나지게 되고,
가독성도 더 높아질 수 있게 됩니다.
그래서 이렇게 중요한 요소인 폼을 꾸며보도록 할 건데,
그중에서도 폼에 입력하는 요소를 꾸며보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 폼 요소 꾸미기 - input [type="text"] 사용
이 방법은 속성 셀렉터를 사용하는 방법입니다.
속성 셀렉터에 대해서 잘 모르시는 분들은 아래 링크를 참고해 주시면 감사하겠습니다.
2023.03.13 - [html, css, 자바스크립트/css] - css 속성 실렉터에 대하여 알아보기
css 속성 셀렉터에 대하여 알아보기
css 속성 셀렉터에 대하여 알아보기 네 안녕하세요, 이번 포스팅에서는 속성 셀렉터에 대하여 알아보도록 하겠습니다. 속성도 html 파일을 작성할 때 정말 많이 쓰는 요소입니다. 전체적인 뼈대에
funnycoderl.tistory.com
우리가 css를 사용할 때 부분적으로 적용시키도록 하는 셀렉터가 바로 속성 실렉터인데,
이를 이용하면 국소적으로 변화를 줄 수 있습니다.
사용 방법은 이렇습니다.
input[type="text"] {
color : red;
}
이렇게 쓰게 되면 폼에 입력된 글자의 색이 빨간색으로 바뀌게 됩니다.
그럼 직접 html 태그에 적용시켜 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type="text"] {
color : red;
}
</style>
</head>
<body>
<label>
이름 : <input type="text" placeholder="">
</label>
</body>
</html>
이제 결과를 보도록 하겠습니다.
![]() |
![]() |
이렇게 잘 나온 것을 확인할 수 있습니다.
다음 포스팅에서는 폼 요소의 테두리를 만들어보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
css 폼 요소에 마우스 처리 하기 (0) | 2023.05.15 |
---|---|
css 폼 요소 테두리 꾸미기 (0) | 2023.05.08 |
css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 (2) | 2023.05.08 |
css 표에 줄무늬 만들기 (2) | 2023.05.08 |
css 셀에 배경색과 테두리 효과, 글자 색 변경하기 (0) | 2023.05.01 |
댓글