'HTML/CSS' 카테고리의 글 목록

HTML/CSS +12

Loading..다음 우편번호 서비스
2014.07.12

뷰어로 보기
Loading..HTML5 input 태그의 특정 형식
2014.03.29

뷰어로 보기
Loading..HTML 기초 (5) - 텍스트 차원 시맨틱 태그
2014.03.19

뷰어로 보기
Loading..HTML 기초 (4) - 기본 태그 (머리말, 문단)
2014.03.04

뷰어로 보기
Loading..HTML 기초 (3) - 기본 태그 (Head 태그에 들어가는 태그)
2014.03.04

뷰어로 보기
Loading..HTML 기초 (2) - HTML 문서 기본 구조
2014.02.27

뷰어로 보기
Loading..HTML 기초 (1) - 간략한 역사 / 태그란?
2014.02.25

뷰어로 보기
Loading..CSS Snippet - 제목 달린 모서리 둥근 상자
2014.01.19

뷰어로 보기
Loading..브라우저 별 CSS3 / HTML5 지원을 한 눈에 볼 수 있는 Can I use
2013.08.17

뷰어로 보기
Loading..Normalize.css
2013.08.11

뷰어로 보기

다음 우편번호 서비스

HTML/CSS2014. 7. 12. 18:44

뷰어
댓글로
이전글
다음글

오랜만에 포스팅을 남기게 되네요. 이번 포스팅 주제는 다음 우편번호 서비스입니다.

올해 본격적으로 도로명주소가 도입되면서 기존의 주소 검색 시스템 또한 개편되어야 할 필요성이 생겼지만, 순수 DB만 6GB 정도에 달하는 용량에 도로명주소의 복잡한 체계로 인해 도로명주소 검색 시스템을 구현하는 일은 상당히 복잡하기 짝이 없는 일입니다.

물론 미래창조과학부 산하 우정사업본부 (우체국)에서 Open API를 제공 [링크] 하고는 있지만, XML을 통해 쿼리에 대한 응답이 돌아오는 방식이라 별도로 파싱 (Parsing)을 하는 코드를 짜야하며 (문제는 가이드에 웹 개발용 예제 코드는 한줄도 없고, 그냥 리턴값이나 변수명만 설명하는 정도에서 그침...), 그냥 단순 HTML 및 JavaScript만으로는 주소 검색을 구현하기 어렵다는 단점도 있습니다.

물론 이러한 도로명 주소 문제를 해결하기 위해 개인 개발자 또는 웹 솔루션 회사에서 개발하여 무료로 제공하는 뛰어난 서비스도 여럿 있지만, 아무래도 방대한 DB 용량상 일일 검색 횟수 제한이라던가, 개발자의 개인 사정으로 인해 서비스가 예고 없이 중단되거나 할 가능성이 있다는 게 단점이라 볼 수 있습니다. 그리고 중급 이상의 개발자에게는 별 문제가 없습니다만, 초보 개발자가 쓰기에는 API가 좀 복잡한 편인 경우가 많습니다. 만약 자신의 프로그래밍 실력을 늘리고 싶거나, 고급 기능을 구현하고 싶다면 다음 우편번호 서비스보다는 이쪽을 이용하는 것을 추천드리고 싶네요.

자, 이제 본격적으로 다음 우편번호 서비스에 대해 소개해 보도록 하죠. 다음 우편번호 서비스는 개인 및 상업적 용도 모두 무료이며, UI를 기본으로 제공하기 때문에 사용 방법이 매우 간편합니다. 그리고 대형 포털에서 운영하는 것이니 서비스 자체는 안정적으로 오래 갈거라 생각됩니다.

예제 코드 및 자세한 사용 방법은 다음에서 가이드를 잘 만들어 둬서 (예제 코드만 복붙해도 바로 쓸 수 있을 정도!) 따로 본 포스트에서 소개해 드릴 필요가 없을 것 같습니다. 따라서 가이드 링크를 걸어드립니다. [여기]를 클릭하시면 새 창으로 보실 수 있습니다.

가이드를 보시면 아시겠지만, 굉장히 간단한 방법으로 사용할 수 있습니다. 일단 API키 발급 자체가 없고, 다음에서 제공하는 외부 js 파일을 인클루드하여 사용하는 형태입니다. 그리고 팝업창 띄우기나 쿼리 값 리턴은 모두 JavaScript로 동작하므로 사용하는 언어에 따른 특별한 제약이 없습니다. 또한 리턴되는 쿼리값을 예제 코드처럼 다 받아올 수도 있고, 선택적으로 받아오는 것도 가능합니다. 거기에 HTTPS를 통해 js를 인클루드할 수 있도록 별도 CDN을 제공하고 있다는 점입니다. 따라서 HTTPS 페이지에서도 보안 경고 뜨는 일 없이 사용할 수 있습니다. 마지막으로, 크로스 브라우징이 잘 되어 있어서 어떤 브라우저에서도 오류나 디자인 깨짐 없이 잘 작동합니다.

창은 새 팝업 창 또는 div 레이어에 iframe 방식 (기본값 또는 자동 리사이즈)으로 띄울 수 있도록 되어 있습니다. 가이드에서 두 방식 모두 상세한 예제 코드가 제공되고 있습니다. 참고로 이 서비스의 주소 검색 횟수 제한은 공식 블로그에 따르면 없다고 합니다 (8월 12일 확인).

단점이라면 그리고 하단에 다음 로고와 우편번호 서비스 홍보 링크가 들어갑니다 (7월 16일부로 하단에만 들어가는 것으로 수정됨). 다만 외부 광고가 아니라서 이 정도는 용인 가능한 수준이라 봅니다. 그리고 서비스 향상을 위해 레퍼러 (Referrer)와 주소 검색 내용이 수집되어 다음측에 로그로 남는다고 합니다. 어차피 개인 개발자 서비스도 서버에 쿼리 날리면 레퍼러와 검색 내용이 로그로 남겨질 수 있는 여지가 있어 딱히 이 점은 단점으로 보기엔 좀 애매한 감도 없잖아 있네요.

* 추가 : 7월 30일자 업데이트를 통해 지번 주소, 도로명 주소 여부를 알려주는 변수가 추가되었고, 지번 주소에서 번지수가 같이 들어가던 것도 분리되어 쿼리값을 리턴받을 수 있도록 변경되었습니다.

* 추가 2 : 버전 2에서 도로명주소와 구 지번 주소가 동시에 표출되는 방식으로 변경되었습니다.

저작자표시 비영리 변경금지

HTML5 input 태그의 특정 형식

HTML/CSS2014. 3. 29. 00:26

뷰어
댓글로
이전글
다음글

안녕하세요, 오늘은 HTML5에서 <input> 태그의 특정 형식들에 대해 알아보도록 하겠습니다.

이전과는 달리 HTML5에서는 <input> 태그의 type 속성에 특정 형식을 지정함으로서 사용자로부터 손쉽게 원하는 형태 (날짜, 범위 등)를 입력받을 수 있게 되었습니다. 게다가 웹 브라우저 자체에서 유효성 검사까지 동시에 해 주니 (물론 서버측에서 한 번 더 해줘야 하지만, 이전에는 JS까지 별도로 짜야 했기 때문에 확실히 손이 덜 갑니다.) 개발자에게는 일석이조의 기능이라고 볼 수 있겠습니다.

하지만 모든 웹 브라우저들이 아래의 모든 형식들을 지원하는 것은 아닙니다 (특히 Mozilla Firefox나 Internet Explorer는 아래에 나열된 다양한 속성들 중 단 4개 (번외인 pattern 포함) 만 지원하고 있으며, IE의 경우에는 이 마저도 10.0 이상에서만 지원합니다...) 따라서 안타깝게도 아직까지는 마음 놓고 사용할 수 없다는 단점이 있습니다.

