Covenant

웹 문서에서의 스타일 : HTML문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉 표면을 결정짓는 내용들.


CSS(Cascading Style Sheets) : CSS는 텍스트이 색상이나 크기, 이미지의 크기나 위치, 표 색상 배치 방법 등 웹문서의 디자인 요소를 담당


스타일 형식

-  p { text-align : center }

   선택자   스타일 속성   속성값

-  속성과 속성값은 ;으로 구분한다.

   p { text-align : center; font-size: 16px }


스타일 주석

-   /* */ 사이에 주석을 입력한다. 



스타일을 어디에(html안, 혹은 별개의 파일, 혹은 바로 적용의 여부)적용하는 방법에 따라 3가지로 구분할 수 있다.

1. 내부 스타일 시트 

웹 문서 안에 사용할 스 타일을 문서 안에 정리한 것을 내부 스타일 시트라고 한다. 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 하기 때문에 모든 스타일 정보는 <head> 태그와 </head> 태그 안에서 정의 해야 하고 <style> 태그와 </style>에 작성해야 한다.


2. 외부 스타일 시트

일반적으로 웹 사이트는 여러개의 웹 문서로 이루어져 있다. 대부분의 경우 디자인은 일괄성을 유지하는데 그 때 마다 같은 스타일 시트를 여러 웹 문서에 사용하면 서버 공간과 문서를 다운로드 하는데 비효율 적일 것이다. 따라서 따로 스타일 시트를 따로 저장해 놓는데 이를 외부 스타일 시트라고 하고 .css 라는 파일 확장자를 사용한다.


외부 스타일 시트를 연결할 때는 <style>태그 없이 <link> 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연결한다.


사용법 : <link href="외부 스타일 파일 경로" rel="stylesheet" type"text/css">


3. 인라인 스타일

간략한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시할 수 있다. 이를 인라인 스타일 이라고 한다.

사용법 : <p style="color:blue;">블루베리는 항산화제인 </p>


'Web > HTML&CSS' 카테고리의 다른 글

[CSS기초]박스모델  (0) 2017.07.28
[CSS기초]04 글꼴 관련 스타일  (0) 2017.07.28
[CSS기초]03 캐스캐이딩 스타일 시트  (0) 2017.07.28
[CSS 정리]02 주요 선택자  (0) 2017.07.27