사진과 음악을 좋아하는 개발자 지망생의 블로그

[Web Scraping 기초] HTML - 콘텐츠(Content) 본문

개발/웹 스크래핑

[Web Scraping 기초] HTML - 콘텐츠(Content)

devculture309 2023. 4. 17. 19:00
반응형
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>문서의 제목</title>
  </head>
  <body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
    <p>문단 태그를 사용해보자</p>
    블로그 주인의 이름은 <u>namuna</u> 입니다.
    <b>볼드 두껍게 나와요</b>
    <!-- 인라인 레벨 요소-->
    <b>볼드 두껍게 나와요</b>
    <b>볼드 두껍게 나와요</b>
    <b>볼드 두껍게 나와요</b>
    <strong>저도 두껍게 나와요</strong>
    <br /><!-- 줄바꿈 태그--><br /><br />
    <i>저는 기울어져서 나와요</i>
    <em>저도 기울어져서 나와요</em>
    <br /><!-- 줄바꿈 태그--><br /><br />
    <u>밑줄 그어줘요</u>
    <br /><!-- 줄바꿈 태그--><br /><br />
    <s>취소선</s>
    <del>삭제된 단어</del>
    <ins>추가된 단어</ins>
    <br /><br /><br />
    <a href="https://naver.com" target="_blank"">naver</a>
  </body>
</html>

1) 제목 태그 (h1 ~ h6)

  - 문서 구획 제목을 나타내는 태그로 heading 태그라고 부른다

  - h1부터 h6까지 사용 가능하며 h1태그는 페이지 내에 '한번만' 사용되어야 하고 '구획의 순서'는 지켜져야 한다.

 

2) 문단 태그 (p)

  - 문서에서 하나의 문단(Paragraph)을 나타내는 태그

  - 제목 태그와 함께 사용되기도 하고 단독으로 사용되기도 한다

  ※ 문단 태그는 레이아웃 태그가 아니'

 

3) 서식 태그 (b/strong, i/em, u, s/del)

  ① <u>

    - 글씨에 밑줄을 넣고 주석을 가지는 단어임을 나타낼 수 있다

    - 단순하게 글 없이 "밑줄"만 긋는 용도로는 사용하면 안된다

      → span태그와 같은 의미없는 태그를 활용하여 CSS로 밑줄이 그어지게 스타일링 해야한다

  ② <s>, <del>

    - 글씨에 취소선을 추가할 수 있다

    - <s> 태그는 단순히 시각적인 취소선만 추가되고 접근성 기기에 취소에 대한 안내는 하지 않는다

    - <del> 태그는 문서에서 제거된 텍스트를 나타낼 수 있다. <ins> 태그를 합께 사용하면 제거된 텍스트 옆에 추가된 텍스트를 표현할 수 있다.

  ③ <a>

    - 클릭하면 페이지를 이동할 수 있는 링크 요소를 만들 수 있다

    - href 속성을 사용해서 이동하고자 하는 파일 혹은 URL을 작성한다

    - target 속성을 사용해서 이동해야 할 링크를 새 창(_blank), 현재창(.self) 등 원하는 타켓을 지정할 수 있다

반응형

'개발 > 웹 스크래핑' 카테고리의 다른 글

[Web Scraping 기초] HTML - 양식 태그 (form, 설명과 입력, 버튼)  (0) 2023.04.17
[Web Scraping 기초] HTML - 리스트, 표, 외부 콘텐츠(iframe)  (2) 2023.04.17
[Web Scraping 기초] HTML - 멀티미디어  (0) 2023.04.17
[Web Scraping 기초] HTML - Head, Body, 레이아웃  (0) 2023.04.17
[Web Scraping 기초] HTML 기초  (0) 2023.04.17
'개발/웹 스크래핑' Related Articles more