1. Inline CSS
<body style='background-color: blue;'>2. Internal CSS
inside head not body
<head>
<style>
body {
background-color=blue;
}
</style>
</head>3. External CSS
make css file and link to it
html
<head>
<meta charset="utf-8">
<title>Bacon Fansite</title>
<link rel="stylesheet" href="css/styles.css">
</head>css
/********** Tag Selectors ***********/
h1 {
color: red;
font-family: Arial, Helvetica, sans-serif;
}
img:hover {
background-color: gold;
}
/********** Class Selectors ***********/
.bacon {
background-color: red;
}
.broccoli {
background-color: green;
}
.circular {
border-radius: 50%;
}
/********** Id Selectors ***********/
/* Id selector overrides tag selector*/
/* Class selector overrides tag selector*/
/* Class vs Id selector
Id should be unique value, not allow to have duplicates.*/
#heading {
color: blue;
}4. Debug CSS in Chrome browser
Using chrome or else's debugging console.
5. CSS Syntax
selector {property : value}
developer.mozilla.org/ko/docs/Web/CSS/Reference
CSS 참고서 - CSS: Cascading Style Sheets | MDN
style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] 아래 선택자, 의사 클래스, 의사 요소 목
developer.mozilla.org
6. Selector (Tag Selector, Class Selector, ID Selector)
Id selector overrides tag selector
when to use what?
Class vs Id selector
Id should be unique value, not allow to have duplicates.
A element can have more than two classes.
But Id can't have multiple ids.
<img class="broccoli circular" src="broccoli_1f966.png" alt="broccoli-img">.broccoli {
background-color: green;
}
.circular {
border-radius: 50%;
}Pseudo Classes
img:hover {
background-color: gold;
}** Additional
Why alt tag is necessary?
As try to insert img in html, you can see alt tag in img element like this.
<img class="broccoli circular" src="broccoli_1f966.png" alt="broccoli-img">Most of time, it doesn't really seem to necessary.
But if you lost img file for some unexpected reason, alt tag will let you know the alternative information about the lost image.
upper alt tag is inside <h1>
lower alt tag is inisde <p>
HTML 이미지에 ALT 태그 속성값을 반드시 넣어줘야 하는 이유
이번 시간에는 사소하지만 정말 중요한것을 알아보겠습니다. 이건 네이버 웹마스터에 있는 링크구조에 대한 오류와도 관련있는 문제일 수 있습니다. 더 나아가자면, 자신의 검색엔진에 노출되
rgy0409.tistory.com
'Web Dev' 카테고리의 다른 글
| Installation Bootstrap 4 (0) | 2020.12.23 |
|---|---|
| Intermediate CSS - Confusing part: Box, Border (0) | 2020.12.23 |
| Intermediate CSS - PART II (0) | 2020.12.22 |
| Intermediate CSS - PART I (0) | 2020.12.22 |
| Introduction to HTML (0) | 2020.12.21 |
댓글