html 이미지 위치
■ 홈페이지에 필수적으로 들어가는 게 이미지 파일인데요. 이미지의 위치를 내가 원하는 곳으로 설정하는 방법을 알아보겠습니다. 이미지의 위치를 지정하는 방법은 여러 가지가 있지만 저는 position 속성을 이용하거든요. 참고한다는 생각으로 보시고 이용해보세요. 혹시 position 속성에 대해서 좀 더 알아보실 분들은 다음 글 참고하시구요.^^
▶ CSS3 position 속성 : http://godvow.tistory.com/39
본문에 이미지 파일을 하나 넣어서 그림의 위치를 원하는 곳으로 마음대로 바꾸는 방법을 알아볼게요.
■ <body> 태그 안에 그림을 한 장 넣었습니다. 따로 위치는 지정해주지 않았기 때문에 아래 그림처럼 왼쪽 위 모서리를 기준으로 위치하게 되겠죠?
■ CSS에서 position 속성을 적용해서 이미지의 위치를 변경해볼게요.
■ 스타일에 추가할 속성도 간단합니다. 먼저 강제로 위치를 설정하는 position 속성인 absolute를 이용했구요. 왼쪽에서의 거리와 위쪽에서의 거리를 지정해줬습니다. 앞에서 링크 걸어놓은 position 관련 글 보시면 좀 더 다양하게 위치 지정할 수 있을 거에요.^^
■ 이렇게 왼쪽과 위쪽에서 지정한 거리만큼 떨어져서 그림이 위치하게 됩니다.
html에서 이미지의 위치를 지정하는 방법 중에서 position 속성을 이용하는 방법을 알아봤습니다. 참고 해서 사용해보세요. 수고하셨습니다.
