기존의 HTML 코드에 css파일을 추가하여 디자인을 변경하도록 하겠습니다.
HTML 파일명은 'index.html'로 하고 경로는 './public/index.html'로 합니다. 코드는 위의 방법으로 작성하고 저장을 합니다.
CSS가 적용되지 않은 상태는 위와 같은 페이지가 출력됩니다.
css또한 폴더를 생성(./public/css)하고 style.css파일을 저장합니다. (파일, 폴더, 경로는 자유롭게 생성 가능)
background : 뒷 배경
color : 글자 색
일단 위 글은 css에 대한 설명이 아니기 때문에 위의 css에 대한 설명만 적겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "css/style.css"> <!-- CSS파일을 HTML에 삽입 -->>
<title>My HomePage</title>
</head>
<body>
<h1>My HomePage</h1>
<p>테스트 홈페이지.</p>
<p>테스트 홈페이지.</p>
</body>
</html>
이제 index.html 파일로 돌아가서 해당 css파일을 html에 삽입해 줍니다.
<link rel = "stylesheet" href = "css/style.css">
rel : 링크 종류(여기서는 stylesheet)
href : 참고 경로(css/style.css)
index.html의 디렉토리 경로에서 css폴더로 들어가는 것이기 때문에 위 코드처럼 'css/style.css'로 입력했습니다. 하지만 필요시 변경이 가능합니다. 이후 저장한 다음 다시 웹페이지를 출력합니다.
html파일에 css파일을 적용하여 위와 같은 페이지가 출력됬습니다. 위 방법을 추천하지만 css파일에 작성할 코드가 적다면 html파일에 직접 작성을 할수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css코드를 직접 html에 삽입 -->>
<style>
body{
background: #333;
color: #fff;
}
</style>
<title>My HomePage</title>
</head>
<body>
<h1>My HomePage</h1>
<p>테스트 홈페이지.</p>
<p>테스트 홈페이지.</p>
</body>
</html>
위 코드대로 작성을 해도 웹페이지는 동일하게 출력됩니다. <style>테그를 보면 알겠지만 style.css코드를 그대로 넣었다는 것을 알수 있습니다.
또한 각 테그에 대해서 css적용을 할수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- css코드를 직접 html에 삽입 -->>
<style>
body{
background: #333;
color: #fff;
}
</style>
<title>My HomePage</title>
</head>
<body>
<!-- h1의 문자를 붉은색으로 표시-->
<h1 style = 'color : red'>My HomePage</h1>
<p>테스트 홈페이지.</p>
<p>테스트 홈페이지.</p>
</body>
</html>
테그에 style을 추가하여 css를 변경을 할수 있습니다. 처음에 <head>테그에서 style을 전체적으로 적용해도 가장 마지막에 적용되는 style이 client에 출력되기 때문에 순서에 주의해 주셔야 합니다.
즉 마지막 <h1>테그에 문자가 붉은색으로 설정이 됬기 때문에 'Hy HomePage'는 붉은색으로 출력이 되는 것입니다.
위 자료는 제글 'node.js Express를 이용하여 간단한 Home Page만들기' 에서 참고하였습니다. 클릭하시면 해당 링크로 이동됩니다.
댓글
댓글 쓰기