[TIL] CSS의 정의, em, rem, float

in TIL on Til, Javascript, Css Last modified at:

2025-01-20 TIL

📝 TIL (Today I Learned)
🔗 원본 이슈: #2
📅 작성일: 2025-01-20
🔄 최종 수정: 2025년 03월 05일

🍀 새롭게 배운 것

이번에는 그동안 ‘대충은 안다’고 생각했던 **CSS의 기본 개념들과 웹의 메타 정보 설정(OG)**에 대해 한층 더 깊이 있게 이해하게 되었다.

🧷 CSS의 정의부터 세세한 단위까지

  • CSS (Cascading Style Sheets) HTML 구조에 ‘스타일’을 입히는 언어. 눈에 보이는 모든 웹의 디자인과 인터랙션을 담당하는 핵심 기술이다.

  • 단위 차이 – em vs rem

    • em: 부모 요소의 font-size를 기준으로 계산됨. 중첩된 요소에서는 비율이 누적되기 때문에 예측이 어렵다.
    • rem: 루트 요소(html)의 font-size를 기준으로 계산. 전역적으로 일관된 크기 조절이 가능하다. ➤ 실무에서는 대부분 rem을 기준으로 통일하는 추세!

  • float 속성

    • 요소를 좌우로 띄워 배치하는 방식이지만, modern CSS에서는 flexbox나 grid가 대체하고 있다.
    • 다만, 여전히 레거시 코드나 간단한 배치에서는 float이 등장하기도 하므로 이해는 필수.

🌐 웹 OG (Open Graph)

  • SNS에서 링크를 공유했을 때, 썸네일 이미지 / 제목 / 설명이 미리보기로 보이는 기능은 OG 메타태그 덕분이다.

  • 예시:

    <meta property="og:title" content="내 블로그 타이틀" />
<meta
  property="og:description"
  content="유익한 개발 인사이트가 가득한 블로그"
/>
<meta property="og:image" content="https://myblog.com/images/thumbnail.png" />
<meta property="og:url" content="https://myblog.com" />

  • SEO뿐 아니라 브랜딩과 클릭 유도에도 중요한 역할을 하므로, 웹 개발 시 꼭 챙겨야 할 부분.

🍎 오늘의 문제 상황 & 해결 과정

🤔 문제 상황

CSS를 평소에 자주 쓰고 있어서 “이 정도는 알지!”라고 생각했지만, 실제로는 em, rem, float, OG 태그와 같은 용어들의 의미와 정확한 사용법을 막연히만 알고 있었다.

🔧 해결 과정

  • 개발 중 우연히 encountered 한 단어들을 그냥 넘기지 않고, 바로바로 정리하고 문서화하는 습관을 시도해봤다.
  • VS Code + Markdown을 사용해서 개념을 정리하고, 블로그에 업로드할 수 있도록 요약까지 해보았다.
  • 결과적으로 단지 “아는 느낌”이 아니라 필요할 때 꺼내쓸 수 있는 지식으로 바뀌었다.

🦄 느낀 점

  • 겉만 아는 것과 속까지 아는 것은 다르다.

    • CSS나 HTML은 쉬운 것처럼 느껴질 수 있지만, 막상 실제로 ‘왜 그렇게 되는지’를 설명하려고 하면 막히는 경우가 많다.

  • 앞으로는 **모르는 개념을 마주쳤을 때 ‘그냥 넘기지 않기’**를 실천하려고 한다.

    • ✍️ “몰랐던 걸 내 언어로 정리하는 순간, 진짜 내 것이 된다.”

📌 Tip:

개발자에게는 ‘검색력’도 중요하지만, “기억에 남게 정리하는 습관”은 더 강력한 무기가 될 수 있다.

🐬 깃블로그 정리

[CSS 기초] (https://nan0silver.github.io/miscellaneous/2025-01-18-css/) [CSS Float] (https://nan0silver.github.io/miscellaneous/2025-01-19-css-float/)