CSS는 웹 페이지의 가독성을 높입니다. CSS는 사용자 편의를 증진시키는 웹 디자인을 위한 언어입니다.
html을 이용해 전자문서, 즉 웹페이지를 만들 수 있습니다. html의 다양한 태그를 활용하여 웹페이지를 개발할 수 있지만, 시각적인 요소를 구현하는 데는 한계가 있었습니다. <font> </font> 폰트 태그와 같이 글자색을 바꾸어 디자인적 요소를 보완할 수도 있습니다. 그러나 일일이 폰트 태그를 작성해주어야 하기 때문에 생산성이 좋지 못했습니다. CSS는 이러한 불편함을 해소하면서도 더욱 효과적으로 디자인적 요소를 추가할 수 있는 언어입니다. 웹페이지를 더욱 보기 쉽고 편하게 만들기 위해 CSS 언어가 등장한 것입니다. CSS는 디자인에 최적화된 언어로서 html의 한계를 보완하는 데 큰 기여를 했습니다.
웹 브라우저는 html을 인식하는 도구입니다. CSS 언어를 인식하기 위해서 html 문법으로 표현된 CSS 코드가 필요합니다. <style> </style> 스타일 태그가 html로 표현된 CSS 언어입니다. 웹브라우저가 스타일태그가 포함하는 영역이 CSS 언어임을 인식할 수 있도록 표현하는 것입니다. CSS의 다양한 내용을 html 스타일 태그의 문법에 맞추어 표현하는 것입니다.
<head> </head> 헤드 태그 사이에 CSS 값을 하나 작성해보겠습니다.
<style>
a {
color:red;
} </style>
스타일 태그는 <a> </a> 앵커 태그로 연결된 모든 속성에 대해 디자인적 요소를 적용할 수 있습니다. CSS 언어는 아래와 같은 구조로 작성합니다. a는 웹문서에서 연결된 <a> </a> 앵커 태그 중에 디자인 효과를 적용할 대상을 선택한다는 의미를 갖습니다. 선택자 selector라고 표현합니다. CSS는 중괄호 { } 안에 디자인적 요소를 적용합니다. color는 폰트의 색상을 의미하는 속성입니다. color 속성 바로 다음 콜론 : 을 작성합니다.
selector (선택자) / declaration (선언, 효과) / property (속성) / Value (값)
중괄호 안에 위치하는 color:red; 부분은 선택자 selector가 지정한 대상에 부여하는 효과, declaration, 선언 등으로 표현합니다. color의 개념은 한국어로는 속성을 뜻하고 영어로는 property라고 합니다. red는 property의 값 (Value)으로서의 성격을 갖습니다.
property와 value으로 구성된 declaration을 완성해 원하는 색상을 입력하려면 세미콜론 ;으로 마무리합니다. CSS 디자인적 요소는 수많은 값이 입력되는 경우가 많기 때문에 다양한 효과의 declaration들을 구분하기 위해서 반드시 세미콜론 ;으로 선언을 마무리해야 합니다. 한 줄에 나란히 declararion이 정렬되어 있어도 디자인 효과가 잘 적용됩니다. 그러나 Enter로 줄 바꿈을 하여 보기 좋게 정렬하는 것을 추천합니다. 속성 값 입력을 마쳤다면 스타일 태그를 닫습니다. CSS를 사용해 입력했던 색상을 한 번만 바꾸어도 <a> </a> 앵커 태그로 연결된 모든 값의 색상이 한 번에 바뀌게 됩니다.
만약 CSS 언어를 사용하지 못한다면, 모든 앵커 태그 값마다 <font> 태그를 적용해야 할 것이며, 그것은 엄청난 비효율을 가져올 것입니다. 태그를 하나씩 수정하는 데 소모되는 시간적 낭비와, 중복되는 태그로 인해 웹페이지의 용량은 늘어나게 됩니다. 또한 태그를 수정하는 과정에서 수정하지 말아야 할 태그를 잘 못 수정하여 웹페이지에 치명적인 결함을 안길 수도 있습니다. 이와 같은 불편함과 위험성을 해소하는 해결책이 CSS 언어입니다. CSS는 중복해서 적용해야 하는 디자인적 내용을 하나로 묶는 효율적인 언어입니다. 또한 디자인적 요소만 담당하기 때문에 CSS를 수정하는 것은 핵심 내용이 담긴 html을 수정하는 것보다 안전하고 부담이 적습니다.
헤드 태그에 a (웹 문서의 모든 앵커 태그의 태그 값)에 대해 작성했던 CSS와 달리 특정 a 앵커 태그에 스타일태그를 적용할 수 있습니다. 특정 영역에 별도에 서식을 지정할 수 있습니다.
CSS를 사용하는 2가지 방법. 스타일 태그 / 스타일 속성
<a href="1.html"> WEB </a>라는 코드에 CSS를 적용하여 글자색을 빨간색으로 만들면 다음과 같습니다.
<a href="1.html" style="color:red"> WEB </a> 참조하는 출처를 표현하는 href 속성 값 다음 style 속성을 작성하여 CSS임을 밝힙니다. 여기서 style 속성은 html 언어의 속성 값입니다. 다만, style=" " 의 구조 안에는 반드시 CSS의 디자인적 요소, 서식에 대한 내용이 들어온다는 약속이 되어 있습니다. style 속성의 세부 속성 color:와 그에 대한 실제 값 red를 작성하면 해당 부분에만 디자인적 요소가 적용됩니다. 앞서 <style> </style> 스타일 태그에 selector가 지정한 영역에 적용되는 디자인 효과 color:red;를 declaration 선언이라고 표현한다는 것을 배웠습니다. 특정 a 태그에 html 언어의 속성으로서 style은 디자인 효과 declaration이 적용되는 영역이 한정지 어집니다. 그렇기 때문에 이와 같은 경우에는 선택자 selector를 사용하지 않습니다.
즉, CSS를 적용하는 방법은 아래 2가지로 나눌 수 있습니다.
<style> a { color:red; } </style> 형태로 스타일 태그로 CSS를 적용하는 방법
<a href="1.html" style="color=red"> WEB </a> 형태로 html 스타일 속성으로 적용하는 방법
html 스타일 속성으로 적용한 디자인 효과는 스타일 태그로 적용한 디자인 효과에 우선하여 표현됩니다. 스타일 태그로 웹문서에 모든 텍스트에 밑줄을 없애고 난 후 WEB이라는 텍스트에만 밑줄을 긋고 싶다면 아래 순서대로 코딩을 합니다. 우선 헤드 태그 영역 안에 스타일 태그를 작성하여 문서 전체의 밑줄을 제거합니다.
<style>
a {
color:red;
text-decoration: none;
}
</style>
새로고침을 하면 문서에 모든 밑줄이 사라지는 것을 볼 수 있습니다. 이제 WEB 부분에 밑줄을 스타일 속성으로서 적용해줍니다. 속성의 마지막 값은 세미콜론을 적지 않아도 적용이 됩니다. 그러나 나중에 새로운 속성을 추가할 때를 대비해서, 세미콜론을 적고 마무리하는 습관을 만드는 것이 좋습니다. 속성으로 CSS를 적용하면 아래와 같이 코드를 작성할 수 있습니다.
<a href="1.html" style="color:red; text-decoration: underline;"> WEB </a>
'코딩' 카테고리의 다른 글
| html class 클래스 지정과 selector 선택자 활용 (0) | 2020.08.29 |
|---|---|
| CSS 속성 property 텍스트 서식 적용하기 (0) | 2020.08.28 |
| html 동영상 링크 삽입하기 (0) | 2020.08.27 |
| Web1 , Web2 html 문법과 기타 유용한 태그 (0) | 2020.08.27 |
| internet 인터넷과 web 웹 (0) | 2020.08.26 |
댓글