[CSS] 8. CSS코드의 재사용

CSS 강의목차

1. CSS 시작, 글 색깔 바꿔보기

2. 스타일속성(선택자,정의,속성) 개념정리

3. CSS 속성과 선택자에 대한 이해

4. CSS 박스모델(padding,margin,border,content)

5. CSS 박스모델 실습하기

6. CSS 그리드 기본사용법 및 활용

7. 반응형 웹페이지 만들기(미디어쿼리 @media)

8. CSS코드의 재사용

---

 

아래와 같이 작성된 페이지를 동일한 Style을 적용하려고 합니다.

가장 무식한 방법은 style을 똑같이 복사해서 다른문서에 붙여넣는것인데 이렇게 하게 되면 수정이 생길때마다 일일이 수정해야겠죠. 5개면 할만한데 이게 100개, 1000개라면? 죽을맛이겠죠..

그래서 이 css파일을 별도로 관리하는법에 대해서 배워보겠습니다.

 

1. style.css 파일 생성

 먼저 아래와 같이 style.css 파일을 생성합니다.

 

그리고 2.html 파일에서 <style>코드 안의 내용을 style.cssㅇ에 복사해서 붙여넣기 합니다.

이렇게 아래 코드입니다.

body{
  margin:0;
}
a {
  color:black;
  text-decoration: none;
}
h1 {
  font-size:40px;
  text-align:center;
  border-bottom:1px solid gray;
  margin:0;
  padding:20px
}
#grid ol{
  border-right:1px solid gray;
  width:100px;
  margin:0;
  padding:30px;
}
#grid{
  display:grid;
  grid-template-columns: 150px 1fr;
}
#article{
  padding-left:25px;
}

@media(max-width:800px){
  #grid{
    display:block;
  }
  #grid ol{
    border-right:none;
  }
  h1{
    border-bottom:none;
  }
}

 

다음으로는 기존 2.html파일에서 style태그를 모두 지웁니다.

그리고 style.css 파일을 불러오는 명령어를 추가합니다.

아래와 같이 추가해줍니다.

  <link rel="stylesheet" href="style.css">

 

 

자, 그리고 2.html 파일을 새로고침해봅니다.

아래와 같이 기존과 동일하게 css가 적용된걸 확인할 수 있습니다.

 

나머지 파일에도 이부분을 다 적용해줍니다.

나머지 문서에도 동일하게 CSS파일이 다적용이 됩니다.

 

지금까지 html 및 CSS 실습한 파일은 아래 압축파일을 통해서 다운로드 할 수 있습니다.

html_css실습.zip

0.09MB

 

 

 

본 강의는 아래의 생활코딩 강의안을 바탕으로 필요에 맞게 재작성한 강의안입니다.

opentutorials.org/course/3086/18327