|
스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 |
|
환경: Eclipse Mars |
CSS 는 HTML 문서를 작성할 때의 스타일을 통일성 있게 유지할 수 있는 기능을 가지고 있습니다. 즉 HTML 구조는 그대로 두고 CSS 파일만 내용을 변경해서 꾸밀 수 있다는 것이죠. 그래서 표준으로 만들어 두면 다른 HTML 문서에 이식이 가능합니다. CSS 는 Cascading Style Sheets 의 약자입니다. HTML 과 XHTML 에 주로 쓰이며 XML 에서도 사용이 가능합니다. 그리고 W3C 의 표준을 따릅니다.
현재 개발 중인 CSS3 는 다양한 그림자 효과 , 그라데이션, 그래픽 편집 등 플래시를 대체할 거라는 소문이 있더군요. 정말 그렇게 될지는 모르겠지만 익히기 쉽게 자유도가 높아서 가능성은 있다고 봅니다. 이번에는 CSS 의 기본적인 구조에 대해 설명하도록 하겠습니다.
|
1. 기본적인 CSS 문법 |
▼ 스타일 시트를 사용하기 위해서는 스타일을 선언해야 합니다. 아래 그림은 스타일을 선언한 예제입니다. 제일 앞에 나오는 선택자(selector) 은 스타일을 적용할 대상을 나타냅니다. 선택자 다음에는 중괄로로 감싸게 되는데 내부에는 속성과 값으로 이루어 집니다.
@ 선택자(Selector) : 대상은 기존에 있는 태그입니다. 속성과 값을 정의해서 선언하면 동시에 스타일로 적용이 됩니다.
@ 속성(Properties) : 대상이 되는 태그, 선택자의 스타일 중 변경하고자 하는 값을 말합니다. 아래 샘플에서는 폰트와 폰트 사이즈의 스타일을 변경하는 것입니다. 속성과 값의 표현은 중간에 콜론(:) 사용해서 구분하시면 됩니다.
|
2. 스타일을 삽입하는 여러가지 방법 |
▼ 첫 번째 스타일을 삽입하는 방식은 embedding 방식입니다. HTML 문서 안에 <HEAD> 태그 사이에 들어가는 것입니다. 방법은 <STYLE> </STYPE> 태그 사이에 스타일을 설정하는 것이죠. 그리고 STYLE 속성에 type=”text/css” 라고 기술해야 합니다.
▼ 두 번째 방식은 여러 HTML 페이지에 동일하게 스타일을 적용해서 통일감을 주기 위한 설정 방법입니다. 그러니까 HTML 안에 스타일을 지정하는 것이 아니라 별도의 CSS 파일에 지정하고 각 HTML 페이지에서는 링크를 거는 것입니다. <link> 태그를 사용하며 href 속성값에 파일명과 위치를 링크하면 됩니다.
▼ 세 번째 방식은 import 방식입니다. 개념은 link 과 동일합니다. 외부의 스타일 파일을 링크 거는 방식이나 문법이 조금 다릅니다. 문법은 @import url(“css 경로와파일명”); 입니다. 주로 내부에서 CSS 를 정의하는 embedding 방식과 같이 사용하는 경우가 많죠.
▼ 네 번째는 인라인(inline) 방식입니다. 위에서 소개한 방식들은 태그 전체에 적용되는 방식입니다. 그런데 특정 부분을 다른 스타일로 적용하고 싶다면 어떻게 해야 할까요? 이때는 인라인 방식을 사용하시면 됩니다. HTML 태그 속성에 style 이라고 있습니다. 이 style 속성에 CSS 를 정의하는 것이죠. 아래 그림처럼 두 번째 p 태그에 style 로 CSS 를 정의 했습니다. 그럼 우선 적용이 되는 것입니다.
▼ 아래 그림처럼 별로도 적용한 P 태그에 색상과 폰트 크기가 바뀌어 있죠. 인라인으로 적용한 내용이 우선 적용되어서 그렇습니다. 이렇게 CSS 는 다양한 형태로 정의가 가능합니다.
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
|---|---|
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 (0) | 2020.01.16 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
| 스타일시트 CSS 가운데 정렬하는 방법, text-align 과 margin 이용 (1) | 2020.01.03 |
