본문 바로가기

분류 전체보기79

레이아웃의 근본이 되는 '블록(Block)과 인라인(Inline)' 개념 [HTML/CSS] div는 혼자 한 줄을 다 차지하고, span은 옆으로 붙는 이유? (Block vs Inline 완벽 정리)HTML 태그를 배우다 보면 이상한 점을 발견하게 됩니다.어떤 태그(, )는 내용을 조금만 적어도 한 줄을 통째로 차지해서 줄 바꿈이 되는데, 어떤 태그(, )는 글자만큼만 자리를 차지하고 옆으로 다닥다닥 붙습니다.그리고 더 이상한 건, 옆으로 붙는 애들한테는 크기(width, height)를 줘도 말을 안 듣는다는 겁니다.이건 태그의 성격이 **'블록(Block)'**이냐 **'인라인(Inline)'**이냐에 따라 다르기 때문입니다. 이 두 가지만 구별해도 레이아웃의 50%는 먹고 들어갑니다.1. 길막의 제왕, 블록 요소 (Block Element)블록 요소는 **'상자(Bo.. 2025. 12. 12.
[CSS] 마진이 겹쳐요! 초보자를 울리는 '마진 병합 현상(Margin Collapsing)' 완벽 해결 분명히 자식한테 마진을 줬는데 부모가 움직인다? CSS로 레이아웃을 잡다 보면 수학적으로 도저히 이해가 안 되는 상황이 발생합니다. 위쪽 박스에 마진 30px을 주고, 아래쪽 박스에 마진 20px을 줬으면 당연히 사이 간격은 50px이어야 하잖아요?그런데 브라우저는 30px만 띄워버립니다. 혹은, 상자 안에 있는 자식 요소에게 여백을 줬는데, 뜬금없이 바깥쪽 부모 상자가 통째로 밀려 내려오기도 합니다.버그가 아닙니다. CSS의 **'마진 병합(Margin Collapsing)'**이라는 아주 독특한 규칙 때문입니다. 오늘은 이 현상이 왜 생기는지, 그리고 상황별 해결법을 알아보겠습니다.1. 현상 ①: 형제끼리 만났을 때 (큰 놈이 이긴다)위아래로 이웃한 두 박스(블록 요소)가 만났을 때, 마진은 더하기(.. 2025. 12. 10.
[CSS] 이미지 밑에 생기는 정체불명의 4px 여백, 도대체 왜 생길까? (feat. vertical-align) 웹 코딩을 하다 보면 정말 귀신 곡할 노릇인 상황을 마주하게 됩니다. 분명히 박스 안에 딱 맞는 이미지를 넣었는데, **이미지 아래쪽에 미세한 흰색 여백(약 3~4px)**이 남는 현상입니다.margin: 0, padding: 0을 아무리 줘도 사라지지 않고, height를 강제로 줄이면 이미지가 찌그러지죠. 이건 버그가 아닙니다. 브라우저가 글자를 다루는 '기준선(Baseline)' 때문에 생기는 지극히 정상적인 현상입니다. 오늘은 이 여백을 깔끔하게 없애는 2가지 방법을 알아보겠습니다.1. 범인은 바로 '기준선(Baseline)'이 현상을 이해하려면 웹 브라우저가 이미지를 어떻게 취급하는지 알아야 합니다. 태그는 태생이 인라인(Inline) 요소입니다. 즉, 브라우저는 이미지를 '그림'이 아니라 .. 2025. 12. 9.
Today's English - 디저트는 별개지~! ✅ 오늘의 문장 Dessert doesn’t count! 뜻: 디저트는 (칼로리나 양에) 안 들어가~ 발음: [디저트 더즌 카운트!] ✏️ 예문 I’m full, but I still want dessert. 👉 [아임 풀, 벗 아이 스틸 원트 디저트] 👉 배부르긴 한데, 디저트는 먹고 싶어. There’s always room for dessert. 👉 [데얼스 올웨이즈 룸 포 디저트] 👉 디저트는 항상 들어갈 공간이 있지. Come on, just one bite! 👉 [컴 온, 저스트 원 바잇] 👉 에이~ 한 입만 먹자! 🗣.. 2025. 12. 7.
Today's English - 배 터질 것 같아! ✅ 오늘의 문장 I’m so full! 뜻: 나 너무 배불러! 발음: [아임 쏘 풀!] ✏️ 예문 I feel like I’m going to explode. 👉 [아이 필 라이크 아임 고잉 투 익스플로드] 👉 배 터질 것 같아. That was a big meal. 👉 [댓 워즈 어 빅 밀] 👉 정말 푸짐했어. I shouldn’t have eaten so much. 👉 [아이 슈든 해브 이튼 쏘 머치] 👉 그렇게 많이 안 먹었어야 했는데. 🗣️ 짧은 대화 A: How was the food? [하우 워즈 더 .. 2025. 12. 5.
2025 연말정산 — 신용카드/체크카드/현금영수증 공제 쉽게 정리해봤어요 2025 연말정산 — 신용카드/체크카드/현금영수증 공제 쉽게 정리해봤어요올해도 연말정산 시즌이 다가오니까 자연스럽게“카드 공제는 뭐가 더 유리하지?”“신용카드보다 체크카드가 더 공제율 높다던데…?”이런 생각이 또 들더라구요.그래서 오늘은 제가 정리하면서 헷갈렸던 부분들,2025년 기준 카드 공제율 + 25% 초과 계산법을최대한 쉽게 요약해봤습니다.✔ 카드별 공제율, 진짜 이게 끝종류공제율신용카드15%체크카드30%현금영수증30%전통시장40%대중교통40%솔직히 이 표 하나만 알면 반은 끝난 거예요.왜 다들 체크카드를 쓰라고 하는지 이제 완전 이해됨…✔ “25% 초과분부터 공제가 된다”는 말이 무슨 뜻?이게 대부분 헷갈리는 부분.연말정산 카드 공제는 총급여의 25%를 넘긴 금액부터 공제가 돼요.예를 들어:총급.. 2025. 12. 3.
[CSS] px, em, rem 완벽 정리: 도대체 무엇을 써야 할까? (차이점과 실무 팁) 웹 퍼블리싱이나 프론트엔드 공부를 시작하면 가장 먼저 마주치는 난관이 있습니다. 바로 **'단위'**입니다. 포토샵이나 일러스트레이터에서는 px(픽셀)이나 pt(포인트)만 쓰면 됐는데, 코딩을 하려니 rem, em, %, vw 등 낯선 단위들이 쏟아집니다.특히 **"반응형 웹을 만들려면 px 쓰지 마세요"**라는 말을 많이 들어보셨을 텐데요. 오늘은 가장 헷갈리는 3대장, px, em, rem의 차이점과 실무에서 어떻게 구분해서 써야 하는지 확실하게 정리해 드리겠습니다.1. 절대적인 존재, px (Pixel)px는 우리가 가장 익숙한 단위입니다. 모니터 화면의 점 하나(Pixel)를 기준으로 하는 **'절대 단위'**입니다.특징: 부모 태그의 크기나 브라우저의 설정과 상관없이 항상 고정된 크기를 가집니다.. 2025. 12. 2.
2025 연말정산 미리보기 해봤는데 생각보다 괜찮네 2025 연말정산 미리보기 해봤는데 생각보다 괜찮네12월만 되면 괜히 신경 쓰이는 게 연말정산이잖아.저도 그래서 오늘 미리보기 기능 한번 써봤는데, 생각보다 정리가 잘 되어 있어서올해 얼마나 환급받을지 딱 감이 오더라구요.혹시 아직 안 해본 분들 있으면 간단하게 정리해서 알려드릴게요.진짜 몇 번만 클릭하면 바로 확인할 수 있어요.✔ 미리보기 어디서 하는지?홈택스 들어가서상단 메뉴에서 연말정산 → 연말정산 미리보기로그인(금융인증서나 PASS 인증 가능)모바일 손택스에서도 되는데, PC가 조금 더 보기 편했어요.✔ 미리보기에서 볼 수 있는 것들올해 환급 받을지, 아니면 추가로 낼지신용카드 공제 얼마나 되는지의료비랑 보험료 제대로 들어갔는지월세 공제 가능 여부기부금 공제 효과저는 카드 공제 부분이 제일 유용했.. 2025. 12. 2.

티스토리툴바