Development (42) 썸네일형 리스트형 [CSS] vw, vh 반응형 웹을 만들다 보면, 화면 크기에 맞춰 요소 크기를 자동으로 조절하는 것이 중요해요이때 많이 사용하는 단위가 %인데, %는 부모 요소의 크기에 따라 변하는 특징이 있어요그럼 부모 요소의 영향을 받지 않고, 브라우저 크기에 따라 자동으로 변하는 단위는 없을까요?바로 vw, vh 같은 뷰포트 단위입니다!📌 뷰포트(Viewport)란?뷰포트는 웹 브라우저에서 보여지는 화면 영역을 의미해요즉, 우리가 보는 화면 크기를 기준으로 크기를 조절할 수 있도록 도와주는 단위가 vw, vh입니다 [ 단위 정리 ]vw뷰포트 너비(가로)의 1/100 (1vw = 브라우저 너비의 1%)vh뷰포트 높이(세로)의 1/100 (1vh = 브라우저 높이의 1%)vmin너비 또는 높이 중 작은 값의 1/100vmax너비 또는 높.. [CSS] px, em, rem 1️⃣ px (픽셀) – 고정된 크기절대적인 단위로, 설정한 값이 변하지 않습니다화면 크기가 바뀌어도 그대로 유지됩니다✔ 사용 예시div { width: 100px; /* 항상 100px */} 📌 언제 사용할까?→ 아이콘, 버튼 크기 등 고정된 크기가 필요한 경우2️⃣ em – 부모 요소를 기준으로 변하는 크기상대적인 단위로, 부모 요소의 font-size를 기준으로 크기가 정해집니다부모의 글자 크기가 바뀌면, em으로 설정된 요소 크기도 함께 변합니다✔ 사용 예시html { font-size: 16px;}div { font-size: 20px; width: 10em; /* 20px × 10 = 200px */} 📌 언제 사용할까?→ 부모 요소에 따라 크기가 조절되어야 하는 내부 요소들 .. [CSS] Flex를 활용한 Footer 하단 고정 방법 웹 페이지를 만들 때, footer(푸터)를 항상 화면 하단에 고정하는 방법은 여러 가지가 있지만, 최근에는 Flex를 활용한 방법을 사용하고 있습니다.📌 기본개념footer를 항상 하단에 고정하려면, 부모 요소가 화면 전체 높이를 차지하면서, main 영역이 남은 공간을 채우도록 설정해야 합니다.이를 위해 Flex의 flex: 1 속성을 활용합니다. header main footer 📌 코드 설명html, body의 높이를 100%로 설정→ 부모 요소가 전체 높이를 차지할 수 있도록 함display: flex; flex-direction: column; 적용→ .wrapper를 세로 방향 정렬하도록 설정main에 flex: 1 적용→ main 영역이 남은 공간을 자동으로 .. [HTML] 태그 정리: p, span 1️⃣ (Paragraph)✔ 설명 태그는 문단(Paragraph)을 표현하는 블록 요소입니다.웹 문서에서 텍스트를 그룹화하고 가독성을 높이는 역할을 합니다. ✔ 특징블록 요소로, 한 줄을 전부 차지합니다.문단을 구분하여 텍스트의 구조를 명확하게 만듭니다.내부에 텍스트나 인라인 요소(span, a, strong, em 등)를 포함할 수 있습니다.✔ 사용 예시이 문장은 굵게 표시됩니다.이 문장은 빨간색으로 표시됩니다. ✔ 언제 사용할까?문장을 단락(Paragraph)으로 표현하고 싶을 때텍스트 중심의 콘텐츠를 구성할 때2️⃣ ✔ 설명 태그는 특정 텍스트를 스타일링할 때 사용하는 인라인 요소입니다.주로 색상, 크기, 간격 등을 조정할 때 사용됩니다. ✔ 특징인라인 요소로, 한 줄을 차지하지 않고 필요한 부.. [HTML] 시맨틱 태그 : section, article, div 차이 HTML 문서에서 , , 태그는 콘텐츠를 구조화하고 그룹화하는 역할을 합니다.이 태그들을 적절히 사용하면 검색 엔진 최적화(SEO)와 웹 접근성에도 유리합니다.1️⃣ 태그✔ 의미 있는 주제(섹션)별 그룹화✔ 제목(~)과 함께 사용✔ 하나의 완전한 개별 콘텐츠는 아님 📌 사용 예시: 웹 퍼블리싱이란? 웹 퍼블리싱은 HTML, CSS, JavaScript를 사용하여 웹사이트를 만드는 작업입니다. 📌 여러 개의 섹션으로 구성된 페이지 예시: 회사 소개 저희 회사는 웹 개발을 전문으로 합니다. 제공 서비스 웹 디자인 웹 퍼블리싱 프론트엔드 개발 📌 언제 사용하면 좋을까?✔ 하나의 페이지에서 여러 개의 큰 주제를 나눌 때✔ 각.. 웹 퍼블리싱에서 자주 쓰는 HTML 구조 웹 퍼블리싱을 할 때, 기본적으로 많이 사용하는 HTML 구조가 있습니다보통 웹사이트의 레이아웃은 헤더, 네비게이션, 메인 콘텐츠, 사이드바, 푸터이런 구조를 잘 이해하고 활용하면 웹사이트를 효율적으로 구성할 수 있습니다📌 모든 예시는 개인적인 작성방식입니다1️⃣ 기본적인 웹사이트 구조아래는 기본적인 웹사이트의 HTML 구조입니다. 웹사이트 제목 홈 소개 서비스 문의 기사 제목 여기에 콘텐츠가 들어갑니다. .. 웹 표준과 웹 접근성이 중요한 이유 웹사이트를 만들 때 단순히 예쁘게 디자인하는 것만 중요한 게 아닙니다누구나 쉽게 이용할 수 있도록 만들고, 다양한 환경에서도 올바르게 동작하도록 해야 합니다이런 이유 때문에 **웹 표준(Web Standards)과 웹 접근성(Web Accessibility)**이 중요합니다1️⃣ 웹 표준(Web Standards)이란?💡 **웹 표준(Web Standards)**은 모든 브라우저와 디바이스에서 일관되게 웹사이트가 동작하도록 정한 규칙입니다즉, "어떤 환경에서도 웹페이지가 깨지지 않고 올바르게 보이게 하는 것"을 목표웹 표준을 따르면 크롬, 엣지, 사파리, 파이어폭스 등 어떤 브라우저에서도 동일한 결과를 보여줄 수 있습니다 ✅ 웹 표준을 지켜야 하는 이유✔ 브라우저 호환성 유지 → 브라우저마다 다르게 보.. 웹 퍼블리싱을 배우려면 어디서부터 시작해야 할까? 웹 퍼블리싱을 배우고 싶은데 "어디서부터 시작해야 할지 막막하다!" 라는 생각, 많이 해봤을 거예요처음부터 너무 어렵게 접근하면 금방 지칠 수 있기 때문에, 기본 개념부터 차근차근 익히는 것이 중요해요지금부터 웹 퍼블리싱을 처음 시작하는 사람이 따라가면 좋은 학습 순서를 알려줄게요1️⃣ 웹 퍼블리싱이 뭔지 이해하기우선 웹 퍼블리싱이 무엇인지, 어떤 역할을 하는지 알아야 해요웹 퍼블리싱은 디자인을 실제 웹페이지로 구현하는 작업이에요즉, HTML, CSS, JavaScript 같은 기술을 사용해 디자이너가 만든 디자인을 웹에서 보이게 하는 것이죠✅ 웹 퍼블리싱에서 다루는 핵심 기술HTML → 웹페이지의 뼈대 만들기CSS → 스타일(색상, 크기, 위치) 적용하기JavaScript → 동적인 요소 추가하기이제 .. 이전 1 2 3 4 5 6 다음
