[HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align)

 

이미지 정렬1(#align)하는 방법을 알아보려고 한다. 

 

 

1.align 속성

align 속성-이미지를 나타내는 <img> 태그는 인라인 요소임

그래서 이미지 앞뒤로 줄 바꿈이 되지 않고 주변 텍스트에 이어져서 같은 줄에 보임

결국 이미지는 주변 텍스트 기준으로 정렬 됨

예) {이미지정렬+이미지+이미지정렬} 순서로 코드 짜려고 함

2.수직 방향(vertical align)

​수직 방향(vertical align)은 위(top) ,아래(bottom), 중간(middle) 가능

디폴트는 아래 이고 수평 방향 순서는 코드 순서대로 이미지정렬(글) 다음에 이미지가 나오고, 이미지 다음에 이미지정렬(글)이어짐

3.수평 방향(horizontal align)

수평 정렬과 수직 정렬의 차이점  - 제한 사항이 있음

예) {이미지정렬 -> 이미지 -> 이미지정렬} 순서를 어겨야 하기 때문

특히 가운데 정렬은 이미지를 중심으로 텍스트가 중간에서 끊어지기 때문에 이미지 위치를 정하기 쉽지않음

​

그래서 수평 방향(horizontal align, css에서는 float라고 표현)으로는 왼쪽(left), 오른쪽(right) 정렬만 가능

즉, 이미지 align은 가운데정렬(center) 없음 text-align의 center와 다름

왼쪽 정렬은 이미지가 시작되는 줄에서 무조건 이미지를 텍스트보다 왼쪽에 놓는 것이고, 오른쪽 정렬은 이미지를 텍스트보다 오른쪽에 놓는 것.  왼쪽,오른쪽 정렬은 여러 줄의 텍스트를 읽기 편하도록 수직 방향으로는 위쪽 맞춤됨

 

4.align적용 연습

 

 

 

코드입력/저장.html 저장

 

 

저장한 파일 더블클릭/웹브라우저에서 문서 확인

이미지는 이미지정렬과 이미지정렬 사이에 있으면서 아래쪽 맞춤됨

 

 

 

메모장에 코드추가 <img> 시작 태그 안에 align="right" 추가하여 이미지를 오른쪽 정렬 시킴/ 저장

/저장한 파일 더블클릭

 

 

웹브라우저에서 문서 확인(align 속성값-right 외에 left/middle/top으로 적용가능)

 

 

 

운명은 의지를 가진 자는 앞에서 인도하고,
주저하는 자는 질질 끌고 간다.

-세네카-