dev_or_alive

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

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

웹 페이지를 만들다 보면 가장 많이 쓰는 태그 중 하나가 바로 입니다.구조를 나누고 스타일을 입히기에 편리하지만, 문제는 의미가 없다는 점입니다.이런 문제를 해결하고자 등장한 것이 바로 시멘틱(Semantic) 태그입니다.이번 글에서는 시멘틱 태그의 종류, 사용해야 하는 이유, 그리고 로만 구성했을 때와의 차이점까지 알아보겠습니다.✨ 시멘틱 태그란?시멘틱(Semantic)은 '의미론적인'이라는 뜻을 가지고 있습니다.즉, 시멘틱 태그란 HTML 요소가 어떤 역할을 하는지 의미를 담고 있는 태그입니다.예를 들어 ✅ 간단 설명: 웹사이트나 섹션의 머리..

HTML에서 텍스트를 표현하는 방법은 다양하며, 그 목적과 의미에 따라 여러 태그를 사용할 수 있습니다.이 글에서는 제목, 문단, 줄바꿈, 강조, 수평선 등 텍스트 표현을 위한 기본 태그들을 정리해드리며, 마지막에는 실습용 예제도 함께 소개해드리겠습니다.✨ 제목 태그: ~ 제목 태그는 문서의 구조를 잡을 때 사용합니다. 숫자가 작을수록 중요한 제목이며, 기본적으로 글씨 크기도 더 큽니다.가장 큰 제목그 다음 제목세 번째 제목네 번째 제목다섯 번째 제목가장 작은 제목 검색 엔진 최적화(SEO) 측면에서도 은 매우 중요하며, 일반적으로 문서마다 한 번만 사용합니다.✨ 문단 태그: 일반적인 문단을 표현할 때 사용합니다. 문단마다 태그로 감싸주면 됩니다.이것은 하나의 문단입니다.이것은 또 다른 문단입니다.✨..

웹 개발을 처음 시작하신 분이라면 누구나 한 번쯤 들어보았을 용어가 바로 HTML입니다. 이 글에서는 HTML의 정의부터 역할, 그리고 기본 구조까지 차근차근 설명드리겠습니다.✨ HTML의 정의HTML은 HyperText Markup Language의 약자로, 우리말로는 하이퍼텍스트 마크업 언어라고 부릅니다. 쉽게 말해, 웹페이지의 뼈대를 만드는 언어입니다.HyperText(하이퍼텍스트): 링크를 통해 다른 문서나 페이지로 이동할 수 있는 텍스트를 의미합니다.Markup Language(마크업 언어): 문서의 구조나 의미를 태그(tag)를 이용하여 표시하는 언어입니다.즉, HTML은 웹페이지에 들어갈 텍스트, 이미지, 영상 등을 어떤 구조로 보여줄지를 정해주는 언어입니다.✨ HTML의 역할HTML은 웹페..