본문 바로가기

CSS🔧/css 정렬공식 transform position3

CSS -transform: translate(-50%,-50%) 정렬공식 transform: translate(-50%,-50%) 정렬공식 컨텐츠의 요소가 항상 정 가운데로 가도록 지정 translate() 속성 translate (x, y) 함수의 요소를 왼쪽에서 부터 X거리 , 위쪽에서부터 Y 거리만큼 상대적으로 위치를 정하거나 이동 및 재배치 지정 translateX(수평만) 좌우(수평 방향)의 이동 거리 값을 지정 translateY(수직만) 함수는 상하(수직 방향)의 이동 거리 값을 지정 translateZ(z방향만) Z 방향의 거리로 이동을 지정 % 지정 불가 X (%사용해도 0) *주의할점 정렬공식을 사용했을때 이미지가 깨지는 현상이 있다. 모니터는 픽셀로 이루어져 있기때문에 %사용으로 픽셀에 맞지 않을 시 이미지가 깨져보임 기존 정렬공식 사용시 #header ... 2022. 9. 21.

css position 으로 띄우기+정렬공식 posiion : 레이어개념. 부모의 엘리먼트 (element:요소) 에 구애받지 않고 자유롭게 배치할 수 있다. 속성으로 relative(비교상의 상대적인) , absolute(비교대상이없는), fixed (고정된), 3가지가 있다 position: relative position: absolute; position: fixed; 부모의 기준점 or 제자리띄우기 (absolute의 기준이 된다.) 부모에게 기준점 적용 창 기준 / 기준변경 불가 창고정 레이어 기준안에서 다른 요소와 겹칠때 사용 블럭이 되며 크기는 내용만큼 줄어듬 좌표값 없음 > 자신이 기준 좌표값 있음 > 기준요소를 따라 위치가 변경 바깥 요소에 기준이 없을경우 창 기준 부모안의 모든 요소가 absolute일 경우 부모높이는 0, 높이.. 2022. 9. 13.

css button 슬라이드 버튼, 포지션 정렬공식 .container .main_slider .btn_wrap button:hover { background-position: 0 -60px; } 상단 슬라이드에 버튼을 넣어보자! 먼저 HTML로 section 구조안에 버튼을 지정해준다. (양쪽이므로 버튼을 div로 감쌀것!) 제목 글자는 '스크린기능' 접근성 때문에 꼭 넣어주어야한다. 이전슬라이드 다음슬라이드 자 이제 css로 가서 꾸며보자 .container .main_slider .btn_wrap { position: absolute; width: 1100px; left: 50%; margin-left: -550px; bottom: 178px; padding-left: 60px; } 메인 이미지가 position으로 떠있기 때문에 버튼도 positi.. 2022. 9. 12.

이전 1 다음

티스토리툴바