다중 열 레이아웃(다중 열)
다중 열 레이아웃은 텍스트 콘텐츠를 신문과 같은 다중 열 레이아웃으로 디자인하는 것입니다. 즉, 이전에 js나 JQuery를 통해 달성할 수 있었던 폭포 흐름은 호환성 문제가 있지만 CSS3에서는 CSS를 통해 직접 달성할 수 있습니다. .
호환성
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
다중 열 레이아웃의 속성
CSS3은 다음 표와 같이 다중 열 레이아웃을 구현하기 위한 일련의 속성을 제공합니다.
1.columns는 객체의 열 수와 각 열의 너비를 설정합니다.
객체의 열 수와 각 열의 너비를 설정하거나 검색합니다.
문법:
열:<'열 너비'>||<'열 개수'>;
매개변수 설명:
(1) 첫 번째 매개변수는 각 열의 너비를 나타냅니다.
(2) 두 번째 파라미터는 컬럼 개수를 나타냅니다. 2개 또는 1개를 쓸 수 있습니다.
두 매개변수는 열 수에 우선순위를 부여합니다(낮추는 경우). 너비가 충분하지 않은 경우(열 수 * 너비 설정 > 컨테이너 너비) 자동으로 한 열을 줄이고 단락 너비를 컨테이너 너비에 맞게 자동으로 늘립니다. 중간에 적절한 간격이 자동으로 생성됩니다.
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>다중 열 레이아웃</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3 );}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>에서 C 언어의 창시자인 데니스 리치(Dennis Ritchie)는 처음에 자신의 발명품을 시스템으로 포지셔닝했습니다. C 언어는 그래픽 소프트웨어 자체가 아니라 드라이버 개발, 시스템 커널, 파일 관리, 내부 관리, 네트워크 등을 포함해야 합니다. 따라서 이전 요구 사항을 완료하려면 C 언어의 구문뿐만 아니라 운영 체제 원리, 통신 프로토콜, 컴파일러 원리, 데이터 구조 등과 같은 다른 주제도 배우면 됩니다. </div><div>이때, 영어로 된 마더보드 설명서를 보면 어떤 인터페이스를 읽어야 하는지, 통신 프로토콜은 어떻게 규정되어 있는지, 몇 바이트를 읽어야 하는지... 등등을 알 수 있습니다. 사회에서 기업의 인재에 대한 수요가 그보다 높더라도 드라이버만이 통신할 수 있기 전에 커널을 작성할 수 있습니다. 적지만 아예 일자리를 구하지 못하는 문제가 없습니다. 대신에 직업을 선택하고 비용까지 지불하면 이런 일을 할 수 있을 뿐만 아니라 드라이버 개발, DNS 등 관련 직업도 많기 때문입니다. 해상도, 안티바이러스, 통신보안, 가상화 등 기술과 커널 테일러링이 가능하며, 자체적으로 새로운 운영체제를 개발할 수도 있다. </div><div>현재 환경에서 대부분의 대학에서 C 언어를 가르치는 방향은 C 언어 과정 외에도 일부 대학에서만 데이터 구조, 컴퓨터 아키텍처, 컴파일러 원리, 과정 등을 제공해야 한다는 것입니다. 운영 체제 원리 등 일부 학교에서는 이러한 과정에서 데이터 구조만 유지하거나 더 이상 데이터 구조를 제공하지 않습니다. 따라서 C 언어는 프로그래밍 계몽으로만 위치하며 프로세스 지향적 사고와 C에 익숙해지면 충분합니다. 언어 구문. </div><div>학교에서는 C 언어를 배운 후 C++이나 Java 또는 기타 고급 언어를 배워서 더 실용적인 일을 하고 더 쉽게 취업할 수 있기를 바랍니다. 성공하려면 더 이상 학습할 필요 없이 C 언어만 사용하면 됩니다. 기초 없이 Java나 C++ 또는 기타 고급 언어를 배우면 됩니다. 이것이 바로 전문강좌와 훈련기관의 차이입니다. 지식을 헛되이 배우지 않는다면 그것이 유용한지 아닌지를 좀 더 생각해 보아야 합니다. </div></div><br><div><div>그래서 현재 전반적인 환경으로 볼 때, 주요 대학에서 컴퓨터/소프트웨어를 전공하고 있다면 이러한 실제 자료에 열심히 노력해야 합니다. 국가의 교육 자원을 낭비하지 마십시오. 국가의 IT 소프트웨어 산업의 미래를 책임져야 하기 때문입니다. 소프트웨어 R&D/개발에 참여하려면 최소한 데이터 구조를 잘 배워야 합니다. , 코드 포터를 붙여넣지 마세요. 단지 먹고살고 싶다면 결과를 낼 수 있는 기술을 배우세요. </div><div>마지막으로 학생들이 C 언어를 배우는 공통 목적을 살펴보겠습니다. 전문대학부터 학사, 대학원 입시, C 언어 2급까지 수요 중심의 튜토리얼은 대부분 C 언어를 기반으로 합니다. 이론문제, 연습문제, 시험 등이 있어서 프로젝트 종류도 훨씬 덜 어려운 C 언어 리소스가 있어서 당연히 그래픽적인 것은 거의 볼 수 없습니다. 물론 C 언어의 확고한 지지자로서 Dotcpp는 앞으로 모든 사람에게 충분한 리소스 지원을 제공하기 위해 프로그래밍 리소스를 강화할 것입니다. </div><div>C 언어를 배울 때 콘솔 프로그램을 선택하기 때문에 프로그램이 검은 창에서 실행됩니다. Windows 응용 프로그램을 작성하면 그러한 검은 창이 없으며 C 언어의 구문은 다음과 같습니다. 여전히 사용됩니다. 모두가 이해할 수 있습니다. </div><div>순수한 C 언어로 그래픽 개발을 하는 경우 단계에 따라 TurBoC 컴파일러에서 지원하는 그래픽 인터페이스 기능을 사용하거나 VC6에 easyX 라이브러리를 설치하여 그래픽 개발을 완료하는 것을 고려할 수 있습니다. 주사위 놀이, 테트리스, 핀볼 게임, 스네이크 등과 같은 그래픽 및 대화형 게임의 경우 그림 새로 고침 및 전문적인 개선을 고려하는 MFC 또는 QT 사용을 고려할 수 있습니다. </div></div></body></html>실행 결과:
div.test1의 열을 300px 4로 설정합니다. 즉, 각 열의 너비는 300px이고 총 4개의 열이 있지만 컨테이너는 900px로 1200px보다 작으므로 열 수가 자동으로 조정됩니다. 줄고, 가장 적절한 방식으로 표시되도록 열 너비가 적절하게 늘어납니다. 그러나 div.test2에서는 컨테이너 너비를 설정하지 않으며 열 너비는 300px로 설정되고 열 수는 4열로 설정되어 열 너비를 최적화합니다.
참고: div.test1의 열을 300px 4로 설정합니다. 즉, 각 열의 너비는 300px이고 총 4개의 열이 있지만 컨테이너는 900px로 1200px보다 작으므로 열 수가 자동으로 줄어들며, 가장 적절한 표시 방법을 얻기 위해 열 너비가 적절하게 늘어납니다. 그러나 div.test2에서는 컨테이너 너비를 설정하지 않으며 열 너비는 300px로 설정되고 열 수는 4열로 설정되어 열 너비를 최적화합니다.
2. 열 너비는 열 너비를 설정합니다.
문법:
열 너비:<길이>|자동 기본값;
: 길이 값을 사용하여 열 너비를 정의합니다. 음수 값은 허용되지 않습니다. 자동: 열 수에 따라 너비를 사용자 지정합니다.
열 너비가 설정되더라도 열 수와 컨테이너 너비에 따라 자동으로 너비가 할당됩니다.
추신: 각 열의 간격은 14픽셀입니다.
3. column-count는 열 수를 설정합니다.
객체의 열 수를 설정하거나 검색합니다.
문법:
열 개수：<정수>|auto;
매개변수 설명:: 정수 값을 사용하여 열 수를 정의하고 음수 값은 허용되지 않습니다. auto: 열 너비에 따라 할당 너비를 사용자 정의합니다.
4. column-gap은 열 사이의 간격을 설정합니다.
객체의 열 사이의 간격을 설정하거나 검색합니다.
문법:
열 간격:<길이>|일반;
매개변수 설명: 길이 값을 사용하여 열 사이의 간격(단어 사이의 거리가 아니라 문단 사이의 거리)을 정의합니다. 음수 값은 허용되지 않습니다. 일반: 글꼴 크기와 동일합니다. 일반적인 간격은 글꼴 크기에 따라 다릅니다. 글꼴 크기와 동일합니다.
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>다중 열 레이아웃</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{ border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{배경색:rgb(0,0,0,.3);margin-top: 20px;}디 v.test1{width:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4;column- gap:14px;}</style></head><body><h3>글꼴: 14px, 간격 설정 없음: 기본값은 글꼴과 동일하며 14px;</h3><div><div>많은 친구 C 언어를 공부해본 사람 C 언어를 다시 보면 분명히 이런 질문이 있을 것입니다. C 언어는 왜 검은 창에서 실행됩니까? 삼각형의 면적을 계산하거나 수선화의 수를 인쇄하는 프로그램? 프로그래밍이 아무리 훌륭하더라도 왜 우리는 여전히 그 멋진 소프트웨어를 만들 수 없습니까? 결국 그것은 유치한 것입니다! 왜. </div><div>첫째, C 언어 발명의 포지셔닝은 C 언어 창시자인 데니스 리치(Dennis Ritchie)가 C 언어 발명 초기부터 그래픽 소프트웨어 자체가 아니라 시스템이라는 것을 알고 있습니다. 드라이버 개발, 시스템 커널 제작, 파일 관리, 내부 관리, 네트워크 통신 등 일련의 핵심 작업이 포함됩니다. </div><div>둘째, 중국의 일반적인 교수 위치 현재 환경에서 대부분의 대학의 C 언어 교수 위치는 일부 대학에서만 C 언어 코스 외에 데이터 구조를 제공해야 한다는 것입니다. , 컴퓨터 아키텍처, 컴파일러 원리, 운영 체제 원리 및 기타 과정. </div><div>또한 완안현 규율검사 감독위원회는 현 교육체육국, 현 시장품질 감독국, 현 교육체육국, 현 시장품질 감독국, 현 농업국, 현 위생가족계획위원회, 건천향 정부 및 기타 관련 기관의 책임자 직무를 수행하지 못한 경우에는 별도로 사건을 접수하고 검토하였습니다. 동시에, 카운티 규율 검사 및 감독 위원회는 학생 영양식 입찰 과정에 대한 조사를 실시하고 결과가 나오는 대로 대중에게 발표할 것입니다. </div></div><br><h3>글꼴: 30px, 간격 설정 없음: 기본값은 30px이며 글꼴과 동일합니다.</h3><div><div>C 언어를 공부한 많은 친구들 C를 되돌아보고 있습니다. 언어에 관해서라면 분명히 다음과 같은 질문이 있을 것입니다. C 언어는 왜 검은 창 아래에서 실행됩니까? 삼각형의 면적을 계산하거나 수선화의 수를 인쇄하는 프로그램? 프로그래밍이 아무리 훌륭하더라도 왜 우리는 여전히 그 멋진 소프트웨어를 만들 수 없습니까? 결국 그것은 유치한 것입니다! 왜. </div><div>첫째, C 언어 발명의 포지셔닝은 C 언어 창시자인 데니스 리치(Dennis Ritchie)가 C 언어 발명 초기부터 그래픽 소프트웨어 자체가 아니라 시스템이라는 것을 알고 있습니다. 드라이버 개발, 시스템 커널 제작, 파일 관리, 내부 관리, 네트워크 통신 등 일련의 핵심 작업이 포함됩니다. </div><div>둘째, 중국의 일반적인 교수 위치 현재 환경에서 대부분의 대학의 C 언어 교수 위치는 일부 대학에서만 C 언어 코스 외에 데이터 구조를 제공해야 한다는 것입니다. , 컴퓨터 아키텍처, 컴파일러 원리, 운영 체제 원리 및 기타 과정. </div><div>셋째, C 언어를 사용할 수 있지만 C 언어를 직접 배울 때는 콘솔 프로그램을 선택하기 때문에 프로그램이 검은 창에서 실행되는 경우는 거의 없습니다. Windows 응용 프로그램을 작성해도 그런 검은 창은 없을 것입니다. 이는 여전히 모든 사람이 이해할 수 있는 C 언어의 구문일 것입니다. </div></div><br><h3>글꼴: 30px, 설정 간격: 14px;</h3><div><div>C 언어를 공부한 친구들은 C 언어를 다시 보면 확실히 알 것입니다. 이런 질문이 있습니다. C 언어가 검은 창 아래에서 실행되는 이유는 무엇입니까? 삼각형의 면적을 계산하거나 수선화의 수를 인쇄하는 프로그램? 프로그래밍이 아무리 훌륭하더라도 왜 우리는 여전히 그 멋진 소프트웨어를 만들 수 없습니까? 결국 그것은 유치한 것입니다! 왜. </div><div>첫째, C 언어 발명의 포지셔닝은 C 언어 창시자인 데니스 리치(Dennis Ritchie)가 C 언어 발명 초기부터 그래픽 소프트웨어 자체가 아니라 시스템이라는 것을 알고 있습니다. 드라이버 개발, 시스템 커널 제작, 파일 관리, 내부 관리, 네트워크 통신 등 일련의 핵심 작업이 포함됩니다. </div><div>둘째, 중국의 일반적인 교수 위치 현재 환경에서 대부분의 대학의 C 언어 교수 위치는 일부 대학에서만 C 언어 코스 외에 데이터 구조를 제공해야 한다는 것입니다. , 컴퓨터 아키텍처, 컴파일러 원리, 운영 체제 원리 및 기타 과정. </div><div>셋째, C 언어를 사용할 수 있지만 C 언어를 직접 배울 때는 콘솔 프로그램을 선택하기 때문에 프로그램이 검은 창에서 실행되는 경우는 거의 없습니다. Windows 응용 프로그램을 작성해도 그런 검은 창은 없을 것입니다. 이는 여전히 모든 사람이 이해할 수 있는 C 언어의 구문일 것입니다. </div></div></body></html>실행 결과:
5. 열 규칙은 열 사이의 경계를 설정합니다.
문법:
열 규칙:<열 규칙 너비>||<열 규칙 스타일>||<열 규칙 색상>
매개변수 설명
● column-rule-width 테두리 두께
●열 규칙 스타일 테두리 스타일
●열-규칙-색상 테두리 색상
추신: 열 사이의 간격 < 테두리 너비인 경우 열이 테두리를 덮는 상황이 발생한다는 사실에 특히 주의하세요.
(1) 열 규칙 너비
객체의 열 사이의 테두리 두께를 설정하거나 검색합니다.
문법:
열-규칙-너비:<길이>|얇음|중간|두꺼움;
매개변수 설명
●길이: 길이 값을 사용하여 테두리의 두께를 정의하며 음수 값은 허용되지 않습니다.
●medium: 테두리의 기본 두께를 정의합니다.
●얇음: 기본 두께보다 얇은 테두리를 정의합니다.
●두꺼움: 기본 두께보다 두꺼운 테두리를 정의합니다.
(2) column-rule-style은 테두리 스타일을 설정합니다.
객체의 열 사이의 테두리 스타일을 설정하거나 검색합니다.
문법
열 규칙 스타일: 없음|숨김|점선|점선|실선|이중|홈|능선|삽입|시작;
매개변수 설명
●없음: 윤곽선이 없습니다.
●hidden: 테두리를 숨깁니다.
●dotted: 점선 윤곽선;
●점선: 점선 윤곽;
●solid: 실선 윤곽;
●double: 이중선 윤곽선;
●홈: 3D 홈 프로파일;
●리지: 3D 볼록 홈 프로파일;
●삽입: 3D 오목 가장자리 윤곽;
●아웃셋: 3D 볼록 가장자리 윤곽선.
참고: 두 개의 선이 있는 윤곽선이 있는 경우 너비에는 두 선 사이의 거리가 포함됩니다.
(3) column-rule-color는 테두리 색상을 설정합니다.
객체의 열 사이의 테두리 색상을 설정하거나 검색합니다.
문법:
열 규칙 색상:<색상>;
매개변수 설명: 색상을 지정합니다. 너비와 스타일이 없으면 색상이 실패합니다. 기본 검정색.
6. column-span은 모든 열에 걸쳐 요소를 설정합니다.
개체 요소가 모든 열에 걸쳐 있는지 여부를 설정하거나 검색합니다.
문법:
열 범위: 없음|모두;
매개변수 설명: 없음: 열에 걸쳐 있지 않습니다. all: 모든 열에 걸쳐 있습니다.
다른 열 속성처럼 컨테이너에서는 사용되지 않지만 컨테이너의 하위 요소에서는 사용됩니다.
7. column-fill은 통합할 열의 높이를 설정합니다. (현재 주류 브라우저와 호환되지 않습니다.)
객체의 모든 열 높이가 균일한지 여부를 설정하거나 검색합니다.
문법:
열 채우기:autodefault|balance;
매개변수 설명: 자동: 열 높이 적응형 콘텐츠 균형: 모든 열의 높이는 가장 높은 열로 통일됩니다.
주요 브라우저는 이 속성과 호환되지 않습니다.
8. 열 나누기 세트 개행
●column-break-before는 지정된 객체 앞에서 줄을 끊을지 여부를 설정합니다.
●column-break-after는 지정된 객체 뒤에서 줄바꿈 여부를 설정합니다.
●column-break-inside는 객체 내부의 줄바꿈 여부를 설정합니다.
(1) 열 나누기 전
객체를 설정하거나 검색하기 전에 줄을 끊을지 여부입니다.
문법:
열 나누기 전: 자동|항상|방지;
매개변수 설명: auto: 요소 앞의 줄바꿈 및 새 열 생성을 강제하거나 금지하지 않습니다. 항상: 항상 요소 앞의 줄바꿈 및 새 열 생성을 방지합니다. 회피: 요소 앞의 줄바꿈을 방지하고 새 열을 생성합니다.
(2) 열 중단 후
객체를 설정하거나 검색한 후 줄바꿈 여부.
문법:
열 중단 후: 자동|항상|방지;
매개변수 설명: auto: 요소 뒤의 줄 바꿈 및 새 열 생성을 강제하거나 금지하지 않습니다. 항상: 요소 뒤의 줄 바꿈 및 새 열 생성을 방지합니다.
(3) 열 나누기 내부 속성
객체 내부에서 선이 끊어졌는지 여부를 설정하거나 검색합니다.
문법:
열 나누기 내부:autodefault|피하다