CSS 스타일시트 기초
CSS의 정의와 기능, 그리고 각 인라인 스타일시트, 내부 스타일시트, 외부 스타일시트 등에 대한 정보입니다. HTML을 이용하면서 각 CSS를 활용할 수 있도록 장단점 등을 같이 확인해 볼 수 있습니다. 먼저 CSS 스타일시트란 무엇인지부터 알아보고 그와 관련된 내용들도 전체적으로 살펴보았습니다.
CSS 스타일시트 정의
CSS는 캐스케이딩 스타일시트를 줄여서 나타낸 것입니다. Cascading Style Sheet라고 볼 수 있습니다. 주로 HTML을 다뤄보셨던 분들이라면 종종 보셨을 수도 있겠습니다. HTML을 작성한 문서에서 색상, 정렬, 서체 등등 이러한 스타일들을 말하는데요. 미리 저장을 해두고 필요한 상황마다 불러오기 하여 사용할 수 있도록 문서의 특정 위치에 또는 별도의 파일로 모아놓은 것을 CSS 스타일 시트라고 표현합니다.
HTML을 해보셨다면, 아마 일반적인 구성은 쉬워 보일 수 있지만 꾸미는 것은 쉽지 않다는 것을 알고 계실 겁니다. 누구나 편하게 인터넷만 가능하다면 쉽게 만들 수 있죠. 화면에서 볼 수 있는 배치 구조, 세밀한 포인트, 동적인 부분의 표현 등을 도와줄 수 있는 것이 CSS라고 할 수 있습니다. 쉽게 표현하면 예쁘게 꾸며주기 위한 해결책이라고도 볼 수 있습니다. HTML에 CSS 스타일시트를 적용하면 보다 보기 좋고 깔끔한 페이지로 변경이 가능해집니다. 여러 웹페이지에 적용이 가능하기 때문에 장점과 특징들이 있습니다.
소스의 수정 및 관리 수월
스타일시트를 통해 스타일의 정보만을 문서에서 정의해주면 됩니다. 외부에 있는 CSS 파일만 링크를 통해 사용해주면 웹 문서의 스타일이 구분되기 때문에 바디 태그에서 필요한 내용만 구성이 가능해집니다. 간소화되어 보다 소스를 구성하고 읽고 변경하는데 번거로움을 줄여줄 수 있게 됩니다.
HTML의 기능 추가
스타일시트는 기존의 HTML 문서에서 다양한 기능들까지 추가가 가능하고 그 기능을 변경해줄 수도 있습니다. 변경된 기능들을 통해 HTML의 부족한 부분을 커버할 수 있고, 문서의 꾸미기가 보다 수월해졌습니다.
보통은 이것저것 다양한 것들이 많아지면 페이지의 속도가 느려질 수밖에 없습니다. 속도가 느려지면 이용자들이 오래 남아서 체류하지 않고 금방 다시 뒤로 가기를 누르게 됩니다. 요즘 가장 중요한 부분은 이 페이지 로딩 속도가 아닐까 싶습니다. 일단 CSS를 바탕으로 소스가 줄어들기 때문에 파일의 크기가 줄어들고, 문서를 서버에서 읽는 속도도 빨라질 수 있습니다. 반복적으로 처리되는 부분이 간소화가 되어 더 빠른 속도를 낼 수 있습니다.
CSS 스타일시트 종류
HTML에서 스타일시트를 정의하기 전에 여러 가지 구분해 볼 수 있습니다. 대상의 범위에 따라 특정 태그에 전부 적용되는 태그 스타일. 문서 내에서 일부 특정 부분에만 적용하는 클래스 스타일. 적용되는 위치에 따라 한 곳에 모아서 정의하는 내부 스타일. 적용하려는 태그에 직접 정의하는 인라인 스타일. 스타일시트가 어디에 있느냐에 따라 내부 스타일시트와 외부 스타일시트로 구분할 수 있습니다.
인라인 스타일시트 inline style sheet
보통 스타일을 적용하게 되면 쉽게 해 볼 수 있어 가장 많이 이용하는 방법이라고 생각합니다. 태그 내에서 sytle 속성을 사용해서 스타일을 정의하게 되어있습니다. 텍스트가 사용된 태그에 직접 스타일을 넣어주는 것입니다. 직접 태그에 넣어주어 일부분에만 포인트를 줄 수 있습니다.
<HTML>
<head>
<title> Inline style sheet </title>
</head>
<body>
<p style = "color : red ; font-size : 30pt"> 인라인 스타일시트 sheet </p>
</body>
</HTML>
style 속성을 바탕으로 크기와 색상 등을 지정해주었고, 직접 태그 내에 기술하여 코드가 복잡해질 수도 있습니다. 복잡하게 보일 수도 있게 되는 것이죠. 일부 특정 태그에서만 사용하는 것이 좋을 수 있다는 것을 알 수 있습니다. 코드의 복잡성을 줄일 수 있는 시트로 내부 스타일 시트가 있습니다.
내부 스타일시트 embedded style sheet
내부 스타일시트는 임베디드 스타일 시트로 표현됩니다. 가장 일반적으로 사용되는 형태는 각 헤드 사이, 스타일 태그를 삽입하여 전체 태그에 영향을 줄 수 있습니다. 태그에 적용될 스타일을 정의할 때 선택자가 등장하고 속성과 속성 값이 필요합니다.
<HTML>
<head>
<title> 내부 태그 스타일 </title>
<style type = "text/css">
h1 {color : yellowl font-family:돋움체}
</style>
</head>
<body>
<h1> 내부 스타일 적용 </h1>
</body>
</HTML>
h1, h2, h3, p 태그 등으로 각 태그에 적용할 값을 지정해줄 수 있습니다. 이 태그를 사용하는 HTML 문서에 있는 것들은 전부 같은 스타일로 보이게 됩니다. 글자의 색상, 크기, 좌측 우측 여백 조정까지 등 조정할 수 있게 됩니다. 그런데 같은 태그를 사용하더라도 다른 스타일을 주고 싶은 경우가 많습니다. 그럴 때 클래스 스타일을 활용해볼 수 있습니다. 적용을 시킬 때는 클래스는 클래스 이름 형식으로 합니다.
<p class = "클래스 이름"> </p>
클래스 이름이 HTML 태그의 class 속성 값이 되고, HTML 태그를 사용하지 않고 구두점과 클래스 이름을 사용할 경우 모든 태그에서 이용이 가능해질 수 있습니다. 기본적인 글자 형식 등을 보여줄 때 사용할 수 있겠습니다.
<html>
<head>
<title> 클래스 스타일 </title>
<style type = "text/css">
p.one {color : red ; font-size : 20pt ; font-family : 돋움체}
. two {color : green ; font-size : 15pt ; font-family : 나눔 고딕체}
</style>
</head>
<body>
<p class = "one"> one의 스타일 </p>
<p class = "two"> two의 스타일 1 </p>
<b class = "two"> two의 스타일 2 </b>
</body>
</html>
모든 HTML 태그에서 이용이 가능한 경우, 일부의 스타일만 변화를 주고 싶은 경우 등 이용이 가능합니다. 그런데 같은 스타일이더라도 조금씩 더 변형을 원할 때 사용하는 ID 클래스 스타일이 있습니다. ID 클래스 스타일을 사용할 때는 #을 꼭 붙여주어야 합니다. 웹 문서 내에서 동일한 ID를 한 번 밖에 사용할 수 없습니다. 특정한 태그에서 하나만 사용할 때 이용하면 됩니다.
스타일 타입에서 textstyle을 정의하고, #으로 글자 크기 또는 색상 등을 입력해두면 이후 ID값을 활용해서 각각 적용할 수 있게 됩니다.
외부 스타일시트 linking style sheet
말 그대로 외부에서 만들어 놓은 스타일시트 파일을 불러오기 하고 적용시켜주는 것을 말합니다. 웹 사이트 전체적으로 통일된 스타일을 보여줄 수 있습니다. 외부 스타일시트로 여러 문서에 동일한 스타일을 적용할 때 사용할 수 있습니다. 하나의 웹 페이지에만 구성할 수 있는 인라인 스타일시트, 내부 스타일시트와는 달리 보다 시간 소요가 적어질 수 있습니다.
종종 페이지를 전체적으로 수정해줄 부분이 있다거나, 스타일시트의 내용이 변경될 경우 각각 하게 되면 번거로움이 발생합니다. 외부 스타일시트로 할 경우 이러한 다수 반복 절차를 줄일 수 있고, 스타일의 일관성을 유지하기에 더 편리하다고 볼 수 있습니다.
외부 스타일시트 파일을 만드는 것은 스타일 정의 부분을 텍스트 편집기에 입력 후. css의 스타일시트 파일로 저장하면 됩니다. 이후 LINK태그를 이용해서 연결할 수 있도록 불러와주면 됩니다.
P {font-size : 15pt ; color : blue ; font-family : 나눔 고딕}
<LINK REL = "stylesheet" HREF = "외부 스타일시트 파일 이름 입력" type="text/css">
이상 스타일 시트의 기초 구성요소들을 살펴보았습니다.
'HTML' 카테고리의 다른 글
| 정보보호의 역사 (0) | 2021.01.21 |
|---|---|
| CSS 스타일시트 배경 글꼴 정렬방법 (0) | 2021.01.20 |
| 자바스크립트의 특징 장단점 (0) | 2021.01.19 |
| HTML 태그 FORM, INPUT, SELECT, TEXTAREA (0) | 2021.01.19 |
| HTML 이미지 alt 값 입력방법 (0) | 2021.01.18 |
댓글