참고 강의 : 유투브 생활코딩 - CSS 수업 (WEB2-CSS 아님)
들어가는 말
CSS를 사용하는 데에는 HTML이 기본이 되야한다
HTML의 본질 = 정보
CSS = HTML + 디자인 -> 정보로써 기능 X, 시각적 디자인 기능
CSS tag 예시
<font color="red>CSS를 사용하는 데에는 HTML이 기본이 되야한다</font> <style></style>
HTML과 CSS는 별개 ("HTML = 정보 +디자인" 에서 -디자인)
위에는 CSS, 아래는 HTML / 정보와 디자인의 분리
CSS가 별개로 존재함으로써 HTML 숙련자에게는 더 큰 도전과제가 됨! 그러나 이럼에도 별개로 존재하는 이유는
- HTML이 정보에 전념하도록
- CSS 언어는 디자인에 좀더 효율적인 언어이기 때문
왼쪽은 과거의 font tag 방식 사용 / 오른쪽은 CSS tag 사용
만약 모든 color를 red에서 blue로 바꾼다면..
왼쪽은 모든 red를 blue로 변경 / 오른쪽은 CSS영역의 red 하나를 blue로 변경!
CSS
HTML과 CSS가 만나는 법
in-line 방법 (red) or CSS 삽입 (blue)
전자 : 특정 tag에 style이라는 속성의 값으로 CSS 주기 = h1을 대상으로 디자인 됨
후자 : style이라는 tag를 작성해 web browser에게 CSS나오는 것을 알린 후 CSS를 코딩.
코드 살펴보기
<html>
<head>
<style>
h2{color:blue}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello world</h2>
</body>
</html>개별 설명
-
<h1 style="color:red">Hello World</h1>h1 style=" 까지 HTML , 이후 color:red는 CSS 부분.
이 이후 "는 다시 HTML -
<style> h2{color:blue} </style>처음 style은 이 이후에 CSS가 온다는 것을 알려주는 HTML의 문법으로 알려주는 것
이후 h2{color:blue}는 CSS.
선택자
CSS의 주어 같은 역활
선언
출처 : www.c4learn.com
영역별 정의
li{
color : red;
text-decoration : underline;
}
선택자
속성
속성 값
속성+속성 값 => 선언
속성과 속성 값/선언과 선언을 구분해주는 구분자
종류
- tag 선택자 (위에 기록한 것이 tag 선택자에 해당된다.)
- id 선택자
- class 선택자
2. id 선택자
id의 값이 select인 tag 에 대해서 속성 주기
# 붙이기! 그래야 모든 select가 아닌 id의 값이 select인 tag에 대해 적용됨.
(모든 select로 설정되면 적용이 안됨!)
코드 살펴보기
<html>
<head>
<style>
li{
color:red;
text-decoration:underline
}
#select{
font-size:50px;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li id="select">CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
이 중에서
<li id="select">CSS</li>id=" = html의 문법
select = html의 속성 값 !!
id라는 속성을 사용하고, 속성값을 주면 그 속성값에 해당하는 tag를 선택할때 그 tag의 이름 앞에 #을 붙여야 한다.
3. class 선택자
예시 (잘못된 상황 / 약속 위반!)
id vs class
class = 어떤 대상을 관리 하기 쉽도록 grouping하는 것 (교실)
id = 개인 하나하나를 관리 (교실 안 학생 한명 한명)
- class라는 속성으로 groupig을 한다면 이름을 같게 설정해야 한다. (예시에서 deactive로 같게 설정한 것 참고)
- class로 묶이면 서로 다른 tag 여도 적용시킬 수 있다. (예시에서 h1과 ul tag에 class가 모두 적용된 것 참고)
- id는 단 한번, class 선택자는 여러번 grouping할 수 있다.
예시
코드 살펴보기
<!DOCTYPE html>
<html>
<head>
<style>
li{
color:red;
text-decoration:underline
}
#select{
font-size:50px;
}
.deactive{
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 class="deactive">수업의 순서</h1>
<ul>
<li class="deactive">HTML</li>
<li id="select">CSS</li>
<li class="deactive">JavaScript</li>
</ul>
</body>
</html>
- li = tag 선택자
- #select = id 선택자
- .deactive = class 선택자
복합적 조합. 부모 자식 선택자
1. 지정해서 표 생성하기
1-1) ol 아래 li에 표 형식 지정
ol li{
border:1px solid red;
}
1-2) ol의 직계자손인 li에 표 형식 지정
지정 안됨 => ol아래 li인것이 두개이기 때문
1-3) id 선택자로 지정해주기
2. ul과 ol의 백그라운드에 색 지정
2-1) ul과 ol각각 지정
2-2) ,로 함께 지정
+) 추가 정보
살펴 볼 코드
#lecture>li{
border:1px solid red;
color:blue;
}위 출력물 에서 border는 lecture의 직계자손 li에만 적용이 되었지만, color의 경우 모든 lecture 바로아래 li에게 적용된건 맞지만 li밑에 있는 모든 tag의 색이 바뀌었다. (blue)
=> border는 현재 공부하는 단계에서 적합한 property 이고 color 의 경우 나중에 배우게 될 상속과 결합해야 이해 가능!!
