목차
CSS (Cascading Style Sheet)
웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트
CSS 부여 방법
인라인 스타일 (Inline style)
html 태그에 붙여서 사용하는 방식
<h1 style="color:red";>Heading 1</h1>
<h1>Heading 2</h1>내부 스타일 시트 (Internal style sheet)
head 에 집어 넣는 방식
<head>
<style>
h1 { color: blue; }
</style>
</head>외부 스타일 시트(External style sheet)
링크를 이용하는 방식
<link rel="stylesheet" href="style.css">/* style.css 파일 */
h1 { color: blue;}스타일 적용 우선 원칙
- Inline
- Internal 혹은 External
CSS 선택자 (selectors)
아이디 (id)
특정 요소를 선택. 특정 이름을 가지는 요소만 선택하여 적용함
<style>
#heading1 { color: read; }
</style>
<h1 id = "heading1">Heading 1</h1>
<h1 id = "heading2">Heading 2</h1> 태그명 (tag)
특정 태그를 선택. 특정 태그 요소만 선택하여 적용함
<style>
h1 { color: read; }
</style>
<h1>Heading 1</h1>
<p>Hello</p> .클래스 (class)
특정 집단의 여러 요소를 한번에 선택
동일한 클래스 이름을 가지는 요소들을 모두 선택하여 적용
<style>
.font-red { color: read; }
.bolded { font-weight: bold ;}
</style>
<h1 class = "font-red">Heading</h1>
<p class = "font-red">Hello</p>
<p class = "font-red bolded">Hello</p>그룹 선택자
여러 선택자를 쉼표로 구분하여 연결
코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줌
<style>
h1, p, .font-red { color: red; }
</style>
<h1>Heading</h1>
<p>Hello</p>
<h3 class="font-red">Small Heading</h3> 크기 및 색상
절대 길이 단위
화면을 그릴때는 px, 출력할땐 cm, mm, in 사용
상대 길이 단위
상대적인 기준으로 길이가 정해짐
- % : 상위 요소의 길이에 대한 비율
- em : 현재의 폰트 크기에 대한 비율 1em : 100%
- rem : 최상위 요소의 폰트 크기에 대한 비율
색상
color 이름, RGB, 16진수
<h1 style="color:blue">색상 이름으로 표현된 파란색</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상 녹색</h1>
<h1 style="color:#C0C0C0">16진수 은색</h1>CSS (Cascading Style Sheet)
웹 문서의 전반적인 스타일을 미리 저장해둔 스타일 시트
CSS 부여 방법
인라인 스타일 (Inline style)
html 태그에 붙여서 사용하는 방식
<h1 style="color:red";>Heading 1</h1>
<h1>Heading 2</h1>내부 스타일 시트 (Internal style sheet)
head 에 집어 넣는 방식
<head>
<style>
h1 { color: blue; }
</style>
</head>외부 스타일 시트(External style sheet)
링크를 이용하는 방식
<link rel="stylesheet" href="style.css">/* style.css 파일 */
h1 { color: blue;}스타일 적용 우선 원칙
- Inline
- Internal 혹은 External
CSS 선택자 (selectors)
아이디 (id)
특정 요소를 선택. 특정 이름을 가지는 요소만 선택하여 적용함
<style>
#heading1 { color: read; }
</style>
<h1 id = "heading1">Heading 1</h1>
<h1 id = "heading2">Heading 2</h1> 태그명 (tag)
특정 태그를 선택. 특정 태그 요소만 선택하여 적용함
<style>
h1 { color: read; }
</style>
<h1>Heading 1</h1>
<p>Hello</p> .클래스 (class)
특정 집단의 여러 요소를 한번에 선택
동일한 클래스 이름을 가지는 요소들을 모두 선택하여 적용
<style>
.font-red { color: read; }
.bolded { font-weight: bold ;}
</style>
<h1 class = "font-red">Heading</h1>
<p class = "font-red">Hello</p>
<p class = "font-red bolded">Hello</p>그룹 선택자
여러 선택자를 쉼표로 구분하여 연결
코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 줌
<style>
h1, p, .font-red { color: red; }
</style>
<h1>Heading</h1>
<p>Hello</p>
<h3 class="font-red">Small Heading</h3> 크기 및 색상
절대 길이 단위
화면을 그릴때는 px, 출력할땐 cm, mm, in 사용
상대 길이 단위
상대적인 기준으로 길이가 정해짐
- % : 상위 요소의 길이에 대한 비율
- em : 현재의 폰트 크기에 대한 비율 1em : 100%
- rem : 최상위 요소의 폰트 크기에 대한 비율
색상
color 이름, RGB, 16진수
<h1 style="color:blue">색상 이름으로 표현된 파란색</h1>
<h1 style="color:rgb(0,128,0)">RGB 색상 녹색</h1>
<h1 style="color:#C0C0C0">16진수 은색</h1>