또 다른 단점은 오류 메시지나 컨트롤의 모양이 통일된 형태가 아니라 천차만별이며, 오류 메시지의 경우 CSS 등을 통해 사용자 정의 디자인을 사용할 수 없다는 점입니다. 이러한 단점들을 모두 상쇄하려면 유효성 검사의 경우에는 제가 이전에 소개드렸던 Parsley.js나 기타 Validator 라는 단어가 들어가는 스크립트를, 컨트롤 구현의 경우에는 jQuery UI와 같은 UI 프레임워크를 사용해야 합니다.

1. color

Google Chrome과 Opera에서만 지원되는 형식입니다. 색상 선택 상자를 띄워서 색상을 선택할 수 있게 해 줍니다.

2. date

날짜를 입력받는 경우에는 달력을 보여주는 것이 사용자 입장에서 편리하기 때문에 일반적으로는 jQuery UI의 Calendar를 이용해서 구현하는 편입니다. 하지만 이 속성을 사용하면 jQuery UI 없이도 달력을 띄울 수 있습니다. Google Chrome, Apple Safari 및 Opera에서만 지원합니다. 개인적으로 이전에 달력 구현때문에 고생해 본 저에게는 가장 마음에 드는 속성입니다.

~~3. datetime~~

~~날짜와 함께 시간을 입력받을 수 있습니다. 날짜의 경우는 위의 date와 같이 달력을 띄울 수도 있습니다. Apple Safari와 Opera에서만 지원하고 있습니다.~~ 해당 형식은 권고안에서 삭제되었습니다.

~~4. datetime-local~~

날짜와 함께 시간을 입력받을 수 있습니다. 날짜의 경우는 위의 date와 같이 달력을 띄울 수도 있습니다. datetime-local 형식이 위의 datetime과 다른 점은 바로 사용자의 PC 설정에 맞추어 시간을 12시간제 또는 24시간제로 입력할 수 있다는 점입니다. Google Chrome, Apple Safari 및 Opera에서만 지원하고 있습니다. 해당 형식은 권고안에서 삭제되었습니다.

5. email

이메일 주소만을 입력받을 수 있습니다. 이메일 주소를 입력한 뒤 폼을 전송했을 때, 올바른 메일 주소가 아닌 경우에는 오류 메시지를 띄우고, 폼 전송을 중단합니다. 이 속성은 Mac용 Safari를 제외한 (iOS Safari에서는 지원) 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상).

~~6. month~~

~~month라고 되어 있는데, 연도와 함께 월을 같이 입력받을 수 있습니다. date와 같이 입력 시 달력을 지원합니다. Google Chrome,~~ ~~Apple Safari 및 Opera에서만 지원하고 있습니다.~~ 해당 형식은 권고안에서 삭제되었습니다.

7. number

숫자만을 입력받을 때 사용하며, 지정된 범위 안의 숫자만 입력받을 수도 있습니다. Mozilla Firefox를 제외한 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상). 또한 아래와 같은 추가 속성들을 사용할 수 있습니다.

max - 최대값
min - 최소값
step - 숫자 간 간격 (예를 들어 1에서 10까지 입력을 받을 때 2의 배수만 입력받으려면 step 속성에 2를 지정)
value - 기본값

8. range

슬라이더 (Slider)를 이용하여 지정된 범위 내의 수를 입력받을 수 있습니다. 유일하게 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상). 위의 number와 같이 아래와 같은 추가 속성들을 사용할 수 있습니다.

max - 최대값
min - 최소값
step - 숫자 간 간격 (예를 들어 1에서 10까지 입력을 받을 때 2의 배수만 입력받으려면 step 속성에 2를 지정)
value - 기본값

9. search

검색 필드에 사용할 수 있는 형식입니다. Google Chrome과 Apple Safari에서만 지원하고 있습니다. results 속성에 숫자를 지정하면 지정된 숫자 만큼의 이전 검색어들을 텍스트 상자 아래쪽에 나타나는 컨텍스트 메뉴 형태로 볼 수 있습니다. 이외에는 검색어 자동 저장을 위한 autosave, 순간 검색기능을 위한 incremental 속성이 있습니다. 모든 웹 브라우저에서 구현될 경우 꽤 유용할 것 같습니다.

10. tel

전화번호 형식은 모바일 웹 브라우저에서는 지원되나, PC의 웹 브라우저에서는 하나도 지원하는 브라우저가 없습니다. 따라서 아직까지는 모바일 전용 페이지에서나 사용할 형식이라고 보시면 됩니다. type="tel"이 지정된 경우에는 모바일 웹 브라우저에서 자동으로 일반 키보드가 아닌 다이얼 키패드를 띄워줍니다. 이는 안드로이드, iOS 둘 다 공통입니다.

11. time

시간을 입력받을 때 사용할 수 있는 형식입니다. 사용자의 사용자의 PC 설정에 맞추어 시간을 12시간제 또는 24시간제로 입력할 수 있으며, Google Chrome, Apple Safari 및 Opera에서만 지원하고 있습니다.

12. url

홈페이지, 블로그나 SNS 주소와 같은 URL (Uniform Resource Locator)을 입력받을 때 사용할 수 있는 형식입니다. 이 속성은 Mac용 Safari를 제외한 (iOS Safari에서는 지원) 모든 웹 브라우저에서 지원하고 있습니다 (IE의 경우 10.0 이상).

~~13. week~~

~~특정 연도의 특정한 주 (예를 들어 2014년 3번째 주)를 입력받을 때 사용할 수 있는 형식입니다. date 형식과 마찬가지로 달력을 이용할 수 있습니다.~~ ~~Google Chrome, Apple Safari 및 Opera에서만 지원합니다.~~ 해당 형식은 권고안에서 삭제되었습니다.

14. 번외 - pattern

끝판왕의 등장입니다! 이 속성은 바로 정규식 표현 (Regular Expression)을 브라우저에서 검사해주는 속성입니다. 정규식을 이용하면 위에 정의되지 않은 자신만의 검사 패턴을 만들어낼 수 있습니다. 다만, 정규식 표현을 모르는 초보자에게는 좀 어려운 물건이 되겠네요. pattern 속성의 정규식 규칙은 JavaScript의 정규식을 따릅니다. 예를 들어 국내에서 사용되는 전화번호들의 형식을 -을 포함해 검사하고 싶다면, pattern="\d{2,3}\-\d{3,4}\-\d{4}"과 같이 지정해주면 됩니다. 그리고 pattern에 곁들여 사용할 수 있는 형식으로 title 속성이 있는데, 이를 통해 입력 값의 오류 발생 시 사용자에게 입력 값의 오류 내용이나, 올바른 입력 값 규칙을 알려줄 수 있습니다. 예를 들자면 title="올바른 전화번호를 입력하세요." 이런 식으로 사용할 수도 있겠지요. 이 속성은 Apple Safari를 제외한 모든 웹 브라우저에서 지원합니다 (IE의 경우 10.0 이상).

참고자료

W3C - HTML5 표준 권고안 (Recommendation)

W3schools - HTML5 Input Types

CSS-Tricks - WebKit HTML5 Search Inputs

업데이트

* 2014년 10월 28일자로 HTML5 표준 권고안이 발표되어 이에 따라 삭제된 형식들에 취소선 적용

저작자표시 비영리 변경금지

HTML 기초 (5) - 텍스트 차원 시맨틱 태그

