dev_or_alive

웹 레이아웃을 유연하게 만들려면 고정값보다는 상대 단위를 적극적으로 활용해야합니다.이번 포스팅에서는 이전에 알아보았던 em, rem와 다른 상대 단위인 %, vw, vh에 대해서 간략하게 알아보겠습니다.✅ %🔥 정의상대단위중 하나인 %는 부모 요소의 너비와 높이를 100%로 삼아 상대적인 크기를 계산합니다.가로치수는 width를 참조하고, 세로치수는 height를 참조합니다.margin-, padding- 는 width를 기준으로 참조합니다🔥 기본 사용법/* 부모 폭의 80 % */.wrapper { width: 80%;}/* 부모 높이의 5 % */ .item { margin-top: 5%;}레이아웃이 부모 크기에 맞춰 자연스럽게 비레하여 늘어납니다.🔥 사용 권장 상황카드 그리드처럼 부모 컨테..

✅ 개요CSS를 처음 접하면 가장 흔한 px(픽셀)부터 em, rem 같은 여러가지 길이 단위가 있습니다.이 글에서는 길이 단위가 등장한 배경부터 각 단위의 특징 및 사용 시점까지 알아보도록 하겠습니다.✅ 길이 단위란?웹에서 “길이”는 글꼴 크기나 여백, 레이아웃의 폭처럼 화면상의 모든 크기를 정의합니다.크게는 절대 단위와 상대 단위로 나누어집니다.👉 절대 단위: 환경이 달라도 변하지 않는 값👉 상대 단위: 기준이 되는 크기에 비례해 바뀌는 값🔥 px: 절대 단위px은 절대 단위의 대표 주자이며, 브라우저가 규정한 “참조 픽셀” 하나에 대응합니다.특징으로는 화면의 해상도, 사용자 글꼴 설정과 거의 무관하게 고정됩니다.또한 값이 직관적이라 초보자가 이해하고 계산하기가 쉽습니다. 🎉 언제 사용하죠??..

✅ 개요웹 스타일을 다룰 때 가장 먼저 만나게 되는 속성이 color와 background-color입니다.이번 포스트에서는 색상을 지정하는 가장 기본적인 방법을 알아보겠습니다.✅ 핵심 속성색상 관련한 핵심 속성으로는 color와 background-color가 있습니다.color 속성은 텍스트(전경색)를 나타내며, background-color는 배경색을 나타냅니다.color는 텍스트에 적용하며 “상속”되는 특징이 있습니다. (부모 요소에 적용된 color값이 자식 요소에도 자동 적용됩니다.)background-color는 배경색을 적용하며, 상속되지 않습니다.p { color: red;}.box { background-color: #f0f0f0;}🔥 색상 표기 방법색상의 값을 표기하는데에는 기본..

이번 포스팅에서는 CSS를 작성하기 위해 필요한 선택자에 대해서 알아보겠습니다.✅ 선택자란 무엇인가?CSS 선택자는 HTML 문서 안에서 스타일을 적용할 “대상”을 찾아내는 규칙입니다.“어떤 요소에 이 스타일을 씌울 것인가”를 지정하는 식별자 역할을 합니다.선택자가 정확해야 의도한 요소에만 스타일을 붙일 수 있고, 유지보수가 용이합니다.✅ 기본 선택자🔥 전체 선택 : *DOM트리 안의 모든 요소를 한꺼번에 선택하는 CSS 선택자입니다.보통 “전체 스타일 초기화”, “공통 프로퍼티 부여”처럼 전역적인 스타일이 필요할 때 사용됩니다./* 모든 요소에 margin 100px이 적용된다. */* { margin: 100px;}🔥 태그 선택자 : p, div, header, footer 등.태그 선택자는 요..

✅ CSS 개요와 필요성CSS(Cascading Style Sheets)는 HTML 문서의 시각적 영역을 담당하는 스타일 시트 언어입니다.HTML이 구조를 정의한다면 CSS는 색상·여백·폰트·레이아웃 등 디자인 요소를 지정해 화면을 완성하는 역할을 합니다.콘텐츠와 스타일 분리: HTML 구조와 스타일 규칙을 분리해 유지보수성을 높인다.재사용성과 일관성: 하나의 스타일시트가 여러 페이지에 적용될수 있기 때문에 사이트 전반의 디자인을 통일할 수 있다.접근성 향상: 미디어쿼리를 통해 다양한 기기와 사용자 요구에 대응할 수 있다.✅ CSS 작성법 및 HTML과 연결 방법CSS를 적용하는 방법은 세 가지이며, 각 방법은 적용 범위와 우선순위에 차이가 있습니다.🔥 1. 인라인 스타일HTML 요소 내부에서 styl..