CSS 개념 및 적용 방법
= Cascading Stylesheets의 약자.
= CSS를 HTML에서 적용시키는 방법에는 세 가지가 존재한다.
1. HTML 태그 안에 직접적으로 적용하기(인라인 스타일)
2. <style>태그를 이용해서 HTML 파일에 작성 후 적용하기
3. 외부에서 .css 확장자를 갖는 CSS 파일을 생성해서 HTML에서 불러와서 사용하기.
1번은 유지보수나 가독성 측면에서 최대한 사용하지 말아야하며,
2번은 간단한 CSS라면 가능하지만, 이것 역시 HTML파일에 CSS가 포함되어 길어지기 때문에 별로이다.
3번을 추천한다. 이렇게 작성해야 HTML과 CSS가 분리되어 따로따로 관리를 할 수 있고, 재사용이 용이하다.
1번의 경우 태그의 속성으로 style을 선언 후 작성.
이렇게 코딩을 하게 되면 추후 수정이 어렵고, 코드 가독성이 떨어진다!
2번의 경우 <head>태그 안에 <style>을 선언 후 작성
3번의 경우 HTML에는 CSS를 일절 사용하지 않고, 호출만 한다. 그러면 적용된다.
외부에 .css파일을 생성한 뒤, 호출한다. 호출방법은 다음과 같다.
<link rel="stylesheet" href="style.css">
CSS 선택자(Selectors)
태그를 선택자로 한다면, 모든 태그에 CSS가 적용이 되는 것을 주의해야한다.
2. 특정 태그를 CSS 적용하기.
특정 태그를 선택하여 스타일을 적용하는 방법에는 두 가지가 존재한다.
1) class (클래스) : 태그 속성을 class="box"로 했다면 CSS에서 이 태그를 호출할 때는, 점(.)을 태그앞에 쓴다. : .box
2) id (아이디) : 태그 속성을 id="box01"로 했다면 CSS에서 이 태그를 호출할 때는, 샵(#)을 태그앞에 쓴다. : #box01
HTML에서 태그의 내부 태그(Nested Selectors)를 찾는 방법은 다음과 같다.
.box h2 {
color: blue;
}
이 것은 class="box"로 선언된 div태그의 하위인 h2태그에 CSS를 적용하겠다는 의미이다.
주의할 점은, 콤마로 구분을 할 경우 Nested Selectors가 아니라 각각 적용이 되므로
.box와 모든 h2가 css 적용이 되어버리므로 그냥 space 1번으로 작성해야한다.
즉, 여러개를 동시에 적용하려면 콤마(,)를 사용한다.
이렇게 하면,
이렇게 되는데, a태그를 css에서 원하는대로 바꿀 수 있다.
'개발 > HTML' 카테고리의 다른 글
| [HTML] CSS 기초 (0) | 2018.10.18 |
|---|---|
| [HTML] 파비콘(Favicon) 만들고 적용하는 방법 (0) | 2018.10.02 |
| HTML에서 사용되는 태그 모음 한 방 정리.. (0) | 2018.06.28 |
| [HTML] <blockquote> 태그에서 cite 속성은 무엇인가? (0) | 2018.06.28 |
| [HTML] HTML의 특징과 구조 그리고 기본적인 HTML 태그들... (0) | 2018.06.28 |
