소개
🧑💻 Linux 또는 LabEx 를 처음 사용하시나요? Quick Start with Linux 코스부터 시작하는 것을 권장합니다.
안녕하세요, LabEx 에 오신 것을 환영합니다! 이 첫 번째 랩에서는 CSS 로 고전적인 "Hello, World!" 프로그램을 배우게 됩니다.
아래의 Continue 버튼을 클릭하여 랩을 시작하세요.
Hello CSS
WebIDE 에서 이미 index.html 파일을 생성했습니다. 열어서 HTML 코드를 추가해 보겠습니다.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>
그런 다음 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하면 8080 포트에서 로컬 웹 서버가 실행됩니다.
이제 Web 8080 탭으로 전환하여 새로 고침 버튼을 클릭하여 변경 사항을 확인할 수 있습니다.
CSS 추가
index.html 파일에 CSS 코드를 추가해 보겠습니다.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello HTML</h1>
</body>
</html>Web 8080 탭으로 전환하여 새로 고침 버튼을 클릭하여 변경 사항을 확인합니다.
외부 CSS 사용
WebIDE 에서 이미 style.css 파일을 생성했습니다. 열어서 CSS 코드를 추가해 보겠습니다.
h1 {
color: red;
}
p {
color: blue;
}그런 다음, 외부 CSS 파일을 사용하도록 index.html 파일을 변경합니다.
<!doctype html>
<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>Web 8080 탭으로 전환하여 새로 고침 버튼을 클릭하여 변경 사항을 확인합니다.
