■ CSS (Cascading Style Sheets)
CSS는 HTML 등으로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다.
HTML로는 웹 사이트의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다.
이렇게 내용과 디자인이 구분되어 있으면 사이트의 내용을 수정할 때에도 디자인에 전혀 영향을 미치지 않아 편리하다.
또한 반대로 내용은 건드리지 않은 상태에서 스타일 시트를 이용해 디자인만 바꿔서 완전히 다른 느낌이 나는 문서로 만들 수 있다.
□ 인라인과 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일시트라고 한다. 스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정해야 하므로 모든 스타일 정보는 <head> 태그 안에서 정의하고, <style>과 </style> 태그 사이에 작성한다.
인라인스타일은 HTML 태그 명령어 라인 내부에 스타일을 정의하는 것이다. HTML 태그 안에 style="속성 : 속성값;" 형태로 저장한다.
□ 외부 스타일 시트
사이트를 제작할 때는 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해놓고 필요할 때마다 가져와서 사용하는 것이 일반적이다. 이렇게 따로 저장해놓은 스타일 정보를 외부 스타일 시트라고 하고 *.css 라는 파일 확장자를 사용한다.
외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다. 그리고 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용된다. 외부 스타일시트를 연결할 때 사용하는 태그는 <link> 태그이다
<link rel="stylesheet href="외부 스타일시트 파일경로">
□ 전체 요소에 스타일을 적용할 때
전체 요소에 스타일을 적용하는 전체 선택자
전체 선택자는 말 그대로 모든 요소에 적용할 때 사용한다. 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다. 전체 선택자로는 *(별표)를 사용한다.
웹 브라우저에 기본 스타일을 초기화할 때 자주 사용한다. 문서 내용과 브라우저 테두리 사이에 여백등(마진과 패딩)을 지정할 때 사용한다.
□ 특정 요소에 스타일을 적용할 때
타입선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용한다.
예를 들어 p선택자를 사용하여 웹 문서에 있는 모든 텍스트 단락의 글자를 이탤릭체로 표시한다.
□ 클래스 선택자
특정 부분에 스타일을 적용하는 클래스 선택자
클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 한다.
클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 반드시 마침표(.)를 붙여야 한다.
□ id 선택자
특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자
마침표 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방법은 클래스 선택자와 같다. 클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면 id 선택자는 문서에서 한번만 적용할 수 있다는 것이다. 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스트립트 프로그램을 사용하면서 요소를 구별할 때 사용한다.
□ 그룹 선택자
□ 캐스케이딩 스타일시트
CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용한다. 그래서 CSS에서는 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정한다.
캐스케이딩은 스타일끼리 충돌하지 않도록 막아주는 개념이다.
스타일 우선순위 : 스타일 규칙의 중요도와 적용범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용한다
스타일 상속 : 태그의 포함관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.
스타일 우선순위는 다음과 같다.
■ 실습
□ ex01
□ ex02 with style.css
<style.css 파일>
<외부 스타일 시트>
□ ex03
□ ex04
'IT&코딩 > JSP' 카테고리의 다른 글
| JSP - 6일차 (Java Server Page) (0) | 2022.11.20 |
|---|---|
| JSP - 5일차 (서블릿) (0) | 2022.11.14 |
| JSP - 4일차 (자바스크립트) (0) | 2022.11.13 |
| JSP - 2일차 (HTML) (0) | 2022.11.11 |
| JSP - 1일차 (웹 프로그래밍이란?) (0) | 2022.11.10 |