HTML/CSS2014. 3. 19. 23:04

뷰어
댓글로
이전글
다음글

안녕하세요, 오늘은 HTML에서 매우 사용 빈도가 높은 텍스트 차원 (Text-level semantics) 시맨틱 태그들에 대해서 알아보도록 하겠습니다. 사실 HTML 4.x나 XHTML 1.x만 하더라도 굵은 글자를 표현할 때는 <b>, 밑줄을 칠 때는 <u>와 같이 단순하게 사용할 수 있었는데, HTML5에서는 시맨틱 마크업의 개념이 더해지면서 이전과는 다르게 이러한 태그들에 모두 의미가 담기게 되었습니다. 이전보다는 좀 복잡해졌다고 봐야겠지요. 복잡해진 만큼 오늘 포스트는 스크롤 압박이 좀 있습니다.

본 HTML 기초 강좌는 HTML5에 기반을 두고 기본적인 설명을 하고 있기 때문에, HTML5의 규정대로 설명하도록 하겠습니다. 어차피 옛날 거 배워봤자 나중에 새로 배우셔야 하니 이왕이면 새로운 것으로 배우시는 게 낫겠죠?

1. <a>

<a> 태그는 anchor의 약자로서 컨텐츠 내에서 링크로 연결할 부분을 표시하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다. HTML에서 매우 높은 빈도로 쓰이는 태그 중 하나입니다. 일반적으로 자주 쓰는 것은 역시 href 속성입니다. href에는 이 곳에 URL 또는 책갈피 ID를 입력하여 사용합니다. 또한 웹 접근성 향상을 위해 title 속성에 추가적인 툴팁 문자열을 추가할 수도 있습니다. 또한 자주 많이 쓰이는 속성으로는 target 속성이 있는데, target에 들어가는 문자열에 따라 a 링크의 대상이 표시되는 영역이 변화합니다. (예: _blank 인 경우 새 창에서 띄움)

코드 예제)

<p>더 자세한 정보를 보려면 <a href="http://www.example.com" title="새 창에서 자세한 정보를 봅니다." target="_blank">여기</a>를 클릭하세요.</p>

예제 미리보기)

더 자세한 정보를 보려면 여기를 클릭하세요.

2. <em>

<em> 태그는 emphasis의 약자로서 컨텐츠 내에서 강조할 부분을 표시하는 태그입니다. 이 태그 영역에 들어간 텍스트는 영미권에서 사용하는 강조 스타일인 이탤릭체로 표시됩니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>그 HTML 문서는 <em>매우</em> 잘 다듬어져 있었다.</p>

예제 미리보기)

그 HTML 문서는 매우 잘 다듬어져 있었다.

3. <strong>

<strong> 태그는 문장이나 단어의 중요성, 긴급 등을 강조할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>경고 : 젖은 손으로 코드를 만질 경우 <strong>감전의 위험</strong>이 있습니다.</p>

예제 미리보기)

경고 : 젖은 손으로 코드를 만질 경우 감전의 위험이 있습니다.

* 주의 : 아래의 <b> 태그 항목 참고

4. <small>

<small> 태그는 주의나 참고사항, 저작권 표시 등과 같이 일시적으로 작은 글씨를 표현해야 할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>GeForce 7800, Radeon HD5600 이상의 그래픽 카드 <small>* 노트북 그래픽 칩셋에서의 작동은 보장하지 않습니다.</small></p>

예제 미리보기)

GeForce 7800, Radeon HD5600 이상의 그래픽 카드 * 노트북 그래픽 칩셋에서의 작동은 보장하지 않습니다.

5. <s>

<s>태그는 strikethrough의 약자로서 업데이트 된 내용으로 인해 더 이상 유효하지 않은 텍스트 (예를 들어 아래의 예제와 같이 할인 이전의 가격이라던가...)에 취소선을 그을 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>오늘만 특가! <s>10,000원</s> → 5,000원</p>

예제 미리보기)

오늘만 특가! ~~10,000원~~ → 5,000원

* 주의 : 문서에서 삭제된 내용을 취소선으로 표현할 때에는 <s> 태그가 아닌 <del> 태그를 사용합니다. 과거에는 <s>와 <del>을 합쳐서 <strike> 태그로 사용했었으나, HTML5에서 <strike> 태그는 폐기된 태그입니다.

6. <cite>

<cite> 태그는 그림, 영화 등의 작품명을 표현할 때 사용하는 태그이며, 기울임꼴 (italic)로 표시됩니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>레오나르도 다 빈치의 대표작 중 하나인 <cite>모나리자</cite>는 프랑스의 루브르 박물관에 전시되어 있다.</p>

예제 미리보기)

레오나르도 다 빈치의 대표작 중 하나인 모나리자는 프랑스의 루브르 박물관에 전시되어 있다.

7. <q>

<q> 태그는 quote의 약자로서 간략한 인용문을 표현할 때 사용하는 태그이며, 자동으로 따옴표를 추가해 줍니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>그 작품을 본 한 전문가는 <q>마지막 문장이 특히 뛰어난 묘사였다</q>라는 평을 내렸다.</p>

예제 미리보기)

그 작품을 본 한 전문가는 마지막 문장이 특히 뛰어난 묘사였다라는 평을 내렸다.

8. <dfn>

<dfn> 태그는 definition의 약자로서 용어 정의를 표현할 때 사용하는 태그이며, 기울임꼴 (italic)로 표시됩니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p><dfn>Hypertext Markup Language</dfn></p>

예제 미리보기)

Hypertext Markup Language

9. <abbr>

<abbr> 태그는 abbreviation의 약자로서 약자와 약자의 내용을 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다. title 속성과 함께 사용되며, title 속성에는 약자의 내용이 들어갑니다. title 속성의 값은 마우스 포인터를 해당 약자 위에 올렸을 때 표시됩니다.

코드 예제)

<p><abbr title="Cascading Style Sheet">CSS</abbr></p>

예제 미리보기)

CSS

10. <time>

<time> 태그는 시맨틱 마크업의 개념에 따라 해당 문자열이 시간이나 날짜임을 웹 브라우저나 스크린 리더 등에게 알려주기 위한 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다. 웹 브라우저 상에서는 딱히 모양이 변경된다거나 속성이 표시되는 것은 없습니다. 일반적으로 텍스트에 있는 시간이나 날짜에는 <time> 태그만 씌우면 되고, 아래 예제와 같이 특정한 날의 날짜를 알려줄 때에만 datetime 속성에 값을 지정합니다.

코드 예제)

<p>오늘은 <time datetime="2014-05-05">어린이날</time>입니다.</p>

예제 미리보기)

오늘은 어린이날입니다. (모양에 아무 변화도 없고, datetime 속성의 값도 겉으로 출력되지 않음.)

11. <code>

<code> 태그는 코드나 명령어를 강조해서 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>명령 프롬프트 창을 닫으려면 <code>exit</code>를 입력한다.</p>

예제 미리보기)

(본 블로그에서 사용중인 Bootstrap으로 인해 브라우저 기본값으로 표시되지 않으므로 이미지로 대체)

12. <figure> - 하위 태그 <figcaption>

- 지원하지 않는 브라우저 : Internet Explorer 8 이하 버전

<figure> 태그는 시맨틱 마크업의 개념에 따라 해당 문자열이 일러스트, 다이어그램, 사진이나 코드 목록 등의 묘사물임을 웹 브라우저나 스크린 리더 등에게 알려주기 위한 태그입니다. 사용 시 별도의 기본 스타일은 없으며, CSS를 이용해 꾸밀 수 있습니다. 또한 <figure> 태그와 같이 사용되는 <figcaption> 태그를 이용해 대상물의 캡션을 추가할 수도 있습니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<figure>

