Jeongchul Kim
CSS 01 CSS의 개요 본문
CSS 01 CSS의 개요 CSS 3의 개요 및 CSSx와의 차이점 CSS3의 개요 및 CSSx와의 차이점 CSS란 Cascading Style Sheet의 약어로 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트를 말합니다. 기존 HTML에서는 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 했지만, CSS를 적용하면, 웹 페이지의 한 가지 요소만 변경해도 전체 페이지의 내용이 한꺼번에 변경할 수 있습니다. CSS는 HTML과 함께 사용되지만 HTML은 아닙니다. CSS는 기존 태그로 콘텐츠를 보여주는 방식을 재정의하여 HTML의 기능을 개선하는 별도의 스타일시트 언어인 것입니다. 이와 같은 CSS를 사용하게 되면, 다음과 같은 장점을 가지게 됩니다. 첫째, CSS는 용량이 작으며, 이해하기 쉬운 구조로 이루어져 있습니다. 둘째, Table코딩에 비해 보통 50%정도 코드를 절약할 수 있습니다. 셋째, 디자인과 웹 구조가 완벽하게 분리되어 있어 하나의 HTML로 다양한 디자인이 가능합니다. 넷째, 웹 표준에 맞는 사이트를 제작할 수 있습니다. 다섯 째, CSS는 W3C에서 웹 표준으로 정의하였기에, 수정 및 관리가 용이합니다. CSS스타일 형식에 대해 알아보겠습니다. CSS 스타일 형식은 다음과 같이 표현할 수 있습니다. 선택자로 시작을 하여, 속성과 속성값을 지정한 다음 세미 콜론을 사용하여 정의를 완성하죠. 그렇다면 다음의 검은색으로 된 텍스트 단락 글자를 파란색으로 변경하려면 어떻게 해야 할까요? 만약 스타일을 사용하지 않는다면 <p>태그가 사용된 부분마다 찾아 다니며 색상을 변경해야 합니다. 하지만 CSS를 사용하면 <p>라는 태그와 color라는 속성을 이용하면 쉽게 수정할 수 있습니다. 자 다음과 같이 p{color : blue;} 로 정의하면 <p>태그의 color속성이 파란색으로 되어, 보시는 바와 같이 텍스트의 색상이 파란색으로 변경됩니다. CSS의 동작 방식 다음과 같습니다. 방문자가 주소창에 주소를 입력하거나, 링크를 클릭하여 웹 페이지를 열면, 서버는 HTML 파일과 연결되거나, HTML 파일에 포함된 다른 파일과 함께 HTML 파일을 방문자의 컴퓨터로 전송을 합니다. 그러면 방문자의 브라우저는 CSS코드의 위치와 상관없이 CSS를 해석하고, 이를 HTML에 적용하며, 또한 렌더링 엔진을 사용해 웹 페이지를 렌더링하고 이를 브라우저 창에 출력을 하게 되는 것입니다. <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>텍스트 색 변경하기</title> <style type="text/css"> h1 { color: red; } p { color: blue; } </style> </head> <body> <h1> CSS 사용한 후 텍스트 색!!!</h1> <p> CSS를 사용하여 간편하게 텍스트의 색을 변경할 수 있다!!!</p> </body> </html> 여러분, 다음과 같은 결과화면이 나왔나요? 그럼 이러한 결과 화면이 나오기 위해서는 어떻게 프로그래밍을 해야 하는지 살펴보겠습니다. 먼저 다음과 같이 <body> 안에 <h1> 태그와 <p>태그를 사용하여 각각 “CSS 사용하기 후 텍스트 색!!!“과 “CSS를 사용하여 간편하게 텍스트 색을 변경할 수 있다”로 입력합니다. 그리고 나서 <body>외부, 즉 <body> 윗줄에 <style type=“text/css”>를 입력하여 텍스트의 타입을 적용하고, 그 다음에 <h1>과 <p>태그에 각각 빨간색과 파란색을 나타내는 레드와 블루로 지정합니다. 그러면 다음과 같이 윗줄의 텍스트는 빨간색상으로 출력되고, 그 아래의 텍스트는 파란색으로 결과화면이 출력되게 되는 것입니다. CSS의 발전 과정에 대해 알아보겠습니다. CSS는 현재까지도 지속적으로 새로운 버전이 나오고 있습니다. 1996년, CSS의 도입에 바탕이 되었던 CSS1을 시작하여, 1998년 w3c에서 CSS2를 개발하여 권고안을 발표하였습니다. 이후 새로운 기능과 도구가 추가되면서 CSS2.1로 버전업 되었으며, 2005년부터는 CSS3가 등장하면서 스타일 시트의 혁명이 시작되었습니다. 그럼 각 버전에 대한 주요 특징을 살펴보도록 하겠습니다. 먼저 CSS1부터 살펴보도록 하겠습니다. CSS1은 1996년 W3C에서 첫 번째 공식 버전을 발표하면서부터 시작됩니다. CSS1은 텍스트 서식과 폰트 설정 그리고 마진 설정과 같은 CSS와 관련한 핵심 기능이 포함되어 있는데요. 이러한 CSS1은 넷스케이프4와 인터넷 익스플로러3,4에서 지원합니다. CSS2는 1998년 발표되었으며, 현대 브라우저에서 가장 많이 채택되어 사용되고 있는 버전이기도 합니다. CSS2는 이전 버전의 모든 속성을 포함하고 있을 뿐만 아니라, 국제적인 접근성 및 미디어 관련 CSS를 지정하는데 초점을 두었습니다. 이후 2006년에 이르러 CSS2.1이라는 수정 버전이 발표되었는데요, 이 버전에서는 이전 버전에서 발생하는 일부 에러가 수정되었으며, 몇 가지 이슈에 대한 부분을 명확히 정리하였습니다. 마지막으로 CSS3에 대해 살펴보겠습니다. CSS버전 1,2와는 달리 모든 명세를 포함한 단일 형태의 CSS3는 존재하지 않습니다. CSS3는 CSS작업 그룹에서 한 번에 전체 명세를 발표하는 대신 일련의 모듈로 분할하였으며, 아울러 각 모듈은 각자 별도의 개발 일정을 가지고 개발을 진행하고 있습니다. CSS3와 HTML5 관계 CSS3와 HTML5 관계 웹 기술은 다음과 같이 HTML, CSS, JavaScript와 같이 세가지 핵심 요소로 구성되어 있습니다. 이 세가지 요소는 언어의 구성요소와 비슷한 측면이 있어, HTML은 명사, CSS는 형용사와 부사, JavaScript는 동사와 비슷하다 할 수 있습니다. 그럼 이중에서 명사를 꾸며주거나 수식해주는 형용사 또는 부사의 역할을 하는 CSS에 대해 좀 더 자세히 알아보겠습니다. CSS를 사용하여 얻을 수 있는 장점으로는 첫째, CSS의 가장 큰 장점으로서 설정하기가 아주 쉽다는 점과, 둘째, 플러그인이나 소프트웨어가 필요 없으며, 셋째, 그냥 단순한 규칙으로 이루어진 텍스트 파일이라는 점입니다. CSS의 종류로는 어떤 것들이 있을까요? 그렇습니다. 이와 같은 CSS규칙의 종류로는 HTML 선택자, 클래스, 그리고 ID 이렇게 모두 세 가지가 있습니다. CSS규칙의 종류 세 가지에 대해 조금 더 자세히 살펴보겠습니다. 먼저 HTML 선택자는 HTML 태그의 텍스트 영역을 말하는데요, 다음과 같은 예시에서 h1은 <h1>태그의 선택자가 됩니다. 이처럼 HTML의 선택자는 CSS규칙에서 태그가 보이는 방식을 재정의 합니다. CSS규칙 중 클래스란 다수의 엘리먼트에 스타일을 적용하고자 할 때 사용되는 것으로 HTML 엘리먼트에 클래스를 지정하는 방법은 다음과 같습니다. 여기서 클래스명은 원하는 이름을 거의 모두 사용할 수 있습니다. 다음 예제를 보면 maintext라는 이름으로 클래스명을 지정한 후 빨간색과 중앙정렬되어 출력되도록 스타일을 적용하고 있습니다. 이처럼 클래스는 여러 HTML에 적용할 수 있어, 클래스 선택자는 가장 많은 용도로 사용할 수 있습니다. 마지막 규칙으로는 ID입니다. ID규칙도 클래스 선택자와 비슷하게 모든 HTML 태그에 적용할 수 있습니다. 다만, ID 선택자는 자바스크립트 함수에서 객체를 사용할 수 있도록 특정 페이지상에서 특정 HTML 태그에 한 번만 적용해야 합니다. 예를 들어 다음과 같이 정의를 하면 ID명을 이용하여 스타일을 적용시킬 수 있습니다. HTML에서 CSS를 사용하는 방법에 대해 알아보겠습니다. HTML 마크업 단계가 끝나면 CSS로 디자인을 입히게 되는데, 스타일 시트의 내용이 어느 곳에 위치하느냐에 따라 다음과 같이 세 가지 방법으로 구분할 수 있습니다. 첫번째 방법은 인라인 스타일입니다. 인라인 스타일이란 한 줄짜리 스타일을 뜻하며, 태그 안에 직접 지정하여 사용하므로 HTML과 섞어서 사용하게 되는데, 자세한 사용법은 다음과 같습니다. 이러한 인라인 스타일의 주요 특징으로는 태그에 직접 스타일을 지정할 때 손쉽게 이용할 수 있지만, 많이 작성할 경우 나중에 어느 곳에 있는지 알아내기가 어렵습니다. 따라서 인라인 스타일은 유지 보수 면에서 볼 때, 가급적으로 사용하지 않는 것이 좋습니다. 두 번째 방법은 내부 스타일입니다. 내부 스타일은 HTML 파일 안에 별도 영역으로 스타일을 정의하며 일반적으로 <head> 안에서 사용하게 되는데, 자세한 사용방법은 다음과 같습니다. 이와 같은 내부 스타일의 특징으로는 HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그이기 때문에, HTML 문서 하나가 고유한 CSS 내용을 가질 때 사용하면 좋습니다. 마지막으로 외부 스타일 방법이 있습니다. 외부 스타일이란 스타일 내용을 별도의 페이지로 빼서 사용하는 방법입니다. 그렇습니다. CSS 파일 하나가 존재하면, 여러 HTML 파일에서 CSS 내의 스타일을 사용합니다. 이와 같은 외부 스타일의 주요 특징으로는 하나의 스타일로 여려 개의 HTML 페이지에 적용하기 때문에, 유지 및 보수가 편리하고, 각각의 HTML 페이지 문서에 <head> 섹션 안에 <link> 태그를 사용하여 스타일 페이지와 연결하며, 스타일 시트 파일의 확장자는 CSS로 나타난다는 특징이 있습니다. 1. CSS3의 개요
2. 스타일 형식
3. CSS의 동작 방식
4. CSS를 사용하여 텍스트 색 변경하기 실습
5. CSS3와 CSSx의 차이점
1. CSS와 HTML
2. HTML에서 CSS를 사용하는 방법
'Web프로그래밍' 카테고리의 다른 글
| CSS 03 CSS 레이아웃 및 HTML5 적용 (0) | 2016.04.27 |
|---|---|
| CSS 02 CSS 스타일링 (0) | 2016.04.26 |
| HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 (0) | 2016.04.21 |
| HTML5 08 변화된 태그 (0) | 2016.04.21 |
| HTML5 07 추가 태그 (0) | 2016.04.21 |