조회 100
익명
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 참고하시면 도움이 되실거예요
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 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직 개발자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직 개발자들의 명쾌한 답변을 얻을 수 있어요.