CSS 양식
- 이전 페이지 CSS 속성 선택자
- 다음 페이지 CSS 카운터
CSS를 사용하면 HTML 양식의 외관을 크게 개선할 수 있습니다：
입력 필드의 스타일을 설정합니다
사용 width 속성을 사용하여 입력 필드의 너비를 결정합니다：
예제
input {
width: 100%;
}
위의 예제는 모든 <input> 요소에 적용됩니다. 특정 입력 유형의 스타일을 설정하려면 속성 선택자를 사용할 수 있습니다：
input[type=text]- 텍스트 필드를 선택합니다input[type=password]- 비밀번호 필드를 선택합니다input[type=number]- 수동 필드를 선택합니다- etc...
패딩 입력 필드
사용 padding 속성을 사용하여 텍스트 필드 내에 공간을 추가합니다。
참고:입력이 많다면, 이들을 외에 더 많은 공간을 추가하기 위해 마진을 추가해야 할 수 있습니다：
예제
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
주의하세요, 우리는 box-sizing 속성을 설정합니다： border-box를 통해 이렇게 하면 요소의 총 너비와 높이에 내간격(패딩)과 최종 경계선이 포함됩니다。
우리의 CSS Box Sizing 이 장에서는 box-sizing 속성에 대해 더 알아보세요。
경계선이 있는 입력 필드
다음을 사용하여 border 속성을 사용하여 경계선의 두께와 색상을 변경하고, border-radius 속성을 사용하여 둥글게 만듭니다：
예제
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
하단 경계선만 필요하다면 border-bottom 속성：
예제
input[type=text] {
border: none;
border-bottom: 2px solid red;
}
컬러 입력 필드
다음을 사용하여 background-color 속성을 사용하여 입력에 배경색을 추가하고, color 속성을 사용하여 텍스트 색상을 변경할 수 있습니다：
예제
input[type=text] {
background-color: #3CBC8D;
color: white;
}
포커스를 얻은 입력 필드
기본적으로, 일부 브라우저는 입력 필드에 포커스를 얻을 때(클릭) 입력 필드 주위에 파란 경계선을 추가합니다. 입력에 outline: none; 이 행동을 제거합니다。
사용 :focus 선택자가 입력 필드에 포커스를 얻을 때 스타일을 설정할 수 있습니다：
예제 1
input[type=text]:focus {
background-color: lightblue;
}
텍스트 박스에서 클릭하세요:
예제 2
input[type=text]:focus {
border: 3px solid #555;
}
텍스트 박스에서 클릭하세요:
아이콘/이미지가 들어간 입력 필드
입력 필드에 아이콘을 포함하고 싶다면, 다음을 사용하십시오: background-image 속성을 사용하여 그리고 background-position 속성을 함께 설정합니다. 또한, 아이콘 공간을 남겨 두기 위해 더 큰 왼쪽 내간격(padding-left)을 추가했습니다:
예제
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
애니메이션 효과가 있는 검색 입력 필드
이 예제에서는 CSS를 사용하여 transition 속성을 사용하여 검색 입력 필드에 포커스를 얻을 때의 너비 변화에 애니메이션을 설정합니다. 나중에, 우리의 CSS 전환 이 장에서 배운 것에 대해 더 알아보세요 transition 속성의 지식.
예제
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
텍스트 필드 스타일 설정
참고:사용 resize 속성은 textareas의 크기를 조정하는 것을 방지합니다(오른쪽 하단의 '그리기 도구'를 비활성화):
예제
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
선택 메뉴 스타일 설정
예제
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
입력 버튼 스타일 설정
예제
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* 힌트: 전체 너비를 달성하기 위해 width: 100%를 사용하세요 */
CSS 버튼 스타일을 설정하는 방법에 대해 더 많은 지식을 얻으려면 우리의 CSS 버튼 教程。
반응형 메뉴
TIY 편집기 창의 크기를 조정하여 효과를 확인하십시오. 스크린 너비가 600 픽셀 미만일 때, 두 열이 왼쪽과 오른쪽 대신 상하로 겹치도록 합니다.
고급: 다음 예제에서 사용 미디어 쿼리 반응형 양식을 만들기 위해 오늘 만나세요. 다음 장에서 더 많은 관련 지식을 배울 수 있습니다.
- 이전 페이지 CSS 속성 선택자
- 다음 페이지 CSS 카운터
