01: 기본 태그
, , 태그 태그는 HTML 문서의 시작광 종료를 나타내는 기본 태그로 특별한 속성이나 사용법은 없습니다. 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함합니다.title 태그를 통해 브라우저 상단 타이틀 정의
JavaScript 및 CSS 코드를 직접 작성하거나 외부 파일을 import 혹은 url link.
블럭(Block) 태그
블럭은 태그 구성요소들이 라인 전체를 차지해서 한줄에 여러 요소가 위치하지 못하는 태그를 말합니다.
예를들어
02: 제목 태그
콘텐츠의 제목들을 표시할때 사용할 수 있는 태그 입니다. 큰 글자의 텍스트로 출력되는데 단순히 크기가 중요한 것이 아니라 문서내 콘텐츠들의 대->중->소 제목으로 이루어진 문서 구조를 표현하기 위한 용도로 사용됩니다.
또한 구글 검색엔진에 제대로된 문서구조를 제공해 좀 더 정확하게 검색 되기를 원한다면 제목 태그들을 잘 사용해야 합니다.
태그는 heading 이라고 하며
태그는 paragraph 로 문단을 구분하기 위해 사용 합니다. HTML에서는 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리하기 때문에 문단 구분 시
태그를, 줄 바꿈시
태그를 이용 합니다.
This is a paragraph.
This is a paragraph.
This is a paragraph.
resultThis 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.
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 문서 작성에 있어 매우 중요한 태그중 하나 입니다. 카페나 블로그의 포스트 목록, 쇼핑몰의 상품 목록, 뉴스기사 목록 등 많은 웹 콘텐츠가 목록의 형태를 취하고 있기 때문에 이들을 표현하기 위한 목록태그는 레이아웃 지정을 위해 사용하는
목록을 만들기 위해서는 기본적으로
Listenelement 1
Listenelement 2
Listenelement 3
Listenelement 1
Listenelement 2
Listenelement 3
06: 하이퍼링크
하이퍼링크는 웹의 대표적인 특징으로 (Anchor)태그를 사용해 만들수 있습니다. href속성을 사용해 이동할 콘텐츠의 주소를 기술하면 됩니다. 이동할 콘텐츠는 html 파일이나 이미지 혹은 .hwp, .pdf 등 모든 파일이 될 수 있으며 URL을 이용해 서버의 콘텐츠를 지정하거나 프로그램을 호출하는 것도 가능합니다.
다른 서버 컨텐츠로 이동하는 것이라면 href 에 http:// 로 시작하는 URL이 들어가야 합니다.
링크 텍스트
href 에 들어가는 이동할 콘텐츠의 위치는 상대경로와 절대경로로 표현 할 수 있습니다. 내 컴퓨터가 아니라 html 을 서비스하고 있는 웹서버 컴퓨터에서 콘텐츠간의 위치 이므로 개념을 잘 이해해야 합니다.
상대경로와 절대경로
절대경로는 고유한 경로로 root(/)에서부터 시작되는 위치로 지정하는 방법.
예) /home/contents/img/1.jpg
상대경로는 HTML문서를 기준으로 경로를 지정하는 방법. -> 권장 방법임.
예) img/1.jpg, ../contents/img/1.jpg
내컴퓨터에 있는 콘텐츠로 연결하기 위해 c:\user\Document\Desktop\hello.html과 같이 로컬 컴퓨터의 절대 경로를 사용해서는 안됨.
target 속성 값
_blank 새로운 웹 브라우저 창으로 오픈.
_self 현재 웹 브라우저 창으로 오픈. (기본값)
_parent 부모 웹 브라우저 창으로 오픈.
_top 웹 브라우저 전체 영역에 오픈.
책갈피 구현
태그를 이용해 같은 문서 내에서 특정 위치로 이동하는 책갈피 기능을 구현할 수 있음.
태그의 name속성이나 id속성을 이용해 문서 내 이동위치를 지정하고 하이퍼링크에 href=#name(id) 과 같이 이동할 위치를 지정함. 메뉴 5.HTML이란 무엇인가? ......