<img src="https://www.google.com/images/logos/google_logo_41.png" alt="Google 로고">

<figcaption>그림 1 - Google 로고</figcaption>

</figure>

예제 미리보기)

13. <samp>

<samp> 태그는 프로그램의 출력 예제 결과를 표현할 때 사용하는 태그입니다. 사용 시 별도의 기본 스타일은 없으며, CSS를 이용해 꾸밀 수 있습니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p><samp>Bad command or file name</samp></p>

예제 미리보기)

Bad command or file name

14. <kbd>

<kbd> 태그는 키보드 키 또는 키 조합을 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>시스템을 재시작하려면 <kbd>Alt + Ctrl + Del</kbd> 키를 누르십시오</p>

예제 미리보기)

(본 블로그에서 사용중인 Bootstrap으로 인해 브라우저 기본값으로 표시되지 않으므로 이미지로 대체)

15. <sub>

<sup> 태그는 아래 첨자 (Subscript)를 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>자세한 사항은 본문 각주<sub>2</sub>를 참고하세요.</p>

예제 미리보기)

자세한 사항은 본문 각주₂를 참고하세요.

16. <sup>

<sup> 태그는 위 첨자 (Superscript)를 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>상대성 이론의 공식은 E=mc<sup>2</sup>이다.</p>

예제 미리보기)

상대성 이론의 공식은 E=mc²이다.

17. <i>

이전에는 이텔릭체로 텍스트를 강조할 때 <i> 태그를 사용하였으나, HTML5에서는 이전의 역할과는 전혀 다른 기능을 하도록 변경되었습니다. HTML5에서 본 태그의 역할은 음성 또는 분위기 전환, 일반적인 산문과는 동떨어진 분류학적 명칭과 같은 텍스트의 표시, 기술 용어, 타 언어의 관용구, 음역, 생각 또는 알파벳으로 된 함명 표기에 사용됩니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p><i>Voila!</i> There is our new car.</p>

예제 미리보기)

Voila! There is our new car.

18. <b>

이전에는 굵은 글씨의 텍스트 강조에 <b> 태그를 사용하였으나, HTML5에서는 강조할 태그가 없을 때 최후에 사용하는 태그로 변경되었습니다. 만일 특별히 강조할 필요가 없는 문장이나 단어인데 굵은 글씨를 사용하고 싶은 경우에는 CSS의 font-weight: bold 속성을 사용해야 합니다. 이 태그는 시작과 끝이 있는 태그입니다.

19. <u>

이전에는 밑줄을 그어 강조할 텍스트에 <u> 태그를 사용하였으나, HTML5에서는 모호한 텍스트임에도 불구하고 강조해야 할 경우나, 잘못 발음될 수 있는 텍스트를 강조하는 데 사용하도록 변경되었습니다. 다만 링크와 혼동을 줄 우려가 있기 때문에 사용을 자제해야 하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

20. <mark>

<mark> 태그는 문장 내에서 중요한 기능을 형광펜으로 표시하듯이 표시해 주는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p>HTML5에서 강조하는 것은 <mark>시맨틱 마크업</mark>이다.</p>

예제 미리보기)

HTML5에서 강조하는 것은 시맨틱 마크업이다.

21. <ruby> - 하위 태그 <rb>, <rt>, <rp>

<ruby> 태그는 일본어의 후리가나, 대만 중국어의 보포모포와 같은 단어의 독음을 표기할 때 사용하는 루비 텍스트를 표시하는 태그입니다. 하위 태그인 <rb>, <rt>, <rp> 태그와 쌍으로 사용됩니다. 이 태그 및 하위 태그들은 모두 시작과 끝이 있는 태그입니다.

* <rb> : 아래에 위치할 단어

* <rt> : 위에 위치할 독음

* <rp> : <ruby> 태그를 지원하지 않는 브라우저에서 루비 텍스트 대신 표시할 괄호 영역

코드 예제)

<ruby><rb>韓国語</rb><rp>(</rp><rt>かんこくご</rt><rp>)</rp></ruby>

예제 미리보기)

韓国語(かんこくご)

22. <bdi>

- 지원하지 않는 브라우저 : Internet Explorer, Opera (Presto 엔진), Safari

<bdi> 태그는 Bidirectional isolation의 약자로서 HTML 태그에 정의된 dir 또는 lang의 속성 값을 무시하고 원래 문자의 방향대로 표시합니다. 이 태그는 시작과 끝이 있는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다. 2014년 2월 현재 Internet Explorer, 구 Presto 엔진을 사용하는 Opera, 그리고 Safari에서 지원되지 않습니다.

23. <bdo>

<bdo> 태그는 Bidirectional override의 약자로서 HTML 태그에 정의된 dir 또는 lang의 속성 값을 무시하고 문자의 방향 (왼쪽에서 오른쪽으로 쓰기 또는 오른쪽에서 왼쪽으로 쓰기)을 강제로 지정해 줍니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<bdo dir="rtl">

안녕하세요?

</bdo>

예제 미리보기)

안녕하세요?

* 반드시 dir 속성의 값이 지정되어야 합니다. ltr은 대부분의 언어에서 사용하는 왼쪽에서 오른쪽으로 쓰기 (left to right), rtl은 오른쪽에서 왼쪽으로 쓰기 (right to left)로서 태국어, 아랍어 등의 표기에 사용됩니다.

24. <span>

<span> 태그는 문서 인라인(Inline) 구성 요소를 묶는 데 사용됩니다. 단독으로 사용되면 아무런 효과도 없으나, <span> 태그에 스타일을 지정함으로서 문서 내의 특정 문장이나 단어의 글꼴 또는 색상 등을 변경할 수 있습니다. 일반적으로는 span에 CSS 클래스나 ID를 지정해서 사용하며, 여기 예제에서는 간략하게 style 속성을 이용하여 스타일을 입혔습니다. 이 태그는 시작과 끝이 있는 태그입니다.

코드 예제)

<p><span style="color: #0000ff;">이 문장은 파란색으로 표시됩니다.</span></p>

예제 미리보기)

이 문장은 파란색으로 표시됩니다.

25. <br>

<br> 태그는 Break의 약자입니다. 문단 내 (<p> 태그 영역)에서 줄바꿈을 할 때 사용하며, 사용 빈도가 매우 높은 태그입니다. 이 태그는 단독으로 사용됩니다.

코드 예제)

<p>

아름다운 우리 글<br>

다람쥐 헌 쳇바퀴 타고파<br>

무궁화 꽃이 피었습니다.

</p>

예제 미리보기)

아름다운 우리 글
다람쥐 헌 쳇바퀴 타고파
무궁화 꽃이 피었습니다.

26. <wbr>

- 지원하지 않는 브라우저 : Internet Explorer

<wbr> 태그는 Word Break Opportunity의 약자로서, 긴 단어를 사용할 때 또는 긴 텍스트에서 브라우저가 자동으로 문장을 자를 때 어느 부분에서 잘라야 하는 지를 브라우저에 알려주는 태그입니다. 2014년 3월 기준으로 IE에서는 지원되지 않습니다. 단독으로 사용됩니다.

코드 예제)

<p>Internet Explorer를 제외한 웹 브라우저에서 이 창을 줄여보세요. "now<wbr>here" 라는 단어는 "now here"으로 보이게 될 것입니다.</p>

예제 미리보기)

Internet Explorer를 제외한 웹 브라우저에서 이 창을 줄여보세요. "nowhere" 라는 단어는 "now here"으로 보이게 될 것입니다.

참고자료

- W3C HTML5 Candidate Recommendation (Feb. 14. 2014)

- W3CSchools.com HTML Reference

저작자표시 비영리 변경금지

HTML 기초 (4) - 기본 태그 (머리말, 문단)

HTML/CSS2014. 3. 4. 02:27

뷰어
댓글로
이전글
다음글

안녕하세요, 오늘은 HTML 기본 태그들 중 머리말과 문단 태그에 대해서 알아보도록 하겠습니다.

보통 글을 쓸 때처럼 문단 앞에 머리말을 강조시켜 넣어야 할 필요가 있는 경우에 HTML 문서에서는 머리말 태그를 씁니다만, 특정 항목들의 그룹 제목으로 머리말 태그를 써서 표현하는 기법으로도 자주 사용되고 있기 때문에 머리말 태그는 반드시 알아두셔야 할 기본 태그들 중 하나입니다.

HTML에서는 머리말을 나타내기 위해 <h?> 태그를 사용합니다. h는 머리말을 의미하는 Heading의 약자입니다. 뒤에 ?는 1에서 6까지의 숫자가 이곳에 들어가게 됩니다. 과거에는 이 숫자가 그냥 머리말의 크기를 결정하는 요소 (작을수록 큼)로서의 역할만 하였으나, HTML5에서 시맨틱 마크업 (Semantic Markup)이 중요한 요소로 떠오르면서 현재는 웹 접근성 향상을 위해 글의 계층 (큰 제목은 <h1>, 소제목은 <h2>, 세부 제목은 <h3>과 같이 사용) 또한 숫자로 표현하도록 하고 있습니다. 사용 방법은 아래와 같으며, 아래 예제와 같이 시작과 끝을 표시하여 영역을 지정해 줘야 하는 태그입니다.

<h1>초급자를 위한 HTML5 완성</h1>
<h2>들어가는 말</h2>
<h2>제 1장 – 시맨틱 마크업</h2>
<h3>1) 시맨틱 마크업이란?</h3>
<h3>2) 웹 접근성 향상을 위한 시맨틱 마크업 전략</h3>
<h2>제 2장 – 멀티미디어 관련 태그</h2>
<h3>1) 오디오 개체를 위한 audio 태그</h3>
<h3>2) 비디오 개체를 위한 video 태그</h3>
<h2>찾아보기</h2>

이제 머리말을 넣을 수 있게 되었으니 본문을 넣어봐야겠죠. 단문의 경우에는 HTML 문서 내에 <body> 태그 안에 그냥 텍스트를 집어넣어도 무방하지만, 여러 개의 문장이라면 문단으로 감싸서 집어넣는 것이 스타일 입힐 때도 효율적이고, 관리하기도 쉽습니다.

<p> 태그의 p는 문단을 의미하는 Paragraph의 약자입니다. 또한 본 태그는 시작과 끝을 표시하여 영역을 지정해 줘야 하는 태그에 해당됩니다. 사용 방법은 아래와 같습니다.

<p>
시맨틱 마크업이란 웹 접근성 향상 및 검색 엔진이 페이지 구조를 분석할 때 본문과 부가적인 요소를
효율적으로 찾을 수 있도록 마크업 하는 방법을 이야기한다. HTML5에서 시맨틱 마크업을 위해
추가된 태그로는 헤더 영역임을 표시하는 header, 메뉴와 같은 내비게이션 영역임을 표시하는 nav,
사이드 바나 광고와 같이 본문의 내용이 아닌 부가적인 요소들의 영역임을 표시하는 aside,
본문 영역임을 표시하는 article, 마지막으로 푸터 영역을 표시해 주는 footer 태그가 있다.
</p>

자, 이제 응용을 해 볼 시간입니다. 아래 상자 안에 있는 글을 <h?> 태그와 <p> 태그를 이용하여 적절하게 마크업 해 보신 뒤에 아래에 있는 정답과 비교해 보세요. h 뒤에 들어갈 숫자는 아래 글의 들여쓰기와 머리글의 크기에 따라 1~3의 범위 내에서 사용해서 마크업 하시면 됩니다.

태양계

태양계(太陽系, 영어: Solar System)는 대략 46억 년 전 거대 분자 구름의 중력 붕괴로 형성된 태양과, 태양과 함께 태어나 태양의 중력에 붙잡혀 있는 주변 천체가 이루는 체계를 말한다. 소행성대를 기준으로 안쪽에 있는 네 개의 작은 행성 수성, 금성, 지구, 화성, 즉 지구형 행성은 주로 암석과 금속으로 구성되어 있고, 바깥쪽에 있는 네 개의 큰 행성 목성, 토성, 천왕성, 해왕성, 즉 거대 가스 행성은 대량의 수소와 헬륨으로 구성되어 있으며, 지구형 행성보다 훨씬 무겁다.

태양계의 발견과 탐험

수천 년 동안 인류는 (몇몇 주목할 만한 예외가 있지만) 태양계의 존재를 인식하지 못하였다. 그들은 지구가 우주의 중심에 있고 움직이지 않으며, 하늘에서 움직이는 다른 천체와는 절대적으로 다른 존재라고 믿었다. 인도의 수학자이자 천문학자인 아리아바타와 고대 그리스의 철학자 사모스의 아리스타르코스가 태양 중심의 우주론을 추측하기도 했지만, 태양중심설을 최초로 수학적으로 예측한 사람은 니콜라우스 코페르니쿠스다. 17세기에는 그 계승자 요하네스 케플러, 갈릴레오 갈릴레이, 아이작 뉴턴이 물리학에 대한 이해로 지구가 태양 주위를 움직이고, 행성은 지구를 제어하는 힘과 같은 힘으로 제어된다는 생각을 수용하였다. 좀 더 최근에는, 망원경 기술이 발달하고 무인 우주선을 사용할 수 있게 됨으로써, 다른 행성의 산맥이나 크레이터 등과 같은 지질학적 현상과 구름, 모래폭풍, 만년설 같은 기상학적 현상을 조사할 수 있게 되었다.

내행성계

태양계의 안쪽인 내행성계는 지구형 행성과 수많은 소행성으로 구성되어 있다. 이들은 대부분 규산염과 금속으로 구성되어 있으며, 태양에 매우 근접해 있다. 안쪽 태양계 전체의 반지름은 목성과 토성 사이의 거리보다도 짧다.

지구형 행성

네 개의 지구형 행성은 암석으로 조밀하게 구성되어 있으며, 위성이 적거나 없고 고리도 없다. 이러한 행성을 구성하는 광물은 대부분 높은 녹는점을 가지고 있는데, 그 예로 지각과 맨틀을 구성하는 규산염, 핵을 구성하는 철, 니켈과 같은 금속이 있다. 지구형 행성 중 금성, 지구, 화성은 대기와 충돌 크레이터, 열곡, 지구대, 화산과 같은 구조 지질학적인 표면의 특징을 가지고 있다. “지구형 행성”이라는 용어는 “내행성”이라는 용어와 헷갈리면 안 된다. 내행성은 지구와 태양 사이에 있는 행성, 즉 수성과 금성을 가리킨다.

외행성계

태양계의 바깥쪽 지대는 거대한 가스 행성과 행성급 덩치를 지닌 위성이 존재하는 곳이다. 센타우루스 족을 포함한 많은 단주기 혜성도 이 지역에 공전궤도를 형성하고 있다. 이들은 태양에서 매우 멀리 떨어져 있기 때문에, 물을 비롯한 암모니아, 메탄 등의 휘발성 물질이 천체에서 차지하는 비중이 지구형 행성에 비해 크다. 그 이유는 낮은 온도에서 이들 휘발성 물질은 고체 상태로 존재할 수 있기 때문이다.

