[💬] php로 처음부터 끝까지 웹게임 만들기 - 3

1화

http://m.dcinside.com/board/game_dev/33889

2화

http://m.dcinside.com/board/game_dev/34209

이전내용

카드를 랜덤으로 뽑아주는 기능

카드 구매와 판매 기능을 만들었습니다.

아무리 테스트라지만 너무 쓸쓸해서 디자인 작업을 해보도록 했습니다.

원하는 그림입니다.

상단 하단은 고정

내용영역은 화면 중앙에 위치

또 모바일 화면에서도 잘보이면 좋겠네요.

<body>

</section>

</body>

구조는 이렇게 짰습니다.

화면 전체에 높이 100%를주고

상단 하단은 위아래에 고정시켰습니다.

섹션 영역도 가로 세로 100% 주고 고정시켜줍니다.

안그러면 스크롤이 생기면 흘러넘치더라구요.

섹션안의 아티클영역은 flex속성을 주고 가로세로 중앙정렬을 해줍니다.

0~30까지 숫자 넣었습니다.

문제는 스크롤이 생기면 내용이 짤립니다 ㅠㅠ

이부분을 해결해야될거같네요.

아니면 하단 메뉴를 없애던가 해야될듯..

언제나 하단고정이 문제입니다.

- dc official App

생각해봤는데 아니면 걍 상단 하단 메뉴도 없앨도될거같음.. - dc App

익명(14.42) 2019-08-31 12:56

꾸준추!

듀콜다(duecorda) 2019-08-31 13:45

상하단 고정 살리고 스크롤을 content 에만 먹일라면 flex 사용하면됨.
상중하단 wrapper div 하나 만들고 display: flex; 그리고 중단에 flex-grow: 1 넣어주면됨.
IE는 11버전부터 지원 (align 관련 미지원) 나머지는 전부 지원됨.
https://caniuse.com/#feat=flexbox

듀콜다(duecorda) 2019-08-31 13:47

답글

오호 감사합니다! 나중에 웹뷰만 넣어서 모바일 출시도 해보고싶어서 ㅋㅋ - dc App

익명(14.42) 2019-08-31 13:48

[💬] php로 처음부터 끝까지 웹게임 만들기 - 3

댓글 4

다른 게시글