카테고리: CSS

button에 돋보기 배경과 텍스트를 함께 배치하는 전체 예제를 제공합니다. 이미지 경로, padding, 크기와 초점 표시를 설정하고 키보드 조작·폼 제출·이미지 실패 상태를 확인합니다.

자동 표 배치와 고정 표 배치의 차이를 같은 내용으로 비교합니다. width 설정, 열 너비 결정 순서, 긴 문자열의 줄바꿈·말줄임표와 모바일 가로 스크롤을 함께 설명합니다.

uppercase·lowercase·capitalize·none의 결과를 같은 원문으로 비교합니다. 상속 해제, 한글·영문 혼용과 터키어의 lang 설정을 실습하고 화면 표시와 원본 데이터 변환의 차이를 설명합니다.

현재 Google Fonts 화면에서 삽입 코드를 찾고 Noto Sans KR의 400·700 굵기를 적용하는 전체 예제입니다. link와 font-family의 역할, 대체 글꼴, Network와 렌더링 글꼴 확인, 필요한 굵기 선택 기준을 설명합니다.

내용·padding·border·margin의 역할과 content-box·border-box의 너비 계산을 비교합니다. 실행 가능한 두 상자 예제로 padding 변경 결과와 세로 margin 병합을 확인하고 개발자 도구로 점검하는 방법을 설명합니다.

모바일 우선 Grid 예제로 화면 너비에 따라 한 열·두 열·세 열을 전환합니다. viewport 설정, 미디어 쿼리 적용 순서, 전환점 직전·직후의 점검 방법과 가로 넘침 해결 기준을 설명합니다.

960px 고정 너비의 페이지에 본문과 사이드바를 배치하는 전체 예제입니다. Grid 열 크기 계산, 좌우 위치 변경, 3단 확장과 좁은 화면의 가로 스크롤 원인을 함께 설명합니다.

작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.

역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.

폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.