1. 스타일이란?
스타일이란 HTML요소를 디자인하기 위한 개념이며 이때 언어는 CSS를 사용한다.
CSS는 HTML요소를 디자인하기 위한 언어.
CSS는 레벨1, 레벨2, 레벨3까지 나와있으나 레벨3은 완성이 아님.
CSS 레벨2는 현재 모든 브라우저가 정상 지원하며 CSS3는 브라우저마다 지원상태가 다를 수 있다.
브라우저간 CSS값을 화면에 표시할 때 100% 똑같이 표현하지 않으며, 모든 브라우저별로 다르다. 이를 똑같은 결과값을 만들어내는 작업이 크로스 브라우징이라 한다.( 가장 까다로움)
사용자가 스타일을 사용하지 않을 때 모든 브라우저에는 스타일 초기값이 셋팅되어 HTML 요소를 화면에 표시한다.
CSS는 독립언어가 아니며 HTML 문서 안에서만 동작하는 의존언어다.
(1) HTML요소에서 스타일을 사용하는 방법
1) 인라인 스타일(Inline Style) : HTML요소에 스타일 선언
- 요소에 직접 스타일을 선언하는 방법.
- <시작태그 style="styleName: Value;">콘텐츠</종료태그>
■ 사용 예시
1 2 | <p style="color: red;">글자 색상 바꾸기</p> <p style="font-size: 40px;">글자 크기 변경하기</p> |
2) 내부 스타일(Internal Style) : header 요소 안에 스타일을 선언
- head 안에 style 선언하고 selector(선택자)를 이용하여 스타일을 적용하는 방법
■ 내부스타일 형식
1) 작성위치 => head태그영역 title태그 뒤에 작성
2) 형식
<style type="text/css">
selector{styleName: Value; }
</style>
■ 사용 예시
1 2 3 4 5 6 7 | <head> <!-- 스타일 선언 --> <style type="text/css"> h1{color: red;} </style> <!-- 스타일 선언 종료 --> </head> |
3) 외부 스타일(External Style) : 스타일을 독립파일로 생성 후 HTML 문서에서 연결하는 방식 (실무에서 사용하는 방식)
- 외부 스타일은 스타일을 HTML 문서에 작성하지 않고 별도로 파일을 생성 후에 HTML문서에서 연결하는 방법
■ 사용 예시
1 2 3 | <head> <link rel="stylesheet" type="text/css" href="외부스타일.css" /> </head> |