일반적인 css 꾸미기에서 width와 height의 값?

Question

강의 잘 듣고 있습니다. 질문이 있는데요, 일반적인 css 꾸미기 에서 width와 height의 값 은 개발자가 아닌 웹디자이너가 항상 알려주기도 하나요 ? 즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은 몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면 감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요? 피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight 등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기 에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.

grab · Answer

안녕하세요. 확인이 늦어 죄송합니다. 제가 답변을 했다고 했는데 놓쳤었네요 제 강의에서는 디자인에 대해서는 따로 실습이 포함되어 있지 않았고, 제가 임의로 width, height를 정해서 만들었다 보니 헷갈리실 수 있을 것 같아요 말씀해주신 것 처럼 보통 width, height같이 CSS로 개발자가 개발할 때, 디자이너가 정해준 디자인(보통 피그마 같은 디자인 툴)을 확인하면서 코딩을 하게 됩니다. 실무에서는 보통 나온 디자인을 개발하는 경우가 일반적이고, 초기 스타트업처럼 인력이 부족한 경우 임의로 개발을 하거나 아니면 템플릿이나 잘 만들어진 UI 라이브러리를 사용해서 하는 경우들이 많습니다! 사이드 프로젝트나 혼자 공부하실때는 피그마 디자인을 직접 만들고 나서 개발을 해보는 것도 실무에 좀 더 빠르게 적응하기 위한 방법이 될 것 같아요! 감사합니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. isbcom1004님. 강의를 들으면서 이러한 궁금증이 생기셨군요. 일반적인 CSS에서의 width 와 height 값을 정하는 것은 때로 디자인의 의도에 따라 결정될 수 있습니다. 많은 경우, 웹디자이너가 디자인을 제공할 때 정확한 픽셀 값이나 비율을 제시합니다. 그렇기에 개발자는 디자인 도구(예: 피그마, 스케치)에서 제시되는 정보를 토대로 CSS를 작성하는 경우가 많습니다. 하지만, 모든 경우에 디자이너가 상세 값을 제공하는 것은 아닙니다. 특히, 협업이 명확하게 이루어지지 않는 경우에는 개발자가 직접 감으로 크기를 조정하면서 적절한 서식을 찾아가는 방법을 사용하기도 합니다. 실무에서는 다음과 같은 방법들이 두루 사용됩니다: 1. 디자인 파일 활용 : 피그마, 스케치 등에서 제공하는 디자인을 통해 width , height , font-size 등의 값을 가져옵니다. 2. 반복적 조정 : 직접 브라우저에서 결과를 확인하며 CSS 값을 조정하는 방법입니다. 3. 디자이너와 협업 : 필요할 경우 디자이너에게 구체적인 값을 요청하여 좀 더 명확한 방향으로 작업할 수 있습니다. 그리고 강의를 들으신 후 복습하시거나 개인 프로젝트를 진행하실 때는, 다양한 예제를 살펴보면서 여러 방법으로 CSS를 작성해 보시길 추천드립니다. 이렇게 실험적인 시도를 통해서도 충분히 감각을 익히실 수 있습니다. 추가적인 학습이나 강의에서 배우지 않은 구체적인 정보가 필요할 때는 커뮤니티나 관련 문서(예: Spring Boot Reference ) 등을 참조하시는 것도 좋은 방법입니다. 도움이 되셨길 바랍니다. 추가적인 질문이 있으시면 언제든지 물어보세요!