데이터 CSS

자 지루한 데이터 크롤링 이론에 마지막 시간 후 분명 3개의 포스팅인데 왜이렇게 길게 느껴질까요 ㅠㅠ

 

CSS

• 웹 페이지를 디자인하기위해 사용하는 언어
• CSS 선택자라는 특성을 가지고 있음
  • 기본 선택자
  • 복합 선택자
  • 가상 클래스
  • 가상 요소
  • 속성

기본 선택자

• 별도의 테크닉 없이, 순수하게 무엇인가를 호출 할 때 사용
  • 전체 선택자
  • 태그 선택자
  • Class 선택자
  • ID 선택자

전체 선택자 예시

다음과 같이 별에 들어가는 태그에 따라 style을 정할수 있는 것이 전체, 태그 선택자 입니다.

클래스는 .Class명 으로 설정 가능합니다. 단 태그가 없으면 같은 클래스 값의 모든 데이터에 적용됩니다.

ID는 #ID명 으로 설정가능 합니다.

 

복합 선택자

• 특수한 요소를 호출하고 싶을 때, 기본 선택지만으로는 선택이 불가능한 경우에 사용

기본 적인 형태는 기본 선택자와 같은 형태를 띄지만 복합 선택자는 더 정확한 데이터를 얻는데 꼭 필요한 선택자입니다.

일치 선택자:  태그명.Class명, 태그명#ID명

자식 선택자: 부모 태그에서 자식 태그를 선택할 때 사용, (예, , ul > li > .class )

후손 선택자: 부모 보다 상위 태그에서 부모 자식 태그를 선택할 때 사용(예, div  li)

인접 형제 선택자: 선택자 다음의 가장 가까운 형제 요소를 선택(예,  .strawberry + li =오렌지)

일반 형제 선택자: 선택자 다음의 형제 모두를 선택

 

가상 클래스 선택자

• 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시
• 각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용
• 특정 요소를 부정 할 때 사용

우리가 이제 특정 사이트에 들어가기 전에 커서를 올리면 사이트 명이 특정 색깔로 변화는 것을 보셨을 겁니다. 그것을 표현하는 CSS선택자가 이 가상 클래스 선택자입니다.

사용자의 행동에 따라 변화: 선택자 요소에 따라 반응

(예,  a:hover{}, a:activate{}, input:focus{}  )

a:hover{} , a:activate{}, input:focus

 

요소의 상황

 

부정 선택

 

가상 요소 선택자

• 선택 된 요소의 앞, 뒤에 별도의 Content 를 삽입하는 선택자
• 실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용!
• 예를 들어 쇼핑몰 페이지에 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입하는 것이 아니라 가상 요소 선택자를 활용하여 처리하면 편리함! 
• 반드시 content 라는 속성을 사용
• 빈 값(" ") 이라도 넣어 주어야 적용 됨

AFTER

BEFORE

 

속성 선택자

• 지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자

특정 속성만 지정

속성과 속성의 값을 지정

오늘도 같이 공부하시느라 수고 많으셨습니다!!!!!!