오늘은 지난 시간에 만들었던 홈페이지에 스타일을 적용시키려고 한다
스타일 적용하기
style의 속성을 이용하여 배경색, 글꼴 등을 바꿔보자
about_me.html
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
</head>
<body>
<nav style ="background-color: darkgreen; font-size: 150; text-align: center;">
<a href="./index.html" style="color: white">Home</a>
<a href="./blog_list.html" style="color: white">Blog</a>
<a href="./About_me.html" style="color: white">About me</a>
</nav>
<h1>About me</h1>
<h2>박용준 입니다</h2>
<p>HTML, CSS, JS, Django로 재미있는 웹 사이트 만드는 것을 좋아합니다</p>
<a href="index.html">첫 화면으로</a>
<img src="./images/mococo_about_me.png" width="400px">
</body>
</html>위 코드와 같이 수정을 하게 되면 다음과 같이 홈페이지에 적용이 된다
이제 이 코드를 사용하기 쉽게 수정해보자 예제처럼 a가 3개가 아니라 엄청 많다면 고난이 예상되는 작업이 생각된다
이러한 부분을 고려하여 코드를 다음과 같이 수정해보자
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
nav {background-color: darkgreen; font-size: 150; text-align: center;}
nav a {color:gold}
</style>
</head>
<body>
<nav style ="background-color: darkgreen; font-size: 150; text-align: center;">
<a href="./index.html">Home</a>
<a href="./blog_list.html">Blog</a>
<a href="./About_me.html" >About me</a>
</nav>
<h1>About me</h1>
<h2>박용준 입니다</h2>
<p>HTML, CSS, JS, Django로 재미있는 웹 사이트 만드는 것을 좋아합니다</p>
<a href="index.html">첫 화면으로</a>
<img src="./images/mococo_about_me.png" width="400px">
</body>
</html>이렇게 코드를 수정하게 되면 HTML문서를 더 깔끔하게 관리할 수 있다
블로그 페이지 만들고 스타일 적용하기
이제 마지막으로 남은 Blog 웹 페이지를 구현하면 기초 단계는 마무리 된다.
blog_list.html
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
nav {background-color: darkgreen; font-size: 150; text-align: center;}
nav a {color:gold}
</style>
</head>
<body>
<nav style ="background-color: darkgreen; font-size: 150; text-align: center;">
<a href="./index.html">Home</a>
<a href="./blog_list.html">Blog</a>
<a href="./About_me.html" >About me</a>
</nav>
<h1>Blog</h1>
<p>HTML, CSS, JS, Django로 재미있는 웹 사이트 만드는 것을 좋아합니다</p>
</body>
</html>앞선 about_me 홈페이지 보다는 매우 휑한걸 확인할 수 있다.
앞으로 Blog의 페이지를 채워나가보려고 한다.
CSS
웹사이트의 일관성을 위해서 about_me.html의 구성 내용을 복사해서 사용했다 하지만 이러한 방법은 앞서 말했듯이 개발자가 너무 힘들고 반복된 작업이다. 이러한 작업들을 편하게 하도록 우리는 CSS를 사용해보고자 한다.
>CSS는 웹 문서의 디자인을 구현하기 위한 언어이고 html이 웹 페이지의 틀을 만들고 내용을 채운다면 CSS는 텍스트의 크기나 색, 이미지의 크기나 위치 등을 지정합니다practice.css
nav {background-color: darkgreen; font-size: 150; text-align: center;}
nav a {color:gold}css파일을 다음과 같이 작성 하고
index.html, about_me.html, blog_list.html
3개의 html 파일에 공통적으로 title 밑 부분에
<link href="practice.css" rel="stylesheet" type="text/css">작성해주고 홈페이지를 다시 확인해보면 각 페이지마다 스타일이 공통적으로 적용된 모습을 볼 수 있다
Student