7. 외부 스타일 시트 & CSS 파일을 따로 만드는 이유

외부 스타일 시트를 사용하기 전 상황

코딩을 잘하기 위해서는 중복을 없애야 한다. 스타일 태그 빼고 css 코드만 style.css 파일에 넣어서 만들 수 있다.

여태껏 예제에서는 css 코드를 css 파일로 만드는 게 아닌 html안에 내부 스타일 시트로 이용하는 것을 사용했다.

CSS 파일을 만드는 이유

Caching(저장)이라는 면에서는 css 파일로 만드는 것이 훨씬 효율적이다.
네트워크를 안쓸 수 있고 더 비용 절약적인 면이 있다.
네트워크 트래픽(사용률)을 더 적게 낼 수 있다.

실습 예제 CSS

body{
  margin:0px;
}
 /* tag -> class -> id id가 젤 강함. id는 중복되서는 안된다. */
a { /* a는 selecter */
  /* decoration */
  color: black;
  text-decoration: none; /* 밑줄 없애기 */
}
h1 {
  font-size:45px;
  text-align:center;
  border-bottom:1px solid gray;
  margin:0;
  padding:20px;
}
ol {
  border-right:1px solid gray;
  width:100px;
  margin:0;
  padding:20px;
}
#grid{
  display:grid;
  grid-template-columns: 150px 1fr;
}
#grid ol{
  padding-left:33px;
}
#grid #article{
  padding-left: 25px;
}
@media(max-width:800px){
  #grid{
    display:block;
  }
  ol {
    border-right:none;
  }
  h1{
    border-bottom:none;
  }
}

html에는 link 태그를 이용하면 된다.

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

이러한 코드를 쓰면 style.css 즉, CSS 코드를 불러올 수 있다.

외부 스타일 시트를 이용하는 것이다.

저작자표시

'🔤 Language > 🔵 CSS' 카테고리의 다른 글

6. 반응형 디자인, 미디어 쿼리, @media (0)	2022.01.02
5. 그리드 (0)	2022.01.01
4. 박스 모델 (0)	2022.01.01
3. CSS 선택자 (tag, class, id) (0)	2022.01.01
2. 글자 크기 조절 & 글자 위치 정렬 (0)	2022.01.01

외부 스타일 시트를 사용하기 전 상황

CSS 파일을 만드는 이유

실습 예제 CSS

'🔤 Language > 🔵 CSS' 카테고리의 다른 글

티스토리툴바