웹3 css

심민기·2022년 4월 5일
0

기초공부

목록 보기
4/25

글자 크기 조정
font-size:60px;
글자 위치 가운데 정렬.
text-align: center;

링크에 대해서
사용자가 방문하지 않은 건 파란색.
방문한 건 회색
현재 방문하고 있는 링크는 빨간색으로 표시.

링크에다가 class="saw"를 추가 , 이건 Html이다
클래스를 줬으니 이제
.saw{
color:gray;
}
로다가 saw에 대해 회색을 부여.
.saw로 .을 붙임으로서 class가 saw인 태그를 가리키는 선택지가 된다.

만약 saw붙인 것들중에 하나만 따로 녹색으로 표시하고 싶다면?? 클래스를 추가하면 된다.
class="saw active"로 붙이고.

.active{
color:green;
}를 추가로 붙이면 된다.

중요: 이러한 속성은 나중에 정의한 거, 즉 순서상으로 뒤에 있는게 작동된다. 즉 먼저 회색이었다가 나중에 빨간색을 선언하면 최근의 명령인 빨간색이 실행되는 거!

이러한 순서를 무시하고 우선권을 주고 싶다면??

Id 선택자 사용(Id는 클래스를 이긴다!)

class="saw" id="active"로 추가하고

#active{
color:green;
}
선언하면 순서 상관없이 발동.

이와 같이 태그 선택자도 순서를 바꾸면 클래스에게 짐.

정리
  1. 같은 선택자,우선발동은 최근에 입력한 명령, 즉 순서상으로 가장 뒤의 명령.
  2. 태그(element)는 이름{},클래스는 .이름{},Id는 #이름{}으로 표현.
  3. 우선순위는 Id>class>tag순이다. 구체적인 것이 포괄적인 것보다 우선순위가 높다. id는 유일한 값
  4. 태그로 전체적인 디자인을 하고 예외적인 것을 Id로 집어냄.

profile
왕초보

0개의 댓글

관련 채용 정보