CSS 배우기 - 코딩 강좌 — 휴대폰에서 실시간 HTML 및 CSS 편집기로 CSS 코딩을 연습해요

초보자의 레이아웃 문제 대부분은 세 가지 원인에서 발생합니다. Box model: 기본적으로 padding과 border가 요소에 선언된 너비에 더해지므로, 입력한 숫자보다 박스가 더 넓어집니다. Specificity: 다른 곳에 있는 더 구체적인 규칙이 여러분의 규칙을 조용히 덮어씁니다. 그리고 잘못된 레이아웃 도구의 사용입니다. 한 줄에 맞게 설계된 flexbox로 2차원 페이지를 억지로 만들려고 하는 경우가 여기에 해당합니다. CSS 배우기 - 코딩 강좌은 이 세 가지를 시행착오로 발견하게 하지 않고, 순서대로 이해할 수 있도록 코스를 구성했습니다.

약간만 알면 되며, HTML을 먼저 끝내지 않고 레슨과 함께 익혀도 됩니다. CSS는 HTML 요소가 어떻게 표시되는지를 설명하므로, 페이지가 제목, 단락, 목록, 이미지 같은 요소로 구성된다는 사실만 알아도 시작하기에 충분합니다. 앱의 라이브 편집기에서는 HTML과 CSS를 함께 보여 주므로, 첫 레슨부터 둘의 연결 관계를 확인할 수 있습니다.

Flexbox는 버튼 한 줄이나 내비게이션 바처럼 항목을 한 줄에 배치하고, 그 한 축을 따라 남는 공간을 분배합니다. Grid는 행과 열을 동시에 정의하므로, margin으로 조금씩 조정하는 대신 실제 2차원 격자에 항목을 배치할 수 있습니다. 일반적으로 페이지 전체 레이아웃에는 grid를 사용하고, 그 안에 있는 단일 컨트롤 행에는 flexbox를 사용합니다. 이 코스에서는 둘 다 배운 뒤 직접 선택할 수 있도록 합니다.

CSS는 충돌하는 규칙을 먼저 specificity로 판단하고, 그다음 source order를 적용합니다. ID selector는 class selector보다 우선하며, class는 일반 element selector보다 우선합니다. 어느 것이 스타일시트 아래쪽에 나오는지와 관계없이 적용됩니다. 그래서 올바르게 보이는 규칙이 다른 곳에 있는, 잊고 있던 규칙에 질 수 있습니다. 앱의 Specificity & Cascade 코스는 이 우선순위를 더 이상 미스터리하게 느끼지 않고 예측할 수 있도록 특별히 구성되었습니다.

네, CSS를 직접 배울 가치는 여전히 있습니다. Tailwind 같은 유틸리티 프레임워크는 CSS 개념 위에 작성된 계층이지, CSS를 대체하는 것이 아닙니다. 유틸리티 클래스가 예상대로 작동하지 않을 때 여러분을 막힌 상태에서 벗어나게 해 주는 것은 그 아래에 있는 box model, specificity, 레이아웃 시스템에 대한 이해입니다. 또한 모든 변경 사항이 페이지에 즉시 표시되므로, 결과를 가장 빠르게 확인할 수 있는 기술 중 하나이기도 합니다.

총 학습 시간보다 꾸준함이 더 중요합니다. 짧은 레슨을 매일 학습하면 대부분의 초보자는 몇 주 안에 selector, spacing, typography와 기본적인 flexbox 또는 grid 레이아웃을 자신 있게 다룰 수 있습니다. specificity의 예외적인 경우나 container queries처럼 더 어려운 부분을 배우기 훨씬 전입니다. 앱의 20개 guided projects는 한 번에 실제 페이지 하나씩 이 단계를 연습할 수 있도록 마련되어 있습니다.

이 앱은 App Store와 Google Play에서 무료로 다운로드할 수 있습니다. 첫 번째 코스, 첫 번째 guided project, 두 개의 bug-hunt missions, 라이브 편집기와 일일 AI Mentor 사용량이 무료로 제공됩니다. Pro를 이용하면 모든 코스, 20개 프로젝트와 20개 미션, certificate exam, 무제한 AI Mentor 사용이 가능하며 광고도 제거됩니다.

CSS 배우기 - 코딩 강좌은 App Store에서 iPhone과 iPad용으로, Google Play에서 Android용으로 제공되며, 인터페이스는 22개 언어를 지원하고 4+ 연령 등급을 받았습니다. 완전한 초보자, 직접 페이지를 스타일링하고 싶은 디자이너, 프론트엔드 면접을 준비하는 커리어 전환자와 학생을 위한 앱입니다.

즉시 미리보기는 HTML과 CSS를 렌더링하기 위해 연결이 필요하며, 앱은 이를 조용히 성능 저하로 처리하지 않고 명확히 안내합니다. 레슨 텍스트와 읽기 자료는 불안정한 연결에서도 계속 사용할 수 있도록 만들어져 대부분의 출퇴근 상황에 적합하지만, 완전히 오프라인인 라이브 미리보기 세션은 이 편집기가 제공하는 기능이 아닙니다.

CSS 배우기 - 코딩 강좌은 App Store를 통한 iOS와 Google Play를 통한 Android에서 실행되며, 앱은 22개 언어로 제공됩니다. 평점은 4+입니다. 최종 시험에 합격하면 앱에서 수료증을 발급합니다. 이는 여러분이 수행한 작업을 보여 주는 증명으로, guided projects에서 설명할 수 있는 작업과 함께 CV에 유용하게 활용할 수 있지만, 공인 자격은 아닙니다.