CSS에서 스택 양식을 만드는 방법

CSS에서 스택 양식을 만드는 방법

CSS는 스타일 시트 언어로 알려진 고유한 언어 클래스에 속합니다. 주로 웹 페이지의 프레젠테이션을 정의하는 데 사용됩니다. HTML을 사용하면 페이지 구조를 지정할 수 있지만 스타일을 지정하는 데 사용되는 것은 CSS입니다. 그렇지 않으면 꽤 매력적이지 않은 웹 사이트로 끝날 것입니다.





CSS에 초점을 맞추는 것은 특히 사용자 경험 향상과 관련하여 웹사이트의 매력을 향상시키는 더 좋은 방법 중 하나입니다. 이런 식으로 트래픽을 늘릴 수도 있습니다. 우선 스택형을 사용할 수 있습니다.



누적 양식이란 무엇입니까?

누적 양식을 사용하면 레이블과 입력을 가로 패턴으로 배치하지 않고 서로의 상단에 배치할 수 있는 특수 양식을 만들 수 있습니다.





방법은 다음과 같습니다.

HTML 코딩

HTML 요소를 사용하고, , 귀하의 정보를 처리합니다. 관련 필드에 대한 레이블을 추가하고 관련 입력 필드를 할당합니다. 이 예에서는 사용자에게 양식의 입력 유형과 함께 전체 이름과 이메일 주소를 제공하도록 요청합니다. 텍스트 , 드롭다운 메뉴는 아이디 선택 산업을 선택하는 데 도움이 됩니다.







What Is a Stacked Form?


Here's how you create a stacked form.



Full Name

Email Address

Department

Information Technology
Customer Support
Sales





그러나 이 코드 조각을 실행하면 필드를 세로로 쌓지 않고 단순한 형식만 생성합니다. 그리고 여기에 CSS를 추가해야 합니다.



Windows 8.1용 Windows 7 테마

CSS 부분 코딩

이제 별도의 스타일 시트를 만들어 HTML에 body 태그 앞에 추가합니다.


그런 다음 HTML의 본문, 입력 유형 및 컨테이너를 선택하고 CSS를 통해 스타일을 지정합니다. 여기에는 font-family, width, padding, margin, display, border 등과 같은 다양한 CSS 속성을 실험하고 원하는 값을 추가하는 것이 포함됩니다. 이렇게 하면 정확한 기본 설정에 맞는 스택 양식이 완성됩니다. 여기 예가 있습니다.




body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}

아래 출력을 확인하십시오.

이제 CSS에서 스택 양식을 만들 수 있습니다.

이 기사를 통해 CSS에서 스택 양식을 만드는 방법을 배웠습니다. 연습을 통해 양식을 수정하고 웹사이트를 보다 사용자 친화적으로 만들 수 있습니다.

컴퓨터에서 인스타그램 dms에 액세스하는 방법

프로그래밍 게임의 이름은 '연습'입니다. 세련된 웹 디자이너와 보다 효율적인 웹 개발자가 되기 위해 전시 프로젝트를 통해 매일 CSS 기술을 연마하십시오.

공유하다 공유하다 트위터 이메일 10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제

CSS에 대한 도움이 필요하십니까? 이러한 기본 CSS 코드 예제를 먼저 시도한 다음 자신의 웹 페이지에 적용하십시오.

다음 읽기 관련 항목
  • 프로그램 작성
  • 웹 개발
  • CSS
저자 소개 우스만 가니(4편 게재)

Usman은 디지털 플랫폼에서 여러 비즈니스의 유기적 성장을 도운 콘텐츠 마케터입니다. 그는 프로그래밍과 글쓰기를 모두 좋아합니다. 즉, 기술적인 글쓰기는 그가 많이 즐기는 것입니다. 일을 하지 않을 때 Usman은 TV 프로그램을 시청하고 크리켓 경기를 관람하고 데이터 분석에 대해 읽는 것을 즐깁니다.

우스만 가니가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.