GSS 소개 : 그리드 스타일 시트

당신은 최근 HTML 및 CSS의 세계에서 그리드 스타일 시트 (GSS)에 대해 들어 보았을 것입니다. GSS는 CSS 레이아웃을 다시 상상하고 브라우저의 레이아웃 엔진을

CASSOWARY 제한 조건 솔버 를 활용하는 엔진으로 대체합니다. 그 말을 이해하지 못한 분들… 안녕하세요, 환영합니다!

GSS는 더 나은 미래를 약속합니다. GSS는 상대적인 포지셔닝 및 크기를 약속합니다. GSS는 한 줄의 코드로 다른 요소 내부를 중앙에 놓을 것을 약속합니다. GSS가 제공합니다. 문제는 다음과 같습니다. 어떻게? 이 기사에서는 GSS의 간단한 역사와 제공하는 기능에 대한 심도있는 개요를 다룰 것입니다. 또한 제약 조건 기반 레이아웃, Cassowary Constraint 알고리즘에 대한 GSS를 살펴보고 GSS 설치 및 사용 프로세스를 안내합니다. w3c 나 브라우저가 따라 잡을 때까지 기다리지 않는 사람들은 GSS 인 미스터리를 설명하는 동안 거기에 매달려 세심한주의를 기울일 것을 촉구합니다. 그 메모에서, 작은 역사부터 시작합시다. 키 테이크 아웃 GSS를 사용하기 위해서는 zithub를 통해 zip 파일로 Github을 통해 다운로드하거나 다운로드해야하며, 태그에 type = text/gss를 추가하여 GSS 스타일 시트를로드 할 수 있습니다. 간단한 역사

GSS는 Dan Tocchini와 함께 창립자이자 CEO로 그리드를 창출 한 것입니다. 이는 그리드 기반 스타일 시트를 그리드 스타일 시트라고하는 이유에 대한 답변입니다. 웹 개발자와 프론트 엔드 기술 간의 전쟁은 웹에 아이디어를 제시하는 것이 몇 년 동안 진행되었습니다. CSS는 지난 10 년 동안 승리를 거두었습니다. 그러나 시간이 지남에 따라 진화하지 않은 도구로 점점 더 복잡한 사용자 인터페이스를 구축하는 것은 웹 개발자가 정기적으로 수행 할 것으로 예상되는 것입니다. 예를 들어, CSS를 사용하여 요소를 수직으로 중심으로하는 것은 특히 가변적 인 높이 요소가있는 가장 간단한 작업이 아닙니다. Flexbox는 가장 최근의 솔루션 중 하나이지만 작은 변화조차도 HTML 컨텐츠와 CSS 프레젠테이션 내에서 깊이 들어가서 변경해야합니다.

이제 GSS가 경기장을 타야 할 때입니다. GSS는 이러한 문제와 더 많은 문제를 해결합니다. 개발자가 10 년 넘게 겪었던 문제.

기본적으로 GSS는 CSS Preprocessor 및 JavaScript 런타임으로 Cassowary.js를 이용합니다. Cassowary.js는 아직 모르는 사람들은 Apple이 Cocoa Autolayout에서 사용하는 JavaScript 포트입니다.

GSS와 Cassowary는 모두 구속 조건 프로그래밍에 기반을 두므로 CSS와 같은 선언 언어를 강화하는 데 이상적입니다. 제약 프로그래밍은 웹 개발자가“무엇”을 선언하고“어떻게”를 수학 솔버까지 맡기는 것에 관심이있는 패러다임입니다.

제약 프로그래밍은 구현이 아닌 의도에 중점을 둡니다 이제 배경 정보를 설정 했으므로 GSS가 제공하는 기능으로 넘어 갑시다. GSS 개요 CSS의 가장 큰 문제 중 하나는 상대성입니다. CSS 요소는 패딩, 높이, 너비, 플로트, 마진, 경계, 윤곽선 등의 끝없는 속성 목록을 기대할 수 있지만이 정보는 페이지의 다른 요소를 참조하여 요소가 어디에 있는지 알려주지 않습니다 ( 또는 전체 페이지조차도). 끝없는 목록은 또한 다른 화면 크기로 요소가 어디에 표시 될지에 대한 답을 얻지 못합니다.

