웹 페이지를 디자인할 때 특정 요소가 페이지의 특정 위치에 나타나도록 결정할 수 있습니다. 예를 들어 이미지가 포함된 상자를 페이지 오른쪽에 표시할 수 있습니다.
CSS에서 float 속성은 요소의 위치를 지정하는 데 사용됩니다. 플로트는 웹 페이지의 왼쪽 또는 오른쪽에 요소를 배치하는 데 사용할 수 있습니다.
이 자습서에서는 예제를 참조하여 CSS float 속성을 사용하여 웹 페이지에서 요소를 배치하는 방법에 대해 설명합니다. 이 튜토리얼을 다 읽고 나면 CSS를 사용하여 웹 페이지의 플로팅 요소 전문가가 될 것입니다.
CSS 부동 소수점 속성
float 속성은 웹 페이지의 왼쪽 또는 오른쪽에 요소를 배치하는 데 사용할 수 있습니다. 예를 들어, float는 웹 페이지의 상자에 있는 텍스트 오른쪽에 이미지를 배치하는 데 사용할 수 있습니다.
float 속성은 상자를 생성하고 웹 페이지에 절대 위치하지 않는 요소에만 적용됩니다. 절대 위치 요소는 정적 위치가 아닌 첫 번째 상위 요소를 기준으로 배치되는 웹 요소입니다.
float 속성과 함께 사용되는 가장 일반적인 4가지 값은 다음과 같습니다.
- left(컨테이너 왼쪽에 요소 부동)
- 오른쪽(컨테이너 오른쪽에 요소 부동)
- 없음(요소에 부동 소수점이 적용되지 않음)
- 상속(요소는 상위 컨테이너에 적용된 float 속성을 사용하여 부동).
float 속성의 가장 일반적인 용도는 CSS에서 이미지 주위에 텍스트를 래핑하는 것입니다.
CSS 부동 소수점 예시
지역 Stargazer Blazers를 위한 웹사이트를 디자인한다고 가정해 보겠습니다. 별을 보는 사회. 클럽은 조직의 역사를 설명하는 웹 페이지를 원합니다. 이 웹페이지에는 클럽에 대한 간략한 설명과 페이지 왼쪽에 위치한 스타 이미지가 있어야 합니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
float 속성을 사용하여 이 웹 페이지를 만들 수 있습니다. 다음은 float를 적용하지 않고 웹 페이지에 사용할 기본 코드입니다.
index.html <div> <p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries. </p> </div>
코드는 다음을 반환합니다.
이 예에서 이미지는 텍스트 앞에 나타나며 전체적으로 페이지가 미학적으로 보기에 좋지 않습니다. 그러나 float 속성을 사용하여 텍스트 옆에 이미지를 배치할 수 있습니다.
다음은 이미지를 텍스트 오른쪽에 배치하는 데 사용할 코드입니다(별을 관측하는 사회에서 요청한 내용).
styles.css
img {
float: right;
} 코드 반환:
코드를 분해해 보겠습니다. 먼저 웹 페이지의 코드가 작성되는
태그를 사용하여 Stargazer Blazers 클럽의 역사에 대한 설명이 포함된 본문을 만들었습니다.
태그 안에 200×200 크기의 별 이미지도 포함했습니다.
웹 페이지의 스타일 코드가 포함된 styles.css 파일에서 float:right; 속성을 사용하여 텍스트 오른쪽에 이미지를 띄웁니다. 위의 예에서 볼 수 있듯이 이미지는 텍스트 오른쪽에 위치합니다. 기본적으로 이미지는 텍스트 앞에 나타납니다.
이제, 별 관측 클럽에서 텍스트 왼쪽에 이미지를 배치하도록 요청했다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
styles.css
img {
float: left;
margin-right: 20px;
} 코드 반환:
이 예에서는 이미지를 텍스트 왼쪽에 띄웠습니다. 또한 margin-right:20px; 속성은 이미지의 왼쪽과 텍스트 사이에 공백을 만듭니다.
플로트가 있는 상자 그리드
float 속성을 사용하면 나란히 표시되는 콘텐츠 상자를 만들 수 있습니다.
별을 관찰하는 사회에서 세 개의 이미지가 나란히 나타나길 원했다고 가정해 봅시다. 이 이미지는 사람들이 별을 결합하면 볼 수 있는 별을 보여줍니다.
다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
index.html <div> <img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" /> <img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" /> </div>
styles.css
* { box-sizing: border-box };
.image {
float: left;
width: 25%;
padding: 25px;
} 코드 반환:
코드를 분해해 보겠습니다. HTML 파일에는 세 개의 이미지( 태그로 표시)가 포함된
image 클래스가 할당됩니다. . 우리의 styles.css 파일에서 우리는:
- box-sizing 적용:border-box; 스타일을 목록의 모든 항목에 적용하므로 요소의 패딩과 테두리가 전체 너비와 높이에 포함됩니다. 이를 통해 기본 공백 없이 요소를 나란히 배치할 수 있습니다.
- 플로트 사용:왼쪽; 이미지를 나란히 표시할 수 있습니다.
- 너비:25%를 사용하여 각 이미지가 웹페이지 너비의 25%를 차지하도록 합니다.
- 여백 사용:25px; 각 이미지 사이에 25픽셀의 공간을 만듭니다.
결론
CSS float 속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하는 데 사용됩니다. 이렇게 하면 텍스트 및 기타 요소가 부동 요소를 둘러쌀 수 있습니다.
이 자습서에서는 예제를 참조하여 CSS float 속성을 사용하여 CSS에서 컨테이너의 왼쪽과 오른쪽에 요소를 배치하는 방법에 대해 설명했습니다. 이제 CSS 전문가처럼 float 속성을 사용할 준비가 되었습니다!