목성형 행성

태양계의 바깥쪽을 도는 네 개의 거대한 행성은 보통 목성형 행성, 가스 행성, 외행성이라는 이름으로 불린다. 이들의 질량은 태양을 도는 8개 행성의 99퍼센트를 차지하며, 암석 행성에 비해 무거워 지구질량의 14 ~ 318배 정도이다. 그러나 밀도는 상대적으로 낮아 암석 행성의 20퍼센트 수준이다. 목성과 토성은 대부분 수소와 헬륨으로 이루어져 있다. 이들 네 행성은 모두 고리를 갖고 있으나, 토성을 제외한 나머지는 지구에서 고리를 관측하기가 쉽지 않다.

예제 텍스트 : 태양계 - 위키백과 (http://ko.wikipedia.org/wiki/태양계), CC-SA 라이센스에 따른 사용 허가

저작자표시 비영리 변경금지

HTML 기초 (3) - 기본 태그 (Head 태그에 들어가는 태그)

HTML/CSS2014. 3. 4. 02:20

뷰어
댓글로
이전글
다음글

안녕하세요. 이번 글에서는 저번에 예고드린 대로 <head> 태그 내부에 들어가는 태그들에 대해 알아보도록 하겠습니다.

오늘은 글을 2개를 올렸는데, 이전 포스트에서 <head> 태그 내부 요소를 설명한다고 해놓고서는 제가 잊어버리고 <h?> 태그와 <p> 태그를 설명하는 글을 먼저 써버려서 뒤늦게서야 본 포스트를 쓰게 되었습니다. (글 순서는 올바르게 바꿔 놨습니다.)

<head> 태그 내에는 크게 아래의 5가지 태그들이 들어가게 되는데요, 이 태그들은 원칙적으로는 반드시 <head> 태그 내에 위치해야 합니다. 다만 <script> 태그의 경우에는 최근에 <head> 태그가 아닌 <body> 태그 바깥에 위치하기도 합니다. 자세한 사항은 <script> 태그를 설명하면서 같이 설명하도록 하겠습니다.

1. <title> 태그

<title> 태그는 말 그대로 문서의 제목에 관련된 태그입니다. <title> 태그 내에 입력된 텍스트는 HTML 문서를 웹 브라우저에서 열었을 때 웹 브라우저의 제목 표시줄이나 탭의 제목으로 표시됩니다.

과거에는 웹 사이트의 제목만을 넣어 두는 것이 일반적이었으나, 웹 접근성 향상을 위해 title 태그 내에 웹 사이트의 제목 뿐만 아니라 페이지의 제목도 넣어주는 것이 최근의 추세입니다. 예를 들어 'Project Crestia' 라고만 쓰는 것 보다는 '블로그 소개 | Project Crestia'와 같이 쓰면 현재 페이지의 제목과 웹 사이트의 제목을 둘 다 표시함으로서 사용자가 정확히 어느 웹 사이트의 어느 페이지에 있는 지 명확히 알 수 있게 됩니다. 또한 서브 메뉴의 경로를 표시 (예를 들자면 '블로그 소개 > 저작권 | Project Crestia' 와 같이)하는 방법도 많이 쓰이고 있습니다. 이 태그는 시작과 끝을 표시해야 하는 태그입니다.

예) <title>Project Crestia - 블로그 소개</title>

2. <meta> 태그

<meta> 태그는 HTML 문서에 대한 메타 데이터를 입력하는 태그입니다. meta 태그의 용도는 매우 다양합니다.

첫째로, 메타 데이터들을 입력함으로서 검색 엔진의 봇 (Bot)이 페이지를 크롤링 (Crawling - 긁어 오는 작업)할 때 해당 페이지를 누가 작성하였고, 어떤 정보들이 있으며, 이 정보들에 대한 검색어 (Keyword)는 무엇인지 등에 대해 봇에게 알려주는 역할을 하게 됩니다.

그리고 웹 브라우저가 페이지를 열 때 HTML 문서의 인코딩 (Encoding)이 무엇인지에 대해 알려줄 수 있으며, Internet Explorer의 경우에는 페이지를 표시할 때 사용할 렌더링 엔진을 지시해 줄 때 사용할 수도 있습니다. 그리고 모바일 웹 브라우저에게는 화면의 기본 크기를 알려줄 때도 <meta> 태그를 사용합니다.

마지막으로, http 헤더에 속성 값을 넣어 웹 브라우저에 전달하는 역할도 합니다. HTML 4.x 및 XHTML 1.x에서 인코딩을 정의하는 방법이 이 방법을 사용하며, 기본 스타일 시트 정의 및 페이지 새로 고침 시간을 정의하는 데에도 사용합니다. 그 외에도 여러 가지 표준 및 비표준 속성들이 존재합니다만, 분량이 많기 때문에 사용 빈도가 높은 것들만 추렸습니다. 아, 참고로 이 태그는 단독 사용 태그입니다.

1) 페이지 작성자 : <meta> 태그에 name="author", content="작성자명" 속성을 사용합니다.

예) <meta name="author" content="Crestia">

* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.

2) 페이지 검색어 : <meta> 태그에 name="keywords", content="검색어1, 검색어2, ..." 속성을 사용합니다.

예) <meta name="keywords" content="HTML 튜토리얼, CSS 스니펫, 개발 팁">

* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.

3) 페이지 설명 : <meta> 태그에 name="description", content="간단한 설명" 속성을 사용합니다.

예) <meta name="author" content="Project Crestia의 블로그">

4) 인코딩 정보 : HTML5에서는 <meta> 태그에 charset="인코딩 셋" 속성을 사용하며, HTML 4.x나 XHTML 1.x는

http-equiv="Content-Type", content="text/html;charset=인코딩 셋" 속성을 사용합니다.

예) HTML5 : <meta charset="UTF-8">

HTML 4.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8">

XHTML 1.x : <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

* 주로 사용 되는 한국어 인코딩 셋 : UTF-8 (유니코드), EUC-KR (확장완성형)

* 주의 : 한 HTML 문서 내부에 여러 개의 인코딩이 들어갈 수 없음

5) 렌더링 엔진 지정 : <meta> 태그에 http-equiv="x-ua-compatible" content="IE=버전" 속성을 사용합니다.

예) Internet Explorer : <meta http-equiv="x-ua-compatible" content="IE=edge">

* 버전 속성

* edge : 항상 최신 버전의 렌더링 엔진으로 표시

* 9 : 9.0 렌더링 엔진

* 8 : 8.0 렌더링 엔진

* 7 : 7.0 렌더링 엔진

* 6 : 6.0 렌더링 엔진 (쿼크 모드)

6) 모바일 기기 화면 설정 : <meta> 태그에 name="viewport" content="설정 내용" 속성을 사용합니다.

예) <meta name="viewport" content="width=device-width, initial-scale=1.0">

* 설정 내용 항목

* width : 페이지의 너비. 일반적으로 device-width (기기 화면 너비)로 사용함.

* initial-scale : 페이지를 불러왔을 때 초기 화면의 크기. initial-scale=1.0로 해 놓으면 100%.

* maximum-scale : 최대 화면 크기. maximum-scale=1로 해놓으면 100%가 최대값.

* user-scalable : 사용자 줌 가능 여부 설정. user-scalable=no로 설정하면 페이지 줌 불가능

* 여러 개의 항목을 넣어 쓸 수 있으며, 항목은 ','로 구분.

