HTML2

mwaah·2023년 10월 6일
0

01: 기본 태그

, , 태그 태그는 HTML 문서의 시작광 종료를 나타내는 기본 태그로 특별한 속성이나 사용법은 없습니다. 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함합니다.

title 태그를 통해 브라우저 상단 타이틀 정의
JavaScript 및 CSS 코드를 직접 작성하거나 외부 파일을 import 혹은 url link.

태그를 통해 언어설정, 브라우저 호환성설정 및 모바일 화면설정과 SEO(Search Engine Optimization) 정보를 제공함. 태그 역시 특별한 사용법은 없으며 HTML의 메인 콘텐츠 영역을 정의하는 태그로 필수 요소임. 모든 콘텐츠는 사이에 위치해야 함. 를 구성하는 여러 태그들은 각각 사용 목적에 따라 필요한 태그를 선택해 콘텐츠를 제작 하면 됩니다. 다만 이들 태그들은 다음과 같이 블럭 혹은 인라인 특성을 가지고 있으므로 화면에 여러 태그를 함께 배치할 때 이러한 부분을 고려해야 합니다.

블럭(Block) 태그
블럭은 태그 구성요소들이 라인 전체를 차지해서 한줄에 여러 요소가 위치하지 못하는 태그를 말합니다.

,
    ,
  1. ,

    ~

    등의 태그가 대표적임

    예를들어

    Hello

    world 라고 작성했을때 world 는 다음줄에 표시됨.
    인라인(Inline) 태그
    인라인은 태그 구성요소들이 나란히 배치될 수 있는 태그를 말합니다.

    02: 제목 태그
    콘텐츠의 제목들을 표시할때 사용할 수 있는 태그 입니다. 큰 글자의 텍스트로 출력되는데 단순히 크기가 중요한 것이 아니라 문서내 콘텐츠들의 대->중->소 제목으로 이루어진 문서 구조를 표현하기 위한 용도로 사용됩니다.

    또한 구글 검색엔진에 제대로된 문서구조를 제공해 좀 더 정확하게 검색 되기를 원한다면 제목 태그들을 잘 사용해야 합니다.

    태그는 heading 이라고 하며

    ~

    까지 있는데, 숫자들은 제목의 레벨을 나타냅니다.

    이 가장 높은 레벨로 크기가 가장 크며

    이 가장 낮은 레벨로 크기가 가장 작습니다.

    This is heading 1

    This is heading 2

    This is heading 3

    This is heading 4

    This is heading 5
    This is heading 6
    03: 문단 태그

    태그는 paragraph 로 문단을 구분하기 위해 사용 합니다. HTML에서는 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리하기 때문에 문단 구분 시

    태그를, 줄 바꿈시
    태그를 이용 합니다.

    This is a paragraph.

    This is a paragraph.

    This is a paragraph.

    result

    This is a paragraph.

    This is a paragraph.

    This is a paragraph.


    태그는 닫는 태그가 없습니다. xml 규격으로 html을 표현하는 xhtml 시스템에서는
    과 같이 xml 규격에 따라 사용 할 수 있습니다. 또한 문단 구분을 위해
    태그를 연속으로 사용하는 것 보다

    태그를 사용하는 것이 좋습니다.

    To break lines
    in a text,
    use the br element.

    result

    To break lines
    in a text,
    use the br element.

    HTML 소스 에서는 기본적으로 하나의 공백만 인식이 되고 줄바꿈의 경우에도 별도의 태그를 사용하지 않으면 한줄로 보이게 됩니다.

    Hello World -> Hello World로 보임
    Hello
    World -> HelloWorld로 보임
    따라서 여러개의 공백을 넣으려면   를 사용해야 합니다.

    Hello       World -> Hello World
    소스에 작성한 그대로 화면에 출력하려면 pre 태그를 사용해야 합니다.

    Hello
      World           !!!
    

    위와같이 작성히 작성된 모양 그대로 화면에도 보이게 됩니다. 이 방법은 매우 특별한 경우에만 사용하며 일반적으로는 거의 사용할 일이 없습니다.

    04: 형식 태그
    형식 지정 태그들은 텍스트에 의미와 함께 효과를 부여 합니다. 텍스트를 굵게 출력하는 , , 텍스트를 기울여 보여주는 , , 하이라이트 표시를 위한 , 문장의 취소선을 표시하는 등이 있습니다.

    태그명 용도
    이탤릭으로 텍스트를 기울임
    굵은 글자
    타자기 글자 모양
    밑줄
    강조 텍스트 - b 태그와 결과 동일
    아래첨자
    윗첨자
    강조된 텍스트 - i 태그와 결과 동일
    텍스트 취소선
    형광펜 형태의 하이라이트 표현

    는 텍스트가 중요하지 않지만 단순 진하게 표시할 때, 은 의미적으로 중요한 텍스트를 표시할 때 사용합니다.
    는 단순하게 이탤릭체로 표시할 때, 은 특정 텍스트에 이탤릭체로 강조된 의미를 표현 할 때 사용합니다.
    05: 목록 태그
    목록 태그는 최신 HTML5 문서 작성에 있어 매우 중요한 태그중 하나 입니다. 카페나 블로그의 포스트 목록, 쇼핑몰의 상품 목록, 뉴스기사 목록 등 많은 웹 콘텐츠가 목록의 형태를 취하고 있기 때문에 이들을 표현하기 위한 목록태그는 레이아웃 지정을 위해 사용하는

    와 함께 가장 많이 사용되는 태그중 하나 입니다.

    목록을 만들기 위해서는 기본적으로

0개의 댓글