웹 페이지의 텍스트 왼쪽에 이미지를 띄우는 방법

CSS를 사용하여 이미지를 웹 페이지의 왼쪽에 정렬 Layout

오늘날 거의 모든 웹 페이지를 살펴 보면 대량의 텍스트와 이미지를 볼 수 있습니다. 페이지에 텍스트와 이미지를 추가하는 것은 매우 쉽습니다. 텍스트는 단락, 목록 및 표제와 같은 표준 HTML 태그를 사용하여 코딩되며 이미지는 요소를 사용하여 포함됩니다.

그 텍스트와 그 이미지를 잘 연동시키는 능력은 훌륭한 웹 디자이너를 차별화시키는 요소입니다! 텍스트와 이미지가 차례대로 나타나기를 원하지는 않습니다.이 블록 레벨 요소 는 기본적으로 레이아웃 방식입니다. 아니요. 궁극적으로 웹 사이트의 시각적 디자인이 될 텍스트와 이미지의 흐름을 일부 제어 할 수 있습니다.

페이지의 텍스트가 페이지 주위로 흐르고있는 동안 페이지의 왼쪽에 정렬 된 이미지를 갖는 것은 인쇄 된 디자인과 웹 페이지에 대한 일반적인 디자인 처리입니다. 웹 용어 로이 효과는 이미지를 떠 다니는 것으로 알려져 있습니다. 이 스타일은 "float"에 대한 CSS 속성으로 구현됩니다. 이 속성을 사용하면 텍스트가 왼쪽 정렬 이미지 주위를 오른쪽으로 흐르게 할 수 있습니다. (또는 왼쪽에 오른쪽 정렬 된 이미지 주변).이 시각 효과를 얻는 방법을 살펴 보겠습니다.

HTML로 시작

당신이해야 할 첫 번째 일은 작업 할 몇 가지 HTML입니다. 예를 들어 텍스트의 단락을 작성하고 단락 시작 부분 (텍스트 앞, 시작

태그 뒤)에 이미지를 추가합니다. 다음은 HTML 마크 업의 모양입니다.

단락의 텍스트가 여기에옵니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다.

기본적으로 Google 웹 페이지는 텍스트 위의 이미지와 함께 표시됩니다. 이것은 이미지가 HTML의 블록 수준 요소이기 때문입니다. 즉, 기본적으로 브라우저는 이미지 요소 앞뒤에 줄 바꿈을 표시합니다. 우리는 CSS로 전환하여이 기본 모양을 바꿀 것입니다. 그러나 먼저 이미지 요소에 클래스 값을 추가합니다. 이 클래스는 나중에 CSS에서 사용할 "후크"역할을합니다.

단락의 텍스트가 여기에옵니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다.

이 클래스의 "왼쪽"은 아무 것도하지 않습니다. 원하는 스타일을 얻으려면 CSS 를 사용해야합니다.

CSS 스타일

우리의 클래스 속성 인 "left"를 포함한 HTML을 사용하면 이제 CSS로 바뀔 수 있습니다. 우리는 스타일 시트 에 이미지를 떠 다니는 규칙을 추가 할 것이고, 이미지 옆에 약간의 패딩을 덧붙여 궁극적으로 이미지 주위를 둘러 쌀 텍스트가 너무 밀접하게 얽히지 않도록 할 것입니다. 다음은 작성할 수있는 CSS입니다.

.left {float : left; 패딩 : 0 20px 20px 0; }

이 스타일은 이미지를 왼쪽으로 떠서 약간의 패딩 (CSS 약식 사용)을 이미지의 오른쪽과 아래쪽에 추가합니다.

브라우저에서이 HTML이 포함 된 페이지를 검토하면 이미지가 왼쪽으로 정렬되고 단락의 텍스트가 오른쪽 사이에 적절한 간격으로 표시됩니다. 우리가 사용한 "left"의 클래스 값은 임의적입니다. "왼쪽"이라는 용어는 아무 것도하지 않기 때문에 아무 것도 호출 할 수 없습니다. HTML 을 보려는 시각적 인 변화를 지시하는 실제 CSS 스타일로 작동 하는 HTML에 클래스 속성 이 있어야합니다.

이러한 스타일을 달성하기위한 대안 적 방법

이미지 요소에 클래스 속성을 부여한 다음 요소를 떠 다니는 일반적인 CSS 스타일을 사용하는 이러한 접근 방식은이 "왼쪽 정렬 된 이미지"모양을 구현할 수있는 유일한 방법 일뿐입니다. 이미지의 클래스 값을 가져 와서 더 구체적인 선택기를 작성하여 CSS로 스타일을 지정할 수도 있습니다. 예를 들어 이미지가 클래스 값이 "main-content"인 디비전 내부에있는 예제를 살펴 보겠습니다.