19'C 흐림
서울 강남구
css
* {
margin: 0; /*기본 셋팅*/
padding: 0;
}
.gallery {
width: 700px;
height: 500px;
overflow: hidden; /*지정된 크기에 벗어난 것은 보이지않게 할때 사용*/
background: gray; /*배경화변의 색깔주고 싶을때 사용*/
position: relative; /*그냥 박스만들때는 릴렉티브*/
margin: 0 auto; /*중앙정렬할때*/
}
.gallery > span {
display: block; /*span이 인라인이기 때문에 함께 쓰려면 블록으로 바꿔줘야합니다*/
background: white;
border-radius: 100px; /*둥근원모양을 만들고 싶을때 사용*/
width: 100px;
height: 100px;
text-align: center; /*글씨를 중앙정렬*/
line-height: 100px;
position: absolute;
}
.gallery > span:first-child { /*first-child는 span에서의 첫번째아이를 의미*/
left: 50px;
top:250px; /*쉽게는 top:50%;으로 줄 수 있다. 부모박스의 세로넓이모를때 특히 50%쓰면 됩니다 */
margin-top:-50px;
}
.gallery > span:last-child { /*last-child는 span에서의 마지막아이를 의미*/
right: 50px;
top:50%;
margin-top:-50px; /*top을 50퍼센트를 줬으면 마진탑을 원래크기의 반을 빼줘야합니다 */
}
html
<div class="gallery">
<span>◀</span>
<span>▶</span>
</div>
css, html, display, span, first-child, last-child