CSS의 적용 방식

 

CSS의 적용 방식

---

CSS는 HTML의 태그를 통해 디자인을 할 때 사용되는데

오늘은 CSS를 HTML에 적용하는 3가지의 방식에 대해 설명드리겠습니다.

 

(1)

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

 

내부 스타일 시트는 HTML 코드를 작성하는 페이지에 CSS를 적용하는 방식으로

방법은 HTML의 head 태그 안에 style 태그를 작성하여 CSS를 적용할 수 있습니다.

예시를 보여드리면

내부 스타일 시트

이런 식으로 작성하여 결과를 보면 div 태그의 텍스트 문자에 색이 빨간색으로 변경되는 것을 볼 수 있습니다.

이 방법은 보통 CSS를 공부할 경우 많이 사용되는 방식입니다.

 

(2)

외부 스타일 시트(External style sheet)

 

외부 스타일 시트는 HTML 코드를 작성하는 페이지가 아닌 따로 CSS 코드를 작성하는 페이지를 만들어서

HTML 페이지와 연결하여 사용하는 방식입니다.

 

실무에서는 주로 외부 스타일 시트를 많이 사용하는데

이유는 가독성이 좋고 CSS 코드만 적기 때문에 작성하기도 뛰어나기 때문입니다.

외부 스타일 시트를 사용할 때 주의할 점은 반드시 HTML 페이지와 연결해야 한다는 것입니다.

 

이제 연결하는 방식을 알려드리겠습니다.

HTML 페이지에서 head 태그 안에

<link rel="stylesheet" href="style.css">  태그를 작성해야 합니다.

※css 페이지의 기본 이름은 style.css입니다.

HTML 외부 스타일 시트 연결

외부 스타일 시트

 

(3)

인라인 스타일(Inline style)

 

마지막으로 인라인 스타일은 내부 스타일 시트와 똑같이 HTML 페이지에 작성하는 방식이지만

내부 스타일 시트와의 차이점은 인라인 스타일은 HTML의 body 태그 안에

작성된 태그에 직접 스타일을 적용하는 방식으로 사용합니다.

 

바로 예시를 보여드리겠습니다.

인라인 스타일

인라인 스타일 방식은 많이 사용되지는 않지만

CSS를 공부할 때나 빠르게 태그에 스타일을 적용해 볼 필요가 있을 때 사용됩니다.

 

이 방식의 장점은 원하는 태그에 CSS 코드를 변경할 때 빠르게 변경할 수 있다는 장점이 있지만

단점은 태그에 일일이 작성을 해야 하기 때문에 시간이 오래 걸린다는 단점이 있어 실무에서는 많이 사용되지는 않지만

이렇게도 작성할 수 있다는 것 정도로만 알아두시면 좋을 것 같습니다.

 

3개의 방식에 결과값

 

---

 

오늘 내용을 정리해 보면

CSS 적용하는 방식에는 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일이 있는데

실무에서는 주로 외부 스타일 시트를 사용하며 내부 스타일 시트와 인라인 스타일 시트는

CSS를 공부하는 상황에서 주로 사용됩니다.

이 방식들을 알아둬야 하는 또 하나의 이유는 실제로 내부 스타일 시트나 인라인 스타일 시트를

사용하는 회사도 있기 때문에 알아두시면 좋을 것 같고 

CSS를 사용하는데 위에 3가지 방법 다 이상이 없기 때문에 공부를 하시는 중이라면

3가지 중 편한 방식으로 진행을 하되 점점 CSS에 익숙해 지시면 외부 스타일 시트로 연습하시는 것을

추천드립니다.

 

감사합니다!