[HTML][CSS]웹 개발 언어_CSS의 태그/아이디/클래스/속성 셀렉터

 

 

---

 

 

데이터 분석을 위한 웹 개발 언어

 

✔️ CSS 셀렉터

✔️ 속성(Attribute)  셀렉터

 

 

---

 

 

 ✔️ CSS 셀렉터

 

 

 

 

CSS 셀렉터

데이터 크롤링을 진행하기 위해서는 원하는 데이터를 웹에서 직접 수집

CSS 셀렉터를 알면 HTML에서 원하는 부분을 정확히 찾는데 용이

 

 

 

 

태그 셀렉터

태그 이름을 지정하여 같은 태그의 스타일 변경

/* 태그 셀렉터 : 태그 이름을 지정하여 같은 태그의 스타일 변경*/
h1{color: violet;}
h2{color: black;}
h3{color: aquamarine;}
p{color: blue;}

<h1>Hello World!</h1>
<h1>Hello World2</h1>
<p>this paragraph is styled with CSS</p>
<p>Lorem ipsum dolor sit amet.</p>

 

 

+

 

 

HTML 코드 안에 style을 통한 설정 가능

<p style="color: black">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
   labore?
</p>

 

 

 

 

 

 

ID(아이디) 셀렉터

ID 셀렉터 : 태그 안에 ID를 지정하고 그 ID를 찾는 셀렉터

#+ID이름 으로 ID를 찾아서 적용
ID는 HTML 파일 안에서 중복될 수 없음

#p1{color: yellow;}
#p2{color: orange;}

<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>

 

 

 

 

Class(클래스) 셀렉터

CLASS 셀렉터 : 태그 안에 CLASS를 지정하고 그 CLASS를 찾는 셀렉터

.CLASS명 으로 CLASS 찾아서 적용
CLASS는 HTML 파일 안에서 여러 번 중복이 가능, CLASS를 여러 개 같이 사용 가능

.p1{font-size: 20px;}

.p2{color: black; font-size: 5px;}

.center{text-align: center;}

.strong{font-weight: bolder;}

.graycolor{color: gray;}

.browncolor{color: brown;}

/* 입력된 순서대로 */
.strong.center.graycolor {font-size: 30px;}

<p class="p1">paragraph 3</p>
<p class="p2">paragraph 4</p>

<p class="strong">strong class</p>
<p class="center">center class</p>
<p class="graycolor">graycolor class</p>

<p class="strong center">strong + center class</p>
<p class="strong center graycolor">strong + center + graycolor class</p>
<p class="strong center browncolor">P1 + strong + center+ browncolor class</p>

 

 

---

 

 

✔️ 속성(Attribute)  셀렉터

 

 

 

 

태그명[속성="값"] 

어트리뷰트(속성) 셀렉터 : 태그 안의 속성을 찾음
태그명[속성="값"] : 지정된 속성(어트리뷰트)를 가지면서 값이 같은 요소를 선택

a[href]{color: aquamarine;}
a[target="_blank"]{color: black; font-size: 30px;}

<a href="https://www.google.com">google</a><br />
<p><a href="https://www.naver.com" target="_blank">naver</a></p>
<a href="https://www.daum.net" target="_top">daum</a>

 

 

 

 

 

태그명[속성~="값"]

지정된 속성 값의 값을 포함하는 요소를 선택(공백으로 분리된 값)

h2[title~="first"]{color: red;}

<h1 class="center">어트리뷰트 셀렉터</h1>
<div>
   <h2 title="heading first">heading first</h2>
   <h2 title="heading-first">heading-first</h2>
   <h2 title="heading2 first">heading2 first</h2>
   <h2 title="heading-second">heading-second</h2>
</div>

(공백으로 분리된 first인 경우만 반응 : heading first, heading2 first만 글자색이 빨간색으로 변환)

 

 

 

 

태그명[속성|="값"]

값- 의 형태를 찾음(heading-인 경우)

h2[title|="heading"]{color: gray; font-size: 40px;}

<h1 class="center">어트리뷰트 셀렉터</h1>
<div>
   <h2 title="heading first">heading first</h2>
   <h2 title="heading-first">heading-first</h2>
   <h2 title="heading2 first">heading2 first</h2>
   <h2 title="heading-second">heading-second</h2>
</div>

(heading-인 경우만 반응 : heading-first, heading2-first의 글자색이 회색 및 폰트 사이즈 40px로 변환)

 

 

 

 

태그명[속성^="값"]

값으로 시작하는 요소 찾음(URL찾는데 사용 : https://, http:// )

a[href^="http://"]{text-align: right; color: brown;}

<h1 class="center">어트리뷰트 셀렉터</h1>
<div>
   <a href="https://www.naver.com">naver.com</a>
   <a href="http://www.naver.com">naver2.com</a>
</div>

( http//으로 시작하는 경우만 반응 : naver.com, naver2.com 모두 글자 오른쪽 정렬 및 갈색으로 변환)

 

 

 

 

태그명[속성$="값"]

값으로 끝나는 요소 찾음(확장자 찾는데 사용 : .html, .csv)

a[href$=".html"]{text-align: center; color: aqua;}

<h1 class="center">어트리뷰트 셀렉터</h1>
<div>
	<a href="http://www.naver.com/bbbb.html">naver2.com/aaa.pdf</a>
    <a href="http://www.naver.com/bbbb.html">naver2.com/bbbb.html</a>
</div>

(.html로 끝나는 경우만 반응 : naver2.com~.html의 텍스트 중앙 정렬 및 아쿠아 색상으로 글자색 변환 )

 

 

 

 

태그명[속성*="값"]

지정된 속성 값을 포함하는 요소를 선택

p[class*="test"]{color: red;}

<h1 class="center">어트리뷰트 셀렉터</h1>
<div>
   <p class="first">first</p>
   <p class="first_test">first_test</p>
   <p class="second">second</p>
   <p class="second test">second test</p>
   <p class="stest">test</p>
</div>

(test라는 값이 포함된 경우만 반응 : first test, second test의 글자색이 빨간색으로 변환)

 

 

 

---

 

 

이번 내용에서는 HTML에서의

CSS 셀렉터 중 태그,.아이디, 클래스, 속성 셀렉터에 대해 공부하였습니다.

 

HTML을 공부하는 이유는 데이터 분석을 위해서는 데이터 수집을 진행해야 하는데

웹에서 원하는 데이터를 효율적으로 가져오기 위함입니다.

 

더불어 데이터 분석을 위해서 DB와 SQL을 공부도 필요한데

위 블로그 글 참고해서 공부하면 좋을 것 같습니다.

 

'BOOTCAMP/SQL(MySQL)' 카테고리의 글 목록