HTML로 이미지위치를 오른쪽, 왼쪽 정렬하기

 

이전에 텍스트와 그림을 가운데 정렬하는 방법을

포스팅 한적이 있습니다.

 

http://chorong77.tistory.com/18

 

이번에는 양사이드로 정렬시키는 방법을 알아보도록 하겠습니다.

지금 다시 보니 이전의 포스팅과 합쳐서 하나로 하는 것이

더 좋았는데 이렇게 따로 글을 올리게 되었네요.

 

아무튼 중간으로 옮기는 방법은 위의 페이지를 참고해주십시오.

 

1. HTML을 이용하여 텍스트, 이미치를 왼쪽 정렬하기

 

텍스트의 경우

<p align="left">문자</p>

 

 

이미지의 경우

<p align="left"><img src="사진 주소">

 

별로 어렵지 않죠?

금방 외울 수도 있을 것 같지만,

굳이 외울 필요도 없는 태그입니다.

 

필요하실 때마다 검색해서 사용하시면 되겠습니다.ㅋㅋ

 

2. HTML을 이용하여 텍스트, 이미치를 오른쪽 정렬하기

 

텍스트의 경우

<p align="right">문자</p>

 

이미지의 경우

<p align="right"><img src="사진 주소">

 

위와 바뀐 것은 'left'가 들어갈 부분에 'right'가 들어갔다는 것입니다.

만약 가운데로 하고 싶다면,

이 부분을 'center'로 바꾸어주시면 되겠습니다.

 

3. 사진에 테두리 입히기

 

<p align="center"><img src="사진 주소" border="1">

 

일단 사진의 위치는 중간으로 두었습니다.

'border=1'는 테두리의 굵기가 1이라는 뜻입니다.

테두리를 없애도 싶다면 이 부분을 0으로 체크해주면 되겠습니다.

더 굵게 하고 싶다면 숫자를 올려주면 되겠죠.