CSS란 무엇인가?
1. CSS란?
- Cascading Style Sheets 는 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이다.
- HTML이 정보를 표현한다면 CSS는 HTML문서를 시작적으로 이쁘게 꾸며주는 역할을 한다.
2. CSS로 기대되는 효과?
- 정보(HTML)와 디자인(CSS)를 분리하여 관리할 수 있다.
- 정보를 수정하지 않고 디자인만 변경할 수 있다.
> 태그마다 style 속성으로 주게 되면 소스코드가 지저분해 지는데, 분리하여 관리하게 되면 유지보수 및 가독성이 좋아진다.
- 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다.
> 시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성)
3. CSS로 HTML문서를 디자인하는 방법
- 외부 스타일 시트(External Style Sheet)
- 내부 스타일 시트(Internal Style Sheet)
- HTML 태그 내에 스타일 지정(Inline Styles)
3-1. 외부 스타일 시트(External Style Sheet)
- css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
3가지 방법중 가장 좋은 방법으로, CSS의 장점을 모두 갖춘 형식이다.
분리된 디자인 파일로 관리하며 홈페이지 스타일을 일관성 있게 유지/보수하며 효율성을 극대화 할 수 있다.
단점으로는 외부 스타일 시트가 지나치게 복잡해지면 곤란하므로 전문성 있는 관리 노하우가 필요하다.
3-2. 내부 스타일 시트(Internal Style Sheet)
- HTML 문서 내에서 <head>와 </head>사이에 <style> 태그로 지정하는 방법
<head>
<style type="text/css">
Selector {property: value;}
ex) h1 {color:red}
</style>
</head>
좋다고도 할 수도, 나쁘다고 할 수도 없는 스타일 적용방법이다.
그 이유는 내부 스타일 시트를 주는 것은 적절한 상황? 에서 좋은 방법이기 때문이다.
여러 문서에 적용되는 CSS의 경우는 외부 스타일 시트로 빼는게 좋지만,
한 가지 문서(HTML) 에는 따로 css를 빼는 것보다 현재 문서에만 적용할 때 유용하다.
(단, 스타일태그가 길어질 경우 외부 스타일 시트로 빼는것이 좋다.)
3-3. HTML 내에 스타일 지정(Inline Styles)
- 세가지 방법중 가장 범위가 좁아진 스타일 적용 방식이다.
<p style="font-size: 15px;">15픽셀사이즈로 디자인됩니다.</p>
위 스타일은 스타일을 지정하고싶은 태그에 직접적으로 주입해주는 방식이다.
style 속성으로, property: value 의 값을 가진다.
css의 장점인 내용과 스타일의 분리, 스타일에 대한 일괄 변경이 불가능한 가장 비효율적인(?) 방식이다.
하지만 특정 상황에서 직관적이고, 수정이 빠르고 간편한 이유로 간단한 테스트나 개발할때 사용된다.
4. CSS 적용 우선순위
- 위에서부터 차례대로 읽어들이는 HTML과 달리, CSS에는 우선순위 라는것이 적용된다.
- 적용방법의 우선순위로는 크게 외부스타일 < 내부스타일 < 인라인 스타일 순서로 작용한다.
- 자세히는 다음과 같이 작용한다.
> 1. 속성값 뒤에 !important; 를 붙인 속성 ( !important의 경우 종료마크인 ;(세미콜론) 안쪽에 작성되어야 한다.)
> 2. 태그에 직접적으로 style 속성을 넣는 방식 (인라인스타일 방식)
> 2. HTML문서 에서 style을 직접 지정한 속성 (내부스타일 방식)
> 3. #id 로 지정한 속성
> 4. .클래스, :추상클래스 로 지정한 속성
> 5. 태그이름 으로 지정한 속성
> 6. 상위 객체에 의해 상속된 속성 (외부스타일 방식)
- 6번에서 1번으로 갈 수록 우선순위가 높다. -> !important가 가장 강력하다.
- 6번째 우선순위에서 !important 를 붙인다면 해당 속성으로 적용된다.
* mystyle.css
@charset="UTF-8"
.test{color:red;}
* mystyle.html
~~~
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
.test {color:blue;}
</style>
</head>
<body>
<h1 style="color:orange" class="test">이 문단의 글자색상은 주황색으로 나오게 됩니다.</h1>
</body>
위 코드를 보면, 외부스타일로 test클래스를 가진 h1태그에 글자색상을 빨간색인 red로 설정하였다.
하지만 내부스타일인 <style> 태그로 인하여 색상이 파란색이 되어야 하지만,
내부스타일보다 우선순위인 인라인스타일 에 밀려 글씨는 주황색으로 나타나게 된다.
** 만약, mystyle.css 안에 내용이
.test {color:red !important} 와 같이 작성된다면, 강제로 우선순위가 첫번째가 되기 때문에, 빨간 글자로 나오게 된다.
[글 작성에 있어 출처 및 도움된 사이트]
https://ofcourse.kr/css-course/
https://developer.mozilla.org/ko/docs/Web/CSS/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/CSS%EB%9E%80
https://opentutorials.org/course/45/2