[HTML+CSS] 위치 속성

▷ 프로그램 개발시 요소 위치는 2가지 방법으로 함

 1. 절대 위치 좌표 : 요소의 X 좌표와 Y좌표를 설정하여 절대 위치를 지정

 2. 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정

 

1. position 속성

 

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

 

position 속성에 사용 가능한 키워드

 

키워드	설명
static	태그가 위에서 아래로 순서대로 배치
relative	초기 위치 상태에서 상하좌우로 위치 이동
absolute	절대 위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표를 설정

 

 

ex) 

 

 

2. 위치 속성과 관련된 공식 

 

1. position속성에 absolute 키워드를 적용하면 부모태그가 영역을 차지하지 않음 , 그래서 자손의 position속성에 absolute키워드 적용시 부모태그에 몇가지를 처리해야 문제가 해결됨.

 

이 문제 해결은

 -1.  " 자손의 position 속성에  absolute를 적용하면 부모는 height 속성을 사용함"

 -2.  " 자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드를 적용"

 

이런 방법을 통해서 앞서 언급된 문제점을 해결 할 수 있습니다.