[1] 기본선택자
: 스타일을 줄 대상을 명시적으로 표현
<h1 style = "color:blue;"> </h1>
------------------
<style> <!-- h1전체를 한번에 수정 가능-->
h1 <!-- 해당이 되는 특정대상 = 선택자 -->
{
color:blue;
}
</style>
✔ 선택자 종류
셀렉터
태그명
아이디 - element 식별. 한 문서 내에서 동일 아이디 두개는 불가.
클래스 - 그룹 식별
✔ 같은 태그지만 다른 스타일이 적용되어야할 때 - class로 그룹생성
<h1 class="g1">목차</h1>
<li><a href="" class="g1">학습가이드</a></li>
----
<style>
.g1{ <!--그룹명을 인식할때는 .을 찍어준다-->
color:red;
font-weight:bold;
}
</style>✔ 특정 값에만 스타일 적용 - 아이디 부여
<style>
#name1{ <!-- 아이디는 #붙이기 -->
color:red;
font-weight:bold;
}
</style>
<section>
<h1 class="g1" id="name1">목차</h1>
<nav>
<h1 style="color:blue;font-size:10px;">메인메뉴</h1>
<ul>
<li><a href="" class="g1" id="name2">학습가이드</a></li>
<li><a href="">강좌선택</a></li>
<li><a href="">AnswerIs</a></li>
</ul>
</nav>
[2] 콤비네이션 연산자
✔ 수직방향 연산자
Descendant selectors A B : 앞에 있는 태그 A 범위 전체 중에서 B태그를 찾아라
Child selector A > B : A의 자손들 중에 B를 찾아라
✔ 수평방향 연산자 (sibling 연산자)
Adjacent sibling selector A + B : A옆에 바로 이웃한 B를 찾아라
General sliding selector A~B : A옆에 이웃한 것들 중에서 B를 찾아라
<style>
#main-menu>ul>li.first{ <!-- 자손을 타고 타고 들어가 li 까지 내려감-->
color:green;
font-weight: bold;
}
</style>
<nav id="main-menu">
<h1>메인메뉴</h1>
<ul>
<li class="first"><a href="">학습가이드</a></li>
<li><a href="" class="first">강좌선택</a></li>
<li><a href="">AnswerIs</a></li>
</ul>
</nav>
[3] 속성선택자
<style>
#main-menu a[href="a.html"]{
<-- 그룹 main-menu중 a태그를 사용하는것 중에서 하이퍼링크가a.html인것. 하이퍼링크 속성 사용-->
color:green;
font-weight: bold;
}
</style>
[4] 선택자 우선순위
작동1) #h2{color: green;} 아이디명 (우선순위 1)
작동2) h1 {color: orange;} 태그명 (우선순위 3)
작동3) .h1{color:red;} 클래스명(우선순위 2)// 적용범위가 넓은 셀렉터일수록 우선순위가 낮다
<h1 id="h2"/> : #h2 따라서 green
<h1 class="h1"/> 태그명 따라서 orange > 클래스따라 red로 변경
[5] 스타일 링크하기 <link />
스타일 css파일을 따로 관리.
<head /> 안에 작성해야 한다
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
[6] 스타일 리셋, 평준화, 현대화
reset.css - html이 가진 기본 스타일 자체를 리셋
normalize.css - 기본 스타일을 승계받아서 평준화 적용
[7] 레이아웃 블록
컨텐츠 블록(가구역할)마다 스타일 입히기 ▶ 컨텐츠 블록이 들어갈 레이아웃(방 역할)을 꾸미기
[8] reset파일 생성과 개발자도구
