<style>
h1{
font-size:45px;
text-align: center;
}폰트 사이즈 설정 방법
https://developer.mozilla.org/ko/docs/Web/CSS/font-size
텍스트 정렬 방법
https://developer.mozilla.org/ko/docs/Web/CSS/text-align
링크 웹 기본 상태
웹 페이지에서 링크가 걸려있는 텍스트 색상에서 파랑색은 아직 선택 안한 링크, 보라색은 이미 방문한 링크가 기본 상태임.
웹 페이지의 모든 a태그(링크가 걸려있는 텍스트)를 검은색으로 바꿈
그중에서도 방문한 적이 있는 1.커비의 역사, 2. 커비의 능력은 하늘색으로 표시하고싶음
->그러면 각 텍스트 그니까 body의 1.커비의 역사 2. 커비의 능력의 html코드에 style 속성태그를 추가해서 하늘색으로 스타일 태그를 추가하면 되는데 그러면 중복이 일어남. 불편함! 굳이? -> 바꿀 1. 이랑 2.를 그룹으로 묶자! 그리고 그룹에 대해 폰트 컬러를 하늘색으로 바꾸면 됨. -> 어떻게?class라는 html의 속성을 이용하자.-> class의 이름은 이미 봤다는 의미의 saw라고 지정을 합시당. (보니까 지정하는건 자유인듯. 변수처럼 그냥 알아보기 쉽게 지정하면 됨)/여기서 class=""는 CSS가 아님! html임. 저기엔 css가 들어가는게 아님
<ol>
<li><a href="1.html" class="saw">커비의 역사</a></li>
<li><a href="2.html" class="saw">커비의 능력</a></li>
<li><a href="3.html">커비가 등장한 게임 목록</a></li>
</ol>이런 식으로!
만들었으면 head의 style태그에 saw를 넣어서 작동하면? ->적용이 안됨. 왜? saw를 쓰게되면 웹 페이지에 있는 모든 saw라는 이름의 태그를 선택하는 선택자이기때문임. 그럼 우리가 선택 하고싶은건 class값이 saw인 태그인데, 이때 약속된 특수한 기호가 바로 '.' 임.
saw앞에 .을 붙이는 순간 웹페이지에있는 모든 class가 saw인 태그를 가리키는 선택자가됨.
즉 우리가 그루핑, 그룹으로 하나로 묶고싶을때 class를 사용함.
지금 들어가있는 실습중인 웹페이지, 2.커비의 능력에서 지금 들어와있는 2.항목을 빨간색으로 바꾸고싶음. 어떻게함?
body 2.커비의 능력에 active를 추가하고 앞에 saw추가한것처럼 .active를 추가함
<style>
a {
color: pink;
text-decoration: none;
}
.saw {
color: blue;
}
.active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>이렇게!
여기서 알 수 있는건 class라는 속성의 값에 여러 값이 들어올 수 있고 이는 띄어쓰기로 구분하는것과 하나의 태그에는 여러개의 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
근데 이건 그닥 좋은 방법이 아님.
<li><a href="2.html" class="saw active">커비의 능력</a></li>여기있는 a태그는
.saw {
color: blue;
}
.active {
color: red;
}이렇게 두개의 클래스의 영향을 받음.
뭔가 비효율적임. 그리고 저깃는 a태그가 왜 빨간색이됨? 두개 영향받는데?
그건 바로 순서때문임. active가 saw보다 나중에 등장했기때문임.
순서를 바꿔서 쓰면 파랑색, 그니까 saw만 적용됨. 보다 가까이에있는 명령이 더 큰 영향력을 갖는다는 뜻이다. 권력이 같으면 가장 최근 명령을 따름!
->불편한데? 그래서 좀더 우선순위가 높은것을 사용할 필요가 있음.
그때 등장하는게 바로 id임.
<style>
a {
color: pink;
text-decoration: none;
}
#active {
color: red;
}
.saw {
color: blue;
}
h1 {
font-size: 45px;
text-align: center;
}
</style>
<li><a href="2.html" class="saw" id=" active">커비의 능력</a></li>코드를 이렇게 짜주면
짜쟌
내가 생각한대로 출력된다!
id=active를 지정하고 css style에서 active 앞에 '.'대신 '#'을 붙이면 된다!
여기서 알 수 있는것은 id선택자와 class선택자가 붙으면 id선택자가 이긴다!
id선택자가 더 우위임.
그리고 class선택자와 태그(a태그 등)선택자가 붙으면 class선택자가 이긴다.
태그 선택자가 제일 약함.
- id 선택자
- class 선택자
- 태그 선택자
이 3가지는 모두 같은 형태의 선택자다.
만약 다 같은 class 선택자라면 가장 마지막에 등장한 class 선택자가 우선순위가 높다.
왜 id선택자가 제일 강하고 그다음 class, 태그 선택자 순인가?
id 선택자의 값이 active인 태그가 웹페이지상에 딱 한번만 등장해야됨. id값은 단 한번만 등장해야됨. 이건 일상속에서 느낄 수 있듯이 id는 학번이나 내 주민번호같이 고유한것임. 중복되어선 안된다.
즉 유일무이한 값이다.
웹페이지에 있는 모든 a태그를 가르키는 선택자와 id값이 active를 가르키는 선택자중에서
뭐가 더 포괄적이고 구체적인가?
바로 a태그선택자가 id선택자보다 훌씬 포괄적이다. 좀더 구체적인것이 포괄적인것보다 우선순위를 높였다. ㄱ래야지만 이래야 태그선택자를 통해 전체적으로 전체적인 태그 디자인을 쭉 하고 그 중에 예외적인것들의 아이디 선ㅌ택자를 토통해 예외를 두는것이 디자인이나 코딩면에서 효율적이기때문.
아이디와 태그선택자 사이에 클래스라는 중간정도의우선순위가 있는 선택자가 있는것이다~
여기까지왔으면 바로 검색을 할 수 있음
css selector 구글링
여러 형태의 셀렉터가 나옴.
element=태그
p <모든 p태그를 선택한다.
#firstname < id가 퍼스트네임인 태그를 선택한다.
.class 등등~ 여러가지의 선택자들이 나온다!
