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

개발러 L의 뻔fun한 코딩

css 폼 요소에 스타일 입히기