Grid로 만든 종횡 중앙 정렬
Grid란 무엇입니까?
CSS Grid Layout(격자 레이아웃)은 CSS의 새로운 기능으로 HTML/CSS를 사용하여 간단하고 자유롭게 2차원 레이아웃을 조작할 수 있다.
자신이 좋아하는 순서에 따라 배열하거나 격자 모양의 격자 격자에 결합함으로써 다양한 배치를 할 수 있다.
CSS Grid Layout 최고!(기초편) - Qiita
따라서 레이아웃을 조작하기에 매우 편리한 Grid.
Edge, Chrome, Firefox, Safari, Opera 등 주요 브라우저는 거의 지원됩니다.
Can I use... Support tables for HTML5, CSS3, etc
목표 인상
여보세요, 여기 브라우저 있잖아요.
이 원소는...
이렇게(HTML에 추가)...
이렇게 (중앙 정렬)!(잡다)
사고 방법
여보세요, 여기 브라우저 있잖아요.
이 원소는...
이렇게(HTML에 추가)...
이렇게 (중앙 정렬)!(잡다)
사고 방법
div 같은 지정background을 사용할 수 있다.div의 폭과 높이, 컨테이너max-content를 만들면 그 크기일 것이다.
ブラウザサイズ - 要素サイズ 요소 치수를 지정하면 잔수1fr로 얻을 수 있습니다.제작
index.html<body>
<div class="container">
<p>Grid Centering Test.</p>
</div>
</body>
style.csshtml{
margin: 0px;
padding: 0px;
}
body{
width: 100vw;
height: 100vh;
margin: 0px;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas:
". .... ."
". item ."
". .... .";
}
.container{
background: #ddd;
width: max-content;
height: max-content;
grid-area: item;
}
이렇게 하면 아래의 모습으로 변한다.
중앙을 잘 맞추다.
검증
그럼 사이즈가 바뀌면 어떻게 될까요?
즉, 용기의 크기와 텍스트가 바뀌어도 용기마다 중앙 정렬을 유지하는가.
제가 검증해 볼게요.
검증을 위해 아래 코드를 추가했습니다.
index.html<!-- Check -->
<div class="fontsizeSlider">
<input type="range" min="1" max="100">
<textarea>Grid Centering Test.</textarea>
</div>
<script>
document.querySelector('.fontsizeSlider input').addEventListener('input',function(){
document.querySelector('.container p').style.fontSize = `${this.value}px`;
});
document.querySelector('.fontsizeSlider textarea').addEventListener('input',function(){
document.querySelector('.container p').innerText = this.value;
});
</script>
<!-- End -->
슬라이더에서 텍스트 크기를 지정하고 텍스트 영역에서 텍스트 내용을 지정하며 변경될 때마다 컨테이너가 실시간으로 변경됩니다.
그럼 검증해 봅시다.
(눈으로만 보기) 가운데 정렬을 유지합니다.
성공했어.
만약 당신이 이 결과를 믿지 않는다면, 스스로 시도해 보세요.(극론)
이 코드는 여기서 공개됩니다.
https://github.com/a01sa01to/grid-centering
추가 기록(2020.07.05)
1-Line Layouts 이 페이지를 보고 알았어요.
이렇게 많은 코드display: grid와 place-items: center를 작성하지 않아도 가운데에서 정렬할 수 있다.
Can I use...는 거의 모든 브라우저에서 지원됩니다.
Reference
이 문제에 관하여(Grid로 만든 종횡 중앙 정렬), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/a01sa01to/items/b8130d7a871e6b3aa31e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<div class="container">
<p>Grid Centering Test.</p>
</div>
</body>
html{
margin: 0px;
padding: 0px;
}
body{
width: 100vw;
height: 100vh;
margin: 0px;
display: grid;
grid-template-columns: 1fr max-content 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas:
". .... ."
". item ."
". .... .";
}
.container{
background: #ddd;
width: max-content;
height: max-content;
grid-area: item;
}
그럼 사이즈가 바뀌면 어떻게 될까요?
즉, 용기의 크기와 텍스트가 바뀌어도 용기마다 중앙 정렬을 유지하는가.
제가 검증해 볼게요.
검증을 위해 아래 코드를 추가했습니다.
index.html
<!-- Check -->
<div class="fontsizeSlider">
<input type="range" min="1" max="100">
<textarea>Grid Centering Test.</textarea>
</div>
<script>
document.querySelector('.fontsizeSlider input').addEventListener('input',function(){
document.querySelector('.container p').style.fontSize = `${this.value}px`;
});
document.querySelector('.fontsizeSlider textarea').addEventListener('input',function(){
document.querySelector('.container p').innerText = this.value;
});
</script>
<!-- End -->
그럼 검증해 봅시다.
(눈으로만 보기) 가운데 정렬을 유지합니다.
성공했어.
만약 당신이 이 결과를 믿지 않는다면, 스스로 시도해 보세요.(극론)
이 코드는 여기서 공개됩니다.
https://github.com/a01sa01to/grid-centering
추가 기록(2020.07.05)
1-Line Layouts 이 페이지를 보고 알았어요.
이렇게 많은 코드display: grid와 place-items: center를 작성하지 않아도 가운데에서 정렬할 수 있다.
Can I use...는 거의 모든 브라우저에서 지원됩니다.
Reference
이 문제에 관하여(Grid로 만든 종횡 중앙 정렬), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/a01sa01to/items/b8130d7a871e6b3aa31e
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Grid로 만든 종횡 중앙 정렬), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/a01sa01to/items/b8130d7a871e6b3aa31e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
