강의에서 미션을 주셔서 나만의 게임화면을 만들어보았는데
만들면서 살짝 애먹었던 부분들을 정리해보려고 합니다
html:상단 스타트부분과 배경부분
<div id="start">
<h1>start</h1>
<div id="timer"></div>
<h1>time</h1>
</div>
<div id="bg">
<div id="hero" class="stop"></div>
<div id="sword"></div>
</div>
CSS:스타트부분 요소들 나란히 하기, 배경크기 정하기, 검5개 넣기
#start {
display: flex;
justify-content: space-between;
width: 800px;
margin: 0 auto;
}
#bg {
position: relative;
width: 800px;
height: 500px;
background-color: black;
margin: 20px auto 0px auto;
background: url("./images/bg.png") no-repeat;
background-size: cover;
}
#sword {
position: absolute;
top: 0;
left: 0%;
width: 373px;
height: 75px;
background-image: url("./images/sword.png");
background-repeat: repeat-x;
background-size: contain;
}
start, time바, time을 각각의 태그로 만들어준 후 나란히 배치하고 싶었는데 3가지(h1, div, h1)태그가 다 block태그여서 나란히 하는 것이 힘들었다.
margin이나 넓이 등등 바꿔보다가 검색해서 해결 완료
flex
: 레이아웃배치 전용으로 고안된 기능
사용법 :
display: flex;
를 먼저 배치하고
justify-content: space-between;
하면 각 요소의 간격이 일정하게 나란히 배치됨.
그밖의 flex사용법 >Flex 정리블로그
background-repeat : repeat-x ;
를 주어서 x축 방향으로 반복되게 하는 것.
내가 원하는 검사이즈를 찾아내고 그 너비의 5배로 너비를 주어서
검이미지가 5번 반복되게 함.
background-size : contain ;
배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소한다. 배경이미지의 가로 세로 비율을 유지한다. 요소를 벗어나지 않은 크기로 확대/축소 되기 때문에 배경이미지의 가로세로는 요소의 가로세로보다 같거나 작다.