html 태그 질문
조회수 563회
안녕하세요.
html + JS로 간단한 2인용 게임을 만들려고 하는데 문제가 생겨서 질문을 올립니다.
2명의 플레이어가 게임을 할려면 화면을 좌우로 이등분 해야 하는데, 처음에는 div 태그로 시도를 해 보았다 태그가 닫히면 줄바꿈되는 속성 때문에 화면이 상하로 나누어졌습니다. span태그로도 해 보았지만 inline 속성으로 가로, 세로 값을 줄 수 없었습니다.
한 줄에 표시되며(inline) 자신의 부모 노드를 꽉 채우는(block) CSS 속성이나 화면분할 태그가 있을까요?
2 답변
-
CSS 중급 과정에 오신 것을 환영합니다! 말씀하신 문제를 다루는 분야의 이름은 그리드(Grid)입니다. 왜 이런 분야가 따로 있느냐? 정답이 따로 없기 때문이죠. 지금까지 다음과 같은 다양한 접근법이 나온 바 있습니다.
display: table;
: 낡았지만 튼튼한 접근법display: flex;
및 다양한 flex 관련 속성들 : 최신상이지만 일부 환경에서 잘 안 됨- Bootstrap, Bulma, Tailwind 등의 프론트엔드 프레임워크의 그리드 규칙들 : 배워서 써먹기에 빠르고 편하지만 뭔가 2% 부족할 수 있음.
float: left;
를 쓰는 놈도 있고 뭔가 다른걸 쓰는 놈도 있고 아주 천차만별
자! 검색을 시작하세요. The world is your oyster.
-
<div class="container"> <div class="item"> </div> <div> </div class="item"> </div> <style> .container{ min-height: 100vh; display: flex; flex-direction: row; } .item{ flex-grow: 1; } </style>
혹시나 도움이 될까 주소를 남깁니다.
https://opentutorials.org/course/2039
https://medium.com/alex-hinds-portfolio/making-an-html5-game-using-paper-js-dc05f51119d5
댓글 입력