각 카드를 클릭하면 해당 용어를 실제로 보여주는 데모가 나옵니다.
읽기보다 직접 보면 훨씬 빨리 이해됩니다.
용어를 익히기 전에, 가장 기본부터. 클로드코드가 만들어주는 결과물(.html)을 어떻게 열어 확인할 수 있는지.
파일 이름 끝에 붙는 점(.)과 짧은 영문 — 그 파일이 어떤 종류인지 알려주는 꼬리표.
클로드코드에게 "랜딩페이지 만들어줘" 라고 하면 보통 landing.html, portfolio.html 같은 .html 파일이 만들어집니다.
대부분의 PC는 .html 파일을 더블클릭만 해도 기본 브라우저(Chrome · Edge · Safari)로 자동 실행됩니다.
더블클릭이 다른 프로그램(에디터 등)으로 열린다면, 마우스 오른쪽 클릭 후 메뉴에서 브라우저를 선택해 여세요.
UI 를 구성하는 컴포넌트들. 카드 클릭 시 실제 동작 확인.
본문 옆에 붙는 보조 영역. 부가 메뉴·필터·관련 글에 자주 사용.
내용을 감싸는 보이지 않는 박스. 본문이 너무 넓게 퍼지지 않게 잡아줌.
여러 칸으로 나뉜 격자 배치. 1열 / 2열 / 3열 / 4열 변경 가능.
제목·설명·이미지가 한 묶음으로 들어간 박스 UI.
화면 위에 겹쳐 뜨는 팝업 창. 신청·확인·경고에 사용.
제목 클릭 시 펼침/접힘. 아래 항목을 직접 클릭해보세요.
국내 거주자 누구나.
2027년 6월 7일.
스크롤해도 따라오는 고정 버튼. 클릭하면 우하단의 실제 버튼이 강조됩니다.
스크롤해도 상단에 고정. 클릭하면 이 페이지 헤더가 강조됩니다.
모바일에서 가로 줄 3개 메뉴 아이콘. 클릭하면 모바일 메뉴가 열립니다.
알림·홍보용 가로 띠. 클릭하면 페이지 최상단의 배너가 강조됩니다.
이미지·후기·카드를 좌우로 넘기는 UI. 화살표·점·자동 슬라이드 모두 작동합니다.
카테고리별 내용 전환. 아래 탭을 클릭해보세요.
"NEW", "한정", "인기" 같은 강조용 작은 라벨.
슬라이더로 직접 조절해보세요.
안쪽 여백 vs 바깥쪽 여백 차이를 풀스크린 라벨 데모로 봅니다.
슬라이더·토글·클릭으로 직접 바꿔보세요.
폰트·크기·굵기·간격을 묶어 부르는 말. 풀스크린 데모로 비교.
좌/중/우.
두 색이 부드럽게 바뀌는 배경. 클릭할 때마다 다른 조합.
전체 중 강조용 색. 클릭하면 페이지 전체 포인트 컬러가 바뀝니다!
현재 포인트: #D97757 주황
움직이고 반응하는 효과들.
마우스를 올리면 변화. 아래 박스에 마우스 올려보세요.
시간에 따라 움직이는 효과. 끊임없이 펄스.
서서히 나타나거나 사라짐. 클릭하면 다시 재생.
화면 폭 버튼으로 시뮬레이션. 760px 부근에서 모바일 레이아웃 전환.