CSS란
:Cascading Style Sheet의 약자로 HTML 언어로 작성된 문서를 사용자가 보는 웹 사이트에 표현해주는 스타일 시트 언어를 말한다. HTML이 구조, 뼈대라고 한다면 CSS는 그것을 색칠하고 꾸미는 역할을 한다고 보면 된다. 사실 CSS는 생긴 지 얼마 되지 않았는데 과거에는 HTML에 디자인적 요소를 포함한 태그를 이용하여 작성하는 것이 일반적이었기 때문이다. 해당 문서의 길이가 짧으면 모르겠지만 웹 문서의 길이가 길 경우 열 문장이면 열 문장마다 디자인 정보를 모두 적어놓다 보니 웹 문서의 코드를 확인하는 것만 해도 시간이 오래 걸렸다. 그러니 개발에는 더 오랜 시간이 소모되었으며 수정 시에도 태그를 일일이 수정해야 됐었다.
이러한 문제점을 해결하기 위해 구조(Constructure)와 표현(Presentation), 행위(Behavior)를 구분하게 되었고 표현을 위해 생긴 것이 CSS이다. CSS는 한 번에 여러 태그를 수정하는 데에도 도움이 되지만 HTML 문서에서 분리할 수 있어서 다른 HTML 문서에도 똑같이 적용할 수 있다. 하지만 CSS 문서의 경우 문법에 엄격하기 때문에 점 하나만 빼먹어도 파일을 인식하지 못하기 때문에 유의해야 한다.
CSS의 구조
CSS는 선택자 {속성:값;}의 구조로 선택자 부분에 바꾸려는 항목을 입력하고 속성 부분에는 무엇을 바꿀 것인지 속성을 입력한다. 입력 후 콜론 : 을 쓰고 무엇을 어떻게 바꿀 것인지에 대한 값을 입력한다. 이후 값에 대한 마침표를 세미콜론;으로 마무리한다. 참고로 <style></style> 태그 같은 경우 body 라인이 아닌 head 라인에 입력한다. 그래서 전체 문장으로 보게 되면 가장 상단에 <! DOCTYPE html> - <html> - <head> - <meta charset="utf-8"> - <title> 순서 후에 <style>이 나오게 된다. 또한 CSS는 어떤 구조에 대해 색칠을 하는 것이기 때문에 html 문서의 body 부분을 먼저 작성하고 CSS를 작성해야 한다.
ID와 CLASS
CSS의 경우, 자신이 원하는 스타일을 적용하고자 하는 곳을 분류하고 <style> 태그를 통해 수정하기 때문에 항목에 명칭을 정해주는 것이 중요하다. 이를 이용한 게 id와 class인데 이 두 가지 태그들은 태그에 이름을 정해주는 역할을 한다. 이 둘의 차이점은 태그를 나타내는 표기방식과 몇 개까지 적용할 수 있느냐 이다.
- ID
id는 한 문서에서 하나의 태그에만 이름을 적용할 수 있으며 <style> 시트에 적용할 때에는 앞에 #을 붙여야 한다. 예시로 <p> 태그의 id를 a라고 했을 때 다음과 같이 표기할 수 있다. <p id="a"> css </p> 그럼 이걸 적용할 때는 <head> 부분 <style>에 #a {color:green;} 이런 식으로 쓰면 된다.
- CLASS
class는 id와 달리 여러 태그에 이름을 적용할 수 있으며 <style> 시트에 적용할 때에는 앞에 점(.)을 붙여야 한다. 예시로 <h1> 태그의 class를 b라고 했을 때 다음과 같이 표기할 수 있다. <h1 class="b"> css </h1> 그럼 이걸 적용할 때는 <head> 부분 <style>에. b {color:red;} 이런 식으로 쓰면 된다.
+ 글자의 일정 부분만 바꿔주고 싶다면 <body> 라인에 <h1><u> 여기만 </u> 파란색으로 </h1>를 적고 <head> - <style> 부분에 h1 u {color:blue;}를 적어주면 된다. 이때 주의할 점은 스타일 태그 안에서 하는 띄어쓰기는 h1u와 같은 문자로 인식할 수 있기 때문에 주의하여야 한다. 아래는 순서대로 id, class, 일정 부분만 글자를 변경한 html 파일의 예시이다.
- CSS의 적용 우선순위
CSS에는 HTML 못지않은 수많은 태그들이 있다. 하지만 여러 가지가 있어도 그중에서 우선적으로 적용되는 태그들이 있는데 그중 가장 중요한 태그는 속성 값 뒤에 (! important)를 붙인 속성이다. (! important) 태그를 쓸 경우 이미 적용된 값이 있어도 해당 태그를 최상단으로 적용한다.
'web' 카테고리의 다른 글
| 웹 언어 HTML에 대해서 알아보자 (0) | 2022.11.02 |
|---|
댓글