이것은 우리에게 GSS의 첫 번째 특징을 가져옵니다 : 당신은 레이아웃을 원하는 것을 정의합니다. 셀 수없이 많은 시간의 시행 착오를 소비하는 시대는 지났으며, 레이아웃이 어떻게 구성되어야하는지 전략을 세웠습니다.

우리는 GSS가 Cassowary.js를 활용한다고 이미 논의 했으므로 GSS의 또 다른 훌륭한 기능은 다음과 같습니다. 요소는 한 줄의 코드로 다른 하나를 중심으로 할 수 있습니다. 이것은 많은 해결 방법을 불필요하고 과거의 것들을 만듭니다.

예를 들어 사이트 페이지의 오른쪽에있는 제목과 함께 수직으로 가입 버튼을 추가하려면 다음 코드를 사용합니다.

또 다른 특징 : GSS는 플로트, 테이블 셀, 클리어 픽스 및 수평/수직 중심을 사용하여 쓸모 없게 만듭니다. 플로트 자체가 플로트가 응용 프로그램 레이아웃에 이상적이지 않다고 말하기 때문에 플로트 인 위험한 함정에 대한 작별 인사.

“웹 사이트가 간단한 문서에서 복잡한 대화식 응용 프로그램, 문서 레이아웃을위한 도구로 발전함에 따라 플로트는 반드시 애플리케이션 레이아웃에 적합하지는 않았습니다.”

- W3C 그리드 레이아웃 모듈 (작업 초안)

CSS 기능은 어떻습니까! 중요합니까? GSS의 네 번째 특징은 비슷한 일을합니다. GSS는 제약 계층을 사용하여 제약 조건을 강점으로 우선 순위로 삼습니다. 우리는 여기에서 4 가지 내장 강도 수준에 대해 이야기하고 있습니다 :

! 약한 ! 중간

! strong ! 요구

는 필요합니다! 요구 사항은

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

특수

강도이며 제약 조건이 유지되고 그렇지 않으면 모든 것이 끊어집니다. 신중하고 드물게 사용하는 것이 좋습니다 강도 수준은 목록을 낮추고 더 강한 제약 조건은 실행 중에 우선 순위가 높아집니다. 예를 들어 보겠습니다 :

당신은 지금까지 그것을 만들었습니다. 지금 제약 기반 레이아웃을 살펴 보겠습니다.

제약 조건 기반 레이아웃 의 gss 제약 조건은 기본적으로 유지되거나 보유하지 않을 수도있는 둘 이상의 변수 간의 관계입니다. 요소의 모든 숫자 특성은 제한 될 수 있습니다. 예는 다음과 같습니다.

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

p를 선택기 라고합니다 라인-하이트는 gss가
• 에 대한 값을 계산하는 속성입니다. []는 속성 에 액세스하는 데 사용됩니다 >> = 불평등 제약을 정의하십시오 10 및 20은 픽셀의 숫자 값입니다
위에 주어진 예에서 두 제약 조건은 모두 유효합니다. 다음은 유지되지 않는 제약 조건의 예입니다.
처음에는 요소 요소와 요소 모두 높이가 150px로 제한됩니다. 세 번째 줄에서 두 요소의 합은 225px입니다. 따라서 두 요소의 제약 조건 중 하나가 유지되지 않습니다.
• gss의 선택기 GSS의 선택기는 HTML 요소 그룹의 쿼리이며 궁극적으로 제약 조건에 의해 영향을받는 요소를 결정하는 데 사용됩니다. 셀렉터는 제약 조건을 적용하기 전에 DOM의 요소를 선택하고 관찰해야하기 때문에 중요합니다. 다음 기본 선택기는 GSS에 의해 지원됩니다
gss의 규칙 세트 규칙 세트를 사용하면 단일 선택기에 대한 여러 제약 조건을 정의 할 수 있습니다. 당신은 그들을 중첩하고 그들에게도 CSS 속성을 사용할 수 있습니다.
• 이 중첩 규칙 세트 :
는 다음과 같습니다
• gss의 특성 위의 예에서 이미 속성을 다루었지만 조금 더 자세히 살펴 보겠습니다. GSS에서 속성은 요소에 속하는 변수입니다. CSS에서 알려진 속성을 사용하면 해당 GSS 계산 값이 요소의 인라인 스타일로 할당됩니다. <:> 이와 같은 것 :
는 다음과 같습니다

