Design/퍼블리싱 지식창고

가상 클래스와 결합 요소, 중요 요소

블루씰 2022. 12. 9. 14:00
반응형

html타입으로 페이지와 링크의 속성을 target으로 제어한다면, css타입으로 보여지는 속성에 가상으로 클래스를 부여해 좀 더 역동성을 부여하거나 오류가 나는 명령문을 가상클래스에서 잡아 정상적으로 표기하게 끔 해 줄 수 있습니다. 또한 div에 속하는 p 등을 부등호로 등으로 표기해 선택적 요소만을 특별히 관리해 주는 기능도 지시 할 수 있습니다.

 

 

앵커 클래스 

버튼을 비롯, 숨겨져 있는 글에 마우스를 올리면 주는 간단한 효과등의 마우스를 통해 표현 할 수 있는 클래스들입니다. ​ 

  • :link - 순수 그대로의 아무행동도 안했을 때, 링크의 액션 
  • :visited - 클릭을 할 경우 보여지는 액션을 바꾼다. 
  • :hover - 마우스를 오버 할 경우 보여지는 액션을 바꾼다. 
  • :active - 선택을 할 경우 보여지는 액션을 바꾼다.
/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

 

 

[예시1] - div에 마우스를 올릴 경우 초록색에서 파란색으로 바뀌는 코드

div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}

 

[예시2] - 숨긴 글에 마우스를 갖다댈 경우 나오게 만드는 간단한 코드

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

 

 

수치 클래스 

:first-child 

정해진 명령문 중에 첫번째로 해당되는 부분에 따로 지시한 행동을 부여합니다. 

 

[예시] - p로 작성된 글중 첫번째 i태그 글을 파란색으로 표기합니다.

p i:first-child {
  color: blue;
}

 

:last-child 

정해진 명령문 중에 마지막에 해당되는 부분에 따로 지시한 행동을 부여합니다. ​ 

 

:nth-child(n) 

n번째로 정해진 부분에 따로 지시한 행동을 부여합니다. (정수로 표기하거나, odd/even , 3n+0 과 같은 수식을 사용할 수 있습니다) 

반응형

 

[예시1] - p로 시작되는 2번째 줄 마다 배경을 빨간색으로 표현합니다.

p:nth-child(2) {
  background: red;
}

 

 

[예시2] - 홀수와 짝수 키워드를 부여해 특별한 색을 입힙니다.

/* 홀수번째 p로 되어있는 배경을 모두 빨갛게 보여줍니다 */
p:nth-child(odd) {
  background: red;
}
/* 짝수번째 p로 되어있는 배경을 모두 파랗게 보여줍니다 */
p:nth-child(even) {
  background: blue;
}

 

:nth-last-child(n) 

마지막 순번으로 차례대로 계산해 n번째로 정해진 부분에 따로 지시한 행동을 부여합니다. (정수로 표기하거나, odd/even , 3n+0 과 같은 수식을 사용할 수 있습니다)

 

 

선택자 와 구조클래스

  • ::before 명령문이 실행 되기 전에 내용을 삽입 할 수 있습니다. ​ 
  • ::after 명령문이 실행 된 후에 내용을 삽입 할 수 있습니다.  float등으로 설정한 컨테이너에 after로 가상클래스를 만들고 clear를 부여해 해제하는데도 쓰일 수 있는 다방면 클래스입니다. ​ 
  • ::selection 사용자가 선택한 내용에 변화를 줄 수 있습니다. 단 color, background, cursor, and outline로 제한됩니다. ​ 

※ 제일 많이 쓰는 선택자를 간단하게 나열한 것으로 많은 클래스들을  확인 하고 싶으시면 이 곳을 통해 확인 해 주세요

 

 

 

연결자 

css에서는 두가지 이상의 클래스들을 아래와 같은 부호로 연결해 따로 지시를 할 수 있습니다. 

  • 하위 선택기 (공간) 
  • 자식 선택기 (>) 
  • 인접 선택기 (+) 
  • 일반 형제 선택기 (~)

 

▼ 하위 선택기 - div 와 p 사이에 공간을 두어 div로 싸여진 하위 p에는 전부 노란바탕을 부여합니다. 

( span등의 요소등에 상관 받지 않습니다.)

div p {
  background-color: yellow;
}

 

 

▼ 자식 선택기  - div와 p 사이에 부등호 > 를 부여해 직계의 p에만 영향을 주어 노란바탕을 부여합니다. ( span등의 하위 요소에 상관을 받습니다.)

div > p {
  background-color: yellow;
}

 

 

▼ 인접 형제 선택기 - div와 p 사이에 부등호 + 를 부여해 div가 끝나고 등장하는 인접한 p에만 영향을 주어 노란바탕을 부여합니다.

div + p {
  background-color: yellow;
}

 

 

▼ 일반 형제 선택기 - div가 끝나는 시점과 p가 끝나는 시점의 모든 명령문에 영향을 주어 노란바탕을 부여합니다.

div ~ p {
  background-color: yellow;
}

 

 

중요도 설정 

수많은 선택자와 css스타일로 인해 꼬여버린 상태에서 사용할 수 있는 방법으로 #id로 진행하는 진행은 .class로 진행하는 클래스 네임보다 먼저 적용되는 것이 원칙입니다만, !important;​를 뒤에 붙이게 되면, 어느 선택자보다 제일 최상위 적용 모델로 먼저 처리를 진행하는 명령문입니다. ​ 

!important; 는 모든 명령문의 속성값 세미콜론(;)앞에 붙여야 됩니다. 

아래 예시를 참고 해 주세요. 사잇값이라 생각하시면 됩니다.

#name .mouse {
    color: red; /*우선적용*/
}
.mouse {
    color: yellow;
}
#name .mouse {
    color: red; 
}
.mouse {
    color: yellow !important; /*우선적용. 명령문의 속성값에는 세미콜론을 붙이지 않습니다.*/
}

 

본문 및 출처: https://www.w3schools.com

 

반응형
저작자표시 비영리 변경금지