AI가 만든 코드, 어디를 보면 될까?

읽는 법 1: HTML은 이름표

<h1 class="title">민지의 카페</h1>
<p>영업시간: 오전 8시 ~ 오후 9시</p>
<img src="cake.jpg" alt="딸기 케이크">
<a href="https://map.example.com">오시는 길</a>

• <h1> … </h1>: 여는 태그와 닫는 태그 사이가 화면에 보이는 글자예요.
• class="title": 이 요소의 이름표예요. CSS와 JavaScript가 이 이름으로 찾아와요.
• src="...", href="...": 따옴표 안에 이미지 파일 이름, 링크 주소가 있어요.

태그	뜻
h1~h6	제목 (숫자가 작을수록 큰 제목)
p	문단
a	링크
img	이미지
button	버튼
div, section	묶음 상자

읽는 법 2: CSS는 주문서

.title {
  color: navy;
  font-size: 40px;
}

“.title이라는 이름표가 붙은 것의 색은 남색, 크기는 40px로 해 주세요.”라고 읽으면 돼요. 점(.)은 class, 샵(#)은 id를 가리켜요.

실습: AI가 만든 페이지 손보기

아래는 AI가 만들어 준 카페 페이지라고 생각해 보세요. 코드에서 해당 부분을 찾아서 고쳐 보세요.

✍️ 따라 해보기

▶ 실행↺ 처음으로

HTMLCSSCtrl+Enter 실행

실행 결과

전체휴대폰

▶ 실행 버튼을 누르면 여기에 결과가 나타나요

🎯 미션0 / 3

• ○휴무일을 월요일이 아닌 다른 요일로 바꿔요 (아직)
• ○맨 위(.hero)의 배경색을 다른 색으로 바꿔요 (아직)
• ○가게 이름(.title)을 더 크게 키워요 (아직)

💡 힌트 보기 (1/3)

퀴즈

CSS의 .btn { color: white; }는 무슨 뜻일까요?

1btn이라는 파일을 흰색으로2class="btn"인 요소의 글자색을 흰색으로3모든 버튼을 지워라4배경을 흰색으로