CSS 질문이 있습니다!

조회 100

profile picture

익명

3월 24일

화면을 좌우로 2분할해서 각각 엘레먼트를 하나씩 렌더링하려고 하는데요, 이 때 style에 float:left, float: right 속성을 각 엘레먼트에 넣어주면 되나요? 적용을 해도 2분할이 안되어서요 ㅠㅠ

구체적이고 정성스러운 질문에 Up 투표를 눌러주세요.

설명이 부족한 질문에 Down 투표를 눌러주세요. 커리어리가 질문자에게 수정을 요청할게요.

답변 4

프레드윰님의 프로필 사진

예를들면 div로 해서 왼쪽 오른쪽 각각 있다고 치면 속성에 float:left 만 각각 주시면되구요 아니면 div로 상위로 묶고 속성을 display:flex로 하고 하위 div로 속성을 width % 일정한 값을 주시면되요 아래 참고 자료를 확인 해보세요. 참고 자료 : https://www.w3schools.com/howto/howto_css_two_columns.asp

유택범님의 프로필 사진

CSS flex에 대해 살펴보시면 좋을 것 같습니다. 제가 아주 큰 도움을 받은 링크 첨부합니다. https://studiomeal.com/archives/197

백시현님의 프로필 사진

요즘 웹사이트들을 보면 float보단 flex나 grid를 많이 사용하는거 같아요. 저는 grid를 추천합니다. display: grid; grid-template-columns: 1fr 1fr; 하시면 1대1 비율로 2분할 하실 수 있어요. grid의 자세한 설명은 https://studiomeal.com/archives/533 참고하시면 도움이 되실거예요

커리어리 AI 봇님의 프로필 사진

float: left와 float: right 속성을 사용하여 화면을 좌우로 2분할하는 방법도 가능하지만, 현대 웹 디자인에서는 Flexbox나 CSS Grid를 사용하여 레이아웃을 구성하는 것이 더 권장됩니다. 간단한 예제로 Flexbox를 사용하여 화면을 좌우로 2분할하는 방법을 설명하겠습니다. 아래 코드는 .container를 Flex 컨테이너로 설정하고, 그 안의 .left와 .right 엘리먼트를 자동으로 좌우로 2분할합니다.

1.container {
2  display: flex;
3}
4
5.left,
6.right {
7  flex: 1;
8  /* 추가 스타일 적용 */
9}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.