이미지 정렬2(#vertical-ailgn#float)하는 방법을 알아보려고 한다.
CSS를 이용하여 이미지 수직/수평 정렬 방법
이미지의 align은 수직과 수평을 통틀어서 하나의 속성명 'align'을 사용
CSS에서는 수직 정렬과 수평 정렬할 때 사용하는 속성명이 다름
1. 수직 정렬 속성명: vertical-align
vertical-align의 속성 값- top위쪽 맞춤/middle중간 맞춤/bottom아래쪽 맞춤
vertical-align의 디폴트 값-baseline 아래쪽 맞춤과 비슷
2. 수평 정렬 속성명: float
float의 의미: '떠다니다'라는 뜻-텍스트 사이에서 이미지를 왼쪽이나 오른쪽으로 보냄
속성 값은 left/right/ 가운데 정렬 없음
3. 이미지 수직 정렬 연습
메모장 열기/ 코드 입력(이미지는 cdn.pixababy.com에서 우클릭/주소 복사해서 붙여 넣기)/저장/작업명. html 저장
웹 브라우저에서 문서를 확인
위와 같이 코드를 수정/align="right"를 삭제하고 style="vertical-align: middle;"을 추가
CSS inline 방식을 써서 이미지를 (수직 방향) 중간 맞춤한 것임
웹 브라우저에서 문서 확인
(이미지는 이미지 정렬 글자 사이에서 수직 방향으로 중간 맞춤이 되어 있음)
4. 이미지 수평 정렬 연습
아래와 같이 코드 수정
img> 태그 안의 style="vertical-align: middle;"을 삭제/ <head> 태그 안 <style> 태그 사용
/<style> 태그 안에 float : left; 추가
내부 스타일 시트 방식으로 이미지를 (수평 방향) 왼쪽 정렬함
웹 브라우저에서 문서를 확인
(이미지는 코드에서 이미지가 있는 줄을 기준으로 왼쪽 정렬되어 있음)
* 웹 브라우저에 보이는 결과물은 <img> 태그에서 align 속성을 쓴 것과 css(수직/수평에 따라 속성명을 바꿔야 하는 CSS 불편함도 있음)로 vertical-align/float 속성을 쓴 것의 차이가 없음 그러나 실제 웹 사이트를 구동 시, 스타일은 CSS 코드로 작성하는 것이 수정, 관리에서 훨씬 편리함
갖지 못한 것에 한탄하지 않고
가진 것을 기뻐하는 자가 현명한 사람이다.
-에픽테토스-
'일과공부' 카테고리의 다른 글
| [HTML/CSS 기초 강의] ⑳ 이미지 정렬3(#div) (0) | 2021.08.28 |
|---|---|
| [HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) (0) | 2021.08.28 |
| [HTML/CSS 기초 강의] ㉑ 이미지 가운데 정렬 방법들 (1) | 2021.08.26 |
| [프리미어 기초] ④ 타이핑 자막효과(#타이핑#프리미어자막) (0) | 2021.08.26 |
| [프리미어 기초] ③ 무료오디오 가져오기 (#사운드클라우드#스튜디오) (0) | 2021.08.25 |
