이제 이해가 조금 되시나요? HTML을 배우신 후에 CSS로 이것을 예쁘게 꾸미는 거예요.
실습해보고 싶으신가요? 아주 간단한 자기소개 페이지부터 만들어볼 수 있습니다!
실습을 위해서는 몇 가지 방법이 있습니다:
1.**가장 쉬운 방법**: 온라인 코드 에디터 사용
- CodePen (codepen.io)
- JSFiddle (jsfiddle.net)
이런 사이트들은 브라우저에서 바로 코드를 작성하고 결과를 볼 수 있어요.
2.**컴퓨터에서 직접 만들기**:
- 메모장이나 VS Code 같은 에디터를 사용
- .html 파일을 만들어서 브라우저로 열기
지금 바로 따라해보실 수 있게 가장 쉬운 방법을 알려드릴게요:
1. 브라우저에서 "codepen.io" 사이트에 접속해주세요
2. 상단의 "Create" 버튼을 눌러주세요
3. 이제 제가 코드를 알려드릴 테니 그대로 따라 써보세요:
```html
<h1>안녕하세요!</h1>
<p>저는 [당신의 이름]입니다.</p>
<p>웹 개발을 배우고 있어요.</p>
이렇게 간단한 코드부터 시작해보는 건 어떠신가요? 실제로 코드를 작성해보시면서 궁금한 점이 생기시면 바로바로 물어보세요!
오 잘하셨네요! 이제 이 페이지를 좀 더 예쁘게 꾸며볼까요? CSS를 추가해보겠습니다. CodePen에서 CSS 창에 아래 코드를 넣어보세요:
h1 {
color: blue; /* 제목 색상을 파란색으로 */font-size: 32px; /* 글자 크기 키우기 */
}
p {
color: gray; /* 문단 글자색을 회색으로 */font-size: 18px; /* 문단 글자 크기 설정 */line-height: 1.6; /* 줄 간격 설정 */
}
이렇게 하면 텍스트의 색상과 크기가 변경될 거예요. 어떤가요? 변화가 보이시나요?
더 꾸며보고 싶은 부분이 있으신가요? 예를 들어:
배경색 변경
글자체 변경
텍스트 중앙 정렬 이런 것들을 해볼 수 있습니다!
네, 텍스트 중앙 정렬을 추가해볼게요! CSS 코드에 text-align 속성을 추가하면 됩니다:
h1 {
color: blue;
font-size: 32px;
text-align: center; /* 제목 중앙 정렬 */
}
p {
color: gray;
font-size: 18px;
line-height: 1.6;
text-align: center; /* 문단 중앙 정렬 */
}
이제 모든 텍스트가 중앙에 정렬될 거예요!
더 예쁘게 만들어볼까요? 예를 들어:
body {
background-color: #f0f0f0; /* 연한 회색 배경 */padding: 20px; /* 전체 여백 추가 */
}
h1 {
color: blue;
font-size: 32px;
text-align: center;
margin-bottom: 30px; /* 제목 아래 여백 */
}
p {
color: gray;
font-size: 18px;
line-height: 1.6;
text-align: center;
margin: 10px0; /* 문단 위아래 여백 */
}
이렇게 하면 배경색도 바뀌고 여백도 생겨서 더 보기 좋아질 거예요. 한번 시도해보세요!
CSS 코드는 다 지우고 새로 붙여넣는 게 좋습니다! 이유는:
같은 선택자(h1, p)에 대한 스타일이 중복되면, 마지막에 작성된 속성이 적용됩니다
코드가 중복되면 나중에 수정하기도 어렵고 혼란스러울 수 있어요
그래서 전에 있던 CSS 코드를 모두 지우고, 제가 방금 보내드린 새 코드를 통째로 붙여넣으시면 됩니다!
이런 작업을 하다 보면 코드가 점점 익숙해지실 거예요. 다음으로는 어떤 것을 해보고 싶으신가요? 예를 들어:
