도전하는 프로그래머

크롬 개발자 도구로 CSS 선택자 알아내기 ( 파싱 데이터크롤링 팁 ) 크롬 - 개발자 도구를 열어서 원하는 HTML 요소 클릭 후 마우스 우클릭을 합니다 Copy - Copy selector Copy 결과값 #content > div > div.entry-content > div.tt_article_useless_p_margin.contents_style > p:nth-child(2) 해당값을 사용하여 파싱한다면 좀더 쉽게 파싱 & 데이터 크롤링을 할수 있겠네요

CSS 선택자 사용하기 1. 태그 이름 특정 태그 전체를 선택하려면 태그 이름을 사용합니다. CSS 선택자의미 li 모든 li 태그 p 모든 p 태그 2. 아이디 특정 아이디의 태그를 선택하려면, 아이디 앞에 #을 붙입니다. CSS 선택자의미 #coffee 아이디가 coffee인 태그 #tea-leaf 아이디가 tea-leaf인 태그 3. 클래스 특정 클래스의 태그를 선택하려면, 클래스 앞에 .을 붙입니다. CSS 선택자의미 .favorite 클래스가 favorite인 태그 .reverse 클래스가 reverse인 태그 4. 속성 속성의 이름과 값으로 태그를 선택하려면, [name="value"] 형식으로 적습니다. CSS 선택자의미 [alt="green-tea"] alt 속성의 값이 "green-tea..

1. HTML 태그를 선택하는 코드 위의 CSS 코드에서 'HTML 태그를 선택하는 코드'는 li 입니다. li { } 이후에 자세히 살펴보겠지만, 이 코드는 "모든 태그를 대상으로 스타일을 적용하라"는 의미입니다. 이렇게 스타일 적용의 범위를 정하는 코드를 CSS 선택자(CSS Selector)라 부릅니다. 여기에는 .favorite, #navbar 등 다양한 표현이 들어갈 수 있습니다 2. 스타일을 지정하는 코드 그럼 나머지 코드가 스타일을 지정하는 코드겠죠? color: blue; font-size: 20px; 첫 줄 color: blue;은 색상을 파란색(blue)으로 바꾸라는 의미이고, 두 번째 줄 font-size: 20px;은 글자 크기를 20px로 하라는 의미입니다. 보통은 이름이 직관적이..

HTML 연습! 이것은 첫 번째 문단입니다. 이것은 두 번째 문단입니다! 커피 녹차 우유 이 페이지를 통해 기본적인 HTML 태그 몇 개만 살펴보겠습니다! DOCTYPE 선언 HTML 파일을 쓸 때는 가장 먼저 선언을 써야 합니다. 이전의 html 버전을 사용하려면 조금 복잡하게 써야 하지만, 가장 최신 버전인 HTML 5를 사용하기 위해서는 이렇게만 쓰면 됩니다: title 태그 페이지의 제목은 태그에 써주면 됩니다. 브라우저의 탭이나 방문 기록에 나와 있는 바로 그 제목이 이 곳에 들어갑니다. Sample Website h1~h6 태그 한 페이지에 여러 개의 머리말이 있을 수 있는데요. 그 중 가장 중요한 머리말은 (heading 1), 그 다음으로 중요한 머리말은 (heading 2). 이런 식으로..

HTML 태그의 구성 HTML 태그는 두 가지 요소로 구성되어 있습니다. 태그 이름과 속성(attribute)입니다. 1. 태그 이름 태그 이름은 계속 봐왔던 p, li, img 이런 것들입니다. 태그를 상징하는 기호 안에 태그 이름을 가장 먼저 넣어주게 됩니다. , , 처럼 말이죠. 2. 속성 모든 HTML 태그는 속성이라는 추가 정보를 가질 수 있습니다. 태그 이름이 아닌 것은 모두 속성이라고 생각하면 됩니다. 속성은 일반적으로 속성 이름과 속성 값을 하나의 쌍으로 갖게 됩니다. (예: name="value") 만약 HTML 태그가 , 태그처럼 둘로 나누어져 있다면, 시작 태그에 속성을 적어줍니다. 예시를 살펴봅시다. 우유 위 태그에는 id라는 속성이 있고, 그 값은 "favorite"입니다. 한 태..