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..

개요 웹 페이지 작업을 하다 보면 svg파일을 이용하여 로고나 아이콘을 표현할 때가 있습니다. 사용을 하면서도 로고나 아이콘은 주로 svg파일을 이용한다고는 알고있지만, jpg/jepg/png등을 왜 사용하지 않는지에 대해서는 크게 생각해 보지 않았습니다. 마침 개인 프로젝트를 진행중 SVG를 이용할 일이 있어 왜 SVG를 이용하는지, 어디에 사용해야 유리할지 마지막으로 웹에서 SVG를 어떻게 적용하는지에 정리해보려 합니다. SVG란? (Scalable Vector Graphics) SVG는 XML 기반의 벡터 이미지 포맷으로 크기 조정이 자유롭다는 특징을 가지고 있습니다. 픽셀을 이용한 래스터 파일과 달리 확대하거나 축소해도 이미지의 품질이 저하되지 않습니다. 이는 SVG가 픽셀이 아닌 수학적 방정식으..