CSS 셀렉터 정리

박진은·2022년 5월 17일

CSS 셀렉터 정리

첫 번째로 태그(TAG) 셀렉터는 태그를 직접 지정해서 같은 이름의 모든 태그에 스타일을 일괄 적용합니다. 아래는 li 태그 안의 글씨 색을 빨갛게 변경하는 코드입니다. style 태그 안에 CSS 언어를 작성하는데, CSS의 상세한 문법보다는 2번 라인의 태그 이름 {스타일} 코드만 집중하도록 합시다. 스타일을 변경할 태그 이름을 쓰고 중괄호 안에 적용할 스타일을 지정했습니다. 태그 이름으로 지정할 스타일을 선택하기 때문에 태그 셀렉터라고 불립니다.

1: <style type="text/css">
2:     li {color:red }
3: </style>4: <ol>
5:     <li> A </li>
6:     <li> B </li>
7: </ol>

그림 4-11은 태그 셀렉터로 글씨색을 변경한 결과입니다. ordered list의 li 태그로 묶인 A와 B의 글씨 색이 빨갛게 변한 것을 확인할 수 있습니다.

두 번째로 배워볼 CSS 셀럭터는 아이디(ID) 셀렉터입니다. 아이디 셀렉터는 ID 값을 지정한 후 해당 ID 값을 사용해서 특정 태그에 스타일을 적용할 수 있습니다. ID 값은 문서 내에서 유일하기 때문에 하나의 태그에만 스타일을 적용하고자 할 때 사용합니다. 문법은 ‘#아이디 {스타일}’ 입니다. ‘#’ 기호를 사용하는 것에 주의하세요.

다음 HTML 코드에서 라인 5의 <li> 태그에는 there이라는 ID 속성이 부여돼 있습니다.

1: <style type="text/css">
2:     #there {color:red }
3: </style>4: <ol>
5:     <li id=there> A </li>
6:     <li> B </li>
7: </ol>

그림 4-12는 ID 셀렉터가 적용된 ordered list입니다. ‘there’라는 ID 값을 갖는 li 태그만 글씨 색이 변경된 것을 확인할 수 있습니다.

세 번째로 배워볼 CSS 셀럭터는 클래스(Class) 셀렉터입니다. TAG 셀렉터는 특정 태그에 모두 스타일을 적용할 때 사용하고 ID 셀렉터는 단 하나의 태그에 스타일을 적용하고자 할 때 사용합니다. 클래스 셀렉터는 두 가지의 중간 형태로, 클래스 속성이 부여된 모든 태그에 대해 스타일을 적용합니다. 클래스는 ID와 달리 여러 개의 태그에 사용할 수 있습니다.

클래스 셀렉터는 ".클래스 이름 { 스타일 }" 형태로 지정합니다. 클래스 이름 앞에 마침표가 있는 것에 주의하세요. 아래는 here 클래스 속성이 부여된 문자 A와 C에 스타일을 적용하는 HTML 코드입니다.

1: <style type="text/css">
2:     .here {color:red }
3: </style>4: <ol>
5:     <li class=here> A </li>
6:     <li> B </li>
7:     <li class=here> C </li>
8: </ol>

그림 4-13은 클래스 셀렉터가 적용된 ordered list의 결과입니다.

제목 없음

사실 다 필요없고 위에 포만 외우면 사용가능할 거 같에 진은아

css 다중 셀렉터 사용할때 a. b. c.{tag:color} 이런 식으로 적용한면 하a의 하위계층 . 뒤로 갈수록 하위계측으로 인식하면서 그 상대적인 위치에 태그를 지정하는 것이 가능하다.

49.67%

이런식으로 em태그를 선택적으로 하고 싶으면 td.em{tag.color} 이런식으러 지정하면 존나 가능하다.

스크린샷 2022-05-06 오후 12.58.58.png

  • 외국인한도 소진율
    이란 외국인이 보유할 최대 한도주식 수 중에 현재 외국인이 보유하고 있는 총 주식수에 대한 비율을 말합니다. 소진율이 100%가 되면 더 이상 외국인이 해당종목을 매수할 수 업습니다.
  • url = "https://finance.naver.com/item/main.nhn?code=000660"
    html = requests.get(url).text
    soup = BeautifulSoup(html, "html5lib")
    tags = soup.select(".lwidth tbody .strong  td em")#외국인한도 소진율을 보기 위해서 
    # 태그를 특정하기 위해서 class 속성값을 사용함.
    
    for tag in tags:
        print(tag.text)

    맥북에서 스크롤링해서 selector copy하는 방법

    가장 먼저 웹 페이지를 html 로 열고 다음에 select할 태그를 찾고 맥의 경우에는 option - cammand - i를 누른다 그리고 옆에 sidewindow에서 오른쪽 마우스 누리고 copy selcetor를 복사해서 붙여넣으면 쌉 가능하다.

profile
코딩

0개의 댓글