css) Inline, Internal, External

html & css

tose33 2021. 8. 3. 23:07

CSS : Cascading Style Sheet

css는 html을 꾸며주는 역활을 한다.

css의 기본적인 예제는 다음과 같다

이런식으로 아주 쉽게 html로 작성한 문서를 꾸며줄수 있다.

그런데 단점이있다.

보통 웹페이지에는 수많은 문단들과 문장들이 있고 수없이 많은 요소들이 있는데

예를들어 <h1> 태그를 사용할때마다 일일히 색과 폰트 크기와 그 외 수많은 요소들을 설정해줘야 할까?

그렇게 된다면 코드를 볼때마다 머리가 아프고 매우 귀찮은 작업이 될것이다.

그래서 css를 적용하는 방법들이 있다.

위에 예처럼 적용하고자 하는 태그안에 style 요소를 이용해 css를 적용하는것이 inline 이다.

internal css는 html의 <head> 태그 내부에 <style> 태그를 이용해 css를 적용하는 방법이다.

이런식으로 모든 <h1>, <h2> 태그에 style이 적용된다.

이렇게 internal css는 모든 태그마다 일일히 style을 적용시키지 않아도 되도록 해준다.

그럼 만약 html 페이지가 여러개 있다면 어떨까?

모든 html 파일의 <head> 태그에 <style>을 적용시켜야 할까?

그런일이 없도록 해주는게 external css이다.

style들을 정의할 css 파일을 만든다. 이름은 상관없다.

style.css 파일을 만들었다.

style.css 파일에 내가 원하는 태그들의 style을 설정해 줄수 있다.

이제 html 파일에 적용하려면 html 파일의 <head> 태그에 <link> 태그로 css 파일을 연결한다.

이렇게 external 방식으로 css를 적용시키면 모든 html 파일에 style을 새롭게 설정할 필요 없이

style이 저장된 css파일을 링크해주기만 하면 된다.

inline, internal, external 의 우선순위는 어떻게 될까?

다음과 같은 css 파일이 있고

h1 태그의 색을 red로 정의했다.

html 파일에 링크하고 (external),

html 파일의 head 태그에 internal 방식으로

이번에는 h1 태그의 색을 blue로 정의했다.

이런식으로 함수를 오버라이딩 하듯이 적용하면 어떻게 될까

<h1> 태그의 색은 무슨 색일까? 빨강? 파랑?

정답은 파랑이다.

즉 internal 방식이 external 보다 우선순위를 갖는다.

Internal > External

이 상태에서 다음과 같이 하나의 <h1> 태그를 inline 방식으로 스타일을 정의하면 어떻게 될까

해당하는 <h1> 태그가 초록색이 됐다.

즉 inline 방식이 internal 방식보다 우선시 된다.

결론:

Inline > Internal > External