7) 페이지 새로 고침 간격 지정 : <meta> 태그에 http-equiv="Content-Type" content="초" 속성을 사용합니다.

예) <meta http-equiv="refresh" content="20">

3. <link> 태그

<link> 태그는 HTML 문서와 외부 파일을 연결해 주는 징검다리 같은 역할을 하는 태그입니다. 주로 외부 스타일시트 파일을 연결할 때 많이 사용합니다. 물론 <meta> 태그처럼 여러가지 용법이 있지만, 처음 시작하는 단계에서는 스타일시트 연결 방법 하나만 아셔도 충분합니다.

스타일시트를 연결할 때는 아래의 예와 같이 rel="stylesheet", href="파일 경로" 속성을 사용합니다. 추가적으로 HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/css" 속성도 같이 사용하는 것을 권장하고 있습니다. 여기에 추가적으로 media 속성을 지정해서 각각의 스타일시트별 장치 (화면, 프린터, 스크린 리더 등)를 지정해 줄 수도 있습니다. 단독 사용 태그입니다.

예) 일반적인 사용법

HTML5 : <link rel="stylesheet" href="css/style.css">

HTML 4.x : <link rel="stylesheet" type="text/css" href="css/style.css">

XHTML 1.x : <link rel="stylesheet" type="text/css" href="css/style.css" />

예) 장치 별 별도 지정 (HTML5 기준, 화면용 CSS와 인쇄용 CSS를 별도로 지정할 때)

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/print.css" media="print">

4. <style> 태그

위에서 설명한 <link> 태그를 사용해서 스타일시트를 불러오지 않고, 문서 내에 직접 CSS를 마크업하여 스타일을 정의하는 태그입니다. HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/css" 속성도 같이 사용하는 것을 권장하고 있습니다. 여기에 위의 <link> 태그와 같이 추가적으로 media 속성을 지정해서 각각의 스타일시트별 장치 (화면, 프린터, 스크린 리더 등)를 지정해 줄 수도 있습니다. 사용 방법은 아래와 같으며, 저의 경우에는 HTML과 CSS 파일을 오가며 작업하기 귀찮을 때 <style> 태그에서 CSS를 작성해서 테스트 및 속성 변경 작업을 한 뒤 작업이 완료되면 별도의 CSS 파일로 옮기는 식으로 사용하고 있으며, 너무 짧아서 굳이 CSS 파일을 만들 필요가 없을 때에도 사용합니다. 시작과 끝을 지정해야 하는 태그입니다.

예)

<style>

body {

background-color: #000;

color: #ccc;

font-family: 'Helvetica Neue', Tahoma, sans-serif;

font-size: 1 em;

}

</style>

5. <script> 태그

드디어 마지막입니다. <script> 태그에는 JavaScript나 VBScript와 같은 웹 브라우저에서 돌아가는 스크립트 언어의 코드가 들어가게 됩니다. 또한 src 속성을 사용해서 외부 스크립트 파일을 연결하는 데에도 사용할 수 있습니다. 추가적으로 HTML 4.x 또는 XHTML 1.x는 파일의 형식을 알려주는 type="text/스크립트명" 속성도 같이 사용하는 것을 권장하고 있습니다. 시작과 끝을 지정해야 하는 태그이며, 이는 외부 스크립트 파일을 불러올 때에도 마찬가지로 시작과 끝을 지정해야 합니다. (아래의 예제 참고)

예) 스크립트 직접 입력 (HTML 5 기준)

<script>

function showAlert() {

alert('테스트 경고 상자입니다.');

}

</script>

예) 외부 스크립트 파일 연결

HTML5 : <script src="http://code.jquery.org/jquery-lastest.js"></script>

HTML 4.x, XHTML 1.x : <script src="http://code.jquery.org/jquery-lastest.js" type="text/javascript"></script>

참고로 <script> 태그에 대해 약간의 설명을 더 드리자면, 요즈음 제작되는 웹 사이트들은 역동적인 페이지 제작, 사용자 편의성 증대 등을 위해 많은 분량의 JavaScript을 사용하는데, 대량의 스크립트를 <head> 태그 내에 위치시키게 되면 브라우저가 스크립트를 모두 읽어 들일 때까지 페이지 본문이 표시되지 않거나, 페이지 로드 속도가 심각하게 느려지는 문제가 있습니다.

따라서 최근에는 대량의 스크립트 이용 시 <head> 태그 내에는 반드시 웹 페이지 로드 시 또는 로드 완료 직후 바로 실행되어야 할 필수적인 스크립트만 넣고, 페이지 로드 완료 이후에 실행될 스크립트들은 <body> 태그 뒤쪽으로 빼서 사용하는 편입니다. (본 블로그도 로딩 속도 향상을 위해 SyntaxHighlighter 같은 스크립트들은 문서 맨 뒤쪽에 위치하고 있습니다.) 또한 로드 속도를 향상시키기 위해서 minify (전체 코드를 한 줄로 연결해서 로드 속도 향상 및 용량 감소)나 gzip 압축 (용량 감소)을 하기도 합니다.

여기까지 오시느라 매우 수고하셨습니다! 다음 포스트에서는 머리말 태그인 <h?>과 문단 태그인 <p>에 대해서 알아보도록 하겠습니다.

저작자표시 비영리 변경금지

HTML 기초 (2) - HTML 문서 기본 구조

HTML/CSS2014. 2. 27. 10:21

뷰어
댓글로
이전글
다음글

저번 포스트에서는 재미 없는 소리만 주구장창 늘어놨는데요, 이번 포스트부터 본격적으로 HTML 문서의 구조에 대해서 설명을 드리고자 합니다. 앞으로의 포스팅 방향을 대략 말씀드리자면 기본적인 부분들은 모두 HTML5 기준으로 설명하고, 참고용으로 XHTML 1.0의 요소들을 설명하는 식으로 진행될 예정입니다.

HTML 문서의 구조는 일반적으로 아래와 같은 구조를 가지고 있습니다. (HTML5 기준)

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

자, 일단은 맨 위쪽 줄 부터 보도록 하죠. 맨 위쪽 줄에는 이 문서의 HTML 버전 및 문서의 종류를 웹 브라우저에게 알려주기 위한 문서 형식 정의 (DTD; Document Type Definition. ~~모 야구팀의 별칭이 아닙니다.~~)이 맨 처음에 들어가 있습니다. 주요 DTD는 아래와 같으며, 위의 구조 예제에서는 제일 간단한 HTML5의 DTD가 사용되었습니다.

HTML 4.01 Strict^[각주:1] : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Trasitional^[각주:2] : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset^[각주:3] : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Trasitional : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5 : <!DOCTYPE html>

DTD가 문서에서 빠져 있으면 Internet Explorer의 경우에는 쿼크 모드 (Quark Mode - IE 5.5 ~ 6 렌더링 모드)로 표시해 버리는 경우가 있으므로 XHTML이나 HTML5 형식을 사용하기 위해서는 반드시 DTD를 선언해 주어야 합니다. 참고로 IE는 DTD를 선언해도 XHTML이나 HTML5 문서를 쿼크 모드로 표시하는 경우가 있으므로 추가적으로 <meta> 태그에 http-equiv="x-ua-compatible" content="IE=edge" 속성을 추가해줘야 합니다.

그리고 DTD 뒤에는 브라우저에게 '이 문서는 HTML으로 마크업 되어 있다' 라는 것을 알려주기 위한 <html> 태그로 시작하게 됩니다. 바로 이 html 태그 안쪽으로 다른 태그들이 들어가서 제 역할을 수행하게 됩니다.

