<body><header> N포털 로고 · 검색창 </header><nav> 메일 카페 블로그 쇼핑 뉴스 지도 </nav><main><section> 오늘의 뉴스 ... </section><aside> 실시간 검색 1~5 </aside></main><form> 아이디 · 비밀번호 · 로그인 </form><footer> 회사소개 · 약관 · ⓒ N포털 </footer></body>
마우스를 화면 위에 올려보세요. 덩어리가 통째로 파래지고, 옆 코드의 같은 줄도 같이 켜집니다. (터치는 클릭)
② 옷 벗기기 토글 (화면 ↔ 뼈대)
CSS(옷)를 싹 벗겨도, 글자·내용은 하나도 안 사라진다.
🔒 www.my-page.kr
안녕하세요, 김지백입니다
AI아카데미에서 비개발자도 코딩 감각을 잡도록 돕고 있습니다. 코드는 AI가 짜고, 우리는 제대로 시키는 사장이 됩니다.
옷(CSS)만 벗겼어요. 글자는 하나도 안 사라졌죠? 이 검정 글씨 더미가 바로 HTML 뼈대입니다.
③ 레고 블록 조립대
화면에 넣고 싶은 게 있으면, 거기 맞는 블록을 골라 끼우면 된다. 외우는 게 아니라 고르는 것.
지금까지 끼운 블록: 0개
블록 팔레트
미리보기(화면)
← 왼쪽 블록을 눌러 화면을 쌓아보세요
코드(HTML)
// 블록을 끼우면 여기에 태그가 자동으로 쌓입니다
④ 여는/닫는 태그 짝 맞추기
< >는 무서운 기호가 아니라 상자 뚜껑이다. 열고 → 내용 넣고 → 닫는다. 늘 같은 색 짝.
🔓 제목 열기안녕하세요🔒 제목 닫기
<h1>안녕하세요</h1>→
안녕하세요
🔓 문단 열기저는 김지백입니다🔒 문단 닫기
<p>저는 김지백입니다</p>→
저는 김지백입니다
🔓 버튼 열기신청하기🔒 버튼 닫기
<button>신청하기</button>→
📦 이미지 — 뚜껑 없음🚫 뚜껑(닫는 표시) 없음 — 넣을 내용이 따로 없어서 한 번에 끝!
<img src="사진.jpg">→
🖼️ 사진
상자를 열고(여는 표시), 안에 내용을 넣고, 다시 뚜껑을 닫는다(닫는 표시). 여는 표시를 누르면 짝이 같은 색으로 켜집니다.
⑤ 좋은 지시 vs 나쁜 지시 비교판
같은 AI, 같은 5초. 막연히 시키면 막연하게, 콕 집어 시키면 콕 집어 나온다.
✗ 나쁜 지시
결과가 여기에 나타납니다
AI = 건축가
나 = 건축주(사장)
방 이름을 모르면 →
🚽
현관에 변기 🚽
방 배치(방 이름)를 모르면, 현관에 변기를 놔도 잘못된 줄 몰라요. 신청칸이 제목 옆에 낀 게 딱 이거예요.