CSS란

1. CSS(Cascading Style Sheets)란?

CSS는 웹 사이트의 글꼴, 색상 등을 적용할 수 있습니다.

 

CSS의 C의 Cascading 은 ' 폭포', '위에서 아래로 쏟아지는' 이라는 뜻으로

 

쉽게 말해서, 위에서 아래로 쏟아지는 스타일 시트라는 뜻입니다.

2. CSS 구성 요소란?

선택자(selector):  디자인을 적용할 HTML 영역

속성(property) : 어떤 스타일을 부여할지를 지정합니다.

ex) text-align, color 등

값(value): 프로퍼티의 종류에 따라 지정하는 일정 범위의 값이라고 하는데,

 ex) center, end, justify, left, aqua, red 

 

쉽게 풀이하면,

속성 color의 값에는 aqua, red등이 있고,

글자의 위치를 정렬하는 text-align의 값에는 center, end, justify, left 등이 있습니다.

▲ css의 구성 요소

3.CSS 연동 방법

① 인라인 스타일 시트(Inline Style Sheet) 

태그 안에 직접 원하는 스타일을 적용합니다.

<h1 style="color: aqua;"></h1>

 

②  내부 스타일 시트 (Internal Style Sheet)

<style> 태그 안에 CSS 코드를 작성합니다.

 	<style>
        .a{
            color: aqua;
        }
    </style>

 

③ 외부 스타일 시트(External Style Sheet) 

<link> 태그로 CSS 문서를 불러옵니다.

.a{
    color: aqua;
}

 

4. 선택자의 예시

① type 선택자 

선택자중 가장 간단한 선택자입니다.

 h1{
     color: aqua; 
   }

 

a

rew

▲  type 선택자를 적용한 결과

② id 선택자

id는 한 개의 요소만 선택 할 수 있습니다. #으로 표현합니다.

#a{
            color: brown;
            text-align: center;
        }

 

a

▲ id 선택자의 결과

 

③ class 선택자

클래스는 여러 개의 디자인 요소를 선택하고, .으로 표현합니다.

 .a{
            color: blueviolet;
            text-align: center;
        }

 

a

▲ class 선택자의 결과

④전체 선택자

*를 넣어서 html에 있는 모든 요소 스타일을 지정합니다.

    <style>
     /*css 코드*/
        *{
            color: aqua;
        }
    </style>

    <!--html 코드-->
    <h1>a</h1>
    <p>rew</p>

 

▲ &nbsp; 전체 선택자의 결과

⑤하위 선택자

 div h1{
            text-align: center;
            color: aquamarine;
        }

 	<div>
        <h1 class="a">a</h1>
    </div> 
    
    <h3>a</h3>

 

h1 태그만 적용 시킨 결과입니다.

그 결과,

h1 a는 스타일이 지정되었지만, 다른 a는 스타일이 지정되지 않았습니다.

 

a

a

▲하위 선택자의 결과