CSS 서브메쉬의 수직 정렬은 어떻게 쉬워졌습니까?
격자는 '클릭하고 시도하기' 픽셀과 간격 값이 아니라 응답성입니다. 격자는 매력적인 것 같습니다.시간의 추이에 따라 웹 개발자들이 해결한 문제는 그들이 없으면 스스로 하나를 발명할 수 있다는 것을 증명했다.현재 개발자들은 복잡한 웹 디자인을 만들기 시작했는데, 그 중 하나는 다른 격자와 끼워 넣기 시작했다.이것은 일종의 미봉책으로, 그것이 역할을 발휘하도록 하는 것 자체가 일종의 노력이다.
웹 개발자의 불평을 받아 CSS에는 업데이트된 하위 격자 라이브러리가 포함되어 있습니다.나는 이 화제에 대해 완전한 댓글을 한 편 썼다.CSS의 CSS Grids 속성을 모르는 경우 what is CSS Grids and CSS Subgrids을 확인하는 것이 좋습니다.이 글은subgrid 처리의 매우 중요한 상황, 즉 수직 정렬 문제를 해결하는 것을 바탕으로 한다.그러나 이 문제를 해결하기 전에 수직 정렬 자체에 세부 사항이 필요하다는 것을 알았다.따라서 저는 이 문제가 무엇인지 분석하여 귀하가 사이트 개발 과정에서 그것을 발견하도록 돕겠습니다.
수직 정렬 필요
수직 정렬 문제는 우리가 responsiveness of the website과 싸울 때 발생한다.그런데 화면 크기에 따라 고정된 절대 숫자로 사이트를 조정하는 것이 비교적 쉽다는 것을 아십니까?예를 들어, 다음 코드를 고려합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<fieldset>
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</fieldset>
<fieldset>
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</fieldset>
</body>
</html>
괜찮아 보이죠?그러나 사이트의 응답이 언급될 때 어떤 일이 일어날까요?그럼 똑같은 결과를 볼 수 있을까요?우리가 알아볼게요.
시장에는 사이트의 응답성을 검사하는 데 사용할 수 있는 각종 도구가 있다.이런 도구는 LT Browser입니다. 핸드폰과 태블릿PC에서 당신의 사이트에 대해 실시간 모바일 뷰 디버깅을 할 수 있고 45여 대의 모바일 기기에 대한 영향을 확인할 수 있습니다!
LT 브라우저에서 동일한 코드를 실행하면 Google Pixel에 다음과 같은 결과가 표시됩니다.
그것은 붕괴되었다. 이것은 수직 정렬 문제이다.화면 크기가 줄어들었기 때문에, 우리는 웹 페이지에서 요소를 정확하게 정렬할 수 없으며, 특히 열에 따라 정렬할 수 없다.필드 집합에서 이 요소들을 볼 수 있고 어느 필드 집합에 속하는지 이해할 수 있어도 크기가 정확하게 조정되지 않았다.나는 위의 코드에서bootstrap을 사용하여 보이는 CSS 단추를 실현했다.
그래, 그럼 응답과 정확한 수직 정렬을 실현하는 첫 번째 단계는 무엇일까?만약 네가'div'를 고려하고 있다면, 이것은 아마 통하지 않을 것이다.div-box는 그 중의 원소를 하나의 상자로 포장하여 최종적으로 경계의 유연성을 제공하지만 원소는 적당한 구조에 들어가지 않는다.CSS 격자는?그렇게 지도 모른다, 아마, 아마...어디 보자.
격자선을 사용하여 수직 정렬
CSS 격자선은 컨테이너 내의 요소를 처리할 때 특히 응답 방식으로 요소를 구성하는 주요 선택입니다.우리는 같은 의도로 상술한 코드를 수정하여 두 개의 필드 집합을 격자 구조에 포장할 것이다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
.grid {
display: grid
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<div class = “grid”>
<fieldset>
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</fieldset>
<fieldset>
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</fieldset>
</div>
</body>
</html>
그래!우리는 지금 확실히 약간의 진전을 거두었다.격자 구조는 원소에 적당한 경계와 유연성을 정의했다.그러나 우리는 여전히 원소를 수직으로 정렬할 수 없다.버튼의 텍스트 "English"및 버튼 위의 텍스트 "Travel and Adventure"에 유의하십시오.두 언어 유형 버튼은 모두 한 버튼의 공백에 있다. "여행과 모험"따라서 수직 정렬에 주력해야 한다.
위의 웹 페이지에서 격자 구조가 유지되었음에도 불구하고 낮은 단추는 부모 요소에 따라 스스로 조정해야 한다는 것이 뚜렷하다.모 엔티티는 고정 길이의 경계를 제공하므로 낮은 엔티티는 같은 엔티티에 따라 자동으로 조정됩니다.이것은 CSS 하위 격자와 부모 격자에 의존하는 속성을 떠올리게 합니다.하위 격자를 코드에 통합시키고 웹 페이지에서 변경된 사항을 관찰할 가치가 있습니다.
하위 메쉬를 사용하여 수직 정렬
하위 격자는 격자에 있는 CSS 시리즈의 새 멤버입니다.하위 격자는 인코딩하기 쉬우며 격자를 끼워 넣는 두통을 완전히 없애기 때문에 격자를 끼워 넣는 데는 숫자를 값으로 매우 자세하게 계산해야 한다.하위 격자는 한 축에서 사용할 수도 있고, 두 축에서 동시에 사용할 수도 있다.이곳에서 우리가 처리하는 것은 기둥 조정이기 때문에, 우리는 기둥 위의 서브 격자를 사용할 것이다.
코드의 다음 조정(각 필드 세트에 하위 그리드 추가)에 하위 그리드가 포함됩니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Subgrids</title>
<style>
fieldset {
width: 45%;
float: left;
margin-right: 1%;
}
@media only screen and (max-width: 480px) {
fieldset {
width: 100%;
}
.grid {
display : grid;
}
.subgrid {
display : grid;
grid-template-columns: subgrid;
}
</style>
</head>
<body style = "margin-top: 10%; margin: 5%">
<div class = "grid">
<fieldset>
<div class = "subgrid">
<legend>Interests:</legend>
<button class = "btn btn-success">Travel and Adventure</button>
<button class = "btn btn-success">Literature</button>
</div>
</fieldset>
<fieldset>
<div class="subgrid">
<legend>Language</legend>
<button class = "btn btn-success">English</button>
<button class = "btn btn-success">Korean</button>
</div>
</fieldset>
</body>
</html>
봐라!subgrid 속성을 사용하면 격자 요소 주위에서 비슷한 폭을 얻을 수 있습니다.너는 공간과 다른 양식을 웹 페이지에 응용하여 그것을 더욱 아름답게 할 수 있다.
지금은 확실히 괜찮아 보이고 데스크톱 사용자에게도 문제가 없다. 왜냐하면 이런 변화는 이렇게 큰 해상도를 반영하지 못하기 때문이다.그러나 이 속성을 사용하는 데는 단점이 하나 있다. 그것은 수용성이 있다!
브라우저 호환성
브라우저는 CSS 하위 격자에 대한 수용도가 상당히 떨어집니다.이 문서를 작성할 때 CSS 서브메쉬가 브라우저에 표준 속성으로 병합되지 않았습니다.Firefox는 하위 그리드를 포함하는 업데이트를 내놓았지만 약 4%명의 수요를 충족시킬 것이다.
이 글을 다 읽은 후에, 너는 우리가 서브 격자를 사용할 때, 원소를 맞추는 것이 얼마나 쉬운지 틀림없이 알게 될 것이다. 그렇지?따라서 현재 시장에서 받아들여지고 있다고 해서 그것들을 약화시키지 마라.시간이 지날수록, 그들은 틀림없이 모든 브라우저에 등록할 것이다.
지원되지 않는 브라우저에서 수직 정렬
이전 절에서 보듯이, CSS 서브넷의 브라우저 호환성은 매우 나쁘기 때문에, 주요 브라우저가 이 속성을 지원하기 전에 백업을 준비하는 것이 좋습니다.백업 없이 하위 그리드를 사용하는 경우 다음과 같은 정렬 문제가 발생합니다.
CSS 서브메쉬 없이 수직 정렬을 관리하려면 몇 가지 방법을 고려할 수 있습니다.첫 번째 방법은 '클릭 및 시도' 방법을 시작하고 절충할 수 있는 숫자를 백분율로 제시하는 것이다.비록 개인 브라우저에서도 좋은 절대수 결과를 얻을 수 있지만, 우리가 이렇게 많은 화면에 서비스를 제공하는 것에 대해 이야기할 때 절대수는 영원히 사용되어서는 안 된다.
그 다음으로 flex box와 CSS 격자를 사용하여 수직 정렬을 할 수 있다.이것은 몇 줄의 추가 코드가 필요하지만, CSS 격자와 flex box는 본질적으로 응답적이기 때문에, 서로 다른 장치에서 렌더링 효과가 어떤지 걱정할 필요가 없습니다.
CSS 하위 격자의 수직 정렬을 사용하는 것이 가장 좋은 선택이지만, 웹 페이지에서 자유롭게 정렬할 수 있도록 조금만 기다려야 할 것 같습니다.그 전에 이러한 변화는 이 과정에서 당신을 도울 것이다. 결국, 이것이 바로 사용자가 원하는 것이다. 수직 정렬이다. 우리가 그것을 어떻게 얻든지.
결론
웹 개발자들은 오랫동안 요소를 정렬하여 웹 페이지로 구성하려고 노력해 왔다.미디어 쿼리와 기타 CSS 속성을 사용하면 화면 크기에 따라 단일 중첩 요소를 조정하는 데 하루 종일 걸릴 수 있습니다.그 중에서 가장 도전적인 문제 중 하나는 원소의 수직 정렬이다.요소가 서로 다른 장치에서 위아래로 축소되기 때문에, 고정된 위치를 잃고, 웹 페이지에 무작위로 혼란을 남긴다.CSS 하위 격자는 부모 격자에 종속되기 때문에 수직 정렬 문제를 해결하는 가장 좋은 방법입니다.
따라서 격자가 위나 아래로 확장될 때마다 하위 격자는 독립적으로 결정을 내리지 않아 작은 화면 장치와 데스크톱의 위치를 변하지 않는다.수직 정렬은 까다로운 작업이라는 것을 명심하세요.코드를 작성하고 있는 장치에서는 괜찮아 보일 수도 있지만, 일부 장치에서는 고장이 날 수도 있다.따라서 요소가 올바르게 정렬될 수 있어도 항상 주의해야 합니다.원소의 수직 정렬과 기둥 재조합이 관련될 때마다 CSS Subgrids을 계속 사용하십시오.
읽어주셔서 감사합니다.질문이 있으시면 언제든지 채팅 섹션을 통해 연락 주시기 바랍니다.
Reference
이 문제에 관하여(CSS 서브메쉬의 수직 정렬은 어떻게 쉬워졌습니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/harishrajora12/how-has-vertical-alignment-become-easy-with-css-subgrid-1m98텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
