<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css"></style>
</HEAD>
<BODY>
<div style="position:relative;background:red;left:100px;top:200px">relative</div>
<div style="position:absolute;background:blue;left:100px;top:200px">absolute</div>
</BODY>
</HTML>
실행해보시면 아시겠지만...
또한 div를 span으로 바꾸게 되면 위치는 변하지 않지만
relative속성의 레이어가 배경색이 라인전체에서 부분으로 바뀌게 됩니다.
첫째, absolute 와 relative의 차이점
둘째, div와 span의 차이점
포지션에 대한 속성에서 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>
이글에만 색상
위의 경우는 줄서식이므로 태그안에 쓰인 글에만 적용 됩니다.
DIV 를 불럭(Block) 태그, SPAN 을 인라인(Inline) 태그라고 하죠
margin과 padding을 구별 --------------------------------
일반적으로 margin과 padding을 구별하기가 힘듭니다.
간단한 예제소스를 만들어 연습하시면 이해가 쉬울것 같네요
아래에 비교 예제를 올렸습니다.
margin : 특정 영역(box)의 바깥쪽 여백을 의미
padding : 특정 영역(box)의 안쪽 여백을 의미
margin은 보통 화면에서 여백을 주거나 없앨 경우 사용합니다.
html파일에 아무테그 없이 1234라는 글을 쳐보시고 실행 해보세요.
그러면 특이하게 1234라는 글자 상단부분과 좌측부분에 약간의 공백이 생깁니다.
이것을 홈페이지를 만들때 배경이미지를 넣게되면 하얀 공백이 생기는 문제가 발생합니다.
이럴때 body테그에 상단과 좌측에 margin값에 0을 주면 공백을 없앨 수 있습니다.
padding은 주로 테이블 안에서 사용합니다.
테이블내에서 특정 셀안에 있는 내용물이 너무 좌측이나 상단에 붙었을경우 값을 어느정도 주어 해당 픽셀만큼 여백을 주는 것입니다.
참고로 테이블테그에서는 margin이란 속성값은 사용하지 않습니다.
굳이 두 테그의 차이가 뭐냐고 말한다면 쓰이는 곳이 다르다고 말할 수 있습니다.
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
| css에서 잘못알고있는 width (3) | 2009.06.10 |
|---|---|
| CSS 라운드 (0) | 2008.11.21 |
| id와 class의 구분 (0) | 2008.10.26 |
| IE6에서 position:fixed 구현하기 (0) | 2008.10.24 |
| HTML 특수문자표, ( 숫자표현,문자표현 ) 코드표 (3) | 2008.10.21 |