CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 웹 문서에서의 디자인을 담당하는 역할을 합니다.
CSS 소스에서 한 줄이 하나의 스타일에 해당되며 CSS 스타일의 형식은 다음과 같습니다.
◆선택자 {속성1: 속성값1; 속성2: 속성값2}
[예]
h1 {color: blue; font-size: 12px;} → h1: 선택자, {color: blue; font-size: 12px;} : 선언부
위와 같이 스타일 규칙을 작성하는 방법으론 세미콜론(;)으로 구분하여 중괄호({ })안에 나열합니다.
주석 표시는 /* */로 표시하며 표시 사이에 내용을 입력합니다.
웹 문서안에는 스타일 규칙을 여러 개 사용하는데 이런 스타일 규칙을 한눈에 확인하고 필요할 때 마다 수정하기 쉽도록 한곳에 묶어 놓은 것을 스타일 시트 라고 합니다.
스타일 시트는 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눕니다.
1. 브라우저 기본 스타일 : CSS를 사용하지 않은 웹 문서에는 기본 스타일이 적용이 되며 웹 브라우저에 표시됩니다.
웹 문서를 웹 브라우저에서 열고 개발자 도구로 스타일을 확인해보면
h1 태그에 스타일이 자동적으로 브라우저에서 미리 정해놓은 스타일이 적용되어 있음을 알 수 있습니다.
2. 인라인 스타일 : 스타일을 적용할 대상에 직접 표시하는 방법이며 스타일을 적용하고 싶은 대상의 태그에 style 속성을 사용하여 style="속성: 속성값;" 형태로 스타일을 바꿀 수 있습니다.
위 사진처럼 다양한 스타일의 속성들이 있습니다.
h1 태그에 color 태그 속성을 사용하여 웹 페이지로 돌아오면
레드향이라는 글씨의 색상이 파란색으로 바뀌었음을 확인 할 수 있습니다.
3. 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서에 정리한 것을 말합니다.
위와 같이 내부 스타일을 작성하고 확인 해보면
<body> 태그에 패딩과 배경색, 글자색이 지정되었음을 알 수 있습니다.
4. 외부 스타일 시트 : 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때 마다 가져와서 사용하며 외부 스타일 시트는 <link> 태그를 사용합니다.
style.css 파일을 HTML 파일서 링크하고 실행을 하면
링크로 연결한 style.css 파일이 적용된 웹 페이지를 확인 할 수 있습니다.
'FrontEnd > CSS' 카테고리의 다른 글
| CSS의 선택자와 캐스케이드 (0) | 2021.11.09 |
|---|
