관리 메뉴

KorSA

[ HTML/CSS ] 좌표로 레이아웃 설정 본문

Knowledge Wiki/HTML&CSS

[ HTML/CSS ] 좌표로 레이아웃 설정

Praiv. 2021. 12. 7. 10:19
320x100

1. 레이아웃을 좌표 속성으로도 배치 가능

position: relative;


    를 먼저 선언해야 함

.main-button {
    position: relative;
    top: 100px;
    left: 100px;
}


2. position: relative; 부여하면
    1) 좌표이동가능
    2) 공중에 뜸

3. position: static -> 좌표이동 X

4. position: fixed -> 현재 화면이 기준
    스크롤해도 화면에 고정하고 싶을 때 사용

5. position: absolute -> 내 부모 중 postion: relative 속성을 가진 태그가 기준
    가운데 정렬하려면

.main-button {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	width: 500px; // 적절하게 지정
}
728x90
728x90
Comments