개발자

CSS 질문이 있습니다!

2023년 03월 24일조회 136

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

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 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
2
3
4
5
6
7
8
9
.container {
  display: flex;
}

.left,
.right {
  flex: 1;
  /* 추가 스타일 적용 */
}

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

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

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

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

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