[CSS] CSS란 무엇인가? / CSS 적용 방식

"본 글은 TCP SCHOOL, CODING FACTORY 사이트의 내용을 일부 참고하여 작성 한 내용입니다."

 

https://www.codingfactory.net/10529

http://www.tcpschool.com/css/css_intro_apply

INDEX

---

• CSS의 정의
• CSS 적용 방식
  • 인라인 방식(Inline style)
  • 내부 스타일 시트(Internal style sheet)
  • 외부 스타일 시트(External style sheet OR Linking Style Sheet)

 

CSS란??

 

- CSS는 Cascading Style Sheets의 약자로 HTML, XHTML 등의 디자인과 레이아웃을 설정할 때 사용되는 언어이다. 

- 주로 요소의 너비, 색상, 위치 등등을 지정한다.

- 이전에는 html 만으로 뼈대, 디자인을 설정하여 웹을 제작하였지만, 이 방식은 작성한 코드의 양이 많아질 경우 수정 시에 매우 번거롭다 css는 이런 문제점을 해결하기 위해 생겨났고 css로 스타일을 지정하기 시작하면서 유지보수 및 수정이 용이해졌다.

 

* Cascading Style Sheets: 위에서 아래로 흐르는 스타일 시트

 

좌측:html만 작성한 웹 / 우측:css를 적용한 웹

 

CSS 적용 방식

 

1. 인라인 방식(Inline style)

 

- html 요소 중 style속성을 이용하여 css를 태그에 직접 넣는 방식

- 지정한 요소에만 css를 적용할 수 있기 때문에 수정이 힘들고, 재사용이 불가능하다.

   -> 스타일 시트의 장점을 살릴 수 없기 때문에 꼭 필요한 부분에만 인라인 방식을 적용해야 한다.

 

Inline style의 css 적용방식

 

 

2. 내부 스타일 시트(Internal style sheet)

- html의 head태그 안에 <style></style> 태그를 활용하여 css를 적용하는 방법이다.

- 여러 태그들의 스타일을 한 번에 수정할 수 있는 장점이 있지만, 다른 html 파일에는 스타일을 적용할 수 없다( 해당 html 파일에만 적용이 된다.)

- 내부 스타일 시트도 양이 많아질수록 유지보수가 어려워진다.

 

 

Internal Styel Sheet 방식

 

 

3. 외부 스타일 시트(External style sheet Or Linking style sheet)

 

- 스타일 시트를 따로 만들어 html 문서에 연결하여 적용시키는 방식이다.

-. css라는 확장자명을 사용하여 스타일시트를 만든다.( ex) style.css, App.css....)

- html 내부 head 태그 안에 연결시켜야 하고 적용하고 싶은 html 파일에 <link> 태그를 통해 외부 스타일 시트를 가져온다.

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

- 웹 제작 시 구조의 일관성을 위해 같은 스타일을 사용하는 경우가 많은데 내부 스타일 시트, 인라인 방식을 사용하는 경우 코드의 양이 많아진다. 이 때문에 유지보수의 문제와 용량으로 인한 페이지 로드에 문제가 생기기 때문에 외부 스타일 시트를 만들어 별도로 관리하는 것이 좋다. 

 

 

Exteranl style sheet 적용예시