align 썸네일형 리스트형 [HTML/CSS 기초 강의] ⑱ 이미지 정렬1(#align) 이미지 정렬1(#align)하는 방법을 알아보려고 한다. 1.align 속성 align 속성-이미지를 나타내는 태그는 인라인 요소임 그래서 이미지 앞뒤로 줄 바꿈이 되지 않고 주변 텍스트에 이어져서 같은 줄에 보임 결국 이미지는 주변 텍스트 기준으로 정렬 됨 예) {이미지정렬+이미지+이미지정렬} 순서로 코드 짜려고 함 2.수직 방향(vertical align) 수직 방향(vertical align)은 위(top) ,아래(bottom), 중간(middle) 가능 디폴트는 아래 이고 수평 방향 순서는 코드 순서대로 이미지정렬(글) 다음에 이미지가 나오고, 이미지 다음에 이미지정렬(글)이어짐 3.수평 방향(horizontal align) 수평 정렬과 수직 정렬의 차이점 - 제한 사항이 있음 예) {이미지정렬.. 더보기 [HTML/CSS 기초 강의] ⑲ 이미지 정렬2(#vertical-ailgn#float) 이미지 정렬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. 이미지 수직 정렬 연습 메.. 더보기 이전 1 다음
