라벨이 position인 게시물 표시

CSS HTML 태그 배치 방법 position 속성 정리

이미지
HTML 태그 위치 지정 top, right, bottom, left 속성 HTML 태그에서 기준이 되는 자리 위치에서 네 방향을 기준으로 원하는 위치로 태그 위치를 이동시킬 수 있으며, 단위로는 px 등을 지정하여 px 만큼 떨어진 위치에 지정하는 방식입니다. 속성 설명 top 태그 기준 위치로부터 위쪽으로 지정한 숫자 만큼 이동 right 태그 기준 위치로부터 오른쪽으로 지정한 숫자 만큼 이동 bottom 태그 기준 위치로부터 아래쪽로 지정한 숫자 만큼 이동 left 태그 기준 위치로부터 왼쪽으로 지정한 숫자 만큼 이동 HTML 태그 배치 방식 지정 postion 속성 position 속성을 사용하면 HTML 태그를 원하는 방식으로 배치할 수 있게 배치 방식을 변경할 수 있습니다.  원하는 위치에 고정시킨다던가 웹문서 흐름에서 벗어난 배치도 가능합니다. 속성값 설명 static 원래 문서 흐름 상 배치(기본값) relative 방향 위치 속성을 사용해 위치를 조절이 가능하다는 것을 제외하면 static과 동일한 기능 absolute relative로 지정한 상위 요소를 기준으로 자신의 위치를 지정 fixed 웹 브라우저를 기준으로 방향 위치 속성을 사용해 배치 결정. 위에서 설명한 top, right, bottom, left의 위치 속성을 사용하기 위해서는 position 속성 값을 static이 아닌 다른 속성값(relative, absolute, fixed)으로 지정한 후 원하는 방향의 속성을 사용해 지정해서 HTML태그의 위치를 변경 시킵니다. ``` ``` postion 및 방향 위치(top, right, bottom, left) 속성 예제들 이미지 위에 HTML 태그의 위치 변경 예제 HTML 태그 및 기본 CSS 작성 움직이려는 태그(h1)의 상위 요소 position : relative 속성 지정 움직이려는 태그 position : absolute 속성 지정 이동을 원하는 방향의 속성과 함께 거리만큼 속성값 지정   < style