HTML의 기초. 태그부터 차이까지! (2)

지난 포스팅엔 a태그 까지 작성을 했었네요. 오늘은 이어서 관련 태그들을 포스팅 하도록 하겠습니다. 

이미지 태그

<img src="경로" alt="설명" />

이미지 태그 사용법 입니다. 

1. 경로

절대경로

절대 경로는 이름 그대로 변하지 않는 절대적인 경로 입니다. 이것은 a 태그 경로와도 똑같은데요. 

<img src="http://web-atelier.tistory.com/images/image1.jpg" alt="" /> 

이렇게 사용하는 것이죠.

이 경로는 불변이기 때문에 작성되고 있는 페이지가 어디로 이동이 되든지 링크가 변할 일은 없습니다. 

상대경로

상대경로는 조금 이해가 필요한데요. 실제 링크가 사용되어지고 있는 위치에 따라 변하게됩니다.

<img src="../images/image1.jpg" alt=""/>

이렇습니다. 좀 더 간단하죠? 이 경로에 대해 설명을 드리자면..

현재 이 링크가 작성되고 있는 페이지에서 "../"를 이용해 상위 폴더로 나온다음 "/images"를 이용해 images폴더로 들어갑니다. 그리고 그 안쪽에 있는 "image1.jpg" 파일을 불러오는 것이죠.

그렇기 때문에 이 링크를 작성하고 있는 페이지가 한 폴더 더 아래로 내려가거나 올라간다면 경로가 틀어지게 됩니다. 파일들을 이동시킬때 주의해야 하는 부분 입니다.  

2.이미지 포맷

JPG, PNG, GIF, SVG

주로 네가지가 많이 사용됩니다. 

JPG의 경우 이미지 사이즈가 클때, 그리고 색감을 많이 사용하거나 고품질의 이미지를 이욯할 때 주로 사용됩니다. 용량도 그만큼 크겠죠? ㅎㅎ

PNG의 경우는 보통 아이콘에 주로 사용하는데요. 그 이유는 바로 transparent! 투명도 때문이죠. 아이콘 이미지를 gif로 사용하게 되면 주변의 흰 배경색까지 가져오기 때문인데요. 정확하게 아이콘만 표현하고 빈 공간은 배경색을 받아오기 위해서 투명도를 살린 png 파일을 많이 사용하게 됩니다.

gif는 작은 사이즈의 이미지에 주로 쓰입니다. 또는 색감이 적은 이미지에 주로 사용하는데요, 사각 배너나 아이콘에 주로 사용해요. 표현하는 색감이 적기 때문에 그만큼 용량도 작고, 가볍죠. 

svg는 최근 떠오르는 이미지 포맷이에요. 웹에서도 벡터 이미지를 사용할 수 있도록 해줍니다. 사이즈가 아무리 커져도 깨지지 않는다니! 얼마나 좋겠어요? 아이콘 등에 주로 사용하구요, 고정 사이즈의 사이트보다는 반응형 웹에 주로 사용하는 편이에요. 화면이 커지면 아이콘도 커지다 보니 svg를 사용하면 깨질 일이 없으니까요. 

최근 레티나 디스플레이가 많아지면서 아이콘 사이즈를 두배로 만들거나 전용 이미지를 만들어야 했는데요, svg 하나라면 고생 할 일이 없겠죠? 

강추 입니다.

3. 이미지 정렬

<img src="경로" align="정렬" alt="설명" />

이렇게 사용합니다. 

저기 align의 부분에 정렬을 사용하는 것인데요. left, right, top, middle, bottom 이정도 있겠네요. 추가로 vspace, hspace가 있습니다.

left와 right는 이미지의 위치 정렬을 정해주는것이에요. 본문의 왼쪽 혹은 오른쪽에 들어가게 해줘요. 예를 들면

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla ariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum

left를 사용하면 이렇게 됩니다.

top, middle, bottom의 예를 들어볼까요?

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

middle의 사용 모습입니다. 

vspce와 hspace의 사용법은 

<img src="경로" align="정렬" alt="설명" vspac="5" hspace="5" />

이렇게 되겠네요. 이것은 이미지의 여백을 설정해 줍니다. 이미지와 텍스트가 딱 붙어있으면 답답하잖아요? 

오늘은 이미지 태그를 적어보았습니다. 한번에 여러 태그들을 적어내리기가 생각보단 힘이 드네요. 차례차례 관련 태그들을 적어보도록 할게요.