[CSS] position 속성

 

프로그램을 개발할 때는 요소의 위치를 2가지 방법으로 설정합니다.

• 절대적 위치 좌표 : 요소의 X,Y 좌표를 설정해 지정
• 상대적 위치 좌표 : 요소를 입력한 순서대로 상대적 위치 지정 

 

HTML 페이지 같이 사용자가 다양한 화면 크기로 실행할 수 있을 때는, 상대적 위치 좌표를 사용합니다.

절대적 위치 좌표는 특정한 크기의 영역을 지정한 태그 내부에서만 사용합니다.

 

 

position 속성

• HTML 태그의 위치 설정 방법을 변경할 때는 position 속성 사용

static	태그가 위에서 아래 or 왼쪽에서 오른쪽 순서로 배치됨
relative	static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 위치를 이동
absolute	절대적 위치 좌표를 설정
fixed	화면을 기준으로 절대적 위치 좌표를 설정

 

모든 브라우저(ie, chrome, safari ...)의 출력 방식을 통일하려면 left, top 같은 속성을 함께 입력해야 함