코린이 잰이

Html로 레이아웃을 꾸밀 때 필연적으로 사용하게 되는 태그가 있습니다.

바로 <div>와 <span>태그 입니다.

이 두태그는 비슷하면서도 다른데 차이점을 알아보겠습니다.

예제

가로폭을 전부차지하는 div와 달리 태그안의 내용까지만 차지하는 span

크기조정가능한 div(상자안에 있어요!!) 와 불가능한 span(문장단위로 지정이 되요!!)

필연적인 줄바꿈div와 줄바꿈이 없는 span

절대경로

어떠한 웹 페이지나 파일이 가지고 있는 고유한 경로를 절대경로라고 합니다.

웹페이지에서 이미지의 URL을 가지고 오거나 내 컴퓨터 안의 이미지 경로를 가져올 때 절대경로를 사용하는 것 입니다.

<img src="http;//www......../image.jpg"> -웹페이지 이미지 주소를 불러오는경우

<img src="C:\user\...\image.jpg"> -내 컴퓨터 안의 이미지 경로를 불러오는 경우

위의 방식을 절대경로를 이용한 방식이라고 합니다.

그러나 절대경로를 이용하면 웹페이지의 이미지가 사라지거나 내컴퓨터에서 만든 파일을

다른 웹서버로 올릴 때에는 다시 고쳐줘야 하는 불편함이 있습니다.

상대경로

작업중인 공간을 기준으로 상대적인 위치를 가리키는 경로를 상대경로라고 합니다.

이미지의 파일이 같은 폴더에 저장되어있을 경우 파일명만 적어주면되고

하위 폴더에 저장되어 있는 경우에는 "폴더명/이미지파일" 처럼 사용하면되고

상위 폴더에 저장되어 있는 경우에는 "../폴더명/이미지파일" 처럼 사용하시면 됩니다.

<img src="image.jpg"> -같은 폴더안의 image사용

<img src="file/image.jpg"> -하위폴더 file안의 image 사용

<img src="../file/image.jpg"> -상위폴더 file안의 image 사용