CSS 양식
CSS를 사용하면 HTML 양식의 모양을 크게 개선할 수 있습니다.
입력 필드 스타일 지정
속성을 사용 width하여 입력 필드의 너비를 결정합니다.
예시
input
{
width: 100%;
}
위의 예는 모든 <input> 요소에 적용됩니다. 특정 입력 유형에만 스타일을 지정하려는 경우 속성 선택기를 사용할 수 있습니다.
input[type=text]- 텍스트 필드만 선택합니다.input[type=password]- 비밀번호 필드만 선택합니다.input[type=number]- 숫자 필드만 선택합니다.- 등..
패딩 입력
속성을 사용 padding하여 텍스트 필드 내부에 공간을 추가합니다.
팁: 입력이 여러 개 있는 경우 일부 margin를 추가하여 외부에 더 많은 공간을 추가할 수도 있습니다.
예시
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입력 필드에 포커스가 있을 때 선택기를 사용하여 작업을 수행합니다.
예시
input[type=text]:focus
{
background-color: lightblue;
}
예시
input[type=text]:focus
{
border: 3px solid #555;
}
아이콘/이미지로 입력
입력 내부에 아이콘이 필요한 경우 속성을 사용하고 background-image속성과 함께 위치를 지정합니다 background-position. 또한 아이콘의 공간을 확보하기 위해 큰 왼쪽 패딩을 추가합니다.
예시
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
애니메이션 검색 입력
이 예제에서는 CSS transition속성을 사용하여 검색 입력이 포커스를 받을 때 너비에 애니메이션을 적용합니다.
transition속성 에 대한 자세한 내용은 나중에 CSS 전환 장에서 배우게 됩니다.
예시
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
텍스트 영역 스타일링
팁: 속성을 사용하여 resize텍스트 영역의 크기가 조정되지 않도록 하십시오(오른쪽 하단 모서리에 있는 "grabber" 비활성화).
예시
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;
}
/* Tip: use width: 100% for full-width buttons */
CSS로 버튼의 스타일을 지정하는 방법에 대한 자세한 내용은 CSS 버튼 튜토리얼 을 참조 하십시오.
반응형
효과를 보려면 브라우저 창의 크기를 조정하십시오. 화면 너비가 600px 미만인 경우 두 열이 서로 옆에 있지 않고 서로 위에 쌓이도록 합니다.
고급: 다음 예제에서는 미디어 쿼리 를 사용하여 반응형 양식을 만듭니다. 이에 대한 자세한 내용은 이후 장에서 배우게 됩니다.