당신은 최근 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 가지 내장 강도 수준에 대해 이야기하고 있습니다 :
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 초보자의 튜토리얼
그리고 그게 전부입니다. 요소는 이제 GSS를 사용하여 수직으로 (동적 높이) 중앙에 있습니다. 아래는 데모입니다 :
Codepen에서 sitepoint (@SitePoint)에 의해 GSS로 펜 수직 센터링을 참조하십시오.
전체 화면 데모를 시도하고 브라우저 크기를 수직으로 조정하여 요소가 모든 창 크기에 중앙에있는 상태를 확인하십시오.
예제 2 : 동적으로 변화하는 창 너비를 기반으로 한 요소 회전
파일의 올바른 위치를 가리려면 위의 코드를 편집해야합니다. 여기서 worker.js 파일을 가져오고 gss.js 파일을 여기에서 얻을 수 있습니다.
참고 : 일부 버그로 인해 위의 파일 경로는이 작업을 수행하기 위해 2.0.0 버전의 GSS를 가리 킵니다.
이제 html에 이것을 추가하여 정사각형 모양을 만들어 봅시다 : .
이제 HTML로 돌아가서 GSS 제약 조건을 추가하겠습니다. GSS를 사용하면 단순히 의도를 제시하고 수학 계산을 알고리즘까지 맡깁니다. 이 예에서는 창의 너비가 동적으로 변할 때 요소에서 회전이 생성되는 요소와 창 사이에 제약 조건을 생성하려고합니다.
이 목표를 달성하기 위해 적용 할 제약 조건은 다음과 같습니다.
<:> :: 창 [중
사용 :: Window [width] rotate-z로 제약 조건을 생성하여 z 축 주변의 요소에 회전 효과가 생성됩니다. 여기서 :: Window [width]에서받은 값은 회전 정도를 나타냅니다.
기본적으로 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
! 요구
는 필요합니다! 요구 사항은
특수
강도이며 제약 조건이 유지되고 그렇지 않으면 모든 것이 끊어집니다. 신중하고 드물게 사용하는 것이 좋습니다 강도 수준은 목록을 낮추고 더 강한 제약 조건은 실행 중에 우선 순위가 높아집니다. 예를 들어 보겠습니다 :
에 대한 값을 계산하는 속성입니다.
[]는 속성 에 액세스하는 데 사용됩니다
>> = 불평등 제약을 정의하십시오
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 형식) 인 제약 조건 만 계산할 수 있습니다. 기본 연산자 (, -, *, /)는 알고리즘에 의해 지원됩니다. 두 가지 (또는 그 이상) 제한된 변수의 곱셈과 나누기는 선형이 아니므로 오류가 발생합니다.
