CSS float 속성을 사용하여 웹 페이지 레이아웃 디자인
CSS 속성은 레이아웃에서 매우 중요한 속성입니다. 웹 페이지 디자인은 원하는대로 정확하게 배치 할 수 있지만 사용하려면 사용 방법을 이해해야합니다.
스타일 시트에서 CSS float 속성은 다음과 같습니다.
.right {float : right; }
이것은 "right"의 클래스를 가진 모든 것이 오른쪽으로 떠 있어야한다는 것을 브라우저에 알려줍니다.
다음과 같이 지정합니다.
class = "right"/>
CSS float 프로퍼티로 무엇을 플로팅 할 수 있습니까?
웹 페이지의 모든 요소를 플로팅 할 수 없습니다. 블록 레벨 요소 만 부동시킬 수 있습니다. 이들은 images (), paragraphs (), divisions (), lists ()와 같이 페이지 공간을 차지하는 요소입니다.
텍스트에 영향을 미치지 만 페이지에 상자를 만들지 않는 다른 요소는 인라인 요소 라고하며 플로팅 할 수 없습니다. span (), 줄 바꿈 (), strong emphasis () 또는 italics ()와 같은 요소입니다.
그들은 어디에서 떠 다니는가?
요소를 오른쪽이나 왼쪽으로 떠일 수 있습니다. 떠 다니는 요소를 따르는 요소는 다른 쪽의 떠 다니는 요소 주위로 흐릅니다.
예를 들어, 이미지를 왼쪽으로 떠올리면 그 뒤의 모든 텍스트 나 다른 요소가 오른쪽으로 흐르게됩니다. 그리고 이미지를 오른쪽으로 띄우면 그 뒤의 모든 텍스트 나 다른 요소가 왼쪽으로 흐르게됩니다. 플로트 스타일을 적용하지 않고 텍스트 블록에 배치 된 이미지는 표시되지만 브라우저는 이미지를 표시하도록 설정됩니다.
일반적으로 이미지 맨 아래에 다음 텍스트의 첫 번째 줄이 표시됩니다.
그들은 얼마나 멀리 떠있을 것인가?
떠 다니는 요소는 가능한 한 컨테이너 요소의 왼쪽이나 오른쪽으로 멀리 이동합니다. 코드 작성 방법에 따라 여러 가지 상황이 발생합니다.
이 예제에서는 왼쪽에 작은 DIV 요소를 플로팅합니다.
- 플로팅 된 요소에 미리 정의 된 너비가없는 경우 플로트에 관계없이 필요한만큼 사용할 수있는 최대 가로 공간을 차지합니다. 참고 : 일부 브라우저에서는 너비가 정의되지 않은 경우 떠 다니는 요소 옆에 요소를 배치하려고합니다. 대개 비포로 요소의 공간을 약간만 줄입니다. 따라서 항상 떠 다니는 요소에 너비 를 정의 해야합니다.
- 컨테이너 요소가 HTML 요소이면 떠 다니는 DIV는 페이지의 왼쪽 여백에 있습니다.
- 컨테이너 요소 자체가 다른 항목에 포함되어 있으면 부동 DIV가 컨테이너의 왼쪽 여백에 위치합니다.
- 떠 다니는 요소를 중첩시킬 수 있으며, 이로 인해 플로트가 놀라운 곳에서 끝나게 될 수 있습니다. 예를 들어,이 플로트는 오른쪽 플로팅 DIV 안에있는 왼쪽 플로팅 DIV입니다.
- 떠 다니는 요소는 컨테이너에 공간이 있으면 서로 옆에 앉을 것입니다. 예를 들어,이 컨테이너에는 100px 크기의 DIV 요소 3 개가 400px 크기의 컨테이너에 플로팅되어 있습니다.
수레를 사용하여 사진 갤러리 레이아웃을 만들 수도 있습니다. 캡션이있는 DIV에서 각 썸네일 (모든 크기가 동일 할 때 가장 효과가 있음)을 넣고 DIV 요소를 컨테이너에 띄웁니다.
아무리 넓은 브라우저 창이라도 축소판 그림은 일정하게 정렬됩니다.
플로트 끄기
일단 엘리먼트를 떠 다니는 방법을 알았다면, 플로트를 끄는 방법을 아는 것이 중요합니다. CSS clear 속성을 사용하여 부동 소수점을 끄십시오. 왼쪽 플로트, 오른쪽 플로트 또는 둘 다 지울 수 있습니다.
맑음 : 왼쪽;
맑음 : 오른쪽;
명확 : 둘 다;
clear 속성 을 설정 한 요소는 그 방향으로 부각되는 요소 아래에 나타납니다. 예를 들어이 예제에서는 텍스트의 처음 두 단락은 지워지지 않지만 세 번째 단락은 지워집니다.
다양한 레이아웃 효과를 얻기 위해 문서에서 다른 요소의 분명한 가치를 가지고 플레이하십시오.
가장 흥미로운 떠 다니는 레이아웃 중 하나는 텍스트 단락 옆에있는 오른쪽 또는 왼쪽 열의 일련의 이미지입니다. 텍스트가 이미지를 지나칠만큼 길지 않은 경우에도 모든 이미지에서 일반 텍스트를 사용하여 이전 이미지 옆에 나타나지 않도록 할 수 있습니다.
HTML (이 단락 반복) :
볼륨에서 reprehenderit에서 시간 incididunt를 수행하는 데 사용됩니다. 견해가 뚜렷하지 않은 사람, 배우자와 배우자의 사진.
CSS (이미지를 왼쪽으로 플로팅) :
img.float {float : left;
맑음 : 왼쪽;
여백 : 5px;
}
그리고 오른쪽 :
img.float {float : right;
맑음 : 오른쪽;
여백 : 5px;
}
레이아웃 용 수레 사용
플로트 속성이 어떻게 작동하는지 이해하면이를 사용하여 웹 페이지를 배치 할 수 있습니다. 다음은 떠 다니는 웹 페이지를 만드는 단계입니다.
- 레이아웃을 종이 또는 그래픽 도구 또는 머리에 디자인하십시오.
- 페이지 분할의 위치를 결정하십시오.
- 다양한 컨테이너와 그 안에있는 요소의 너비를 결정하십시오.
- 모든 것을 뜨게. 가장 바깥쪽에있는 컨테이너 요소조차도 왼쪽으로 떠서 브라우저보기 포트와 관련하여 어디에 있는지 알 수 있습니다.
레이아웃 섹션의 너비 (백분율은 괜찮음)를 알고있는 한 float 속성을 사용하여 페이지에 속한 위치에 배치 할 수 있습니다. 그리고 좋은 점은 인터넷 익스플로러 나 파이어 폭스와 다른 상자 모델에 대해 걱정할 필요가 없다는 것입니다.