7일차 : CSS 코드의 재사용

7일차 : CSS 코드의 재사용

 

열심히 배운 CSS를 다른 페이지에서도 활용해 봅시다.

그 전에는 html 파일에 css 코드를 삽입하여 스타일을 바꿔줬는데, 이제 css 파일을 새로 만들어 볼 차례입니다.

 

지난번에 사용했던 css 부분을 그대로 따와서 sample.css 파일을 만들어보겠습니다.

 

새로 만들 때 style 태그는 제거해 주세요!

 

 

그리고 이렇게 만든 css 파일과 html 파일을 연결해 주면 됩니다.

 

바로 link 태그를 이용해서요!

<link rel="stylesheet" href="파일명.css"> 요렇게 넣어주면 됩니다.

 

 

style 부분을 모두 지우고 저렇게 링크 하나만 걸어주면 완성입니다. 매우 간단하죠?

css 부분이 너무 많아지면 html에 함께 적어서 적용시키기도 어렵겠죠.

여러 웹 페이지를 같은 디자인으로 만들 때에도 마찬가지구요.

 

템플릿을 적용시켜준다고 생각하면 편하겠네요.

수정할 때에도 css 파일만 수정하면 모든 페이지의 디자인을 수정할 수 있으니 훨씬 효율적이죠.

 

이렇게 7일간 CSS를 배웠는데요.

HTML과 CSS의 기본을 배웠으니, 이제 활용을 할 차례입니다.

 

선생님께서도 공부할 시간은 끝났고, 활용할 시간이 왔다고 하네요.

 

진도를 나가는 것보다 본인에게 의미있는 웹사이트를 만들어 보는 것을 추천해 주셨습니다.

 

그래서 자바를 배우러 가기 전, 혼자서 1페이지짜리 웹사이트를 만들어 보려고 합니다.

 

웹사이트 만드는 데에 성공하면 html 파일과 css 파일, 그리고 웹사이트 링크를 함께 남기도록 할게요!