[HTML5] 프론트단의 기본인 HTML 태그 기본 영역

태그의 기본 영역(레이아웃) 속성

• block
  • div(division)
  • h1~h6
  • p
  • ol
  • ul 등
    • block의 요소들은 한 줄 전부를 차지하는 영역 속성을 가지고 있다.
    • 화면에서 일부 영역을 차지하면서 구역 설정을 담당한다.
    • 화면의 전체적인 구조를 구성할 때 사용된다.
• inline
  • span
  • a
  • img
    • 내용물(컨텐츠)의 영역을 나타내는 속성, 컨텐츠를 표현하기 위한 태그로 사용된다.
    • block 요소의 내부에 포함시켜 작성한다.
    • 태그없이 사용된 단순 텍스트도 inline 요소처럼 처리한다.

글자 관련 태그

• h1 ~ h6
  • heading 태그라고 한다.
  • 제목 표현 태그
  • h1이 제일 크고 h6로 갈수록 작아진다.
• p
  • Paragraph의 약자
  • 문단을 표현하는 태그이다.
  • 공백문자(띄어쓰기, 탭, 개행)이 개별적으로 반영되지 않는다.
  • 공백문자는 여러 개 적더라도 띄어쓰기 한 개로 표현된다.
  • p태그 안에서 개행을할 때는 br(Line break) 태그를 사용한다.
• pre
  • PREformatted text
  • html 문서에 작성되어있는 문단 서식 형태 그대로 표현하는 태그
  • 공백문자들을 작성한 코드 그대로 표현한다.
  • 스타일을 직접 지정해야하는 일이 많아져서 잘 사용하지 않는다.

목록 태그

• ul
  • Unordered List
  • 순서 없는 리스트
  • 목록들을 표현하는 동그라미를 Disk 라고 한다.
• ol
  • Ordered List
  • 순서 있는 리스트
• li
  • List Item
  • 리스트에 들어갈 항목들을 나타낸다.
• 목록 태그의 자식태그로 목록태그를 넣을 수 있다.
• 중첩된 목록이 생성된다.(계층적으로 들여쓰기되어 표현 된다, 지금 블로그의 리스트 순서처럼.)
• CSS를 적절히 조절해서 웹화면에서 메뉴를 구성할 때 사용한다.

정의 목록 태그

• dl
  • Definition(Description) List, 정의 목록
• dt
  • Definition(Description) Terms, 정의 용어의 이름
• dd
  • Definition(Description) Descripe, 정의 설명
• 용어에 대한 설명, 정의 목록을 구성하는 태그

하이퍼링크 태그

• a (anchor(앵카) 태그)
  • href 속성
    • 링크 될 URL을 지정한다.
  • target 속성
    • 링크된 페이지가 오픈되는 위치 조절
    • self - 현재창 (기본 값)
    • blank - 새 창
  • 클릭 시 다른 페이지로 하이퍼링크를 적용해주는 태그
  • 다른 도메인도 가능하고 같은 도메인도 가능하다.
  • 주로 텍스트에 태그를 적용하지만 이미지나 다른 태그에도 적용 가능

<!-- 상대경로의 시작 문자 -->

<!-- / - 상대경로 위치의 루트 디렉토리부터 시작하는 경로 -->

<!-- ./ - 현재 파일의 상위 디렉토리로부터 시작하는 경로 -->

<!-- ../ - 현재 파일의 부모 디렉토리로부터 시작하는 경로 -->

<!-- 곧바로 파일명 - ./와 같다. -->

이미지 태그

• img 태그
• 화면에 이미지를 보여주는 태그
• 이미지의 소스(경로)를 지정하여 사용한다.
• alt, src 옵션은 필수이다.
  • alt
    • ALTernate Text - 교체 문장
  • title
    • 마우스를 올려놓으면 해당 이미지의 설명이 나온다
  • src
    • Source - 보여줄 이미지
  • src = "주소 값" 을 통해 이미지를 가져오는데, 주소가 잘못 되었거나 다른 이유로 사진이 출력 안된다면 alt 메세지가 대신 출력된다.
  • width
    • 너비
  • height
    • 높이