HTML5 및 CSS3 프로그래밍 용 스타일 양식에 플로트 사용 방법 - 인형

비디오: HTML5 - 11 [ FORM ] 회원가입 폼 만들기, input, text, email 2024

많은 페이지 레이아웃 문제로 인해 표가 필요합니다. CSS3 float을 영리하게 사용하면 테이블 오버 헤드없이 여러 열이있는 요소를 도울 수 있습니다. 양식은 종종 왼쪽 열에 레이블을두고 오른쪽 열에 입력 요소를 포함하기 때문에 특정 두통을 유발합니다.

당신은 아마 이런 형식을 테이블에 넣으 려 할 것입니다. 표 태그를 추가하면 HTML이 훨씬 복잡해지며 필요하지 않습니다. CSS를 사용하여 레이아웃을 관리하는 것이 훨씬 좋습니다.

테이블을 필요로하지 않으면 서 매력적인 폼을 만들기 위해 요소를 부유시킬 수 있습니다.

페이지 디자인이 복잡 해짐에 따라 HTML과 CSS를 따로 생각하는 것이 더 합리적입니다. HTML은 페이지의 전반적인 의도를 알려주고 CSS는 개별적으로 수정할 수 있습니다. 외부 CSS를 사용하는 것이이 철학의 자연스러운 연장입니다. floatForm을보고 시작하십시오. HTML에 집중하고 스타일에 대해 걱정하기 전에 HTML 구조에 집중하십시오.

floatForm. html 이름 주소 전화 제출 요청

이 코드를 살펴 보면서 페이지 디자인 방법에 대한 몇 가지 흥미로운 점을 메모하십시오.

CSS가 외부입니다. CSS는 외부 문서에 정의됩니다. 이렇게하면 스타일을 쉽게 변경할 수 있으며 HTML 문서에만 집중할 수 있습니다.
HTML 코드가 최소화되었습니다. 코드는 매우 깨끗합니다. 여기에는. 포함하는 레이블, 요소 및.
테이블이 없습니다. 인위적인 조직 체계로 테이블을 추가 할 필요가 없습니다. 표는 페이지의 선명도에 추가되지 않습니다. 양식 요소 자체는 필요한 모든 서식을 허용 할 수있는 충분한 구조를 제공합니다.
레이블은 디자인의 일부입니다. label 요소를 양식 전체에서 사용할 수 있으므로 원하는대로 스타일을 지정할 수 있습니다.
모든 것이 선택 가능합니다. 레이블에 하나의 CSS 스타일을 적용하고 다른 요소에는 입력 요소를, 버튼에는 세 번째 스타일을 적용하려고합니다. id 또는 클래스 속성을 요구하지 않고 CSS 선택기를 사용할 수 있도록 HTML을 설정할 수 있습니다.
버튼이 있습니다. 목적이 아닌 버튼 요소를 사용할 수 있습니다. 이렇게하면 모든 버튼 요소에 하나의 스타일을 적용하고 요소에 다른 스타일을 적용 할 수 있습니다.