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">


<link>로 연결을 하는데, href 속성을 사용한다.
같은 경로에 있을 경우에는, 그냥 style.css를 사용하고 다른 경로에 있을때는 상대경로를 작성해준다.

이것은 HTML 파일 설정에 해당하므로, <head>태그 안에 넣어야한다.



CSS 선택자(Selectors)


- CSS 적용시 { } 안에 속성:값; 형식으로 넣는다.

선택자에는 여러가지 종류가 있다.


1) 태그를 선택자로 하기

<style>
h1 {
color: blue;
}
</style>


태그를 선택자로 한다면, 모든 태그에 CSS가 적용이 되는 것을 주의해야한다.


2. 특정 태그를 CSS 적용하기.


<style>
#green-heading {
color: green;
}

.primary-para {
color: red;
}
</style>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<div class="box">
<h2 id="green-heading">Welcome</h2>
<p class="primary-para">
Hello My World
</p>
</div>


특정 태그를 선택하여 스타일을 적용하는 방법에는 두 가지가 존재한다.


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번으로 작성해야한다.


즉, 여러개를 동시에 적용하려면 콤마(,)를 사용한다.





<ul>
<li><a href="">List01</a></li>
<li><a href="">List02</a></li>
<li><a href="">List03</a></li>
<li><a href="">List04</a></li>
<li><a href="">List05</a></li>
<li><a href="">List06</a></li>
<li><a href="">List07</a></li>
</ul>


이렇게 하면,


이렇게 되는데, a태그를 css에서 원하는대로 바꿀 수 있다.


Posted by sungho88
,