[CSS3] 외부 스타일시트, 내부 스타일시트, 인라인스타일

 

스타일은 웹문서에 디자인적인 요소를 추가하는것이다.

웹문서의 글꼴, 색상, 정렬, 배치방법처럼 겉모습을 결정지어주는 역할이 바로 스타일의 역할이다.

또 css의 장점은 반응형웹디자인을 할 수 있다는것이다.  css에 있는 미디어쿼리를 이용하면 화면배치를 다르게 해줄 수 있다.

 

스타일시트는,  문서안에 사용된 스타일을 한군데 모아놓은것이다.
스타일시트를 만들때는 문서안에 만드는 내부스타일시트가있고, 묶어서 따로 파일로저장한것을 외부스타일시트라고 한다.

또한 <h1 style="color:blue">처럼 내가 원하는 태그안에 style을 주는것을 인라인스타일이라고 한다.

 

• 내부스타일시트 : 웹문서에 <style></style>태그 내에 입력
• 외부스타일시트 : 외부에 css파일로 저장해서, 웹문서에서 연결해서 쓰는 방식
• 인라인스타일 : 내가 스타일을 주고싶은 태그안에 style을 입력

 

 

 

내부스타일시트

 

먼저 내부스타일시트를 만드는법을 알아보자.
내부스타일시트를 만들때는 <style>이라는 태그를 사용한다.

 

 

이렇게 문서안에 있는것을 내부스타일 시트라고 한다면,
문서 바깥에 있는것은 외부스타일 시트라고 한다.
스타일 정보만 따로 모아서 별도의 문서로 저장을 한다음에 웹문서에 연결해주는것을 외부스타일시트라고 한다.

 

외부스타일시트

 

css폴더를 만들고 그안에 css파일을 저장한다. (ex.css)
css파일에는 <style>태그가 들어가지 않는다.
그리고 웹문서에 css파일을 연결해야한다.

 

 

 

ex.css파일

 

 

<link href="css/ex.css" rel="stylesheet"> 

연결해주는 코드는 이렇게 적어주면 된다. 외부 css폴더에 있는 ex.css파일을 가져와서 연결을 해준다는 것이고,
그 파일이 stylesheet파일이라는것을 의미한다.

 

이렇게 외부스타일시트를 사용하는 이유는, ex.css 파일을 한문서에서만 사용하는게 아니라 여러문서에서도 사용할 수 있기 때문이다.
또한 수정이 쉽기때문에 외부스타일시트로 연결해서 쓰는 경우가 대부분이다. 

 

---

그리고 외부스타일시트로 연결되어 있는 상태에서도
다시 style태그를 이용해서 내부에서 다르게 바꿔서 쓸수있다.

 

 

 

 

---

* Reference

Do it! HTML+CSS+자바스크립트 웹 표준의 정석