HTML은 태그를 이용해서 값을 출력한다면, CSS는 주로 태그를 꾸며주는 기능을 한다.
CSS를 한마디로 표현하자면 '화면 디자인'이라고 할 수 있겠다.
HTML의 내용과 상관없이 디자인을 바꿀 수 있기 때문에
CSS를 누가 디자인 하느냐에 따라 화면 디자인이 달라진다.
CSS는 3가지로 구별할 수 있다.
외부 CSS
내부 CSS
인라인 CSS
각각의 특징에 대해서 알아보자.
1. 외부 CSS
모든 페이지에 적용시길 때 css파일을 만들어 제작해두면 좋다.
css파일을 하나 만들어 두고 각 페이지마다 불러오면 공통적인 화면 디자인이 가능하다.
확장자는 .css 이다.
위의 사진처럼 CSS 파일을 생성하면
필요할 때마다 어느곳에든 사용할 수 있다.
2. 내부 CSS
한 개의 파일 내부에서 설정된다.
<head> 태그 안에 <style> 태그를 이용한다.
<style> </style> 내부에서 제목의 색, 제목의 글꼴 등을 한번에 설정 할 수 있다.
만약 같은 속성을 중복해서 설정한다면 가장 마지막에 설정된 속성 값을 적용시킨다.
<head>
<style>
h1{color:red}
h1{font}
h1{color:blue}
</style>
</head>
3. 인라인 CSS
태그 한개에 대해서 처리되는 CSS이다.
여러 개의 태그 중에서 한 개의 태그에만 다른 효과를 주고 싶을 때 사용된다.
<h1 style=" font- ">
<table style=" color : yellow">
외부 CSS > 내부 CSS > 인라인 CSS
외부 CSS가 가장 포괄적이며 큰 범위라면
인라인 CSS로 갈수록 작은 범위에 적용하는 디자인이라고 볼 수 있다.
'프론트 > HTML|CSS' 카테고리의 다른 글
| [HTML/CSS] text 상자 데이터 > 강제 입력 받는 법 (0) | 2022.07.21 |
|---|---|
| [CSS] 선택자의 종류와 사용법 (0) | 2022.07.12 |
| [HTML/CSS] 박스 속성 margin과 padding 총정리 (0) | 2022.07.06 |
| [HTML] 태그 속성과 태그 종류 < > (0) | 2022.07.05 |
| [HTML] 브라우저 html 이클립스 작성법 / 웹 환경 이해하기 (0) | 2022.07.04 |