웹사이트 모바일화면으로 전환관련 질문입니다.

[리뉴얼] React로 NodeBird SNS 만들기

작성

737

react nextjs로 정적인 사이트를 구현을 했습니다.

그런데 pc로는 화면이 깔끔하게 잘 나오는데 모바일로 접속을 하면 화면이 완전히 망가져서 나옵니다.

1. pc화면을 모바일로 전환하려면 react-native밖에 방법이 없나요?

2. pc화면전환이라는 버튼이 사이트 마다 있던데 하는 방법이 따로 있을까요

3. antd에서 가져온 레이아웃은 잘변환되서 나오는데 그 밑에 사진이라던지 텍스트는 자기 영역을 벗어나서 마구잡이로 출력이 됩니다. 화면을 극도로 줄였을때 텍스트나 사진이 자신의 영역을 벗어나지 않고 크기가 같이 줄여지는 방법이 있을까요?

react express redux nodejs Next.js

답변 5

제로초(조현영)

지식공유자

style에 whiteSpace: 'normal'이나 whiteSpace: 'pre'를 넣으시면 접힐 것 같습니다. 추가로 wordWrap: 'break-word' 속성도 있습니다.

한영탁

질문자

네 접히지 않고 있습니다.

const text =
<div style={{padding:"30px 0px 50px 0px", backgroundColor:"#f0f0f0", width:"90%", height:"auto"}} >
<Title style={{fontSize:"150%"}} >
2011년 한국의 문화를 주도하는 서울 강남에 오픈한 클럽 옥타곤은

얼마 지나지 않아 아시아를 대표하는 클럽으로 자리매김하였고 2020년 현재,

세계적인 클럽 매거진 DJ Mag : Top 100 Clubs Chart에서
세계 7위에 오르며 대한민국 클럽의 위상을 높였습니다.

이는 기존 한국 클럽 문화에서 탈피하여 단순 클럽이 아닌 복합문화공간으로서
여러 가지 문화콘텐츠를 고객들에게 제공하고 클럽의 본질인 음악과

문화 형성에 기반을 두어 꾸준히 노력한 성과입니다.

클럽 옥타곤은 다양한 경험과 실력을 바탕으로 대한민국의 클럽 문화를

세계에 알리고 건전하고 올바른 클럽 문화 형성을 위하여 앞으로도

계속 노력하며 발전해 나아갈 것입니다.

감사합니다.


Club Octagon official
</Title>
</div>

위에는 label부분에 들어가는 텍스트변수이고

<Timeline mode="alternate" style={{padding:"30px 200px 30px 200px"}}>
<Timeline.Item dot={<LoadingOutlined style={{fontSize:"20px", color: "red"}} />} label={about} style={{padding:"30px 0px 100px 0px"}} >
</Timeline.Item>
<Timeline.Item dot={<LoadingOutlined style={{fontSize:"20px", color: "red"}} />} label={text} style={{padding:"30px 0px 50px 0px"}} >
<Carousel autoplay effect="fade" style={{textAlign: "center",height: "300px",lineHeight: "200px",overflow: "hidden"}}>
<div>
<img alt="fortest" src={require('../public/sky.jpg')} style={{width:"100%",height:"auto" }}/>
</div>
<div>
<img alt="fortest" src={require('../public/12.jpg')} style={{width:"100%",height:"auto" }}/>
</div>
<div>
<img alt="fortest" src={require('../public/14.jpg')} style={{width:"100%",height:"auto" }}/>
</div>
<div>
<img alt="fortest" src={require('../public/3.jpg')} style={{width:"100%",height:"auto" }}/>
</div>
</Carousel>
</Timeline.Item>

여기에서

<Timeline.Item dot={<LoadingOutlined style={{fontSize:"20px", color: "red"}} />} label={text} style={{padding:"30px 0px 50px 0px"}} >

부분입니다.

제로초(조현영)

지식공유자

텍스트는 부모 너비 제한을 받아 너비보다 길어지면 접히게 될텐데 접히지 않고 있나요?

한영탁

질문자

답변 감사합니다.

제로초님의 말씀대로 %로 변경을 했더니 사진이나 텍스트 영역이 부모 넓이에 따라 줄어드는 것을 확인했습니다.

감사합니다.

그런데 텍스트의 크기가 문제였던것 같습니다.

화면 비율에 따라 다른 것은 줄어들지만 텍스트의 크기가 줄어들지 않아 텍스트의 배경이 함께 늘어나며 다른 부분의 영역을 침범하고 있습니다.

1.화면 비율에 따라 텍스트의 크기를 맞추려면 어떡해야할까요?

제로초(조현영)

지식공유자

1. 아뇨 반응형으로 구현하시면 됩니다. react-native는 앱스토어에서 다운로드받는 모바일"앱"입니다.

2. pc 화면전환 버튼이 있는 사이트는 모바일과 PC버전을 따로(그러니까 웹 사이트를 두 개) 제작한 사이트들입니다. 하나만 제작하고 싶으시다면 반응형으로 구현하시면 됩니다.

3. 사진이나 텍스트 width를 px로 하지마시고 %를 주시면 됩니다. 100%를 준다면 화면 너비와 상관없이 항상 부모너비만큼을 차지할 것입니다. 화면을 줄이면 같이 너비가 줄어들고요.

인프런 커뮤니티 질문&답변

웹사이트 모바일화면으로 전환관련 질문입니다.