c31. CSS 폼 태그

CSS 폼 태그

CSS 로 HTML 폼 태그에 스타일 입히기

이름 성 국적 대한민국 중국 일본

HTML 폼 태그를 CSS 를 사용하여 멋지게 바꿀 수 있습니다.

<style>
input[type=text], select {
width: 100%;
/*입력 칸 (input field) 의 폭을 지정하기 위해, 폭 속성 (width property) 를 사용하였습니다.*/
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
/*
input 태그 중에서 특정 타입에만 스타일을 적용하려면, 아래와 같이 속성 선택자 (attribute selectors) 를 사용할 수 있습니다.

input[type=text] {}
텍스트를 입력받는 input 태그에 스타일을 지정합니다.

input[type=password] {}
비밀번호 (password) 를 입력받는 input 태그에 스타일을 지정합니다.

input[type=number] {}
숫자를 입력받는 input 태그에 스타일을 지정합니다.
*/

/*
박스-크기 속성 (box-sizing property) 에 대해 속성값을 테두리-박스 (border-box) 로 지정하였습니다.
이렇게 하면 박스의 전체 크기는, 패딩과 테두리를 포함한 폭과, 높이를 갖게 됩니다.
(기본적으로 테두리는 패딩을 포함하고, 마진은 제외하므로, box-sizing: border-box; 속성은 없어도 동일한 스타일로 보일 것입니다).
*/

input[type=submit] {
width: 100%;
background-color: orange;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
/*
텍스트 필드 안쪽에 패딩 과 마진을 주었습니다.
배경-색상 속성 (background-color property) 으로 입력 버튼의 배경 색을 지정하였습니다.
그리고 색상 속성 (color property) 으로 글자 색을 지정합니다.
*/

input[type=submit]:hover {
background-color: OrangeRed;
}
input[type=text]:focus {
background-color: lightblue;
border: 3px solid #555;
}
/*
포커스 인풋 (Focused Inputs) 은 텍스트 입력 상자에 커서를 놓았을 때, 어떤 브라우저는 테두리에 청색 외곽선을 자동으로 보여줍니다.
이 기능을 없애려면 outline: none; 속성을 인풋 (input) 태그에 지정하면 됩니다.
반면 :focus 가상-클래스를 지정하여 커서를 놓았을 때 배경색이나 테두리 속성을 바꾸어 주어 사용자에게 어디를 작업하고 있는지를 좀더 명확히 알 수 있게 할 수 있습니다.
*/
div.formtag {
border-radius: 5px;
background-color: #f2f2f2;
padding: 40px;
}
</style>
<h3>CSS 로 HTML 폼 태그에 스타일 입히기</h3>

<div class="formtag">
<form action="#">
<label for="fname">이름</label>
<input type="text" id="fname" name="이름">

<label for="lname">성</label>
<input type="text" id="lname" name="성">

<label for="country">국적</label>
<select id="country" name="국적">
<option value="대한민국">대한민국</option>
<option value="중국">중국</option>
<option value="일본">일본</option>
</select>

<input type="submit" value="제출하기">
</form>
</div>

---

[광고] Udemy 동영상 강의로 보기