바로 13 CSS를 더해서 웹사이트에 옷 입히기

박현규32 / 35절읽는 시간 약 2분

CSS는 앞에서 설명한 것처럼 HTML로 구성한 웹사이트에 옷을 입혀주는 역할을 합니다. 그럼 CSS를 더하면 어떤 변화가 있을지 계속해서 이어가봅시다. 앞에서 실습한 프로젝트를 그대로 두고 커서와 대화를 이어가보겠습니다.

CSS를 더하기 위해 커서에게 다음과 같이 프롬프팅해봅시다. 이때 CSS로 자기소개 웹사이트를 어떻게 표현할지 도움을 받기 위해 [Plan] 모드를 사용하겠습니다.

프롬프트

웹사이트에 CSS만 더해서 자기소개 페이지를 더 멋지게 만들고 싶어.

AI 답변

CSS 스타일링에는 다양한 방향이 있을 수 있어요. 원하는 스타일을 파악하기 위 해 몇 가지 질문드릴게요!

그러면 커서가 CSS 관련 질문들, 즉, 디자인 관련 질문만 던져줍니다. 원하는 선택지를 고른 후 [Build]를 눌러 개발을 시작하세요.

[Build]를 누르면 아마도 style.css 파일을 작성할 겁니다. 그리고 완료되면 페이지를 새로 열어주거나 사용자에게 페이지를 열도록 안내할 겁니다. index.html 파일을 열었던 웹브라우저를 새로고침하거나 다시 열면 CSS가 적용된 웹사이트의 형태가 보일 겁니다. HTML만 이용해서 만든 웹사이트의 형태가 깔끔하게 바뀌었습니다.

결과에서 보듯 CSS는 웹사이트의 스타일을 변경하는 등 다양한 시각적인 작업을 할 수 있는 기술입니다. 저는 아주 심플한 디자인을 요청하여 큰 변경점이 없는 것처럼 보이지만 원한다면 더 과감한 스타일을 시도해서 아주 큰 변화를 줄 수도 있습니다. 어쨌든 CSS라는 기술을 이해하는 계기가 되었기 바랍니다.