Table 태그는 웹페이지 안에 표를 만들어주는 태그입니다. 웹페이지를 보다 깔끔하게 보이도록 작성할 수 있는 장점이 있습니다. 1. 기본구조12345678910 A B C D cs 표를 만들기 위해서는 table 태그를 입력합니다. 한 행을 표현하기 위해서는 tr 태그, 한 셀을 표현하기 위해서는 td 태그를 사용합니다. 위의 예제의 경우 가로세로 2칸씩으로 된 표가 보여집니다. 2. table 태그 속성12345678910 A B CCC D Colored by Color Scriptercs * 실행결과 A B C C C D table 태그의 border 속성은 표의 테두리 굵기를 의미합니다. 1픽셀로 지정한 상태입니다. width는 가로 너비를 의미하는데 픽셀단위나 %단위로 지정가능합니다. bgcol..

이번에는 링크를 걸어주는 태그를 알아보겠습니다. Anchor 태그라고 하는 A 태그입니다. 문서나 파일을 연결할 때 사용합니다. 흔히 링크를 건다고 하지만 하이퍼링크가 정확한 이름입니다. HTML문서의 가장 큰 특징이기도 한데요, 하이퍼링크를 통해 다른 웹사이트로 이동할 수 있으며 자신의 웹사이트 내에서 다른 문서나 문서의 특정 부분으로 이동할 수도 있습니다. 1. 기본구조1 신나는 과일가게 cs href 속성으로 이동할 웹페이지를 지정하게 됩니다. 시작 태그와 닫는 태그 사이에 링크를 걸어놓을 텍스트를 입력합니다. 링크가 설정된 텍스트에는 일반적으로 밑줄이 그어진 형태로 나타납니다. 일반 텍스트인지 링크가 걸려있는지를 쉽게 알아볼 수 있게 하기 위해서입니다. 보통은 웹페이지에 CSS로 처리된 경우가 많..

이미지를 표시해 주는 태그는 IMG 태그입니다. src 속성을 이용하여 이미지 경로를 지정해 주고 align 속성을 이용하여 이미지의 위치를 지정합니다. width와 height 속성으로 이미지 크기를 지정하고 alt 속성으로 대체 문자를 지정하는 방법을 설명드리겠습니다. 1. 기본구조12cs src 속성을 이용해서 파일의 경로를 적어 줍니다. 작성하는 웹문서를 기준으로 로컬경로를 적어주거나 인터넷 URL을 입력할 수 있습니다. align 속성은 이미지를 정렬하는 방식을 적을 수 있습니다. left | right | center 는 좌측, 우측, 중앙 정렬을 의미합니다. top | middle | bottom 중에 입력하게 되면 이미지와 텍스트를 어울리게 배치할 때 텍스트의 시작 위치가 위, 가운데, 아..

웹페이지에서 목록을 표시하는 방법을 정리합니다. 웹페이지를 작성하다보면 목록으로 표시하는 것이 편리하고 가독성을 높여줄 때가 있습니다. 이 때 사용하는 태그에는 크게 2가지 종류가 있습니다. 1. OL 태그 순서가 있는 목록을 정리하는 태그입니다. Ordered List의 약자로 맨 앞에 숫자가 표시되는 특징이 있습니다. OL 태그 안에는 LI 태그로 각각의 목록을 적어 줍니다. LI는 List Item의 약자입니다. 12345678 심폐소생술의 단계 의식이 있는지 확인한다 119 신고 심장압박 30회 실시(분당 100회 속도) 인공호흡 2회 실시(생략 가능) 119 도착시까지 반복 Colored by Color Scriptercs 심폐소생술의 단계 의식이 있는지 확인한다 119 신고 심장압박 30회 실..

문단과 관련된 태그들을 몇가지 정리합니다. 앞서 P태그와 BR 태그에 대해서는 설명을 드렸습니다. 앞선 포스팅을 참고하시면 될 것 같습니다. - 포스팅 보기 : [HTML] 문단, 단락 태그 - P 태그, BR 태그 1. BLOCKQUOTE 태그 이 태그는 인용구를 표시하는 태그입니다. Block Quotation을 의미하며 한칸을 들여쓰는 효과도 있습니다. 예전에는 브라우저에 따라 맨 앞에 수직으로 막대기형 표시가 나오거나 들여쓰기 효과만 나타나는 경우가 있었지만 요즘에는 막대기형으로 표시가 됩니다. 여러가지 블로그 서비스에 따라서 다양한 형태로 꾸미기를 위해 사용되기도 합니다. 테두리를 준다던지 따옴표를 표시해 준다든지 하는 식으로 말이죠. 뉴스 기사에서는 본문 요약 등의 내용을 표시하기도 하더라구요..

