Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
11. login 페이지 - 폼 요소 작성 및 스타일
Viết
·
43
0
11. login 페이지 - 폼 요소 작성 및 스타일
19:12
앱 전체 사이즈 넓이가 414px
피그마에서 빨간줄에는 us.가 한줄
강사님의 코딩
저의 코딩 수업 중 따라하던 중
뷰어를 보니
us.가 내려가 있음
똑같이 했는데 왜 이럴까요 근데
font-weight: 700;이 부분을 빼니 us.가 위로 잘 올라가 있고요
font-weight: 700;를 넣으면 다시 내려오지요
header 패딩도 강사님이랑 동일한데 무엇때문일까요? 참고로 저는 맥을 사용하고 크롬을 보고 있었습니다.
Câu trả lời 1
0
안녕하세요, 인프런 AI 인턴입니다. 박인정님.
현재 겪고 계신 문제는 웹 페이지에서 텍스트가 의도치 않게 줄을 바꾸거나 레이아웃이 변경되는 현상으로 보입니다. 이러한 문제는 브라우저에서의 폰트 렌더링 차이로 인해 발생할 수도 있습니다. 특히, font-weight: 700;은 폰트의 굵기를 변경하므로, 텍스트의 길이나 줄바꿈에 영향을 미칠 수 있습니다.
가능한 원인 및 해결책
폰트의 차이: 강사님과 사용하시는 폰트가 다를 수 있습니다. CSS에서 사용할 폰트를 명시적으로 설정해주셨는지 확인해 보세요. 만약 명시되지 않았다면, 브라우저 기본 폰트나 운영체제에 따라 렌더링이 달라질 수 있습니다.
브라우저 간 차이: 같은 컴퓨터라도 크롬, 사파리, 파이어폭스 등 브라우저에 따라서 폰트 렌더링 방식이 달라져, 줄 바꿈 현상이 발생할 수 있습니다. 여러 브라우저에서 테스트해 보세요.
텍스트 간 마진 및 패딩 조정:
header나 텍스트에 적용된 마진 및 패딩 값들을 점검해 보세요. 작은 차이도 줄 바꿈에 영향을 줄 수 있습니다.미리보기 환경의 차이: 강의 피드백에서 사용되는 도구나 설정과 로컬 환경이 다를 경우, 동일한 코드라도 다르게 동작할 수 있습니다. 가능한 한 동일한 환경에서 확인해보세요.
관련하여, 문제가 발생했을 때 더 깊이 이해하고 분석할 수 있는 또 다른 답변을 참고하실 수 있도록 아래 URL을 제공해 드립니다:
- CSS 텍스트 줄 바꿈 문제 해결 방법 - 브라우저 간의 CSS 차이로 인한 문제 해결 방법을 다룹니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
죄송합니다. 답변이 너무 늦었네요.
해당 부분은 OS에 따라 자간을 해석하는 부분이 다른 것으로 예상됩니다. 패딩을 조절하거나, 글자의 자간(letter-spacing)을 조절하는 방법으로 접근해보세요.
CSS 텍스트 줄 바꿈 문제 해결 방법 - 링크접속이 되지 않습니다.
강사님과 동일하게 폰트를 맞추었습니다.
각종 브라우저 확인 다해도 동일한 현상입니다.
강사의 마진과 패딩도 따라하면서 동일하게 주었습니다.
선생님은 윈도우를 쓰시던데 혹시 맥과 윈도우 환경이 폰트굵기 때문인 것 같은데 구체적으로 어떤현상인지 궁급합니다.