다음 우편번호 서비스
오랜만에 포스팅을 남기게 되네요. 이번 포스팅 주제는 다음 우편번호 서비스입니다.
올해 본격적으로 도로명주소가 도입되면서 기존의 주소 검색 시스템 또한 개편되어야 할 필요성이 생겼지만, 순수 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에서 도로명주소와 구 지번 주소가 동시에 표출되는 방식으로 변경되었습니다.
Good bye, Windows XP!
Windows XP가 등장한 지도 어느 새 13년을 헤아려 가네요. Microsoft의 가정용 운영체제 중에 이렇게나 오래 장수한 운영체제는 처음 봅니다. 어쨌든 유구한 역사를 자랑하는 Windows XP는 2014년 4월 8일, 바로 오늘부터 기술 지원이 종료됩니다.
XP의 기술 지원 중단에 맞추어 드디어 기존 XP 사용자들이 새로운 운영체제로 넘어갈 시기가 되었습니다만, 매번 그렇듯이 (...) Windows 업그레이드에 저항하는 사용자들이 있기 마련이죠. 과거 MS-DOS/3.1에서 95로 넘어갈 때도 그랬고, 98/ME에서 XP로 넘어갈 때도 그랬었습니다. 마찬가지로 Vista에서 7로, 7에서 8로 넘어갈 때도 저항이 있었습니다.
하지만 이전 버전들과 다르게 XP는 오랜 기간 동안 많은 수가 사용되었던 (그리고 지금도 여전히 많은 곳에서 돌아가고 있죠...) 관계로 다른 버전들과는 다르게 저항세력(?)이 매우 두터운 양상을 보이고 있습니다. 물론 XP가 2001년 당시 기준으로는 잘 만들어진 운영체제이긴 합니다만, 벌써 나온지 13년이나 된 구 세대의 유물이 되어렸으니 이젠 놓아줄 때도 되지 않았나 싶습니다.
자, 그럼 XP를 왜 더 이상 사용하면 안 되는지와 기술 지원 중단에 대한 사항들에 대해서 알아보도록 하죠.
1. 더 이상 XP를 사용하면 안 되는 이유들
1) 최신 기술 지원 부족
XP는 듀얼 코어 이상의 CPU를 효율적으로 사용할 수 없으며, 32비트 버전의 경우에는 3.23GB 이상의 RAM을 인식하지 못합니다. 또한 2TB 이상의 하드디스크도 바로 인식하지 못하며 (제조사에서 지원하는 별도의 유틸리티 필요), USB 3.0 포트 또한 드라이버가 지원되지 않아 XP에서 제대로 사용할 수 없습니다 (USB 2.0으로 포트 사용은 가능). 거기에 빠른 부팅을 위한 UEFI 및 GPT 디스크, Direct X 9.0 이상에서 돌아가는 게임이나 Frostbite 3 엔진 기반의 게임들 또한 XP를 지원하지 않습니다. 아, 보안성을 위한 BitLocker도 XP에서는 디스크 읽기만 가능하며, 그 마저도 추가로 BitLocker To Go를 설치해야 합니다.
그리고 기술 지원 중단 이후에는 향후 3~5년 내에 각종 최신 하드웨어의 드라이버들 또한 더 이상 XP를 지원하지 않게 될 것입니다. 이미 일부 메인보드 쪽에서는 XP 드라이버가 포함되지 않은 제품들이 출시되고 있는 상황입니다. 거기에 기존 하드웨어 드라이버들도 과거 9x 지원 중단처럼 향후 3~5년 내 업데이트 중단 가능성이 높습니다.
2) 보안 업데이트 제공 중단 및 관리자 계정 문제
보안 업데이트 제공 중단으로 인한 가장 큰 문제는 NT 계열 커널의 공통적인 취약점이 발견될 경우입니다. 예를 들어 최근 발견되어 보안 업데이트가 제공된 "Microsoft DirectShow의 취약점으로 인한 원격 코드 실행 문제점" (MS14-013)의 경우에는 13년 전 출시된 XP부터 최근 출시된 8.1까지 공통적으로 해당 취약점을 가지고 있습니다. 다행히도 해당 문제는 XP 기술 지원 기간 내에 발견되어 (2014년 3월) XP에도 보안 업데이트가 제공되었으나, 향후 이와 유사한 취약점이 발견될 경우에 XP는 더 이상 보안 업데이트를 받을 수 없어 이러한 취약점에 그대로 노출되게 됩니다. 이는 안티바이러스 프로그램 (백신) 사용만으로는 커버할 수 없는 부분입니다.
또한 XP에는 관리자 권한에 구조적인 문제가 있는데, 관리자 권한 사용에 대해 사용자의 확인을 거치는 Windows Vista, 7 이나 8의 UAC (User Account Control)와 같은 대비책이 없습니다. (UAC 귀찮다고 꺼놓고 쓰는 경우가 많은데, 보안 위협에 취약해지니 켜시는 것을 추천함) 이러한 대비책이 없기 때문에 멀웨어는 쉽게 관리자 권한을 획득하여 시스템을 감염시킬 수 있습니다. 예를 들어 멀웨어를 다운로드 받은 것을 알고 지우려 하다가 실수로 실행시켰을 때 UAC가 켜져 있다면 시스템 관리자 권한으로 실행할 것인지 한 번 더 물어보기 때문에 실행을 방지할 수 있지만, UAC를 꺼놓은 상태에서는 바로 관리자 권한으로 실행되어 버리기 때문에 멀웨어에 쉽게 감염되게 됩니다.
참고로 Mac OS나 Linux의 경우, 시스템 관리자 권한 (root)이 필요한 작업을 실행하는 경우 항상 사용자 계정의 비밀번호 입력을 요구합니다. XP와는 다르게 일반적으로 *nix 계열 운영체제에서는 시스템 관리자 권한이 필요할 때 일시적으로 이를 획득하여 (sudo 명령어 사용. 귀찮으면 sudo su로 root 전환 후 작업한 뒤 logout) 작업하며, 만일 계정 비밀번호가 입력되지 않거나 틀리게 되면 시스템에 중요한 영향을 미칠 수 있는 관리자 권한으로 실행되는 작업은 실행되지 않습니다.
* 덧 : 한국인터넷진흥원 (KISA)에서 차후 보안 결함 발견 시 보호나라를 통해 XP 전용 백신을 배포할 계획인 듯 합니다. 또한 국산 안티바이러스 프로그램 중 하나인 바이로봇의 제작사 하우리에서 공개한 바이로봇 APT Shield 2.0이 배포되고 있습니다. 이 프로그램은 개인 사용자에게 무료 제공되며, 취약점 공격 사전 차단 솔루션이라고 합니다. 단, 이러한 프로그램들은 XP를 노린 취약점 공격을 사전 예방해 줄 수는 있지만, 근본적으로 취약점을 해결해 주지는 못합니다.
3) 웹 개발자를 힘들게 한다
저같은 웹 개발자들의 측면에서 볼 때 XP는 불구대천의 원수와 같은 존재입니다. XP 사용자들은 대부분이 여전히 IE 6이나 7에 머물러 있는 경우가 많고, 최신 업데이트를 했다고 해도 8에 머물러 있습니다 (IE 9부터는 XP 미지원). 국내에 아직도 XP를 사용하는 분들이 좀 계시는 관계로 웹 페이지를 제작할 때에도 IE 6 / 7 / 8을 모두 고려해서 만들어야 하는데 (참고로 본 블로그는 기초가 되는 Bootstrap 3에서 IE 8부터 지원하기 때문에 IE 8 이하 버전에서는 깨집니다.), 이 작업은 결코 쉽지 않습니다.
IE 구 버전들의 가장 큰 문제는 CSS 렌더링 문제입니다. 게다가 각 버전별로 렌더링 문제 대처 방법이 달라서 개발에 오랜 시간이 걸리며, 일일이 버전별로 테스트를 하는 데도 시간이 많이 소요됩니다. 게다가 구 버전의 IE까지 충족시키려다 보니 CSS3이나 HTML5 요소들의 적극적인 사용이 제한되게 됩니다 (IE 8.0 이하는 HTML5 구성요소를 지원하지 않음). 즉, IE 구 버전을 고려하는 경우 많은 웹 페이지들이 하향 평준화 될 수밖에 없다는 거죠. 물론 XP를 쓰면서 Google Chrome이나 Mozila Firefox를 쓰시는 분들은 문제가 되지 않습니다만, 다수의 XP 사용자들은 여전히 구 버전의 IE에 머물러 있기 때문에 웹 개발자들의 입장에서는 XP의 계속된 사용이 큰 문제라 볼 수 있습니다.
2. 기술 중단에 대해
1) 4월 8일 이후로는 XP를 더 이상 사용할 수 없는가?
x86 아키텍처의 종말이 오는 날까지 계속 사용하실 수 있습니다. 다만 보안 취약점 등의 문제는 이제 사용자가 스스로 책임져야 됩니다.
2) 기술 지원 1년 연장된다던데요?
안티바이러스 프로그램인 MSE (Microsoft Security Essential)의 기술 지원 및 업데이트만이 1년 연장되며, XP 운영체제 자체의 기술 지원 연장은 없습니다. 또한 Microsoft가 중국 정부의 공식 XP 기술 지원 연장 요청을 거절한 것으로 보아 기술 지원 중단 정책은 앞으로도 변화가 없을 것으로 보입니다.
3) XP에서만 돌아가는 프로그램들은 어떻게 해야 하는가?
제작사가 업데이트 또는 최신 버전을 제공하는 경우에는 프로그램을 최신 버전으로 업데이트하거나, 최신 버전의 라이센스를 취득하여 업그레이드 하셔야 합니다. 제작사가 업데이트 또는 최신 버전을 내놓지 않는 경우에는 VMware Player, VirtualBox와 같은 별도의 가상 머신 프로그램 상에서 구동하는 것을 추천합니다. (Microsoft에서 제공하는 XP 모드도 이번 기술 지원 종료 대상에 포함되어 있기 때문에 XP 모드는 추천하지 않습니다. 게다가 이쪽은 좀 제약이 많아서...)
추가적으로 VMware Player나 VirtualBox와 같은 가상 머신 프로그램에서는 USB 장치 연결 또한 지원하므로, 가상 머신에 USB 장치를 할당해서 연결한 뒤 가상 머신 상의 XP에서 해당 장치의 드라이버를 설치하면 장치를 사용할 수 있습니다. 다만, 일부 장치는 가상 머신 USB 장치 를 통한 사용에 제한이 있을 수도 있으니, 일단 정상 동작 여부 테스트를 해 보신 뒤에 OS 전환 및 XP 가상 머신 구축 작업을 하시는 것을 추천드립니다.
이것도 저것도 귀찮거나, 딱히 인터넷 연결이 필요치 않은 경우에는 인터넷에 연결되지 않은 상태로 사용하는 것이 안전합니다. 만일을 대비해서 USB 등의 장치는 항상 멀웨어 감염 여부를 확인한 뒤에 XP를 사용하는 PC에 연결하여야 하고, 자동 실행 기능을 꺼놓으시면 더 안전하게 사용하실 수 있습니다. 반대로 인터넷을 사용해야 한다면 근본적인 대책은 될 수 없으나, 위에 소개된 하우리의 바이로봇 APT Shield나, 차후 공개될 KISA의 XP 전용 백신 등을 사용하여 최대한 XP의 보안 취약점을 노리는 공격으로부터 PC를 보호하셔야 합니다.
4) 은행 ATM, 기업이나 산업체의 XP Embedded는 어떻게 해야 하는가?
제가 본 한 기사에서는 Embedded까지 같이 종료되는 것으로 잘못 나와 있었는데, 은행 ATM, 기업이나 산업체의 POS나 하드웨어에서 사용하는 Windows XP Embedded SP3의 경우에는 2016년까지, Embedded Standard 2009와 Embedded POSReady 2009의 경우는 2019년까지 기술 지원이 연장되므로, 아직까지는 시간적인 여유가 많은 편이라 볼 수 있습니다. [출처 - MSDN Windows Embedded 블로그 : What does the end of support of Windows XP mean for Windows Embedded?] 참고로 이쪽은 제품 지원 기간의 주기가 가정용에 비해 상대적으로 긴 편이라 1999년에 나온 Windows NT Embedded 4.0은 2014년 8월까지, 2000년에 나온 Windows 2000 Server for Embedded Systems와 WIndows CE 3.0의 경우에는 2015년까지(!) 기술 지원 대상 입니다. [출처 - Windows Embedded Product Lifecycles]
* 더 읽어보기
Microsoft Windows XP 지원 종료 공지 - 자주 묻는 질문
마지막으로 XP님의 신청곡 듣고 가겠습니다. Françoise Hardy가 부릅니다. Comment te dire adieu?
Microsoft Plus! for Windows 95
Microsoft Plus! for Windows 95는 Windows의 기능 향상을 위한 일종의 애드온 (Add-on) 성격의 프로그램입니다. Windows XP까지는 Plus! 팩이 나왔는데 XP 이후 버전의 Windows에서는 출시되지 않고 있습니다.
사실 Plus! 팩에 대해서는 많은 분들이 기억하고 계실 것입니다. 바로 '바탕화면 테마' 라는 인상적인 기능 덕분이죠. Windows 98 부터는 기본 내장되었지만, Windows 95에서는 별도로 설치해야 했던 항목입니다. 어릴 적에 Plus! 팩이 설치된 95를 보면 정말로 멋지다는 생각밖에 들지 않았던 기억이 납니다. 기본 Windows 바탕 화면과 아이콘에 비하면 신세계였죠.
여기서는 Microsoft Plus! for Windows 95 (이하 Plus!)의 설치 / 설정 그리고 추억의 바탕화면 테마들에 대해 다루도록 하겠습니다.
Plus! 팩 CD에서 Setup을 더블클릭하여 설치 프로그램을 실행합니다.
설치 프로그램이 실행됩니다. '계속'을 클릭하여 설치를 계속합니다.
이름 및 소속을 입력한 뒤 '확인'을 클릭합니다.
입력한 내용이 올바른지 확인하라고 합니다. 맞다면 '확인'을 클릭하여 계속하고, 다르다면 '변경'을 클릭하여 이름 및 소속에 입력된 내용를 변경합니다.
제품 번호를 입력하라는 대화상자가 뜹니다. 제품 번호를 입력하고 '확인'을 클릭합니다.
제품 번호 확인 메시지가 뜹니다. '확인'을 클릭하여 계속합니다.
설치된 구성 요소를 설치 프로그램이 자동으로 검색합니다.
Plus! 팩을 설치할 폴더를 지정할 수 있습니다. 여기서는 기본값인 C:\Program Files\Plus! 에 설치하겠습니다.
또 한번 설치된 구성 요소를 자동으로 검색합니다.
표준 설치 / 사용자 설치 중 하나를 선택하여 설치를 진행할 수 있습니다. 여기서는 '사용자 설치'를 진행하겠습니다.
Plus! 팩에 들어있는 구성요소들입니다. 여기서는 모두 설치하도록 하곘습니다.
시스템 유지/보수 작업 야간 실행 여부를 묻는 메시지가 뜹니다. Plus! 팩을 설치하면 시스템 에이전트가 설치되는데,
이 프로그램은 Windows 98에서는 작업 스케줄러라고 불리는 프로그램입니다. 야간에 컴퓨터를 사용하는 편이라면 '예'를
클릭하면 됩니다. 그렇지 않다면 '아니오'를 클릭하여 넘어가면 됩니다.
필요한 디스크 공간을 검사합니다.
설치가 시작됩니다. 핀볼의 데이터 파일이 보이네요.
시스템 파일을 자동으로 업데이트합니다.
바탕화면 테마를 바로 선택할 수 있도록 바탕화면 테마 창을 띄운다는 메시지가 뜹니다.
일단은 옛적에 제가 좋아했던 미스테리로 설정해 보겠습니다. 테마를 선택하고 '확인' 버튼을 클릭합니다.
테마가 바로 적용되었습니다. 색상이 좀 어둡네요.
설치를 완료하기 위해 Windows를 재시작해야 한다는 메시지가 뜹니다. 지시 사항대로 Windows를 재시작합니다.
시스템을 재시작 하면 위 화면과 같이 부팅 로고가 바뀝니다. 아래에 Microsoft Plus!가 추가됩니다.
그리고 부팅이 완료되면 다음과 같이 미스테리 테마로 바뀐 Windows를 보실 수 있습니다.
그리고 이랬던 시작 메뉴 아이콘이 (Plus! 설치 이전, 16색)
이렇게 미려한 256색의 아이콘으로 변경됩니다. 눈썰미 좋은 분들께서는 눈치채셨겠지만, 바탕 화면의 아이콘 (내 컴퓨터,
네트워크 환경)들도 256색으로 변경된 것을 볼 수 있습니다.
바탕화면 테마는 제어판에 있는 아이콘을 더블클릭하여 변경할 수 있습니다.
바탕 화면 테마를 실행하면 다음과 같은 창이 뜹니다. '화면 보호기'를 클릭하면 해당 테마의 화면 보호기를 미리 볼 수 있고,
'포인터, 소리, 화면'을 클릭하면 해당 테마의 포인터, 소리 및 아이콘을 미리 볼 수 있습니다.
포인터 미리 보기 창입니다.
소리 미리 듣기 창입니다.
그리고 마지막으로 아이콘 미리 보기 창입니다. 배경 무늬 비트맵은 파일이 커서 그런지 미리 보기가 안 뜹니다.
시스템 등록 정보를 보면 Microsoft Plus! for Windows 95라는 문구가 추가되면서 Windows 95의 제품 번호와 같이
Plus!의 제품 번호가 표시됩니다.
그리고 디스플레이 등록 정보에서는 Plus!의 옵션을 선택할 수 있게 됩니다. 기본 아이콘의 변경이 가능해지며, 큰 아이콘 사용, 마우스로 끄는 동안 창 내용 표시, 화면 글꼴의 가장자리 다듬기 (안티 앨리어싱 기능입니다.), 가능한 색을 모두 표시하여 아이콘 표시 (16색에서 256색으로 변경되는데, 이 것은 레지스트리를 변경하여 Plus! 팩 없이도 편법으로 가능했습니다.), 마지막으로 화면 늘이기 옵션이 제공됩니다.
간편하게 아이콘 변경이 가능합니다. Plus! 팩의 아이콘 팩 DLL 파일인 Cool.dll이 선택되어 있습니다.
참고로 원래 기본값은 Shell32.dll의 16색 아이콘들입니다.
자, 그럼 이제 테마들을 하나 하나 감상해 보면서 추억을 되살려 보는 시간을 가져 보도록 하죠.
바탕 화면들은 지금 봐도 멋진 것들이 좀 있습니다.
과학
동물의 세계
레오나르도 다 빈치
미스테리
산업 혁명
스포츠
여행
자연
컴퓨터 내부 구조
평화를 향한 외침
Windows 95
Windows 세상
Plus! Windows 시작 및 종료음 모음
HTML5 input 태그의 특정 형식
안녕하세요, 오늘은 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)
CSS-Tricks - WebKit HTML5 Search Inputs
업데이트
* 2014년 10월 28일자로 HTML5 표준 권고안이 발표되어 이에 따라 삭제된 형식들에 취소선 적용
HTML 기초 (5) - 텍스트 차원 시맨틱 태그
안녕하세요, 오늘은 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>
예제 미리보기)
자세한 사항은 본문 각주2를 참고하세요.
16. <sup>
<sup> 태그는 위 첨자 (Superscript)를 표현할 때 사용하는 태그입니다. 이 태그는 시작과 끝이 있는 태그입니다.
코드 예제)
<p>상대성 이론의 공식은 E=mc<sup>2</sup>이다.</p>
예제 미리보기)
상대성 이론의 공식은 E=mc2 이다.
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를 제외한 웹 브라우저에서 이 창을 줄여보세요. "now
참고자료
- W3C HTML5 Candidate Recommendation (Feb. 14. 2014)
HTML 기초 (4) - 기본 태그 (머리말, 문단)
안녕하세요, 오늘은 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 태그에 들어가는 태그)
안녕하세요. 이번 글에서는 저번에 예고드린 대로 <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 문서의 구조에 대해서 설명을 드리고자 합니다. 앞으로의 포스팅 방향을 대략 말씀드리자면 기본적인 부분들은 모두 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 Strict1 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Trasitional2 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset3 : <!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) - 간략한 역사 / 태그란?
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 권고안 발표
간단한 다국어 지원 페이지 만들기
PHP에서 다국어 페이지를 만드는 방법은 여러가지가 있습니다.
첫째로 언어별로 페이지 (예 : index_korean.php, index_english.php 등...)를 만드는 고전적인 방법이 있고,
두번째로는 조금 복잡하지만 i10n이나 i18n 라이브러리를 쓰는 방법이 있습니다.
세번째로는 간단히 PHP 함수와 배열 (또는 변수)을 이용한 간단한 다국어 지원 페이지를 만드는 방법이 있습니다.
본 포스트에서 소개드릴 방법은 바로 세번째입니다. 이 방법은 단순한 다국어 페이지를 만들 때 유용하게 사용할 수 있는 방법입니다. 만약 큰 규모의 다국어 페이지라면 이런 방법보다는 i10n이나 i18n을 사용하는 것이 언어 파일 관리나 작성하는 면에서 훨씬 효율적입니다.
일단은 사용자의 브라우저에서 최우선 순위에 있는 언어에 대한 변수를 받아와야 합니다. $_SERVER 함수를 이용해서 받아오는데, 받아오는 속성은 HTTP_ACCEPT_LANGUAGE 입니다. HTTP_ACCEPT_LANGUAGE에 대해 브라우저는 한국어라면 ko-KR, 영어 (미국)이라면 en-US와 같이 서버에 최우선 순위 언어를 알려주게 됩니다.
그럼 이제 언어 코드의 맨 앞 두글자만 substr을 이용해 잘라오도록 하겠습니다. 만약 한국어가 최우선 순위라면 ko-KR에서 ko만 잘려 나오게 됩니다.
substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
이렇게 잘라낸 부분을 $lang 변수에 집어넣도록 하겠습니다.
$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
그리고 이제 $lang 변수의 값에 따른 if ~ elseif ~ else 문을 구성해 보도록 하겠습니다.
일일이 변수를 지정해주는 방법도 있지만, 코딩할 때하고 페이지 로드할 때 굉장히 비효율적이기 때문에 배열을 이용해서 하는 편이 나은 것 같아 배열을 사용하기로 했습니다. 배열을 사용할 때 주의할 점은 PHP 배열 순서는 "0부터 시작"하므로 실수하지 않도록 주의하셔야 합니다.
그러면 이제 한국어, 영어, 프랑스어, 기타 언어에 대한 배열을 구성해 보겠습니다.
if ($lang == "ko") // 한국어
{
$strings = array ("예", "아니오", "취소", "로그인", "이 메시지는 테스트 메시지입니다.", "이 페이지의 언어는 한국어입니다.");
}
elseif ($lang == "en") // 영어
{
$strings = array ("Yes", "No", "Cancel", "Sign in", "This message is a test message.", "The language of this page is English.");
}
elseif ($lang == "fr") // 프랑스어
{
$strings = array ("Oui", "Non", "Annuler", "Connexion", "Ce message est un message test", "La langue de cette page est française.");
}
else // 일치하는 언어 없으면 영어로 표시
{
$strings = array ("Yes", "No", "Cancel", "Sign in", "This message is a test message.", "The language of this page is English.");
}
그리고 디버깅을 위한 출력부를 아래에 추가합니다.
echo " <h1>브라우저 언어 : $lang</h1> <p> <strong>예</strong> : $strings[0] <br> <strong>아니오</strong> : $strings[1] <br> <strong>취소</strong> : $strings[2] <br> <strong>로그인</strong> : $strings[3] <br> <strong>이 메시지는 테스트 메시지입니다.</strong> : $strings[4] <br> <strong>이 페이지의 언어는 ~~어입니다.</strong> : $strings[5] </p> ";
이제 디버깅을 해 볼 차례네요. 맨 위의 $lang 앞에 //을 추가해서 주석 처리한 뒤에 $lang = "en"; 을 아래에 집어넣고 페이지를 띄웁니다. 페이지 내용이 영어로 뜨게 될 것입니다. 만약 $lang 변수를 fr로 바꾸면 프랑스어가 뜨게 됩니다. 정상적으로 작동하는 것을 확인한 뒤에는 앞에서 주석 처리한 코드를 다시 살리고 디버깅용 코드를 삭제합니다.
완성된 최종 코드는 다음과 같습니다.