웹 페이지를 보면 텍스트 콘텐츠와 이미지의 조합을 볼 수 있습니다. 이 두 요소는 웹 사이트의 성공에 필수적인 요소입니다. 텍스트 콘텐츠는 사이트 방문자가 읽고 검색 엔진이 순위 알고리즘의 일부로 사용할 것입니다. 이미지는 사이트에 시각적 인 관심을 불러 일으키고 텍스트 내용을 강조합니다.
웹 사이트에 텍스트와 이미지를 추가하는 것은 쉽습니다. 텍스트는 단락, 제목 및 목록과 같은 표준 HTML 태그로 추가되는 반면 이미지는 요소. 그러나 웹 페이지에 이미지를 추가 한 후에는 이미지가 HTML 코드에 추가 된 기본 방법 인 브라우저 아래에 정렬되는 기본 방법 인 이미지 흐름 옆에 정렬되도록하는 것이 좋습니다. 기술적으로 CSS (권장)를 사용하거나 HTML에 직접 시각적 지침을 추가하는 방법 (권장하지 않음, 웹 사이트 스타일 및 구조의 분리를 유지하려는 경우) 등 두 가지 방법이 있습니다.
CSS 사용
페이지의 텍스트 및 이미지 레이아웃을 변경하는 방법과 브라우저에서 비주얼 스타일을 표시하는 올바른 방법은 CSS를 사용하는 것입니다. 우리가 페이지의 시각적 변화 (이미지 주위의 텍스트 흐름)에 대해 이야기하고 있기 때문에 이것이 캐스 캐이 딩 스타일 시트의 영역이라는 것을 기억하십시오.
-
먼저 웹 페이지에 이미지를 추가하십시오. 해당 HTML에서 모든 시각적 특성 (예 : 너비 및 높이 값)을 제외해야합니다. 특히 이미지 크기가 브라우저에 따라 달라지는 반응 형 웹 사이트의 경우 중요합니다. Adobe Dreamweaver와 같은 특정 소프트웨어는 해당 도구에 삽입 된 이미지에 폭과 높이 정보를 추가하므로 HTML 코드에서이 정보를 제거해야합니다. 그러나 적절한 대체 텍스트를 포함시켜야합니다. 다음은 HTML 코드의 예입니다.
-
스타일을 지정하기 위해 이미지에 클래스를 추가 할 수도 있습니다. 이 클래스 값은 CSS 파일에서 사용할 것입니다. 우리가 여기에 사용하는 값은 임의적인데,이 특정 스타일의 경우 이미지의 정렬 방식에 따라 "왼쪽"또는 "오른쪽"값을 사용하는 경향이 있습니다. 우리는 단순한 구문이 잘 작동하고 장래에 사이트를 관리해야하는 다른 사람들이 쉽게 이해할 수 있다고 생각하지만 원하는 모든 클래스 값을 제공 할 수 있습니다.
그 자체로이 클래스 값은 아무 것도하지 않습니다. 이미지가 텍스트 왼쪽에 자동으로 정렬되지 않습니다. 이를 위해 이제 CSS 파일을 사용해야합니다.
-
스타일 시트에서 다음 스타일을 추가 할 수 있습니다.
.왼쪽 {
왼쪽으로 뜨다;
패딩 : 0 20px 20px 0;
}
여기서 한 것은 CSS 플로트 속성을 사용하는 것입니다.이 프로퍼티는 정상적인 문서 흐름 (이미지가 정상적으로 표시되고 그 아래에 텍스트가 정렬되는 방식)에서 이미지를 가져오고 해당 이미지를 컨테이너의 왼쪽에 정렬합니다 . HTML 마크 업에서 뒤에 오는 텍스트는 이제 둘러 싸야합니다. 또한이 텍스트가 이미지와 직접적으로 겹치지 않도록 패딩 값을 일부 추가했습니다. 대신, 그것은 페이지의 디자인에서 시각적으로 매력적인 몇 가지 좋은 간격을 갖게 될 것입니다. 패딩을위한 CSS 속기에서는 이미지의 상단과 좌측에 0 개의 값을 추가하고 왼쪽과 아래에는 20 개의 픽셀을 추가했습니다. 왼쪽 정렬 이미지의 오른쪽면에 여백을 추가해야합니다. 오른쪽 정렬 된 이미지 (우리는 잠깐 살펴볼 것입니다)는 왼쪽에 패딩을 적용 할 것입니다.
-
브라우저에서 웹 페이지를 보면 이미지가 페이지의 왼쪽에 정렬되고 텍스트가 페이지의 주변을 멋지게 감싸는 것을 볼 수 있습니다. 이것을 말하기위한 또 다른 방법은 이미지가 "왼쪽으로 뜬다"는 것입니다.
-
이 이미지가 오른쪽으로 정렬되도록 변경하려면 (이 기사와 함께 제공되는 사진 예제와 같이) 간단 할 것입니다. 먼저 클래스 값 "left"에 대해 CSS에 추가 한 스타일 외에도 오른쪽 맞춤을위한 스타일을 추가해야합니다. 다음과 같이 보입니다.
.권리 {
float : 오른쪽;
패딩 : 0 0 20px 20px;
}
이것이 우리가 작성한 첫 번째 CSS와 거의 동일하다는 것을 알 수 있습니다. 유일한 차이점은 우리가 사용하는 "float"속성과 패딩 값에 대해 사용하는 값 (오른쪽 대신 이미지의 왼쪽에 일부를 추가 함)입니다.
-
마지막으로 HTML에서 이미지의 클래스 값을 "left"에서 "right"로 변경합니다.
-
지금 브라우저에서 페이지를보고 이미지가 오른쪽으로 정렬되어야하며 텍스트가 깔끔하게 둘러 싸야합니다. 우리는 웹 페이지를 생성 할 때 필요에 따라 이러한 비주얼 스타일을 사용할 수 있도록 모든 스타일 시트에 "left"와 "right"두 스타일을 모두 추가하는 경향이 있습니다. 이 두 가지 스타일은 멋지고 재사용 가능한 기능으로 바뀝니다. 이미지 주위에 텍스트 줄 바꿈을 사용하여 이미지 스타일을 지정해야 할 때마다 사용할 수 있습니다.
CSS 대신 HTML 사용하기 (왜 이것을하면 안되나요?)
HTML을 사용하여 이미지 주위에 텍스트를 줄 수는 있지만 웹 표준에서는 CSS (위에서 제시 한 단계)를 사용하여 구조 (HTML)와 스타일 (CSS)을 분리 할 수 있습니다. 일부 장치 및 레이아웃의 경우 해당 텍스트 하지 않을 수도있다 이미지 주위를 흐를 필요가 있습니다. 작은 화면의 경우 반응 형 웹 사이트의 레이아웃을 사용하려면 텍스트가 실제로 이미지 아래에 정렬되고 이미지가 화면의 전체 너비에 맞게 펼쳐져 있어야합니다. 스타일이 HTML 마크 업과 다른 경우 미디어 쿼리를 통해 쉽게 수행 할 수 있습니다.방문자와 화면에 이미지와 텍스트가 다르게 나타나는 오늘날의 다중 기기 환경에서 이러한 분리는 웹 페이지의 장기적인 성공과 관리에 필수적입니다.