본문 안에 제목을 작성할 때 사용하는 태그를 알아보겠습니다. 헤드라인 Headline 태그라고도 하는데 H1 - H6까지 사용합니다. 숫자가 클수록 글자크기는 작아집니다. 일반적으로 웹페이지 내에 뉴스기사나 포스팅의 제목을 표시할 때 H1 태그를 이용하고, H2나 H3는 소제목을 표시하는데 이용되는 편입니다. 나머지는 글자가 너무 작아서 제목으로의 효과가 없어 잘 사용하지는 않습니다. 123456 제목1 제목2 제목3 제목4 제목5 제목6 cs 제목1 제목2 제목3 제목4 제목5 제목6 헤드라인 태그의 사용예를 보면 글자를 크게 하고 굵게 하는 효과가 표시됩니다. 언제부턴가 검색엔진에서 H 태그를 활용하여 페이지를 분류하고 점수를 메기기 시작하면서 블로그의 포스팅에 이 태그를 이용하는 빈도가 높아졌습니다..

문자와 관련된 태그들을 정리해 보도록 하겠습니다. 단독으로 사용해도 되고 문단(P 태그) 안에서 사용해도 됩니다. 1. B 태그 B태그는 Bold의 약자로 글자를 굵게 표시해 줍니다. 1 오늘은 HTML 태그에 대해서 알아보겠습니다. cs 오늘은 HTML 태그에 대해서 알아보겠습니다. 2. I 태그 I 태그는 Italic을 의미하며 글자를 기울여 나타냅니다. 1 오늘은 HTML 태그에 대해서 알아보겠습니다. cs 오늘은 HTML 태그에 대해서 알아보겠습니다. 3. U 태그 Underline의 약자로 밑줄을 쫙 그어줍니다. 1 오늘은 HTML 태그에 대해서 알아보겠습니다. cs 오늘은 HTML 태그에 대해서 알아보겠습니다. 그리고, 2가지 이상을 한꺼번에 적용할 수도 있습니다. 굵게, 기울임꼴로 적용하고자..

이번 포스팅에서는 Body 태그 안에 들어가는 본문 내용과 관련된 태그들을 이야기해볼까 합니다. Head 태그 안에 들어가는 내용은 실질적으로 웹페이지 안에는 나타나지 않는 것들이라 처음 접하는 분들은 이해가 잘 안 될 수 있을 겁니다. 하지만 Body 태그 안에 들어가는 태그들은 실제적으로 보여지는 부분이기 때문에 좀 더 이해가 쉬울 것으로 생각됩니다. 제일 먼저 살펴볼 태그는 P 태그입니다. Paragraph의 약어로 문단이나 단락을 나타내는 태그라고 보시면 됩니다. P 태그로 구분되는 본문 내용은 문단 사이에 설정한 줄간격만큼 떨어져 표시되기 때문에 가독성을 높일 수 있는 방법이기도 합니다. 12 첫번째 문단 두번째 문단 cs 기본 사용 방법은 위와 같습니다. 본문에 표시하고자하는 내용을 양쪽에서 ..

Head 태그 안에 들어가는 태그들에 대해 정리해 보도록 하겠습니다. Head 태그는 HTML문서의 머릿글이라고 할 수 있습니다. 시작 태그와 닫는 태그가 함께 사용되어야 합니다. 1. Title 태그 Head 태그 안에 사용할 수 있는 대표적인 태그는 바로 Title 태그입니다. 웹문서에 제목을 달아주는 것인데요, 문서의 전체적인 의미를 대표할 수 있는 주제어를 담게 됩니다. 브라우저의 맨 위에 표시되며 문서의 본문에는 나타나지 않습니다. 1 맛있는 과일가게 cs 2. Meta 태그 Meta 태그는 웹페이지에 대한 색인정보를 입력할 수 있습니다. Meta 태그를 활용해서 키워드와 설명을 넣음으로써 그 페이지에 대한 정보를 제공하고 검색엔진에서 상위에 노출될 수 있도록 해줍니다. Head 태그 뒤에 놓일..

HTML 웹문서의 기본구조 HTML이란 HyperText Markup Language의 약자입니다. 우리 말로 번역하면 어떻게 되는지는 모르겠지만 HTML문서라 함은 일반적으로 인터넷상에서 보여지는 웹페이지를 의미합니다. 파일 확장자는 *.html 또는 *.htm 등으로 저장되는데 가장 간단한 형태의 웹 언어라고 합니다. HTML 문서를 구성하는 것은 수많은 형태의 태그라고 할 수 있습니다. 태그(Tag)의 사전적 의미를 보면 이름표, 꼬리표 등으로 이해할 수 있습니다. 의류매장의 옷에 달려있는 가격표도 택 이라고 흔히 이야기하는데 같은 단어입니다. HTML 문서에서 이 태그를 이용해서 문서의 특정 내용에 대해 어떤 속성을 가지도록 꼬리표를 붙인다고 이해하시면 됩니다. 의류매장의 옷에 달린 택을 보고 이..