html 태그 뒤에는 <head> 태그가 보입니다. head 태그에는 문서를 웹 브라우저가 읽어들일 때 우선적으로 처리해야 하는 사항들이 들어가게 됩니다. head 태그 내에는 일반적으로 <title>, <meta>, <link>, <script>, <style> 태그가 위치하게 됩니다. 일단은 간단히 구조를 살펴보는 것이니 해당 태그들에 대한 설명은 다음 포스트에서 하도록 하겠습니다.

head 태그 뒤쪽으로는 <body> 태그가 보입니다. body 태그에 바로 문서의 본문 내용들이 들어가게 됩니다. 앞으로 대부분의 작업은 바로 body 태그 내에서 하게 될 것입니다.

그리고 저번 포스트에서도 설명드렸듯이, <img>, <br>, <hr>같이 단독 사용 태그가 아닌 태그의 영역은 반드시 끝나는 지점을 명시해야 합니다. 위 코드에서 보시면 아시겠지만, 태그 이름 앞에 '/'이 들어간 태그들이 바로 태그 끝맺음의 표시입니다.

비표준 태그 미 허용 [본문으로]
비표준 태그도 허용 [본문으로]
프레임셋 문서 [본문으로]

저작자표시 비영리 변경금지

HTML 기초 (1) - 간략한 역사 / 태그란?

HTML/CSS2014. 2. 25. 21:40

뷰어
댓글로
이전글
다음글

1. 간략한 역사

HTML은 프로그래밍 언어가 아닌 마크업 언어로서 Hypertext Markup Language의 약자입니다. HTML의 최초 등장 시기는 WWW (World Wide Web) 서비스와 맞물려 1991년으로 거슬러 올라갑니다. 최초의 규격은 1993년에 공식적으로 발표되었으며, 현재 HTML 규격 표준안 제정은 W3C (World Wide Web Consotium)에서 담당하고 있으며, HTML은 W3C의 각 버전 별 표준에 따라 마크업하게 되어 있습니다. (물론 강제는 아닙니다.)

HTML의 간략한 버전 별 역사는 아래와 같습니다.

HTML 1.0 - 1991년 10월
HTML 2.0 - 1995년 11월
HTML 3.2 - 1997년 1월
HTML 4.0 - 1997년 12월
HTML 4.01 - 1999년 12월
HTML5 - 2008년 1월, 2014년 10월 현재 권고안 (Recommendation) 확정

저는 HTML 3.2로 HTML을 시작했습니다 (마크업은 메모장으로 했었죠). 제가 HTML을 시작하던 때에는 우후죽순격으로 웹 사이트들이 생겨났고 수많은 웹 에디터들과 관련 서적들이 봇물처럼 쏟아져 나오기 시작하던 시절입니다. 당시 주종을 이루었던 브라우저는 Netscape 4.x와 Internet Explorer 2.0 또는 3.x였습니다. 국내 사이트들은 초기에는 Netscape에 맞추어 제작이 되다가, Internet Explorer가 등장하기 시작한 이후로는 "이 사이트는 Internet Explorer에 최적화 되어 있습니다." 라는 명문(?)을 달면서 IE 위주의 사이트들로 변모해 가게 됩니다. ~~그리고 그 다음은 Active X...~~

HTML 3.2 시절에는 대문자로 태그를 표기하는 것이 일반적이었고, 특정 브라우저에서만 동작하는 태그 (예를 들어 blank 라던가)들의 사용도 매우 잦았었습니다. 또한 마크업 언어와 스타일링 언어의 구분이 없었기 때문에 HTML의 속성 (Attribute)에 직접 스타일을 할당하는 구조였습니다. 일단 3.2 스타일의 코드를 살펴보도록 하겠습니다. (참고로 하위호환 덕택에 현대의 브라우저에서도 여전히 잘 실행됩니다.)

지금 보면 참 난잡한 코드임에는 틀림 없습니다. 이러한 문제로 인해 HTML 본래의 목적인 마크업 언어로서의 정체성을 살리기 위한 HTML 4.0과 4.01의 등장 이후에는 별도의 스타일링 언어인 CSS (Cascading Style Sheet)의 사용이 늘어남에 따라 위와 같은 번잡한 코드들은 많이 사라졌습니다. 그리고 현재는 많은 사이트들이 차기 표준안인 HTML5에 따라 만들어지고 있으며, 저 또한 모든 HTML 예제를 HTML5에 맞게 올리고 있습니다. 물론 스타일링은 별도의 CSS 또는 style 태그 내에 CSS를 넣어 올리고 있습니다.

현재의 화두인 HTML5는 2014년 10월 말에 권고안이 확정되었습니다. 하지만 아직 IE의 경우에는 HTML5의 일부 속성 (예를 들어 input 태그의 데이터 형식 속성들 중 일부를 지원하지 않음)을 여전히 지원하지 않고 있어서 이후에도 약간의 진통이 예상되기는 합니다.

이상으로 간략하게 HTML 역사와 특징을 살펴 보았고, 이제 본론으로 들어가도록 하겠습니다.

2. 태그란?

HTML의 기본 구조의 핵심은 바로 '태그'입니다. 소스 보기를 해 보시면 아시겠지만, 본 블로그 또한 HTML 문서이기 때문에 수 십개의 HTML 태그들로 이루어져 있습니다.

태그는 해당 영역이 어떤 역할을 해야 하는지 웹 브라우저의 렌더링 엔진에 알려주는 역할을 하게 됩니다. 예를 들어 p 태그로 감싸진 문장이 있다면, 웹 브라우저에서는 해당 문장 영역을 문단 (Paragraph)로 인식하게 되는 거죠. 태그가 없으면 브라우저는 해당 영역이 어떤 역할을 해야할 지 몰라서 그냥 텍스트로 표현해 주게 됩니다.

태그는 해당 태그가 어떤 역할을 하는 지 알려주는 태그명이 '<'와 '>' 사이에 들어가게 됩니다. 이와 같은 구분자를 통해 웹 브라우저는 컨텐츠와 태그를 분리하여 인식하게 됩니다. 태그명은 모두 영어 단어로 되어 있으며, 직관적인 단어 또는 축약어로 되어 있습니다.

태그는 보통 아래와 같이 분류됩니다.

단독 사용형 : img, hr, br 등
시작 - 끝 태그 영역 지정형 : html, body, head, title, div, p, h1~h5 등 대부분의 태그가 이에 해당

단독 사용형 태그들은 시작과 끝 태그가 없이 단일한 태그 표현 하나로 끝이 납니다. HTML의 경우에는 '/' 을 이용해서 끝을 맺어 줄 필요가 없지만, XHTML의 경우에는 XML 문법에 따라 단독 사용형 태그 또한 '/' 을 이용해서 끝을 맺어 줘야 합니다.

HTML 태그의 대부분을 차지하고 있는 시작 - 끝 태그 영역 지정형은 반드시 시작과 끝이 명시되어 있어야 합니다. 시작은 <태그명>으로 시작하고, 끝을 맺을 때는 태그명 앞에 '/'을 붙여 "이 태그는 여기까지!" 라는 것을 표현해 주어야 합니다. 요새는 끝을 제대로 맺어 놓지 않을 경우에도 웹 브라우저가 일부 태그는 자동으로 교정하여 해결해 주긴 합니다만, 자동 교정이 되지 않을 경우에는 페이지 모양이 깨지는 불상사가 일어나게 되므로 반드시 빼먹지 말고 넣어야 합니다.

다음에는 간단한 HTML 문서를 예제로 기본 구조에 대해 알아보도록 하겠습니다.

업데이트

* 2014년 10월 28일 HTML5 권고안 발표