CSS
- CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어이다.
- HTML 문서의 요소들이 브라우저 화면상에 어떻게 배치되고 디자인될지를 결정한다.
- 왼쪽은 순수 HTML 문서로, 문서의 구조만 짜여져 있다.
- 오른쪽은 CSS가 추가된 HTML 문서로, 요소들이 구조에 맞추어 배치되고, 디자인 되어있다.
Cascading
- HTML 요소들은 중첩이 되어있는데, 상위 요소에 대해 적용한 스타일이 하위 요소에도 적용되는 것을 Cascading이라 한다.
- 스타일에 따라 Cascading이 되는 스타일이 있고, 되지 않는 스타일이 있다.
CSS 문법
- CSS를 적용하기 위해서는
- 스타일을 적용할 요소를 선택한다.
- 선택한 요소에 대해 어떤 스타일을 지정할지 key : value의 형태로 작성한다.
- key는 어떤 스타일인지, value는 얼마나, 어떻게 적용할건지를 의미한다.
- 선언은{ }로 감싸서 사용하며, 각 선언들은 ;로 마친다.
선택자
- 선택자(selector)는 스타일을 적용하고자 하는 HTML 요소를 지정하는 패턴이다.
전체 선택자
- 모든 요소을 선택한다.
- 폰트 등 전체에 대해 적용할 필요가 있을 때 사용한다.
- *은 선택자 이외의 분야에서도 모든, 여러 개를 의미하는 경우가 많다.
<h1>Hello World</h1>
<h2>HTML</h2>
<span>CSS</span>* {
color:red;
}
요소 선택자
- 특정 태그 이름을 가진 모든 요소를 선택한다.
<h1>Hello World</h1>h1 {
color:blue;
}
클래스 선택자
- class라는 그룹을 지정하여 사용한다.
- .을 이용하여 특정 class가 적용된 요소를 선택한다.
- css를 활용할 때 가장 많이 사용하는 방식이다.
<span class="my_class">Happy</span>
<span>HTML</span>
<span class="my_class">CSS</span>.my_class {
color: green;
}
아이디 선택자
- 요소에 아이디를 지정하여 사용한다.
- #을 이용하여 특정 id의 요소를 선택한다.
- id는 추후에 JavaScript를 활용할 때 주로 활용한다.
<span id="my_id">Happy</span>
<span>HTML</span>
<span>CSS</span>#my_id {
color: orange;
}
복합 선택자
- 선택자들을 조합하여 구체적인 요소를 선택할 수 있다.
- 자식 선택자
- > 를 활용하여 좌측 요소 바로 아래의 우측 요소를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div>
<h1>Hello World</h1>
</div>
<div>
<span>
<h1>Hello World</h1>
</span>
</div>
</body>
</html>
선언
- 스타일을 key : value의 형태로 선언한다.
- key에 해당하는 property는 어떤 스타일을 변경할지 결정한다.
- value는 스타일에 대한 구체적인 값을 지정한다.
Style 적용
요소 내에 작성
- 요소 내에 직접 작성한다.
<h1 style="color: red;">Hello world!</h1>
내부 참조
- head 태그 내에 style태그를 생성하여 작성한다.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
외부참조
- css파일을 생성하여 HTML에서 해당 파일을 불러와 사용한다.
- index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
- style.css
h1 {
color: red;
}
어떤 방식을 활용해야 하나?
" 기본적으로 외부참조방식을 주로 사용한다. "
CSS 우선순위
- 한 요소에 여러 CSS 선택자가 적용되는 경우 좁은 범위의 선택자가 우선 선택된다.
- 요소 내 작성 → id → class → 요소 선택자
- !important
- 선택자와 관계 없이 우선적으로 css을 적용하고자 할 때 사용한다.
h1 {
color: red !important;
}
CSS
- CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어이다.
- HTML 문서의 요소들이 브라우저 화면상에 어떻게 배치되고 디자인될지를 결정한다.
- 왼쪽은 순수 HTML 문서로, 문서의 구조만 짜여져 있다.
- 오른쪽은 CSS가 추가된 HTML 문서로, 요소들이 구조에 맞추어 배치되고, 디자인 되어있다.
Cascading
- HTML 요소들은 중첩이 되어있는데, 상위 요소에 대해 적용한 스타일이 하위 요소에도 적용되는 것을 Cascading이라 한다.
- 스타일에 따라 Cascading이 되는 스타일이 있고, 되지 않는 스타일이 있다.
CSS 문법
- CSS를 적용하기 위해서는
- 스타일을 적용할 요소를 선택한다.
- 선택한 요소에 대해 어떤 스타일을 지정할지 key : value의 형태로 작성한다.
- key는 어떤 스타일인지, value는 얼마나, 어떻게 적용할건지를 의미한다.
- 선언은{ }로 감싸서 사용하며, 각 선언들은 ;로 마친다.
선택자
- 선택자(selector)는 스타일을 적용하고자 하는 HTML 요소를 지정하는 패턴이다.
전체 선택자
- 모든 요소을 선택한다.
- 폰트 등 전체에 대해 적용할 필요가 있을 때 사용한다.
- *은 선택자 이외의 분야에서도 모든, 여러 개를 의미하는 경우가 많다.
<h1>Hello World</h1>
<h2>HTML</h2>
<span>CSS</span>* {
color:red;
}
요소 선택자
- 특정 태그 이름을 가진 모든 요소를 선택한다.
<h1>Hello World</h1>h1 {
color:blue;
}
클래스 선택자
- class라는 그룹을 지정하여 사용한다.
- .을 이용하여 특정 class가 적용된 요소를 선택한다.
- css를 활용할 때 가장 많이 사용하는 방식이다.
<span class="my_class">Happy</span>
<span>HTML</span>
<span class="my_class">CSS</span>.my_class {
color: green;
}
아이디 선택자
- 요소에 아이디를 지정하여 사용한다.
- #을 이용하여 특정 id의 요소를 선택한다.
- id는 추후에 JavaScript를 활용할 때 주로 활용한다.
<span id="my_id">Happy</span>
<span>HTML</span>
<span>CSS</span>#my_id {
color: orange;
}
복합 선택자
- 선택자들을 조합하여 구체적인 요소를 선택할 수 있다.
- 자식 선택자
- > 를 활용하여 좌측 요소 바로 아래의 우측 요소를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div>
<h1>Hello World</h1>
</div>
<div>
<span>
<h1>Hello World</h1>
</span>
</div>
</body>
</html>
선언
- 스타일을 key : value의 형태로 선언한다.
- key에 해당하는 property는 어떤 스타일을 변경할지 결정한다.
- value는 스타일에 대한 구체적인 값을 지정한다.
Style 적용
요소 내에 작성
- 요소 내에 직접 작성한다.
<h1 style="color: red;">Hello world!</h1>
내부 참조
- head 태그 내에 style태그를 생성하여 작성한다.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
외부참조
- css파일을 생성하여 HTML에서 해당 파일을 불러와 사용한다.
- index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
- style.css
h1 {
color: red;
}
어떤 방식을 활용해야 하나?
" 기본적으로 외부참조방식을 주로 사용한다. "
CSS 우선순위
- 한 요소에 여러 CSS 선택자가 적용되는 경우 좁은 범위의 선택자가 우선 선택된다.
- 요소 내 작성 → id → class → 요소 선택자
- !important
- 선택자와 관계 없이 우선적으로 css을 적용하고자 할 때 사용한다.
h1 {
color: red !important;
}
