– PROGRAMMING

[HTML & CSS] CSS에서 box-sizing: border-box;을 사용해야 하는 이유

by

웹 개발할 때 width와 padding을 설정하면 예상과 다르게 레이아웃이 깨지는 경우가 많다.예를 들어, 다음과 같이 스타일을 지정했다고 가정해보자. 이 경우 .box의 실제 너비는 얼마일까?보통 200px – 50px(좌) – 50px(우) = 100px이 될 거라고 생각할 수도 있지만,실제로는 width가 컨텐츠 영역(content box)만을 의미하기 때문에 아래처럼 계산된다. 즉, padding과 border가 width에 포함되지 않기 때문에 원하는 크기보다 커지는 문제가 … Read more

[HTML & CSS] CSS에서 position: absolute와 position: relative의 관계

by

1. position: absolute란? CSS에서 position: absolute를 적용하면 해당 요소는 문서 흐름에서 제거되며, 특정 기준점을 기준으로 배치됩니다.이때 기준점이 되는 요소는 가장 가까운 position이 지정된(즉, relative, absolute, fixed 중 하나인) 부모 요소입니다. 만약 부모 요소가 position: static(기본값)이라면, absolute 요소는 <html> 요소(즉, 문서 전체)를 기준으로 배치됩니다. 이 경우 .child 요소는 문서 전체를 기준으로 top: 50px, left: 50px 위치에 … Read more

[HTML & CSS] CSS Reset이란? 왜 필요한가?

by

CSS Reset이란? 왜 필요한가? 웹사이트를 제작할 때 브라우저마다 기본적으로 제공하는 스타일이 다릅니다. 이러한 차이를 해결하기 위해 사용하는 것이 바로 CSS Reset입니다. CSS Reset을 적용하면 모든 브라우저에서 동일한 초기 스타일을 유지할 수 있어 일관된 디자인을 만들 수 있습니다. 이 글에서는 CSS Reset의 필요성, 주요 방법, 그리고 가장 많이 사용되는 CSS Reset 코드를 소개합니다. CSS Reset이 필요한 이유 1. … Read more

[HTML & CSS] Google Fonts를 CSS에 적용하는 방법

by

개요 웹사이트에서 멋진 폰트를 사용하고 싶다면 Google Fonts를 활용하는 것이 가장 좋은 방법입니다.Google Fonts는 무료로 제공되며, CSS에 간단히 추가할 수 있어 많은 개발자들이 애용합니다.이 글에서는 Google Fonts를 HTML과 CSS에 적용하는 방법을 두 가지 방식으로 소개하겠습니다. 1. <link> 태그를 사용한 적용 방법 가장 일반적인 방법은 HTML의 <head> 태그에 <link>를 추가하는 것입니다. 사용 방법 예제 코드 아래는 Roboto 폰트를 적용하는 예제입니다. 📌 font-family: ‘Roboto’, sans-serif; 를 추가하면 글꼴이 적용됩니다!이 … Read more

[HTML & CSS]BEM(Block Element Modifier) – CSS 클래스 네이밍 방법론

by

개요 🔹 BEM이란? 1️⃣ Block (블록) 2️⃣ Element (요소) 3️⃣ Modifier (수정자) 🔹 BEM 클래스 네이밍 규칙 📌 BEM 적용 예제 ✅ HTML 코드 ✅ CSS 코드 🎯 BEM을 사용해야 하는 이유 ✅ 클래스 이름 충돌 방지 전역적으로 사용되는 스타일 클래스와 충돌할 위험이 줄어듭니다. ✅ 유지보수와 확장성 향상 클래스 구조가 명확해지므로 스타일 변경 및 추가가 … Read more

[HTML & CSS] 주석 정리

by

개요 1. HTML 주석(Comment) 📌 HTML 주석 기본 문법 📌 HTML 주석 사용 예시 📌 HTML 주석의 활용 방법 ✅ 코드 설명: 개발자가 쉽게 이해할 수 있도록 설명 추가✅ 임시 코드 비활성화: 특정 기능을 주석 처리하여 실행되지 않도록 설정✅ 디버깅 및 유지보수: 협업 시 코드 가독성을 높이고 유지보수를 쉽게 함 2. CSS 주석(Comment) 📌 CSS 주석 기본 문법 📌 CSS 주석 사용 예시 … Read more

[HTML & CSS ] Font Awesome 사용법!

by

1. 내용 Font Awesome 웹사이트를 개발하다 보면 아이콘을 자주 사용하게 됩니다.버튼, 네비게이션 바, 소셜 미디어 링크 등 다양한 요소에서 아이콘은 사용자 경험을 향상시키는 중요한 역할을 합니다.하지만 직접 아이콘을 만들거나 이미지 파일을 사용하는 것은 번거롭고 유지보수가 어렵습니다.이때 Font Awesome이 등장합니다! Font Awesome은 웹사이트에서 아이콘을 쉽게 사용할 수 있도록 제공하는 오픈소스 아이콘 라이브러리로, 간편한 사용법과 다양한 기능 덕분에 … Read more