align 속성을 이용하여 이미지,문자 정렬하기
HTML쉽게 따라하기 - align 속성을 이용하여 이미지, 문자 정렬하기
저번 시간에 이미지를 넣는 방법에 대해 알아보았다. 이미지를 넣었으면 이제 자신이 원하는 위치로 정렬을 해야 하는데, 이미지를 정렬하기 위해서 align 속성을 사용하며 상하좌우로 이미지를 정렬할 수 있다. 또한 이미지뿐만이 아니라 문자와 이미지를 함께 정렬할 수도 있다. 다음은 align 속성을 이용해 이미지를 정렬하는 각 속성이다.
ALIGN = "TOP / BOTTOM / MIDDLE / LEFT / RIGHT / TEXTTOP / ABSMIDDLE / BASELINE / ABSBOTTOM "
|
1) 이미지 중심 정렬 |
이미지 중심 정렬은 이미지를 중심으로 해서 문자를 정렬하는 방식이다. 각 속성에 대해 살펴보자.
TOP : 이미지의 위쪽에 문자가 나타난다.
BOTTOM : 이미지의 아래쪽에 문자가 나타난다.
MIDDLE : 이미지의 중간에 문자가 나타난다.
다음은 이미지의 위치와 문자를 이용한 정렬 예이다.
예시1>----------------------------------------------------------------
<html>
<head>
<title> 안녕하세요 </title>
</head>
<body>
<img src="pig.png" align=top>안녕하세요?<p>
<img src="pig.png" align=middle>안녕하세요?<p>
<img src="pig.png" align=bottom>안녕하세요?
</body>
</html>
---------------------------------------------------------------------------
[참고 사항] 1. html언어는 대문자를 쓰든, 소문자를 쓰든 관계없다. 그러나 보통은 보기에 편한 소문자를 쓴다.
2. 위 예시에서 pig.png는 이미지 파일 이름인데 실제적으로는 이미지 파일 이름만 들어가는 것이 아니라 이미지 파일이 올려져
있는 이미지 파일 주소를 입력해야 한다. 만일 잘 이해가 안되면 아래 링크되어 있는 이미지 올리기를 살펴보기 바란다.
[IT & WEB/HTML 쉽게 따라하기] - HTML언어 쉽게 따라하기 - 이미지 넣는 태그
위 예시대로 메모장에 작성하여 HTML확장자로 저장후 실행을 시키면 아래와 같은 실행창이 뜬다.
TEXTTOP : 이미지와 문자를 정렬하는데 가장 높은 글자를 기준으로 이미지가 정렬되는 것을 만한다.
ABSMIDDLE : MIDDLE 속성과 같이 이미지의 가운데 문자가 정렬되는 것으로 그림의 가운데를 기준으로 정렬한다.
BASELINE : 이미지의 가장 아랫부분을 기준으로 문자를 정렬하는 속성이다.
ABSBOTTOM : 이미지의 아래쪽에서 현재 문단의 아래쪽을 기준으로 정렬한다.
다음은 <IMG>태그의 각 정렬 속성에 대해 알아보겠다. 위 태그를 적용한 예이다.
예시2>-----------------------------------------------------------------------------
<html>
<head>
<title> 돼지 저금통 </title>
</head>
<body>
<img src="pig.png" align=texttop>
유대인들은 자녀가 돌이 지나면
저금통에 저금하는 습관부터 들인다.
어려서 부터의 저축을 시작하는 것이다.
<p>
<img src="pig.png" align=absmiddle>
유대인들은 자녀가 돌이 지나면
저금통에 저금하는 습관부터 들인다.
어려서 부터의 저축을 시작하는 것이다.
<p>
<img src="pig.png" align=baseline>
유대인들은 자녀가 돌이 지나면
저금통에 저금하는 습관부터 들인다.
어려서 부터의 저축을 시작하는 것이다.
<p>
<img src="pig.png" align=absbottom>
유대인들은 자녀가 돌이 지나면
저금통에 저금하는 습관부터 들인다.
어려서 부터의 저축을 시작하는 것이다.
</body>
</html>
----------------------------------------------------------------------------------------
위의 예제를 실행해 보면 아래와 같이 나온다.
2) 글자 중심 정렬
글자 중심 정렬은 글자를 중심으로 해서 이미지를 정렬하는 방식이다. 이때 사용되는 각 속성에 대해 살펴보자.
LEFT : 문자를 기준으로 이미지가 왼쪽에 정렬되고 이때 문자는 이미지의 옆에 정렬된다.
RIGHT : 문자를 기준으로 이미지가 오른쪽에 정렬되고 이때 문자를 이미지의 옆에 정렬된다.
다음은 align 속성에서 left 값과 right값을 이용한 예이다.
예시3> -----------------------------------------------------------------------------
<html>
<head>
<title> 돼지 저금통 </title>
</head>
<body>
<img src="pig.png" align=left>저축 하세요?
<br><br><br><br><br>
<img src="pig.png" align=right>저축하세요?
</body>
</html>
-------------------------------------------------------------------------------------------
아래는 실행 화면이다.
이미지가 문자를 중심으로 왼쪽 혹은 오른쪽으로 정렬되어 있는 모습을 볼 수 있다.
오늘은 이미지와 글자의 정렬을 조정하는 aign 속성에 대해 알아보았다. 다음 시간엔 이미지에 툴팁을 나타내는 ALT 속성에 대해 알아 보겠다.
이 글을 공유합시다
