CSS

📝 폰트 패밀리 기본 폰트 설정 폰트를 설정할 때 주의사항: 영문명 사용: 한글 폰트명보다는 영문명을 사용하는 것이 안전합니다 따옴표 사용: 폰트명에 공백이 있을 수 있으므로 항상 따옴표로 감싸주세요 폴백 폰트: 콤마로 구분하여 여러 폰트를 지정하면, 왼쪽부터 순서대로 적용을 시도합니다 설치된 폰트만: 사용자 컴퓨터에 설치된 폰트만 적용 가능합니다...

🚀 개발환경 설정 VS Code 필수 확장 Emmet (기본 내장) div.container>div + Tab → `` div#header>p.title*3 + Tab → id, class, 반복 생성 > 표시는 내 바로밑의 자식요소라는 뜻 ! + Tab → HTML 기본 템플릿 lorem + Tab → 더미 텍스트 Prettier/Beauti...

📏 모던 웹 CSS 단위 정리 절대 단위 상대 단위 단위별 특징 | 단위 | 기준 | 활용 | |------|------|------| | px | 절대값 | 정확한 크기 필요할 때 | | rem | 루트 폰트사이즈 | 타이포그래피, 일관성 필요할 때 | | em | 부모 폰트사이즈 | 중첩된 요소 크기 조절 | | vw/vh | 뷰포트 크기 |...

🔍 개발자 도구 활용법 개발자 도구 열기 요소 검사 방법 요소 선택 도구: 🔍 버튼 클릭 후 원하는 요소 선택 스타일 확인: 우측 하단에서 적용된 모든 스타일 확인 실시간 수정: 속성값 직접 수정하여 테스트 (실제 파일엔 반영 안됨) 스타일 우선순위 확인 규칙: 위에 있을수록 높은 우선순위, 취소선은 적용되지 않은 스타일 🌐 브라우저 호환...

🛠️ 프로젝트 초기 설정 CSS 기본 리셋 디버깅 방법 크롬 개발자도구: F12 → 요소 검사 실시간 테스트: 스타일 값 직접 수정 커뮤니티 활용: 막히는 부분은 질문하기 🎯 서비스 소개 섹션 (4개 아이콘) HTML 구조 CSS 스타일링 반응형 디자인 🖼️ 포트폴리오 섹션 (2×2 그리드) HTML 구조 CSS 레이아웃 배경 이...

Bootstrap은 프론트엔드 Component Library로, 웹페이지에 필요한 버튼, 메뉴, 탭, 모달, 카드 등을 미리 만들어놓은 CSS 프레임워크입니다.빠른 개발: 복붙식 HTML/CSS 개발 가능반응형 레이아웃: 클래스만으로 쉽게 구현일관된 디자인: 통일된

실무에서는 업무의 절반 이상이 기존 CSS 수정입니다. 원본 CSS를 직접 수정할 수 없는 경우가 많아 새로운 CSS로 덮어써야 합니다.⚠️ 주의: !important는 나중에 수정하기 어려워지므로 되도록 사용하지 않는 것이 좋습니다.box-shadow 속성 설명:첫

Pseudo-element는 HTML 요소의 특정 부분만 선택해서 스타일을 줄 수 있는 CSS 선택자입니다. 콜론 2개(::)를 사용합니다.Shadow DOM은 브라우저가 복잡한 HTML 구조를 숨겨서 단순하게 보여주는 기술입니다. <input>, <prog

멀티 포맷 지원: 여러 형식을 제공하면 브라우저가 최적화된 포맷을 자동 선택HTML 비디오 삽입부터 고급 CSS 애니메이션까지 정리해보았습니다.

참고: caniuse.com에서 정확한 호환성 정보 확인 가능CSS Grid는 격자(Grid) 기반 레이아웃 시스템으로, 복잡한 2차원 레이아웃을 쉽게 구현할 수 있습니다.position: sticky는 스크롤 기반 고정 요소를 만드는 속성입니다.일반 상태: 요소가 원

관리자 페이지(Admin Dashboard)는 웹 개발에서 자주 만들게 되는 실무 프로젝트입니다. Bootstrap 5와 Font Awesome 5를 활용하여 효율적으로 제작해보겠습니다.Bootstrap 5 CDN 또는 다운로드Font Awesome 5 아이콘 라이브러

Sass (Syntactically Awesome Style Sheets)는 CSS를 더 프로그래밍 언어처럼 작성할 수 있게 해주는 전처리언어(Preprocessor)입니다.변수 사용: 반복되는 값들을 변수로 관리중첩 구조: HTML 구조와 유사한 CSS 작성함수와 믹