CSS란?
- Cascading Style Sheet의 약자
- HTML과 함께 웹을 구성하는 기본 프로그래밍 요소
- HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당
- 자바스크립트와 연계해 동적인 콘텐츠 표현이나 디자인 적용 가능
CSS를 사용해야하는 이유
- 웹 문서의 내용과 상관없이 디자인만 바꾸거나 디자인은 그대로 두고 웹 문서의 내용 변경이 용이
- 다양한 기기(PC, 스마트폰, 태블릿 등)에 맞게 탄력적으로 바뀌는 콘텐츠 -> 반응형 디자인(Responsive Design)
- 동일한 문서구조를 가지고 서로 다른 CSS 테마 적용이 가능 함.
기본 구조
선택자 {속성:값; 속성:값....}
예)
/* h1태그의 색상을 빨간색으로 크기는 15px로 지정합니다.*/
h1 {color:red; font-size:15px;}- CSS 구문은 선택자(selector)와 선언부(declaration)로 구성.
- 선택자는 디자인을 적용하고자 하는 HTML요소. -> 선택자 정의가 중요
- 선언부는 콜론(:)으로 구분 되어진 다수의 항목을 포함.
- 각 선언은 항상 세미콜론(;)으로 끝나며, 선언블록은 중괄호({ })로 묶음.
/* comment */은 코드를 설명하는 데 사용됨.
CSS 사용 방법
-
내부 스타일시트
html 파일에 스타일을 기술하는 방법으로
<head></head>
태그 사이에<style></style>
태그 부분에 작성.html 과 css 가 한 파일에 있으므로 작업이 쉽고 간편하지만 재활용 안됌.
-
외부 스타일시트
CSS를 작성하는 가장 기본적인 방법.
별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 html 문서에서 불러와 사용하는 형식. 이때 css는 동일한 서버에 있어도 되고 URL을 통해 다른 서버의 css를 불러오는 것도 가능.
-
인라인스타일
html 태그에 필요한 디자인 속성을 직접 작성하는 형식.
그때 그때 필요한 디자인을 바로 적용할 수 있다는 편리함이 있지만 일관된 디자인 체계를 유지하는 데에는 방해가 되기 때문에 권장하지 않음.
캐스케이딩과 우선순위
CSS에서의 Cascading 은 사전적 의미로 폭포처럼 떨어져 내리는 과 같은 의미.
디자인 속성이 html 문서의 구조 즉 DOM(Document Object Model) Tree구조에서 상위 요소에서 정의한 디자인 속성이 하위 요소로 전달되는(상속 개념) 의미에서 유래.
- 상위 태그에서 정의된 디자인 속성은 하위 태그로 상속.
- 하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있음.
<!-- body 태그 안에 있는 모든 태그 요소들은 빨간색 글자로
표시됨 -->
<body style="font-color:red">
<h1>Hello</h1>
</body>스타일의 우선순위
- 브라우저 디자인 정의<외부<내부<인라인
천방지축 어리둥절 빙글빙글 코딩하는