CSS란
Cascading Style Sheet의 약자이며 HTML언어가 웹브라우저에서 표현되는
스타일 언어이다. 즉 디자인 요소를 담고 꾸며주는 역할이다.
사용방법
CSS언어를 사용하는 방법은 원하는 태그 안에 style 속성을 적용하고 속성 값으로는 CSS언어를 사용하여 꾸며준다. style속성 값으로는 CSS언어가 들어오도록 약속되어 있다.
<h1> style="color:green">JavaScript</h1>이렇게 적용하게 되면 <h1> 태그 안에 있는 텍스트는 color라는 CSS의 속성 값으로 인해 글 색상이 초록색으로 변하게 된다. 하지만 아무런 태그가 붙지 않는 텍스트에 적용하려면 어떤 방법이 있을까?
<div>JavaScript</div>
<span>JavaScript</span>이처럼 <div>와 <span>이라는 태그를 사용할 수 있다. <div>와 <span> 태그는 아무런 기능도 의미도 없는 태그이다. 이 태그가 적용된 텍스트는 CSS와 JavaScript를 통해 제어가 가능해진다. 하지만 <div>와 <span> 태그를 사용해보면 서로 다르다는 걸 느낄 수 있다. 먼저 <div> 같은 경우 적용된 텍스트는 웹브라우저에서 줄 바꿈이 된다. 이유는 <div>라는 태그는 사각형 박스로 구역이 정해기 때문이다. 하지만 <span> 태그는 문장 단위로 지정되기 때문에 줄 바꿈 없이 적용된다.
예를 들어 앞에서 말했듯이 "JavaScript"를 포함하는 아주 긴 글이 있다고 하자 그 문장에서 "JavaScript"만 제어하고 싶어 <div> 태그를 사용할 경우 굉장히 부자연스럽게 보일 것이다. 하지만 <span> 태그를 사용하게 되면 자연스럽게 이어지는 걸 볼 수 있다.
<span sytle="color:green">JavaScript</span>이렇게 적용된 <span> 태그 안에 style속성을 넣어주면 CSS언어를 사용하여 디자인할 수 있다.
CSS언어의 속성 값은 정말 많이 있다. 사용하고 싶은 속성 값은 구글링을 통해 알아보자.
하지만 단점도 존재한다. <span> 태그가 적용된 단어들의 색상을 수정하거나 제어가 필요할 경우 일일이 수정해 줘야 할 것이다. 그럼 시간도 많이 소비가 돼 뿐 더러 효율적이지 못하다.
그렇다면 어떠한 방법을 통해 효율적인 작업을 할 수 있을까?
Class
Class를 적용하게 되면 묶어서 사용할 수 있다. 즉 그룹화하여 한꺼번에 처리할 수 있다.
이런 식으로 <span> 태그 안에 class를 적용하여 원하는 텍스트를 지정해주고 class명을 설정해주면 적용이 된다. 그럼 이렇게 class가 적용된 텍스트들을 어떻게 제어할 수 있을까.
<head>
<style>
.EX{
color:red;
}
</style>
</head><head> 태그 안에 <style> 태그를 넣게 되면 스크립트 태그처럼 웹 브라우저에게 알려주는 구분자가 된다. 다음 <style> 태그 안에 지정해준 class명을 붙이고 중괄호를 이용하고 해당 class명을 가진 텍스트를 제어하기 위해선 중괄호 사이에 적용하려는 CSS속성 값을 부여하면 제어가 가능하다.
선택자
CSS는 선택 자라는 여러 개의 태그를 선택해주는 아주 효율적인 방법이 있다.
이처럼 class 말고도 id라는 형태의 선택자도 있다.
<head>
<style>
.EX{
color:red;
}
#cook{
color:blue;
}
</style>
</head>위와 다른 게 보일 것이다. 바로 cook이라는 id가 적용된 것이다. 적용 방법은 다음과 같다.
<span id="cook" class="EX">JavaScript</span>이런 식으로 원하는 텍스트 태그에 id값을 넣어주고 적용되었을 때 빨간색이었던 JavaScript는 파란색으로 변해있을 것이다. 이 말의 의미는 id의 우선순위가 class보다 높다는 뜻이다. 즉 class가 조금 더 포괄적이어서 광범위한 효과를 준다 하면 id는 그중 예외 처리하고 싶을 때 사용하는 거라고 보면 좋다.
이것 말고도 태그 자체를 사용하는 방법도 있다.
<head>
<style>
.EX{
color:red;
}
#cook{
color:blue;
}
span{
color:green;
}
</style>
</head>이러한 방법으로 <span> 태그 자체를 제어하는 방법도 있다. 하지만 이렇게 적용하였을 때 예문에서 "JavaScript"의 색상은 바뀌지 않을 것이다. 위에서 말했듯이 적용되는 우선순위가 있다
id> class> tag
순으로 적용된다고 보면 된다.
CSS는 단순하게 보면 디자인할 수 있는 언어라 개발하는 데에 큰 영향을 끼치지 못한다라고 생각된다. 하지만 CSS의 속성을 많이 알고 있다 해도 선택자를 활용하여 내가 원하는 태그에 적용할 수 있는지 또 정확히 알고 사용하는지는 매우 중요한 것 같다.
'TIL > Javascript' 카테고리의 다른 글
| /JavaScript/비교 연산자,boolean (0) | 2021.12.22 |
|---|---|
| /JavaScript/태그 제어 (0) | 2021.12.21 |
| /JavaScript/웹 브라우저 제어 (0) | 2021.12.19 |
| /JavaScript/변수,대입 연산자 (0) | 2021.12.18 |
| /JavaScript/Data Type (0) | 2021.12.17 |
