귀하의 웹 사이트의 모습을 개선하는 방법을 배우십시오.
CSS 로 양식 스타일을 지정하는 방법을 배우는 것은 웹 사이트의 모양을 개선하는 좋은 방법입니다. HTML 폼은 대부분의 웹 페이지에서 가장 추악한 것들 중 하나입니다. 그들은 종종 지루하고 실용적이며 스타일을 많이 제공하지 않습니다.
CSS를 사용하면 변경 될 수 있습니다. CSS를보다 고급 양식 태그와 결합하면 멋진 모양을 제공 할 수 있습니다.
색상 변경
텍스트와 마찬가지로 양식 요소의 전경색과 배경색을 변경할 수 있습니다.
거의 모든 양식 요소의 배경색을 변경하는 쉬운 방법은 입력 태그에 background-color 속성을 사용하는 것입니다. 예를 들어,이 코드는 모든 요소에 파란색 배경색 (# 9cf)을 적용합니다.
입력 {
배경색 : # 9cf;
색상 : # 000;
}
특정 양식 요소의 배경색을 변경하려면 텍스트 영역을 추가하고 스타일을 선택하십시오. 예 :
입력, 텍스트 영역, select {
배경색 : # 9cf;
색상 : # 000;
}
배경색을 어둡게 만들려면 텍스트 색상을 변경하십시오. 색상을 대조 하면 양식 요소를보다 쉽게 읽을 수 있습니다. 예를 들어 어두운 빨간색 배경 색상의 텍스트는 텍스트 색상이 흰색 인 경우 훨씬 쉽게 읽을 수 있습니다. 예를 들어이 코드는 빨간색 배경에 흰색 텍스트를 배치합니다.
입력, 텍스트 영역, select {
background-color : # c00;
color : #fff;
}
양식 태그 자체에 배경색을 넣을 수도 있습니다. form 태그는 블록 요소 이므로 색상은 요소의 위치가 아닌 전체 사각형에 채워짐을 기억하십시오.
다음과 같이 블록 요소에 노란색 배경을 추가하여 영역을 눈에 띄게 만들 수 있습니다.
양식 {
배경색 : #ffc;
}
테두리 추가
색상과 마찬가지로 다양한 양식 요소의 테두리를 변경할 수 있습니다. 전체 양식 주위에 단일 테두리를 추가 할 수 있습니다. 패딩을 추가해야합니다. 그렇지 않으면 양식 요소가 경계 바로 옆에 걸릴 수 있습니다.
다음은 5 픽셀의 패딩이있는 1 픽셀 검정색 테두리의 코드 예제입니다.
양식 {
국경 : 1px solid # 000;
패딩 : 5px;
}
양식 자체 이외에도 테두리를 둘 수 있습니다. 항목 항목의 테두리를 변경하여 눈에 띄도록하십시오.
입력 {
국경 : 2px 파선 # c00;
}
입력 상자에 테두리를 넣을 때 입력 상자와 비슷하게 보일 때 조심하십시오. 양식을 작성할 수 있다는 것을 모르는 사람들도 있습니다.
스타일 기능 결합
양식 요소를 생각과 CSS로 조합함으로써 사이트의 디자인과 레이아웃을 보완하는 멋진 모양을 설정할 수 있습니다.