반응형 마진(Margin)이 왜 이럴까 마진은 가끔 이상하다. 내 예상과 다른 결과물을 보여줄 때가 있다. 마진은 요소의 바깥쪽에 여백을 주려할 때 사용하는데, 어쩔 때는 적용이 안 된 것처럼 보이거나 자식에서 적용한 마진이 부모 바깥의 여백으로 '나와 보이는' 화면이 보이기도 한다. 이런 이유 때문에 종종 혼란스러울 때가 있다. 그래서 이번에는 마진에 대해 이해해 보는 시간을 가지게 되었다. 마진은 단순히 '바깥 여백'이라는 정의만으로 사용하기에는 부족한 점이 있다. 조금 더 주의해야 할 상황들을 예시를 통해 하나씩 살펴보자.서로 붙어있는 형제 요소가장 일반적으로 발생할 수 있는 상황이다. 형제 요소가 붙어 있을 때, 마진을 적용하면 어느 한쪽이 상쇄(Collapsing)된다.제목과 내용 사이에는 여백이 28px + 15px을 더한 43px.. 2025. 9. 25. AI를 더 믿는 개발자 AI를 적극 사용하는 수강생이 질문을 했다. ChatGPT의 답변과 공식 문서의 내용이 다른데, 어떤 걸 선택해야 하냐는 것이었다. 잠시 충격을 받았지만, 곧이어 답을 주었다. 물론 경험자의 입장에서 당연하다 생각하는 것도 입문자에겐 당연하지 않다. 그럼에도 내가 충격을 받았던 이유는 두 가지였다:AI가 낸 답변을 너무 신뢰한다는 것직접 경험하지 않고 고민만 했다는 것1번은 특히 입문자 입장에서 경계해야 할 것 같다. 처음부터 AI를 사용해서 개발을 시작한 사람과 아닌 사람의 세대가 나뉘듯이, 전자의 경우 AI의 마법들을 지나치게 신뢰한다는 느낌이 강했다. "AI가 이렇게 하라고 했어요.", "AI는 이게 맞다고 하는데요." 등 AI와 함께 일하는 방식은 너무나 빠르고 자연스럽게 스며들었다. 2번은 충분.. 2025. 8. 21. React에서 요소마다 이벤트 핸들러를 추가해도 되는 이유 강력한 패턴, 이벤트 위임(Event Delegation)바닐라 JS로 로그인/회원가입 폼을 만들었다. 로그인까지는 무난하게 넘어갔는데, 회원가입 폼은 입력 필드가 좀 많았다. 많아진 셀렉터들과 이벤트 리스너가 신경 쓰였다. 모듈로 분리도 하고, 함수와 변수들을 정리하고, 배열 메서드로 변경하는 등 코드 구조를 개선하는 리팩토링을 해봤지만, 여전히 요소마다 등록된 리스너는 복잡해 보였다. 그러던 중 예전에 기술 과제 요구사항이었던 이벤트 위임이 생각이 났다. 이벤트 위임은 여러 자식 요소에 개별 이벤트 리스너를 등록하지 않고, 그들의 부모 요소에 단 하나의 이벤트 리스너를 등록해 이벤트를 관리하는 방법이다.const form = document.querySelector('.auth-form');form... 2025. 8. 16. 진짜 "멀티탭 증후군" "여러 개의 플러그를 꽂다가 합선되는 멀티탭 같은 모습" '멀티탭 증후군'은 한 번에 여러 가지 일을 처리하려다 집중력이 떨어지고 비효율적인 상태를 의미한다. 글에서는 멀티탭 증후군을 여러 매체에서 노출되는 '갓생'을 살기 위해 노력하다 번아웃이 온 주변 직장인들의 시선으로 바라봤다. 근데 나는 내 모니터의 브라우저 탭들이 가장 먼저 보였다. 나는 말 그대로 '멀티탭 증후군'이었다. 아침마다 오는 뉴스레터, 링크드인의 기술 이야기들, 유튜브의 끊이지 않는 AI 소식 등 배우지 않으면 큰일 날 것 같은 정보들이 이렇게 많은 탭들을 만들어냈다. 심지어 이런 브라우저 창이 여러 개 있다. 이제 모든 걸 다 알아야 한다는 압박감을 좀 내려놓고, 현재 상황에서 해결해야 할 문제를 제외한 나머지를 모두 정리했다. .. 2025. 8. 11. 지속 가능한 개발 인생을 만들어준 세 개의 에피소드 나에게 좋은 영향을 주신 존경하는 개발자 세 분이 계신다. 개발 인생을 지속 가능하게 만들어준 분들인데, 각 에피소드가 꽤 재미있다.첫 회사, 첫 프론트엔드 개발자나는 첫 회사에서 첫 프론트엔드 개발자로 입사했다. 앞으로 만들 여러 프로젝트에 개발 환경 구축이 필요했는데, 무지렁이인 내가 뭐 어떻게 시작해야 할지도 몰랐다. 게다가 프론트엔드 관련 기술 스택을 알고 있는 사수도 없어 눈앞이 더 깜깜했다. 그 과정에서 몇 번의 대화를 나눈 게 끝인, 두 시니어 개발자님에게 내 지식을 총동원하여 이메일로 간절한 도움을 요청하기로 했다. 한 분은 메일을 읽었지만 답장을 주시지 않았고, 다른 한 분은 다행히 답장을 주셨다. 그것도 아주 장문으로. 솔직히 말해서 당시에 내가 보낸 메일은 굉장히 난처하고, 답장하려면.. 2025. 8. 10. 10년 넘어 깨달은 시니어 개발자의 조언 2015년부터 유튜브 영상을 꾸준히 봐왔지만, 지난 10년 동안 진짜 인생에 도움이 된 영상은 손에 꼽을 정도였다. 최근에 한 영상을 봤는데, 13년 경력의 시니어 개발자가 해 준 이야기는 나에게 꼭 필요한 조언이었고, 수강생들에게도 전해주고 싶은 내용이었다. 부족한 영어 실력이지만 정말 두고두고 보고 싶어서, 번역과 함께 글을 써보려고 한다.이 글을 작성하게 해 준 Pete에게 정말 감사의 말씀을 드립니다. I truly appreciate it, Pete.원본: It took me 10+ years to realize what I’ll tell you in 8 minutes10년 넘게 걸려 깨달은 것을 8분 만에 알려드릴게요저는 2012년부터 코딩을 해왔고,정말 누군가 이 10가지를 미리 알려줬다면수.. 2025. 8. 8. 변할 준비가 되었을까? 최근 [The Let them Theory] 저자 인터뷰의 번역 영상을 봤다. 특히, "사람은 준비되었을 때만 변한다"와 "주변 사람들의 성장을 돕는 방법" 구간을 굉장히 몰입해서 봤다. 현재 나의 상황과 환경에서 대입하고, 공감이 되다 보니 많은 생각과 고민을 하게 되었다. 프론트엔드 부트캠프 튜터/강사라는 짧은 경력 동안 희미하게 있던 생각들이 영상을 보면서 선명해졌는데, 여기서 깨달은 몇 가지를 말하고, 기록한다. 진짜 곧, 청소를 '막' 시작하려던 참인데, 엄마의 "청소 좀 해라"라는 말을 들으면 "아 하려고 했어"라는 약간의 짜증 섞인 말과 함께 의지가 확 꺾여 청소를 더 늦게 한다. 공부를 안하는 것에 전전긍긍하여 밀어붙이고, A부터 Z까지 하나하나 정하고 알려줘 봤자 달라지지 않는다. 사람들.. 2025. 8. 1. 이전 1 2 3 4 ··· 29 다음 반응형
