아마 처음 웹개발을 하는 사람들이 제일 어려워하는 것이 원하는 위치에 원하는 대상을 가져다 놓는 것일 것이다.
지금 내가 그런 상황이다.
생활코딩에서 신기술(?)이 이러한 문제를 많이 도와줬다고 배웠다. 이름하여 그리드!
그리드를 통해서 배치를 조금 더 쉽고 유동성 있게 할 수 있게 되었다.
참고사이트
https://studiomeal.com/archives/533- 그림으로 이해하는 그리드
https://heropy.blog/2019/08/17/css-grid/ - 그리드 완벽 가이드
https://ibrahimovic.tistory.com/23 - 그리드 개념 이해하는데 큰 도움 된 블로그
그리드를 적용해서 좀 더 복잡하게 배치해보는 것은 잠시 미뤄두고 오늘 배운 그리드를 통한 가운데 정렬을 적용해보자
grid의 기본 개념은 부모 컨테이너 안의 자식컨테이너가 있고 이 컨테이너들이 greed 명령문으로 제어가 가능한 것
기존 가운데 정렬을 하는 방법은 아래 블로그를 통해서 차차 익히기로 하고 그리드를 적용하여 가운데 정렬하는 문제를 해결해보고자 함
https://webdir.tistory.com/31 -- css 문법을 통한 가운데 정렬
https://www.daleseo.com/css-centering/ - flexbox와 grid를 이용하여 가운데 정렬
greed를 적용하는 방법은 우선 각 태그들을 부모 컨테이너로 감싸는 것에서 시작
<div class = "wrapper">
<div id = item class= "mainBanner"></div>
<div id = item class= "welcomeMent"></div>
<div id = item class= "circleBtn"></div>
</div>위 코드 내용으로는 id가 item인 div태그들이 부모 컨테이너인 wrapper로 그리드 설정이 됌
완벽하게 그리드를 적용하려면 css스타일에서 적용을 해줘야 함
.wrapper{
display:grid; /* 이렇게 설정해야 그리드가 적용 (보임) */
grid-gap: 20px; /* greed 간 간격 */
}display:grid이렇게 하면 그리드는 설정이 된 것이다.
다만 아직 가운데 정렬은 적용되지 않았다.
.wrapper{
display:grid; /* 이렇게 설정해야 그리드가 적용 (보임) */
grid-gap: 20px; /* greed 간 간격 */
place-items: center; /* 가운데 정렬 */
}place-items: center를 통해서 가운데 정렬을 해주자
적용을 해보면 이쁘게 가운데 정렬이 된 것을 알 수 있다!
.jpeg)