본 내용은 '생활코딩 WEB2-CSS 01~15'까지의 내용을 통해 배운 것을 정리한 것이다.
02강~03강 CSS 등장 이전의 상황과 이후
CSS가 등장하기 이전
HTML은 디자인에 관련해서 새로운 태그를 추가하였지만
이는 한계가 있었다.
See the Pen MEROqR by egoing (@egoing) on CodePen.
지금은 사용하지 않는 <font>태그 이런 디자인만을 위한 태그는
1. 정보로서의 html의 가치를 현격하게 떨어뜨렸다.
2. 또한, 다수의 수정을 할때 너무나도 불편했다.
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>
그래서 등장한게 새로운 문법이 바로
CSS이다.
See the Pen eGoydN by egoing (@egoing) on CodePen.
CSS는 <style>태그 안쪽에 작성해야한다.
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
a {
color:black; /*a태그에 있는 폰트 컬러를 모두 검은색으로 바꿔라!*/
}
</style>
</head>이렇게 함으로써 a태그가 1억개라도
style태그 안에 있는 a태그를 고치면 손쉽게 모든 a태그를 수정할 수 있게 되었다!
04강~05강 CSS의 기본 문법
css태그를 사용하기 위해서는 <style>태그 안쪽에 작성해야하는데
그것말고도 속성을 이용하는 방법이 있다.
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="2.html" style="color:red;text-decoration:underline">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>4열에 있는 style="" HTML 속성을 사용하여 CSS효과를 줄 수 있다.
<style>
a {
color:black; /*a태그에 있는 폰트 컬러를 모두 검은색으로 바꿔라!*/
}
</style>기존 사용하던 <style>태그는 color:black만 써서는 누구한테 지정하는지 알 수 없지 때문에
a{ } 와 같은 추가 코드가 필요한 것이다.
즉 웹페이지 안에 CSS 삽입하는 2가지 방법은
1. Style 태그를 쓴다.
2. Style 속성을 쓴다. #선택자 필요없음!
Style태그 안의 구성을 좀 더 알아보자.
a는 selector(선택자) #이 웹페이지의 모든 a태그를 선택한다라는 뜻에서
color:red;는 Declaration(선언) or 효과
color는 Property(속성)
red는 Value(값) #property의 값이라는 뜻에서
추가적으로
세미콜론(;)은 구분자라고 부른다.
<style>
a {
color:black text-decoration: none <!--구분자가 없어서 선언이 구분되지 않는다.-->
}
</style>폰트색과 밑줄을 없애는 선언을 구분자 없이 사용하면 '어디서부터 어디가 폰트색 선언이고 밀줄을 없애는 선언인지
구분이 가지않아' 코드가 작동하지 않는다.
<style>
a {
color:black; text-decoration: none;
}
</style>구분자를 넣자 코드가 정상적으로 작동한다.
07강 CSS 선택자의 기본
선택자 우선순위는
id > class > 태그이다.
(구체적 <-포괄적)
id값은 한 번만 등장해야 한다. (학번, 주민등록번호를 생각하자. 즉, 유일무이한 값)
ex)id값이 active이 한 번 등장하면 다른 id 값이 active가 나와서는 안된다.
! 만약 전부 다 똑같은 형태의 선택자라면?
예를 들어, 전부 다 클래스 선택자라고 한다면
가장 마지막에 등장하는 선택자가 우선순위가 높다.
# 선택자에 대해서 검색할 때
'element는 태그와 같은 뜻'이다.
'CSS' 카테고리의 다른 글
| position:sticky 완전정리 (0) | 2021.06.20 |
|---|