11. login 페이지 - 폼 요소 작성 및 스타일

Question

11. login 페이지 - 폼 요소 작성 및 스타일 19:12 앱 전체 사이즈 넓이가 414px 피그마에서 빨간줄에는 us.가 한줄 강사님의 코딩 저의 코딩 수업 중 따라하던 중 뷰어를 보니 us.가 내려가 있음 똑같이 했는데 왜 이럴까요 근데 font-weight: 700; 이 부분을 빼니 us.가 위로 잘 올라가 있고요 font-weight: 700;를 넣으면 다시 내려오지요 header 패딩도 강사님이랑 동일한데 무엇때문일까요? 참고로 저는 맥을 사용하고 크롬을 보고 있었습니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 박인정님. 현재 겪고 계신 문제는 웹 페이지에서 텍스트가 의도치 않게 줄을 바꾸거나 레이아웃이 변경되는 현상으로 보입니다. 이러한 문제는 브라우저에서의 폰트 렌더링 차이로 인해 발생할 수도 있습니다. 특히, font-weight: 700; 은 폰트의 굵기를 변경하므로, 텍스트의 길이나 줄바꿈에 영향을 미칠 수 있습니다. 가능한 원인 및 해결책 폰트의 차이 : 강사님과 사용하시는 폰트가 다를 수 있습니다. CSS에서 사용할 폰트를 명시적으로 설정해주셨는지 확인해 보세요. 만약 명시되지 않았다면, 브라우저 기본 폰트나 운영체제에 따라 렌더링이 달라질 수 있습니다. 브라우저 간 차이 : 같은 컴퓨터라도 크롬, 사파리, 파이어폭스 등 브라우저에 따라서 폰트 렌더링 방식이 달라져, 줄 바꿈 현상이 발생할 수 있습니다. 여러 브라우저에서 테스트해 보세요. 텍스트 간 마진 및 패딩 조정 : header 나 텍스트에 적용된 마진 및 패딩 값들을 점검해 보세요. 작은 차이도 줄 바꿈에 영향을 줄 수 있습니다. 미리보기 환경의 차이 : 강의 피드백에서 사용되는 도구나 설정과 로컬 환경이 다를 경우, 동일한 코드라도 다르게 동작할 수 있습니다. 가능한 한 동일한 환경에서 확인해보세요. 관련하여, 문제가 발생했을 때 더 깊이 이해하고 분석할 수 있는 또 다른 답변을 참고하실 수 있도록 아래 URL을 제공해 드립니다: CSS 텍스트 줄 바꿈 문제 해결 방법 - 브라우저 간의 CSS 차이로 인한 문제 해결 방법을 다룹니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.