CSS Tutorial For Beginners #1-5
미리 알아야 될것
HTML 조금
53개의 동영상 강의에서 다룰것
CSS는 무엇인지?
CSS Syntax
Elemnt, Class, ID 선택자
Formatting Text
Box Model
CSS 란?
Cascading Style Sheets 의 약어입니다.
CSS는 프리젠테이션이라고 합니다. (표현, 연출)
계속 변하고 있음. 현재 CSS3
디폴트 브라우저 스타일
모든 브라우저는 각각의 기본 스타일을 가지고 있음. (마진, 패딩, 폰트 사이즈, 링크등)
CSS 구문
CSS는 규칙의 모음입니다.
각 규칙은 HTML 문서의 특정 태그 또는 요소를 대상으로합니다.
페이지의 모든 P 태그를 대상으로 하는 규칙
#id를 가진 모든 태그를 대상으로 하는 규칙
#nav안에 있는 모든 A 태그를 대상으로 하는 규칙
규칙은 2가지 파트로 되어 있습니다. 참조: https://sir.kr/pb_tip/3346
Selector(선택자) 와 Declaration(선언)
#page-header {font-size: 10px;}
Selectors (선택자)
Selectors는 태그네임, ID, 클래스 그리고 많은 다른 것들을 대상으로 합니다.
#header p {선언}
.comment div {선언}
li {선언}
Declaration (선언)
Declaration은 프러퍼티(font-size)와 밸류(값 10px)을 포합합니다.
#selector {font-size: 10px;}
#selector {
font-size: 10px;
color: red;
}
codepen 등을 이용해서 테스트해보세요..
index.html 에는
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>CSS For Beginners</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/syntax.css">
</head>
<body>
<div id="header">
<h1>Selectors</h1>
<h2>In CSS</h2>
<p>Welcome to the website!</p>
</div>
<p>Hello there ninjas!</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
syntax.css
#header{
position: absolute;
top: 0;
left: 0;
}
#header h1{
font-size: 32px;
}
p{
font-size: 12px;
}
Inline 과 Embedded Styling
CSS를 적용하는 3가지 방법
1. Inline Styling
<div id="header" style="position: absolute; top: 0; left: 0; width: 100%;">
2. Embedded style sheets (파일내에, 다른 파일에 적용하기 힘듬.)
<style>
p{
font-size; 10px;
}
</style>
3. External style sheets
게시판 목록
CSS
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 28 | 6년 전 | 890 | ||
| 27 | 6년 전 | 918 | ||
| 26 | 6년 전 | 944 | ||
| 25 | 6년 전 | 836 | ||
| 24 | 6년 전 | 1034 | ||
| 23 | 6년 전 | 954 | ||
| 22 | 6년 전 | 611 | ||
| 21 | 6년 전 | 892 | ||
| 20 | 6년 전 | 913 | ||
| 19 | 6년 전 | 835 | ||
| 18 | 6년 전 | 686 | ||
| 17 | 6년 전 | 677 | ||
| 16 | 6년 전 | 953 | ||
| 15 | 6년 전 | 902 | ||
| 14 | 6년 전 | 1020 | ||
| 13 | 6년 전 | 751 | ||
| 12 | 6년 전 | 682 | ||
| 11 | 6년 전 | 733 | ||
| 10 | 6년 전 | 944 | ||
| 9 | 6년 전 | 984 | ||
| 8 | 6년 전 | 720 | ||
| 7 | 6년 전 | 835 | ||
| 6 |
 nanati |
6년 전 | 3745 | |
| 5 | 6년 전 | 1067 | ||
| 4 | 6년 전 | 770 | ||
| 3 | 6년 전 | 1005 | ||
| 2 | 6년 전 | 1164 | ||
| 1 | 6년 전 | 974 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기