CASSOWARY 제약 조건 알고리즘 소개

GSS는 Badros, Borning and Stuckey, 1999에 의한 Cassowary Linear Arithmetic 제약 조건 해결 알고리즘의 JavaScript 포트 (cassowary.js)를 사용합니다. 알고리즘은 사용자가 자연 언어로 제공 한 입력 제약 조건에 따라 레이아웃에 대한 최적의 솔루션을 찾습니다.

사용자는 입력 제약 조건이 서로 모순되지 않도록 할 필요가 없습니다. 사실, 이것은 대변 알고리즘의 본질입니다. 제약 조건을 점진적으로 평가하고 최적의 솔루션을 자동으로 발견합니다. 전환 알고리즘의 계산 제한

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

GSS 뒤에있는 제약 조건 솔버를 대변 알고리즘이라고합니다. 이 알고리즘은 선형 (즉, y = mx c 형식) 인 제약 조건 만 계산할 수 있습니다. 기본 연산자 (, -, *, /)는 알고리즘에 의해 지원됩니다. 두 가지 (또는 그 이상) 제한된 변수의 곱셈과 나누기는 선형이 아니므로 오류가 발생합니다.

.

GSS 설치 클라이언트 측 설치의 경우 Bower를 통해 설치하십시오 :

그런 다음이 코드를 Markup의 섹션에 추가하십시오

zithub를 통해 버전 2.0.0을 zip 파일로 다운로드 할 수도 있습니다.GSS를 설치 한 후에는 태그에 type = text/gss를 추가하여 .gss 스타일 시트를로드하십시오.

또는

일단 모든 것을 가동하고 실행되면 몇 가지 코드 예제와 함께 팔로우를 시작할 수 있습니다. 아래에서는 초보자의 튜토리얼을 살펴 보겠습니다 a gss 초보자의 튜토리얼

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

제가 작성할 예제는 CodePen을 통해 표시되지만 표준 HTML 문서와 같은 자습서를 살펴 보겠습니다. 먼저 GSS 엔진 스크립트를 추가하기 위해 HTML에 다음 코드 줄을 추가하겠습니다.

코드 펜 호스팅 버전의 파일을 사용하지만 여기에서는 CDN 호스팅 버전을 찾을 수 있습니다. 다음으로 GSS 참조 스크립트 (위에 추가 한 줄) 아래에 다음 코드를 추가하여 GSS 문서 개체를 전달합니다.

원하는 경우, 엔진 스크립트 이후에 포함 된 별도의 JavaScript 파일에 배치 할 수 있습니다. 예 1 : 수직으로 요소를 중심으로

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

DIV를 생성하고 GSS 레이아웃에서 H2 태그로 일부 텍스트를 동봉하고 html에 추가합니다 :

기본 스타일을 추가 한 후 레이아웃을 만들기 위해 GSS를 추가 할 수 있습니다. 이것은 재미가 시작되는 곳입니다.

내 목표는 크기에도 불구하고 뷰포트 내부의 .foo 요소를 수직으로 중심하고 요소의 크기가 변경 되더라도 동일한 정렬을 유지하는 것입니다. 이 목표를 달성하기 위해 적용 할 제약 조건은 다음과 같습니다.

<:> :: Window Selector를 사용하여 브라우저에서 페이지의 보이는 부분을 중앙에 중앙을 중앙으로 사용하십시오. use :: [INTRINSIC-HEIGHT] 속성은 상대 너비를 결정하는 데 사용될 요소의 높이의 상대 값을 얻기위한 속성.

먼저, 텍스트/gss로 설정된 유형 속성을 사용하여 html에

