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

인터넷은 누구나 사용할 수 있어야 한다는 철학 위에 만들어졌습니다.하지만 시각, 청각, 운동 능력 등 제약을 가진 사용자들이 웹을 사용하는 데 불편함을 겪는 경우가 많습니다.이런 문제를 해결하기 위한 개념이 바로 **웹 접근성(Web Accessibility)**입니다.이번 글에서는 웹 접근성이 무엇인지, 왜 고려해야 하는지,그리고 실무에서 접근성을 높이는 방법까지 자세히 알아보겠습니다.✅ 웹 접근성이란?웹 접근성(Web Accessibility)이란,장애가 있는 사람을 포함해 모든 사용자가 웹 콘텐츠에 접근하고 이용할 수 있도록 보장하는 것을 의미합니다.즉, 웹사이트를 누구나, 어떤 환경에서도, 동등하게 사용할 수 있도록 만드는 것이 바로 웹 접근성입니다.예를 들면?시각 장애가 있는 사용자가 스크린 리..

HTML 태그는 기본적으로 구조만을 담당합니다.하지만 속성(attribute)을 통해 태그에 의미, 스타일, 동작 등 다양한 기능을 부여할 수 있습니다.이번 글에서는 HTML의 대표적인 속성들과, 전역 속성, 이벤트 속성까지 차근차근 알아보겠습니다.✅ 속성은 어디에 들어가는가?속성은 보통 이렇게 사용됩니다.예를 들어 아래와 같이 사용됩니다. 네이버여기서 는 링크 태그,그 안에 있는 href, target, title이 바로 속성(attribute)입니다.✅ 자주 사용하는 HTML 속성들✨ id해당 요소의 고유한 식별자한 페이지 내에서 하나의 요소에만 사용해야 합니다JavaScript, CSS에서 참조할 때 많이 사용됩니다메인 제목✨ class공통 스타일을 적용하거나 그룹화된 요소를 관리할 때 사용합니다..

웹 페이지에서 데이터를 표 형태로 정리해서 보여주고 싶을 때 사용하는 것이 태그입니다.단순히 데이터를 나열하는 것을 넘어, 행과 열을 기준으로 정보를 구조화할 수 있어 매우 유용합니다.이번 글에서는 HTML 테이블 태그의 구성요소, 기본 사용법, 실용적인 예시까지 차근차근 정리해보겠습니다.✅ Table 태그란? 태그는 데이터를 행(Row)과 열(Column) 구조로 표현하기 위한 HTML 태그입니다.주로 다음과 같은 상황에서 사용됩니다상품 목록, 스케줄, 성적표통계 자료, 비교표관리자 페이지의 리스트 뷰✅ Table의 기본 구성 요소HTML 테이블은 다음과 같은 요소들로 구성됩니다.태그설명테이블 전체를 감싸는 태그입니다.표의 제목(머리글) 행들을 그룹으로 묶습니다.실제 데이터(본문) 행들을 그룹으로 묶..