Back-end/DEV notes

CSS 란? Cascading Style Sheet

cheersHena 2018. 3. 18. 17:20
반응형

CSS : Cascading Style Sheet.


1. Inline CSS 

2.Internal CSS

3.External CSS



외부 스타일 시트

: 스타일 시트를 외부파일로 하나 만들어 사용함.

장점: 하나의 외부파일만 변경하면 참조된 모든 웹 html 페이지들이 변경됨.


사용법:

1. css 파일 생성: e.g.) explore.css , feed.css ...

2. html 페이지에  head 태그 사이 link 태그로 외부스타일 시트 파일 import.

3. css 파일에 원하는 스타일 적용.



1
2
3
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
cs


내부 스타일 시트 

외부에 따로 두지 않고 html 페이지 내에 생성

한페이지에 고유한 스타일이 있는 경우 내부 스타일 시트 사용.


사용법

1.html 페이지 head 태그 사이에 style 태그 삽입

2. style 태그 사이에 css 스타일 적용.


1
2
3
4
5
6
<head>
    <style>
        body{background-color: Linen;}
        h1{color: maroon; margin-left:40px;}
    </style>
</head>
cs



인라인 스타일: 하나의 html 태그 요소에 스타일 적용. 1태그 1스타일.

유닠한 특정 태그에 고유스타일 적용. 


사용법

원하는 태그에 style속성 추가

1
<h1 style="color:blue; margin-left:30px;">hello world!</h1>
cs

 


다중 스타일 시트

 여러 스타일시트가 중첩되면? : 마지막으로 읽은 스타일 시트 값 적용.


Cascade: 사전식 의미: 폭포 : 즉 계단식순차를 의미.



반응형