CSS Tutorial For Beginners #1-5 정보
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
0
댓글 0개