CSS질문ㅠ

Question

안녕하세요 개발에 관심이 있어 이제 css공부를 하고 있는 시작한지 1달밖에 안된 중학생입니다. 주변에 물어볼 사람도 없고 어떻게서든 해결하고 싶어서 또 html이랑 css가 언어로 안쳐줄만큼 기초적인거여서 물어보기도 조금 부끄럽지만 gpt의 힘을 빌리지 않고 혼자 만들어보고 싶어서 물어보게 되었습니다. 피그마로 첫번째 사진처럼 디자인을 했고 퍼블리싱을 할려고 했습니다. 피그마에 나온거 똑같이 margin-top, margin-left랑 width, height, font-size, font-weight 다 값을 줬는데 결과물이 누가 봐도 로그인글자 위치가 이상하고 한줄로 표현되어야할 것이 두줄로 표현이 됩니다. 보니까 절대적, 상대적 위치차이일거 같은데 확실히 이거 때문인지도 잘 모르겠습니다. position 값 차이도 잘 이해가 안되고 원인이 position 설정때문인지 잘 모르겠습니다. 또 프론트공부 어떻게 해야되는지도 알려주세요ㅜㅠ

킁킁탐정 · Answer

figma에 표시되는 여백(margin)은 고정값이지만 실제 browser의 너비는 사용자가 얼마든지 조절 가능한 가변 크기입니다. 그러므로 고정 값을 사용하는 대신 "중앙 정렬"을 사용해서 자동으로 여백을 조정하도록 해야합니다. 가능한 방법은 매우 다양하게 존재합니다. margin: 0 auto 같은 트릭부터 grid, flex등등 매우 많습니다. 하지만 이 문제를 해결한다고 해도 다음에도 큰 문제가 발생할것으로 예상되므로 다음과 같은것을 찾아서 학습해보시길 권해드립니다.block, inline에 관한 내용flex, grid에 관한 내용과 전반적인 사용법position에 관련된 sticky(fixed), relative, absolute의 전반적인 사용법브라우저 기본 font-size와 line-height에 관한 내용끝으로 width, height는 필요하지 않다면 지정하지 않아도 됩니다. 예를들어 "로그인" 이라는 글자는 이 자체로 너비와 높이가 존재합니다. 그러므로 굳이 width: 83px;처럼 지정하지 않아도 됩니다. 글자의 너비는 글꼴과, 글꼴 크기나 볼드 여부등에 따라 자동으로 설정된다고 보면 됩니다.https://jsfiddle.net/drb5t19g/

bumbum96 · Answer

포지션보다는 flex,grid를 사용하면 좋을것같아요

CSS질문ㅠ

2개의 답변

Q&A 목록