OX퀴즈 웹페이지 만들기 – 2. 스타일링
앞서 “OX퀴즈 웹페이지 만들기: 1. 마크업“에서는 웹페이지의 기본 구조를 설정하고 필요한 HTML 요소를 생성했습니다. 이제 두 번째 단계로, 이 웹페이지를 스타일링하여 보기 좋고 퀴즈 단계별 상황에 맞는 디자인을 입혀 보겠습니다. …
렌더링 차단 리소스 제거하기
개요 웹 개발에서 렌더링 차단 리소스는 웹페이지의 로딩 속도를 저하시키는 주요 원인 중 하나입니다. 사용자들은 빠른 페이지 로딩과 원활한 경험을 원하기 때문에 렌더링 차단 리소스를 효율적으로 제거하는 것이 중요합니다. 이 …
CSS 구체성을 알아야 신입을 면한다!
소개 웹 개발에 입문하신 신입 개발자 여러분, CSS 구체성에 대해 들어보셨나요? CSS 구체성 개념을 제대로 이해하는 것은 많은 초보자들이 겪는 혼란과 어려움을 피하기 위해 필수입니다. 이 글에서는 CSS 구체성 개념을 …
CSS 컴포넌트 설계란
CSS(Cascading Style Sheets)는 웹 디자인을 위한 핵심 요소 중 하나입니다. 웹 페이지의 레이아웃, 디자인, 스타일링을 구현하는 데 중요한 역할을 하는데요. 이 중에서도 “CSS 컴포넌트”는 웹 개발에서 핵심적인 역할을 담당하며, 웹 …
[CSS] 말줄임표(…) 한줄, 두줄에 적용하기
한 줄 말줄임표 두 줄(여러줄) 말줄임표 주의사항 한 줄 말줄임표는 왼만한 브라우저에서 모두 지원하고 있는 속성들을 사용합니다. 다만 두 줄 이상의 말줄임표에서는 조금 복잡합니다. prefix로만 지원되고 있는 -webkit-box, -webkit-box-orient, -webkit-line-clamp는 …
[CSS] 가상요소에 폰트어썸(Font Awesome) 사용하기
폰트어썸이란(Font Awesome)? 폰트어썸(Font Awesome)은 벡터 기반의 아이콘 라이브러리입니다. 웹 개발자들이 웹사이트 또는 애플리케이션에서 아이콘을 사용할 때 유용하게 활용할 수 있습니다. 그래픽 폰트 또는 아이콘 폰트라고도 합니다.폰트어썸같은 그래픽 폰트를 사용하면 벡터 …
가상요소(::before, ::after)가 안보이거나 애니메이션 되지 않을 때
웹표준에 맞춰 바른 마크업을 하기위해서는 가상요소를 사용하게 되는 경우가 많습니다. 가상요소를 분명이 오타없이 적용했는데 보이지 않는 이유와 원인들을 정리하여 같은 이유로 고생하시는 분들에게 조금이라도 도움이 되고자 싶어 정리해 봅니다. 가상요소는 …
크롬 개발자 도구에서 hover/focus 상태 확인하는 방법
개발자 도구를 통해서 CSS 적용상태를 확인하거나 수정해보는 경우가 있는데 마우스를 올렸을 때나 포커스를 가진 경우의 디자인을 보고 싶은 경우가 있습니다. 하지만 개발자 도구에서 그 항목을 보려는 순간 이벤트가 해제되면서 CSS확인이 …