css 폼 요소 테두리 꾸미기

네 안녕하세요, 이번 포스팅에서는 폼 요소의 테두리를 꾸며보도록 하겠습니다.

우리가 글자를 입력하는 입력 폼의 테두리를 보면 단순히 각이 져서 있는 양식만 보이지는 않습니다.

그걸 둥그렇게 굴리기도 하고, 여러기지 형태로 나타냅니다.

그래서 이번 포스팅에서는 입력 폼의 테두리를 꾸며보도록 하겠습니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 폼 요소 테두리 꾸미기 - input [type="text"] 사용

폼 요소를 꾸미기 위해서는 역시 input 태그를 사용하게 됩니다.

일단 무언가 사용자가 입력을 해야 하기 때문에,

거의 반드시 input 태그가 들어간다 보시면 됩니다.

그래서 이렇게 입력 폼을 만들고서 입력 폼 테두리는 이렇게 꾸밀 수 있습니다.

input[type="text"] {
    border : 2px solid green;
    border-radius : 5px;
}

이런 식으로 모서리를 둥그렇게 굴릴 수도 있고,

테두리의 색도 바꿀 수 있습니다.

그럼 이걸 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"] {
            border : 2px solid green;
            border-radius : 5px;
        }
    </style>
</head>
<body>
    <label>
        이름 : <input type="text" placeholder="">
    </label>
</body>
</html>

이제 결과를 확인하도록 하겠습니다.

테두리의 색깔도 잘 바뀌었고,

모서리도 둥글게 잘 굴려져 있는 것을 볼 수 있습니다.

여기까지 폼 요소 테두리를 꾸며보았습니다.

다음 포스팅에서는 폼 요소에 마우스 처리를 하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css 스타일로 애니메이션 주기 (0)	2023.05.22
css 폼 요소에 마우스 처리 하기 (0)	2023.05.15
css 폼 요소에 스타일 입히기 (0)	2023.05.08
css 표에 마우스 커서를 올렸을 때 셀 색깔 변경되게 하기 (2)	2023.05.08
css 표에 줄무늬 만들기 (2)	2023.05.08

개발러 L의 뻔fun한 코딩

css 폼 요소 테두리 꾸미기