2024. 3. 9. 01:28ㆍCSS
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
float 속성을 활용함으로써 웹 페이지의 구성 요소들을 자유롭게 배치하고 조합할 수 있으며, 창의적인 디자인을 구현하는 데에 큰 도움이 됩니다. float 속성에 대해서 알아보도록 합시다.
float 속성의 이해
float 속성은 CSS에서 요소의 왼쪽이나 오른쪽으로 이동시키는 속성입니다. float 된 요소는 주변의 요소들이 해당 요소를 무시하고 텍스트 및 인라인(inline) 요소가 그 주위로 흐르게 배치됩니다. 마치 워드(Word)에서 텍스트 배치와 비슷한 효과를 표현할 수 있습니다.
요소를 일반적인 흐름에서 벗어나게 하고 해당 요소를 텍스트 및 다른 콘텐츠 주위로 부유시킵니다.
float의 초기값 : none
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
부모 요소의 높이 조절 문제
float 된 요소는 일반적인 레이아웃 흐름에서 벗어나기 때문에, 부모 요소가 해당 float 된 요소의 높이를 올바르게 계산하지 못하는 문제가 발생합니다. 이는 레이아웃을 깨뜨리는 문제를 일으킬 수 있습니다.
다음으로 부모 요소의 높이 조절 문제 해결 방법 2가지 방법을 소개해드리겠습니다.
clearfix
clearfix는 부모 요소에 가상 요소를 추가하여 float 된 자식 요소들의 영향을 받지 않도록 하는 방법입니다.
.parent::after {
content: "";
display: block;
clear: both;
}overflow:hidden
부모요소에 overflow:hidden 속성을 추가하여 float 된 요소들의 영향을 받지 않고, 부모 요소의 크기를 자식 요소에 맞추도록 하는 방법입니다.
.parent {
overflow: hidden;
}
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
예제 1 - 워드(Word)에서 텍스트 배치와 유사한 레이아웃 만들어보기
<html>
...
<body>
<div class="container">
<img src="https://plus.unsplash.com/premium_photo-1685916643856-393b0119eac6?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="출처 이미지 : unsplash">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eveniet voluptate ullam aspernatur? Labore vitae, ex et unde quibusdam modi, eos excepturi eveniet velit rerum aspernatur voluptatibus sed accusamus amet nisi nulla ipsum eius eaque tenetur accusantium sapiente distinctio porro incidunt. Nisi animi veritatis ipsa corporis fugit, iusto nulla tempore?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eveniet voluptate ullam aspernatur? Labore vitae, ex et unde quibusdam modi, eos excepturi eveniet velit rerum aspernatur voluptatibus sed accusamus amet nisi nulla ipsum eius eaque tenetur accusantium sapiente distinctio porro incidunt. Nisi animi veritatis ipsa corporis fugit, iusto nulla tempore?</div>
</div>
<div class="nextArea">next area</div>
</body>
</html>.container {
outline:1px solid red;
img{
float:left;
width: 40%;
}
.text {
/* width: 20%;
float:right; */
}
}
.nextArea {
height: 50px;
background-color: black;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
예제 2 - 각각 양 사이드로 레이아웃 배치해 보기
.container {
outline:1px solid red;
/* overflow: hidden; */
img{
float:left;
width: 40%;
}
.text {
width: 20%;
float:right;
}
}
.nextArea {
height: 50px;
background-color: black;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
레이아웃이 깨지는 이유는 img와 .text 요소가 float 속성을 적용했을 때, 다른 요소들에게 영향을 주기 때문입니다. 이를 해결하기 위해 다음 중 하나의 방법을 시도해 볼 수 있습니다:
부모 요소에 overflow 속성을 설정하여 float 된 자식 요소들을 포함하도록 합니다.
.container {
outline:1px solid red;
overflow: hidden;
img{
float:left;
width: 40%;
}
.text {
width: 20%;
float:right;
}
}
.nextArea {
height: 50px;
background-color: black;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
이렇게 함으로써 float 된 자식 요소들이 부모 요소의 영역을 벗어나지 않게 되고, 레이아웃이 깨지는 것을 방지할 수 있습니다. 이제 해당 스타일을 적용하여 원하는 레이아웃을 확인할 수 있을 것입니다.
이렇게 float 속성에 대해서 알아보았습니다.
[CSS] Animation 속성 정리, 참고 사이트 추천
자주 사용하는 속성은 막힘없이 써 내려가지만 헷갈리는 속성들이 있어서, 내용을 정리하는 차원에서 포스팅 시작하겠습니다. 1. animation-name : 애니메이션 이름 @keyframes에 애니메이션을 정의할
dev-chim.tistory.com
[Server] 외부에서 파일을 보다 안전하게 공유하는 방법 (feat. Synology Nas Server)
일을 하다 보면 잠시 자리를 비우는 동안 업무 요청사항이 올 때가 있습니다. 그럴 때마다 바로바로 대응을 해줘야 하는 경우에 마음이 급할 때가 있지요 이런 상황에 외부에서 파일을 보다 안
dev-chim.tistory.com
[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법
npm(node package manage)는 cdn 방식으로 패키지를 가져와서 사용하는 것이 아니라, 모듈화 된 패키지를 node 환경에서 쉽고 간편하게 설치하고 버전 관리할 수 있는 자바스크립트 패키지 매니저입니다.
dev-chim.tistory.com
[git] Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하기
Github Desktop으로 아주 쉽게 저장소(repository)를 로컬에 클론(clone)하는 방법에 대해서 알아보겠습니다. Github Desktop 사이트 바로가기 Github에서 제공하는 애플리케이션으로 GUI(Graphical User Interface)로
dev-chim.tistory.com
[Notion] Notion Web Clipper, 스크랩한 웹페이지를 한 데 모아서 관리하는 방법
Notion Web Clipper 기능을 아시나요? 웹페이지를 저장하고 싶은데 한 데 모아서 관리하고 싶지 않으신가요? 노션 웹 클리퍼(Notion Web Clipper)가 이러한 서비스를 제공합니다. Notion Web Clipper는 웹 브라우
dev-chim.tistory.com
'CSS' 카테고리의 다른 글
| [HTML] ios/Safari 에서의 SVG 랜더링 이슈: 해결책 탐색 (2) | 2024.03.12 |
|---|---|
| [CSS] 마크업(markup)할 때, img vs background-image 선택하는 기준은? (2) | 2024.03.10 |
| [CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기 (0) | 2024.03.06 |
| [CSS] 노치(Notch)와 홈 바(Home Bar)에 대응하는 CSS 환경 변수(env()) 활용 방법 (2) | 2024.03.05 |
| [CSS] outline이나 border 속성이 아닌 box-shadow 속성으로 선을 그리는 방법 (feat. box-sizing: border-box;) (0) | 2024.02.28 |