# [크롤링] 필수 HTML 태그 지식 에 대하여

---

📌 본 포스팅은  HTML CSS tag 에 대한 내용을 다룹니다.
📌 [참고] https://juheeexx.tistory.com/13
📌 [참고] https://marketingscribbler.tistory.com/3

---

1. 기초 용어

1.1 선택자

• 정의 : css 스타일 적용, 해당 데이터의 문서 내 위치• 태그 선택자(Type selector)
• html 요소를 직접 지칭하는 가장 간단한 선택자.
• ex) p를 선택하면 <p> 에 해당하는 모든 데이터를 수집 가능.• ID 선택자(ID selector)
• id에 해당하는 html 요소를 찾아 선택함.
• ex)<div id = "coffe-menu">커피류 </div>
• div#coffe-menu 라는 선택자를 사용하면 커피류라는 데이터를 선택하게 됨.• 복합 선택자(Combinator)
• html 문서는 계층적임. 부모(상위), 자식(하위)
• 하위 선택자( 부모 밑의 모든 자식) , 자식 선택자 (부모 바로 밑의 자식)
• ex) 
• <!--하위 선택자--> section ul <!-- 자식 선택자--> section > ul
• 복합 선택자는 seection ul li ul, section > ul > li > ul 등으로 길게 늘여서 사용가능

• 가상 클래스 선택자(Pseudo-Class)

• 특정 순서에 있는 요소를 선택할 때 사용
• p:nth-child() : 부모 요소의 자식 개체중 n번째 요소가 p 태그면 선택
• p:nth-last-child() : 뒤에서 n번째
• p:nth-of-type() : 부모 요소의 바로 아래 자식 개체인 모든 p 태그 중 n번째 p 태그 선택
• p:nth-last-of-type() : 뒤에서

ex)

<div>
    <a>title 1</a>
    <p>contents 1</p>
    <p>contents 1</p>
    <a>linked post</a>
</div>

• div > a:nth-child(1) : div 아래 자식 중 첫 번째 a를 가져오라 -> title 1
• div > p:nth-child(1) : div 아래 자식중 첫 번째 p 하지만 아래자식은 a 이기 때문에 아무것도 없음.
• div > a:nth-last-child(1) : linked post

2. HTML tag

• <h1>~<h> : 제목
• <p> : 문단 구분 요소
• <a> : 링크(anchor) 설정 할때 href 사용.
• <b> : 볼드
• <li> : 목록(list item)
• <ul> : 비정렬 목록 (unordered list)
  • 순서가 별로 중요하지 않을때
• <ol> : 정렬 목록 (ordered list)
  • 순서가 중요할 때
• <a> : 앵커
• <dl> : 정의 목록(description list)
  • key-value 타입 정보 제공
  • 직계 자식 요소는 <dt>, <dd>, <div>가 올 수 있음.
• <dt> : 용어 태그(description term) , key 값.
  • <dt> 요소 뒤에 용어를 정의하는 <dd> 요소가 옴.
  • <dt>를 연속 배치하고 하나의 dd로 앞의 모든 dt를 서술할 수도 있음.
• <dd> : 용어 정의 태그 (description details/data). value 값.
• <div> : 하나의 용어에 대한 정의를 세트로 그룹화 가능
• <dfn> : 정의(definition)
  • dfn 은 dl의 직계요소가 될 수 없음. dt 태그 안에서 기능.

[Example]

<dl>
    <div>
        <dt>
            <dfn>복숭아</dfn>
        </dt>
        <dd>복사나무의 열매</dd>
    </div>
    <div>
        <dt>블로그</dt>
        <dd>
            <a href="https://beauty-from-simple.tistory.com">Forre 블로그</a>
        </dd>
    </div>
</dl>