스타일이 지정된 레이블이 있는 양식
CSS로 양식 레이블의 스타일을 지정하는 방법. 웹 페이지 양식의 다양한 필드와 입력 영역에 레이블을 지정하는 데 사용되는 양식 요소는 레이블 요소입니다. Cascading Style Sheet 규칙을 사용하여 스타일을 지정할 수 있습니다.
1 단계
소개에서 이미지에 나타나는 방식으로 레이블 요소의 스타일을 지정하려면 "for" 속성과 함께 레이블 요소를 사용해야 합니다. 또한 "input" 요소 자체를 추가하기 전에 레이블 요소를 닫아야 합니다. 그림에 표시된 의 전체 양식에 대한 HTML입니다.
오늘의 비디오
2 단계
레이블 요소의 스타일을 지정하기 위해 레이블이 왼쪽에 떠 있는 블록 수준 요소로 표시되도록 했습니다. 그런 다음 레이블에 너비를 할당하여 입력 필드가 레이블에서 모두 균일한 거리에 있도록 했습니다. 색상을 지정하고 텍스트를 굵게 표시했습니다. 생성된 콘텐츠를 사용하여 레이블 뒤에 콜론(:)을 추가했습니다. (콜론은 모든 브라우저에서 나타나지 않을 수 있습니다.)
CSS는 다음과 같습니다.
레이블 { 색상: #B4886B; 글꼴 두께: 굵게; 디스플레이: 블록; 너비: 150px; 왼쪽으로 뜨다; } 레이블: { 내용: ": " } 뒤
3단계
레이블 요소가 테두리가 있는 필드 세트로 둘러싸여 있기 때문에 완전성을 위해 필드 세트의 스타일을 지정하는 데 사용되는 CSS도 보여드리겠습니다.
다음은 해당 CSS입니다.
fieldset { 테두리: 1px 솔리드 #CCA383; 너비: 400px; 배경: #FFE8EF; 패딩: 3px; } 필드셋 범례 { 배경: #CCA383; 패딩: 6px; 글꼴 두께: 굵게; }
4단계
레이블 요소의 스타일을 지정하기 위해 다른 많은 작업을 수행할 수 있습니다. 내 예는 한 가지 방법일 뿐입니다.
양식 HTML
필요한 것
HTML에 대한 실무 지식
CSS에 대한 실무 지식
