HTML 문서 (예 : 웹 페이지)의 블록 수준 요소가 순차적으로 표시됩니다. 페이지를보다 매력적으로 보이게하거나 유용성을 높이기 위해 순서를 수정하려면 이미지를 포함하여 블록을 둘러싸면 해당 페이지의 텍스트가 주위로 흐르도록해야합니다.
웹 용어로이 효과는 이미지를 "떠 다니는"것으로 알려져 있습니다. 이 스타일은 "float"에 대한 CSS 속성으로 구현됩니다. 이 속성을 사용하면 텍스트가 왼쪽 정렬 이미지 주위를 오른쪽으로 흐르게 할 수 있습니다. 또는 왼쪽에 오른쪽 정렬 이미지 주위.
HTML로 시작하십시오.
당신이해야 할 첫 번째 일은 작업 할 몇 가지 HTML입니다. 예를 들어 텍스트의 단락을 작성하고 단락의 시작 부분 (텍스트 전, 시작 후)에 이미지를 추가합니다
꼬리표). 다음은 HTML 마크 업의 모양입니다.
단락의 텍스트는 여기에 있습니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다.
이미지는 HTML의 블록 수준 요소이기 때문에 기본적으로 Google 웹 페이지는 텍스트 위에 이미지와 함께 표시됩니다. 즉, 기본적으로 브라우저는 이미지 요소 앞뒤에 줄 바꿈을 표시합니다. 우리는 CSS로 전환하여이 기본 모양을 바꿀 것입니다. 그러나 먼저 이미지 요소에 클래스 값을 추가합니다. 이 클래스는 나중에 CSS에서 사용할 "후크"역할을합니다.
단락의 텍스트는 여기에 있습니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다.
이 클래스의 "왼쪽"은 아무 것도하지 않습니다. 원하는 스타일을 얻으려면 CSS를 사용해야합니다.
CSS 스타일
우리의 HTML ( "left"클래스 속성 포함)을 사용하여 이제 CSS를 사용할 수 있습니다. 우리는 스타일 시트에 이미지를 떠 다니는 규칙을 추가 할 것이고, 이미지 옆에 약간의 패딩을 덧붙여 궁극적으로 이미지 주위를 둘러 쌀 텍스트가 너무 밀접하게 얽히지 않도록 할 것입니다. 다음은 작성할 수있는 CSS입니다.
.왼쪽 { 왼쪽으로 뜨다; 패딩 : 0 20px 20px 0;}
이 스타일은 이미지를 왼쪽으로 떠서 약간의 패딩 (CSS 약식 사용)을 이미지의 오른쪽과 아래쪽에 추가합니다. 브라우저에서이 HTML이 포함 된 페이지를 검토하면 이미지가 왼쪽으로 정렬되고 단락의 텍스트가 오른쪽 사이에 적절한 간격으로 표시됩니다. 우리가 사용한 "left"의 클래스 값은 임의적입니다. "왼쪽"이라는 용어는 아무 것도하지 않기 때문에 아무 것도 호출 할 수 없습니다. 어떤 용어를 사용하든 관계없이 HTML에서 class 속성을 가져야합니다.이 속성은 실제 시각적 인 변경을 요구하는 실제 CSS 스타일로 작동합니다. 이미지 요소에 클래스 속성을 부여한 다음 요소를 떠 다니는 일반적인 CSS 스타일을 사용하는 이러한 접근 방식은이 "왼쪽 정렬 된 이미지"모양을 구현할 수있는 유일한 방법 일뿐입니다. 이미지의 클래스 값을 가져 와서 더 구체적인 선택기를 작성하여 CSS로 스타일을 지정할 수도 있습니다. 예를 들어, 이미지가 "main-content"클래스 값을 가진 디비전 내부에있는 예제를 살펴 보겠습니다. 이 이미지의 스타일을 지정하려면 다음 CSS를 작성하면됩니다. .main-content img { 왼쪽으로 뜨다; 패딩 : 0 20px 20px 0;}
이 시나리오에서는 이전처럼 이미지가 왼쪽으로 정렬되어 텍스트가 왼쪽으로 정렬되지만 마크 업에 클래스 값을 추가 할 필요가 없습니다. 이를 통해 규모가 작은 HTML 파일을 만들면 관리가 쉽고 성능을 향상시킬 수 있습니다. 마지막으로 스타일을 HTML 마크 업에 직접 추가 할 수도 있습니다.
이 방법을 "인라인 스타일"이라고합니다. 구조적 마크 업과 요소의 스타일을 결합하므로 바람직하지 않습니다. 웹 모범 사례는 페이지의 스타일과 구조가 분리되어 있어야한다고 규정합니다. 이러한 구분은 페이지 레이아웃을 변경하고 반응 형 웹 사이트에서 다양한 화면 크기와 장치를 찾아야 할 때 특히 유용합니다. 페이지 스타일이 HTML에 얽혀 있으면 다른 화면에 맞게 사이트의 모양을 조정하는 미디어 쿼리를 작성하는 것이 훨씬 더 어려워집니다. 이러한 스타일을 달성하기위한 대안 적 방법
단락의 텍스트는 여기에 있습니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다. 인라인 스타일 피하기
단락의 텍스트는 여기에 있습니다. 이 예에서는 헤드 샷 사진 이미지가 있으므로이 텍스트는 헤드 샷이있는 사람에 대한 것입니다.
