이미지 정렬3(#div)하는 방법에 대해 알아보려고 한다.
1. <div> 태그
이미지 수직 정렬은 CSS의 vertical-align 속성 이용, 수평 정렬은 CSS의 float 속성 이용
수평 방향으로 가운데 정렬 불가능-이미지는 텍스트와 같은 inline 요소이기 때문
그러면 이미지를 가운데 정렬할 수 있는 방법은 없을까?
이미지를 가운데 정렬하기 위해서는 먼저 이미지를 블록 레벨 요소처럼 만들어야 함
정렬하려는 이미지가 있는 줄에는 다른 텍스트 없이 이미지만 있어야 한다는 뜻
이때! 사용할 수 있는 것이 <div> 태그
<div> 태그는 HTML 요소들을 블록 레벨 요소로 묶는 역할함
인라인 요소인 이미지를 <div> 태그로 감싸고, text-align 속성을 쓰면 이미지를 왼쪽/오른쪽/가운데 정렬할 수 있음
text-align 속성에서 text는 우리가 말하는 글자를 의미하는 좁은 의미의 text가 아니라 <div> 태그 안의 inline 요소를 뜻함
따라서 인라인 요소인 이미지도 text-align 속성으로 정렬시킬 수 있음
2. <div> 태그로 가운데 정렬하기
메모장 열기/코드 입력
<img> 태그를 <div>~</div> 태그로 감싸서 블록 레벨 요소로 만들기
<style> 태그 안의 img { float : left; }를삭제 후 div { text-align : center;} 추가
내부 스타일 시트 방식으로 <div> 태그 안의 인라인 요소인 이미지를 가운데 정렬한 것
(인라인 방식으로 <head>~</head> 부분 삭제 후 <div> 시작 태그 안에 style="text-align:center;"를 사용해도 됨)
파일/ 다른 이름으로 저장/저장한 파일을 더블 클릭/웹 브라우저에서 문서 확인
이미지가 있는 줄에는 이미지만 있고 가운데 정렬되어 있음
사랑하는 사람에게 할 수
있는 가장 나쁜 일은 바로 그들이
할 수 있고 해야 할 일을 대신해 주는 것이다.
-에이브러햄 링컨-
'일과공부' 카테고리의 다른 글
| [프리미어 기초 ] ⑤ 엔딩크레딧 자막만들기(#흘러가는 자막#엔딩크레딧) (0) | 2021.09.01 |
|---|---|
| [애프터이펙트 초급] ① 애니메이션기초(#포지션position#Motion Blur모션블러#이펙트) (0) | 2021.09.01 |
| [HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) (0) | 2021.08.28 |
| [HTML/CSS 기초 강의] ⑲ 이미지 정렬2(#vertical-ailgn#float) (0) | 2021.08.26 |
| [HTML/CSS 기초 강의] ㉑ 이미지 가운데 정렬 방법들 (1) | 2021.08.26 |
