프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] DIV 태그의 위치속성에서 relative와 absolute 차이

2011.04.15
포지션에 대한 속성에서 absolute와 relative를 보면


absolute(절대적 위치)

브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에

있다면 그 곳을 기준으로 합니다.

즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통해서

좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.


relative(상대적 위치)

객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를

기준으로 상대값을 정해 줍니다.

즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에

나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서

top, left, right, bottom을 이용해서 위치를 정할수 있습니다.



위에 질문 하신 소스에 보시면 relative를 먼저 사용 하셨는데요

두 태그를 바꿔서 해보시면 아실 겁니다.


그리고 div와 span태그는 서식에 관한 태그입니다.


div

div태그는 문단 서식에 관한 태그입니다. 그래서 스타일을

이용해서 크기를 잡지 않는다면 기본적으로 줄바꿈이 됩니다.

즉, 라인 전체에 적용이 되는 이유입니다.


span

span태그는 서식에 관한 태그이긴 하나 문단이 아닌 한줄에 관한 서식

입니다.

그래서 span태그에 스타일로 크기를 잡아주지 않으면 태그가 쓰인곳 안에

내용까지만 적용이 됩니다.


예를 들어

<div style="background-color: blue">줄전체에 색상</div>


줄전체에 색상


위 경우는 라인전체에 해당(문단을 적용 하기 위해 자동으로 줄바꿈)

<span style="background-color: blue">이글에만 색상</span>

이글에만 색상

위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.

출처 : 네이버 지식인

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3513
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3516
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2170
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20765
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 57
225 [소스] Window.scroll() 꿘쓰 2020.06.22 61
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 171
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 580
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 685
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 625
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 667