728x90
반응형
** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=ZkqK4a7i3SI&t=165s
- CSS : 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
1. CSS문법
| 문법 | 예시 |
| 선택자{ 속성명: 속성값; } | h1{ color: red; } |
2. 스타일시트의 종류
| 종류 | 설명 |
| 내부 스타일시트 | <head>의 자손인 <style>태그 내부에 CSS언어를 직접 작성하는 방식 |
| 외부 스타일시트 | <head>의 자손인 <link />태그에 CSS 문서를 연결하는 방식 <link rel="stylesheet" href="경로“ /> |
| 인라인 스타일시트 | 태그 자체의 속성으로 CSS언어 작성 ex) <h1 style="color:red;"> |
3. 내부스타일시트
- html내부에 CSS언어를 작성
1) 코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<style type="text/css">
h1{ color: red; } /* html 내부에 작성 */
</style>
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 코드 완성뷰
4. 외부스타일시트
- CSS문서를 따로 만들어서 HTML문서에 연결해서 사용하는 방식
- 보통 프로젝트에서 대부분 이방법을 사용한다.
1) HTML코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
<link rel="stylesheet" href="style.css"> <!--외부CSS문서연결-->
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
2) 외부 CSS에 스타일언어 작성
3) 코드 완성뷰
5. 인라인스타일시트
- HTML태그 자체에 style속성으로 선택자 없이 CSS언어를 작성
- 보통 정적으로 직접 작성하지는 않고, JS나 제이쿼리를 사용하여 동적으로 스타일을 적용시
개발자모드에서 확인할 수 있다.
1) 코드 뷰
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 작성법</title>
</head>
<body>
<h1 style="color: red;">제목태그</h1>
<p>문단태그</p>
<ul>
<li>리스트태그</li>
<li>리스트태그</li>
</ul>
<ol>
<li>리스트태그</li>
<li>리스트태그</li>
</ol>
</body>
</html>
- 보면 선택자가 없는것이 확인된다.
- 태그 자체에 써져 있으므로 선택자가 필요없다.
2) 코드 완성뷰
728x90
반응형
'웹언어 > CSS3' 카테고리의 다른 글
| [CSS3강좌] 6강 리스트(ol, ul)관련 속성 (0) | 2020.04.25 |
|---|---|
| [CSS3강좌] 5강 FONT(글자관련속성) (0) | 2020.04.25 |
| [CSS3강좌] 4강 TEXT(글자관련속성) (0) | 2020.04.25 |
| [CSS3강좌] 3강 CSS색상넣기(컬러값처리) (0) | 2020.04.25 |
| [CSS3강좌] 2강 CSS기본선택자 (0) | 2020.04.23 |