그리고 그게 전부입니다. 요소는 이제 GSS를 사용하여 수직으로 (동적 높이) 중앙에 있습니다. 아래는 데모입니다 : Codepen에서 sitepoint (@SitePoint)에 의해 GSS로 펜 수직 센터링을 참조하십시오. 전체 화면 데모를 시도하고 브라우저 크기를 수직으로 조정하여 요소가 모든 창 크기에 중앙에있는 상태를 확인하십시오. 예제 2 : 동적으로 변화하는 창 너비를 기반으로 한 요소 회전

p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

이 다음 예제에서는 간단한 색의 정사각형 모양을 만들고 동적으로 회전하도록하겠습니다. 먼저 문서의 섹션에 다음 줄의 코드를 추가하여 GSS를 부팅하겠습니다.

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

파일의 올바른 위치를 가리려면 위의 코드를 편집해야합니다. 여기서 worker.js 파일을 가져오고 gss.js 파일을 여기에서 얻을 수 있습니다.

참고 : 일부 버그로 인해 위의 파일 경로는이 작업을 수행하기 위해 2.0.0 버전의 GSS를 가리 킵니다. 이제 html에 이것을 추가하여 정사각형 모양을 만들어 봅시다 : .

이제 HTML로 돌아가서 GSS 제약 조건을 추가하겠습니다. GSS를 사용하면 단순히 의도를 제시하고 수학 계산을 알고리즘까지 맡깁니다. 이 예에서는 창의 너비가 동적으로 변할 때 요소에서 회전이 생성되는 요소와 창 사이에 제약 조건을 생성하려고합니다. 이 목표를 달성하기 위해 적용 할 제약 조건은 다음과 같습니다. <:> :: 창 [중 사용 :: Window [width] rotate-z로 제약 조건을 생성하여 z 축 주변의 요소에 회전 효과가 생성됩니다. 여기서 :: Window [width]에서받은 값은 회전 정도를 나타냅니다.

첫 번째 예에서와 같이 텍스트/gss로 설정된 유형으로 HTML에 스타일 블록을 추가합니다. 추가 할 GSS를 정의하려면 스타일 블록이 필요하다는 것을 기억하십시오.

스타일 태그 안에 다음 코드를 추가하여 GSS 제약 조건을 사용하여 스퀘어 박스를 화면과 연결하겠습니다.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

그리고 그로 인해 끝났습니다. 최종 Codepen 데모를 확인하십시오 : Codepen에서 sitepoint (@sitepoint)별로 GSS를 사용하여 펜 동적 회전을 참조하십시오. 전체 화면 데모를 보면 창 크기 조정을 해보십시오. 창의 너비가 변경되면 제곱 상자가 회전 위치를 변경합니다. gss의 미래 GSS의 미래는 유망 해 보입니다. 이제 우리는 프론트 엔드 기술로 나아갔습니다. 스타일 시트 라이브러리 전체를 찢기 전에 소규모 프로토 타입으로 연습 할 것을 제안합니다. 내가 여기서 다루는 것은 GSS로 할 수있는 일의 작은 샘플이지만,이 튜토리얼이 당신을 시작하는 데 도움이되고 유익한 정보를 얻었 으면 좋겠다.

. 아직 GSS를 사용 했습니까? 당신의 경험은 어땠습니까? 댓글 섹션에서 알려주세요.

GSS (그리드 스타일 시트)에 대한 자주 묻는 질문

gss (그리드 스타일 시트) 란 ​​무엇입니까?

gss 또는 그리드 스타일 시트는 웹 개발자와 디자이너를위한 강력한 도구입니다. 단순하고 직관적 인 구문을 사용하여 반응 형이며 유연한 레이아웃을 만들 수있는 제약 기반 레이아웃 엔진입니다. GSS는 제약 조건의 개념을 도입하여 기존 CSS 모델을 확장하여 요소 간의 관계를 정의하고보다 정확하고 유연한 방식으로 동작을 제어 할 수 있습니다.

GSS는 기존 CSS와 어떻게 다릅니 까?

. 전통적인 CSS는 레이아웃에 박스 모델을 사용하며 복잡한 레이아웃을 만들 때 제한적이고 복잡 할 수 있습니다. 반면에 GSS는 제약 기반 모델을 사용하여 더 많은 유연성과 정밀도를 허용합니다. GSS를 사용하면 요소 간의 관계를 정의하고보다 직관적 인 방식으로 동작을 제어 할 수 있습니다.

GSS 사용을 시작하는 방법은 무엇입니까?

GSS 사용을 시작하려면 GSS 엔진을 포함시켜야합니다. 프로젝트에서. 이는 공식 웹 사이트에서 GSS 라이브러리를 다운로드하거나 NPM과 같은 패키지 관리자를 사용하여 수행 할 수 있습니다. GSS 엔진이 프로젝트에 포함되면 CSS 파일에 GSS 코드를 작성하기 시작할 수 있습니다.

기존 CSS 코드와 함께 GSS를 사용할 수 있습니까?

예, GSS는 작동하도록 설계되었습니다. 전통적인 CSS와 함께. 즉, 기존 CSS 코드를 다시 작성하지 않고도 프로젝트에 GSS를 점차적으로 도입 할 수 있습니다. GSS 코드는 별도의 파일로 작성되거나 일반 CSS 코드와 혼합 될 수 있습니다.

GSS를 사용하면 어떤 이점이 있습니까?

GSS는 기존 CSS보다 몇 가지 이점을 제공합니다. 레이아웃을보다 정확하게 제어 할 수 있으므로 복잡하고 반응 형 디자인을보다 쉽게 ​​만들 수 있습니다. GSS는 또한 코드를 단순화하여 읽고 유지하기가 더 쉬워집니다. 또한 GSS는 라이브 편집을 지원합니다. 즉, 코드에 따라 실시간 변경 사항을 볼 수 있습니다.

는 모든 브라우저에서 지원되는 GSS입니까?

GSS는 JavaScript를 사용하여 제약 조건 기반 레이아웃을 구현합니다. 엔진은 JavaScript를 지원하는 최신 브라우저에서 작동해야합니다. 그러나 새로운 기술과 마찬가지로 다양한 브라우저에서 디자인을 테스트하여 호환성을 보장하는 것이 좋습니다.

GSS를 배울 수있는 리소스가 있습니까?

예, 여러 가지가 있습니다. GS를 배우는 데 사용할 수있는 리소스. 공식 GSS 웹 사이트는 포괄적 인 가이드 및 문서를 제공합니다. GSS를 자세히 다루는 몇 가지 온라인 자습서와 코스도 있습니다.

GSS는 모바일 웹 개발에 사용할 수 있습니까?

예, GSS는 모바일 웹 개발을위한 훌륭한 도구입니다. 제약 기반 레이아웃 엔진을 사용하면 다양한 화면 크기와 방향에 적응하는 반응 형 디자인이 가능합니다. 이를 통해 다른 장치에서 일관된 사용자 경험을보다 쉽게 ​​만들 수 있습니다.

는 GSS 오픈 소스입니까?

예, GSS는 오픈 소스 프로젝트입니다. 이것은 누구나 개발에 기여하여 프로젝트에서 무료로 사용할 수 있음을 의미합니다. GSS의 소스 코드는 Github에서 사용할 수 있습니다.

GSS의 미래는 무엇입니까?

비교적 새로운 기술로서 GSS는 여전히 진화하고 있습니다. 그러나 강력한 기능과 제약 기반 레이아웃에 대한 관심이 높아짐에 따라 유망한 미래가 있음을 시사합니다. 더 많은 개발자가 GSS를 채택함에 따라이 혁신적인 기술에 대한 더 많은 리소스, 도구 및 커뮤니티 지원을 볼 수 있습니다.

GSS (Grid Style Sheets)는 CSS 전 처리기 및 JavaScript 런타임으로 브라우저의 레이아웃 엔진을 캐시 러리 제한 솔버로 대체하고 유망한 상대적 위치 및 크기 조정 및 한 줄의 코드로 다른 요소를 중심으로하는 능력

GSS는 구현보다는 의도에 중점을 둔 제약 프로그래밍을 사용하여 개발자가“무엇”을 선언하고“어떻게”를 수학 솔버로 남겨 두도록 할 수 있습니다. gss는 플로트, 테이블 셀, 클리어 픽스 및 수평/수직 중심을 사용하여 구속력있는 계층 구조를 사용하여 강도로 제약 조건을 우선 순위로 삼고 4 가지 내장 강도 레벨을 제공합니다 :! 약점,!

gss는 캐시 니 선형 산술 제약 조건 해결 알고리즘을 사용하여 사용자가 자연 언어로 제공 한 입력 제약 조건을 기반으로 한 레이아웃에 대한 최적의 솔루션을 찾아 제약 조건을 점진적으로 평가하고 최적 솔루션을 자동으로 발견합니다.

GSS를 사용하기 위해서는 zithub를 통해 zip 파일로 Github을 통해 다운로드하거나 다운로드해야하며, 태그에 type = text/gss를 추가하여 GSS 스타일 시트를로드 할 수 있습니다.

간단한 역사
• GSS는 Dan Tocchini와 함께 창립자이자 CEO로 그리드를 창출 한 것입니다. 이는 그리드 기반 스타일 시트를 그리드 스타일 시트라고하는 이유에 대한 답변입니다. 웹 개발자와 프론트 엔드 기술 간의 전쟁은 웹에 아이디어를 제시하는 것이 몇 년 동안 진행되었습니다. CSS는 지난 10 년 동안 승리를 거두었습니다. 그러나 시간이 지남에 따라 진화하지 않은 도구로 점점 더 복잡한 사용자 인터페이스를 구축하는 것은 웹 개발자가 정기적으로 수행 할 것으로 예상되는 것입니다. 예를 들어, CSS를 사용하여 요소를 수직으로 중심으로하는 것은 특히 가변적 인 높이 요소가있는 가장 간단한 작업이 아닙니다. Flexbox는 가장 최근의 솔루션 중 하나이지만 작은 변화조차도 HTML 컨텐츠와 CSS 프레젠테이션 내에서 깊이 들어가서 변경해야합니다.
이제 GSS가 경기장을 타야 할 때입니다. GSS는 이러한 문제와 더 많은 문제를 해결합니다. 개발자가 10 년 넘게 겪었던 문제.

기본적으로 GSS는 CSS Preprocessor 및 JavaScript 런타임으로 Cassowary.js를 이용합니다. Cassowary.js는 아직 모르는 사람들은 Apple이 Cocoa Autolayout에서 사용하는 JavaScript 포트입니다.

GSS와 Cassowary는 모두 구속 조건 프로그래밍에 기반을 두므로 CSS와 같은 선언 언어를 강화하는 데 이상적입니다. 제약 프로그래밍은 웹 개발자가“무엇”을 선언하고“어떻게”를 수학 솔버까지 맡기는 것에 관심이있는 패러다임입니다.

제약 프로그래밍은 구현이 아닌 의도에 중점을 둡니다

이제 배경 정보를 설정 했으므로 GSS가 제공하는 기능으로 넘어 갑시다. GSS 개요 CSS의 가장 큰 문제 중 하나는 상대성입니다. CSS 요소는 패딩, 높이, 너비, 플로트, 마진, 경계, 윤곽선 등의 끝없는 속성 목록을 기대할 수 있지만이 정보는 페이지의 다른 요소를 참조하여 요소가 어디에 있는지 알려주지 않습니다 ( 또는 전체 페이지조차도). 끝없는 목록은 또한 다른 화면 크기로 요소가 어디에 표시 될지에 대한 답을 얻지 못합니다.

이것은 우리에게 GSS의 첫 번째 특징을 가져옵니다 : 당신은 레이아웃을 원하는 것을 정의합니다. 셀 수없이 많은 시간의 시행 착오를 소비하는 시대는 지났으며, 레이아웃이 어떻게 구성되어야하는지 전략을 세웠습니다.

우리는 GSS가 Cassowary.js를 활용한다고 이미 논의 했으므로 GSS의 또 다른 훌륭한 기능은 다음과 같습니다. 요소는 한 줄의 코드로 다른 하나를 중심으로 할 수 있습니다. 이것은 많은 해결 방법을 불필요하고 과거의 것들을 만듭니다.

예를 들어 사이트 페이지의 오른쪽에있는 제목과 함께 수직으로 가입 버튼을 추가하려면 다음 코드를 사용합니다.

또 다른 특징 : GSS는 플로트, 테이블 셀, 클리어 픽스 및 수평/수직 중심을 사용하여 쓸모 없게 만듭니다. 플로트 자체가 플로트가 응용 프로그램 레이아웃에 이상적이지 않다고 말하기 때문에 플로트 인 위험한 함정에 대한 작별 인사.

“웹 사이트가 간단한 문서에서 복잡한 대화식 응용 프로그램, 문서 레이아웃을위한 도구로 발전함에 따라 플로트는 반드시 애플리케이션 레이아웃에 적합하지는 않았습니다.”

- W3C 그리드 레이아웃 모듈 (작업 초안)

CSS 기능은 어떻습니까! 중요합니까? GSS의 네 번째 특징은 비슷한 일을합니다. GSS는 제약 계층을 사용하여 제약 조건을 강점으로 우선 순위로 삼습니다. 우리는 여기에서 4 가지 내장 강도 수준에 대해 이야기하고 있습니다 :

! 약한 ! 중간

! strong ! 요구

는 필요합니다! 요구 사항은

특수

강도이며 제약 조건이 유지되고 그렇지 않으면 모든 것이 끊어집니다. 신중하고 드물게 사용하는 것이 좋습니다 강도 수준은 목록을 낮추고 더 강한 제약 조건은 실행 중에 우선 순위가 높아집니다. 예를 들어 보겠습니다 :

당신은 지금까지 그것을 만들었습니다. 지금 제약 기반 레이아웃을 살펴 보겠습니다.

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

제약 조건 기반 레이아웃 의 gss 제약 조건은 기본적으로 유지되거나 보유하지 않을 수도있는 둘 이상의 변수 간의 관계입니다. 요소의 모든 숫자 특성은 제한 될 수 있습니다. 예는 다음과 같습니다.

p를 선택기 라고합니다 라인-하이트는 gss가

에 대한 값을 계산하는 속성입니다. []는 속성 에 액세스하는 데 사용됩니다 >> = 불평등 제약을 정의하십시오 10 및 20은 픽셀의 숫자 값입니다

위에 주어진 예에서 두 제약 조건은 모두 유효합니다. 다음은 유지되지 않는 제약 조건의 예입니다.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

처음에는 요소 요소와 요소 모두 높이가 150px로 제한됩니다. 세 번째 줄에서 두 요소의 합은 225px입니다. 따라서 두 요소의 제약 조건 중 하나가 유지되지 않습니다.

gss의 선택기 GSS의 선택기는 HTML 요소 그룹의 쿼리이며 궁극적으로 제약 조건에 의해 영향을받는 요소를 결정하는 데 사용됩니다. 셀렉터는 제약 조건을 적용하기 전에 DOM의 요소를 선택하고 관찰해야하기 때문에 중요합니다. 다음 기본 선택기는 GSS에 의해 지원됩니다
• gss의 규칙 세트 규칙 세트를 사용하면 단일 선택기에 대한 여러 제약 조건을 정의 할 수 있습니다. 당신은 그들을 중첩하고 그들에게도 CSS 속성을 사용할 수 있습니다.
이 중첩 규칙 세트 :
• 는 다음과 같습니다
gss의 특성 위의 예에서 이미 속성을 다루었지만 조금 더 자세히 살펴 보겠습니다. GSS에서 속성은 요소에 속하는 변수입니다. CSS에서 알려진 속성을 사용하면 해당 GSS 계산 값이 요소의 인라인 스타일로 할당됩니다. <:> 이와 같은 것 :
• 는 다음과 같습니다
CASSOWARY 제약 조건 알고리즘 소개
• GSS는 Badros, Borning and Stuckey, 1999에 의한 Cassowary Linear Arithmetic 제약 조건 해결 알고리즘의 JavaScript 포트 (cassowary.js)를 사용합니다. 알고리즘은 사용자가 자연 언어로 제공 한 입력 제약 조건에 따라 레이아웃에 대한 최적의 솔루션을 찾습니다.
사용자는 입력 제약 조건이 서로 모순되지 않도록 할 필요가 없습니다. 사실, 이것은 대변 알고리즘의 본질입니다. 제약 조건을 점진적으로 평가하고 최적의 솔루션을 자동으로 발견합니다. 전환 알고리즘의 계산 제한

GSS 뒤에있는 제약 조건 솔버를 대변 알고리즘이라고합니다. 이 알고리즘은 선형 (즉, y = mx c 형식) 인 제약 조건 만 계산할 수 있습니다. 기본 연산자 (, -, *, /)는 알고리즘에 의해 지원됩니다. 두 가지 (또는 그 이상) 제한된 변수의 곱셈과 나누기는 선형이 아니므로 오류가 발생합니다.

.

GSS 설치 클라이언트 측 설치의 경우 Bower를 통해 설치하십시오 :

그런 다음이 코드를 Markup의 섹션에 추가하십시오

.subscribe-button[right] == <span>::window[width];
</span>.subscribe-button[center-y] == .header[center-y]<span>;</span>

zithub를 통해 버전 2.0.0을 zip 파일로 다운로드 할 수도 있습니다. GSS를 설치 한 후에는 태그에 type = text/gss를 추가하여 .gss 스타일 시트를로드하십시오.

또는

일단 모든 것을 가동하고 실행되면 몇 가지 코드 예제와 함께 팔로우를 시작할 수 있습니다. 아래에서는 초보자의 튜토리얼을 살펴 보겠습니다 a gss 초보자의 튜토리얼

제가 작성할 예제는 CodePen을 통해 표시되지만 표준 HTML 문서와 같은 자습서를 살펴 보겠습니다. 먼저 GSS 엔진 스크립트를 추가하기 위해 HTML에 다음 코드 줄을 추가하겠습니다.

코드 펜 호스팅 버전의 파일을 사용하지만 여기에서는 CDN 호스팅 버전을 찾을 수 있습니다. 다음으로 GSS 참조 스크립트 (위에 추가 한 줄) 아래에 다음 코드를 추가하여 GSS 문서 개체를 전달합니다.

#light[years] == <span>50 !weak;
</span>#light[years] == <span>20 !medium;
</span>#light[years] == <span>35 !strong;
</span>
<span>/* #light[years] will hold the value 35 */</span>

원하는 경우, 엔진 스크립트 이후에 포함 된 별도의 JavaScript 파일에 배치 할 수 있습니다. 예 1 : 수직으로 요소를 중심으로

DIV를 생성하고 GSS 레이아웃에서 H2 태그로 일부 텍스트를 동봉하고 html에 추가합니다 :

기본 스타일을 추가 한 후 레이아웃을 만들기 위해 GSS를 추가 할 수 있습니다. 이것은 재미가 시작되는 곳입니다.

p[line-height] >= <span>10;
</span>p[line-height] ::window[height] / 20;

내 목표는 크기에도 불구하고 뷰포트 내부의 .foo 요소를 수직으로 중심하고 요소의 크기가 변경 되더라도 동일한 정렬을 유지하는 것입니다. 이 목표를 달성하기 위해 적용 할 제약 조건은 다음과 같습니다.

<:> :: Window Selector를 사용하여 브라우저에서 페이지의 보이는 부분을 중앙에 중앙을 중앙으로 사용하십시오. use :: [INTRINSIC-HEIGHT] 속성은 상대 너비를 결정하는 데 사용될 요소의 높이의 상대 값을 얻기위한 속성.

먼저, 텍스트/gss로 설정된 유형 속성을 사용하여 html에

위 내용은 GSS 소개 : 그리드 스타일 시트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!