'표준'에 해당되는 글 3건

  1. 2012.05.08 [웹표준 #2] 리스트 태그를 제대로 활용하자.
  2. 2012.05.07 [웹표준 #1] 웹 표준을 어떻게 시작할까?
  3. 2011.11.28 모바일 웹 사이트 제작을 위한 표준~

[웹표준 #2] 리스트 태그를 제대로 활용하자.

|



리스트 태그는 언제 사용할까?

제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 

가장 간단한 방법은 다음과 같이 <br> 태그를 사용하는 것입니다. 

원하는대로 리스트 형태로 출력되기는 합니다. 

그러나 이런 코딩에서 문제점은 무엇일까요?

이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 

현재 상태에서는 각각의 라인에 <font> 태그를 적용하는 방법이나 각각 <span> 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 

이런 경우에 바로 리스트 태그를 사용해야 합니다. 

위와 같은 경우는 순서가 중요하지 않기 때문에 <ul> 태그로 감싼 <li> 태그를 사용하면 되겠죠. 

그럼 리스트 태그에 대해서 한번 살펴보도록 하겠습니다. 


리스트 태그의 종류 

리스트 태그에 대해 좀 더 자세하게 살펴보기 전에 먼저 리스트 태그의 종류를 알아보려고 합니다. 

보통 리스트 태그하면 두 가지 종류 (Unordered List, Ordered List)를 생각을 하는데요. 

Definition List라고 한가지가 더 있습니다. 각각에 대해서 자세히 살펴보도록 하죠. 


Unordered List

순서가 중요하지 않은 리스트로서 <ul> 태그를 사용해서 각 리스트 항목을 감싸고, 각각의 리스트 항목은 <li> 태그를 사용합니다. 

위 예제의 일부분을 Unordered List로 나타내면 다음과 같습니다. 

결과를 보면 다음과 같이 나타납니다. 

  • Beginner
  • XML Developer
  • 프로젝트 관리론


Ordered List

순서가 중요한 리스트입니다. <ol> 태그를 사용하고 각 항목은 마찬가지로 <li> 태그를 사용합니다. 

Unordered List와 달리 점(.)으로 출력되지 않고 숫자로 나타나게 됩니다. 예제와 결과를 보시죠. 

다음과 같이 숫자로 순서가 표기된 것을 알 수 있습니다. 

  1. Beginner
  2. XML Developer
  3. 프로젝트 관리론


 Definition List

<dl> 태그를 사용하는 Definition List는 기존 리스트와 조금 다릅니다. 

무언가 정의를 내릴 때 사용하는 것인데요. 

내부에는 <dt>와 <dd> 태그를 포함하고 있습니다. 

<dt>는 정의하는 것의 용어를 나타내고, <dd>는 정의하는 것의 설명을 나타냅니다. 

즉, "<dt>는 <dd>이다."라고 표현할 수 있는 항목에서 사용하는 것이죠.. 

예제를 살펴보시죠. 

결과는 다음과 같이 나타나구요. HTML 문서의 구조화를 위해서는 잘 활용하는 것도 좋을 것 같습니다.

테이블 태그와 비슷하지만 분명히 용도는 다른 것이니 기억해 두세요~~ 

Beginner
- 초보자를 위한 강좌
XML Developer
- XML과 관련된 개념 및 개발 강좌


리스트 태그의 확장

<br>태그 대신 리스트 태그를 써야 한다고 앞에서 이야기 했는데요. 

사용자에 따라 리스트 태그의 기본으로 나타나는 점이나 숫자등이 표시되지 않고, 들여쓰기도 안되기를 원할 수 있습니다. 

이런 것을 해결하는 것이 바로 CSS 입니다. 

즉, 스타일시트를 활용해서 문서의 표현을 다루는 것이죠. 

이러한 구조와 표현의 분리가 바로 웹 표준의 핵심 개념이라고 할 수 있습니다. 

CSS에 대해서는 나중에 자세히 살펴보도록 하구요. 

여기에서는 리스트에 대한 것만 집중해서 이야기하도록 하죠. 

list-style: none; 이 부분이 바로 점이나 숫자와 같이 리스트 스타일을 출력하지 않도록 하는 것입니다. 

padding-left: 0; 은 왼쪽 들여쓰기를 하지 않도록 설정하는 부분이 되겠죠. 

이렇게 하면 맨 처음 보여드린 <br> 태그를 사용한 것과 비슷하게 출력이 됩니다. 

이제 색상을 넣거나 폰트 크기 등을 변경하려면 <li> 태그에 스타일 관련 코드를 넣으면 되겠죠. 

리스트 태그에 대해서 기본적인 내용을 쭉 살펴봤습니다. 

어떤 내용이든지 쉽게 이해할 수 있도록 정리하는 것은 즐겁기도 하지만 쉽지만은 않은 것 같네요. 

오늘도 좋은 하루 되세요,






Trackback 0 And Comment 0

[웹표준 #1] 웹 표준을 어떻게 시작할까?

|



시작하면서

현재 IT 프로그래밍을 보면 정말 배워야 할 것이 너무 많은 것 같습니다. 

Java 분야만 해도 JSP, Java, Struts, Spring, Hibernate, SiteMesh, iBatis, Google App Engine, Hadoop, NoSQL 등등.. 

정말 나열해 보니 끝도 없네요. 아마 요즘 시대에 프로그래밍을 시작했다면 막막했을지도 모르겠습니다. 


학교에서 강의를 하면서 항상 기본부터 시작하라고 이야기를 많이 합니다. 

그래서 저도 최근 이슈들을 하나씩 정리하려구 하고요. 그 첫번째로 웹 표준부터 시작하려고 합니다. 


90년대 후반 처음 웹 프로그래밍을 시작할 때, HTML 태그를 배웠던 기억이 납니다. 

<font> 태그로 글꼴의 크기나 색상을 이쁘게 하고 <iframe>으로 구조를 잡기도 하고, <table> 태그 정도 쓰면 우쭐하던 시기였죠. 

그러다가 웹 표준에 대한 이야기가 나오면서 오히려 초기에 HTML을 배웠던 사람들에게 웹 표준이 어렵다는 인상을 주기도 합니다. 

XHTML을 준수해야 하고  CSS로 형식을 설정하는게 왠지 낯설기만 하지요. 

이런 분들을 위해서 웹 표준을 하나씩 정리해 보려고 합니다. 


웹 표준이란?

웹 표준이란 말 그대로 웹의 표준을 지킨다는 것을 의미합니다. 

현재 웹에서 표준은 W3C 기준으로 매우 다양하지만 기본적으로 HTML4.01을 XML 형태로 표현한 XHTML을 지키고

스타일을 지정할 수 있는 CSS를 활용한다는 것을 말합니다. 


제 블로그를 자주 보시는 분들은 어디서 많이 본 것 같을 수도 있을 것 같습니다. 

바로 XML 강의에서 했던 구조를 나타내는 XML 문서와 스타일을 나타내는 XSL/CSS 문서를 HTML 버전으로 정리해 둔 것이죠.. 


2002/08/01 - [XML Developer/XML기초] - 1.1 XML이란?

2011/11/08 - [XML Developer/XSL] - XSL에 대하여



웹 표준의 필요성

그렇다면 웹 표준은 왜 필요한 것일까요?

첫째, 문서의 구조와 모양(스타일)을 분리할 수 있습니다. 

HTML 자체는 문서의 내용이나 구조만을 나타내고 보여지는 모습은 CSS를 통해서 처리하는 것이죠. 

CSS의 Media Query등을 활용해서 브라우저 크기나 모바일에서도 동일한 콘텐츠를 다양하게 보여줄 수도 있을 겁니다. 


둘째, 웹 접근성이 높아집니다. 

현재는 스마트폰이 활성화 됨에 따라 PC뿐만 아니라 모바일에서도 웹페이지를 많이 접속하고 있습니다. 

또한 웹 브라우저도 IE에서 벗어나 구글 크롬, 사파리, 파이어폭스 등 다양한 브라우저들이 등장함에 따라 모든 브라우저 호환성을 유지하기 위해서도 반드시 웹 표준을 지켜야 합니다. 


셋째, 웹 페이지의 접속 속도를 향상시킵니다. 

웹 표준을 지키지 않으면 각 브라우저에서 Quirk Mode로 접속되어 웹페이지를 처리하는데 느려질 수 있습니다. 

조금이라도 빠른 서비스를 제공하려면 반드시 웹 표준으로 사이트를 작성하는 것이 중요합니다. 


웹 표준 준수 여부 확인하기

웹 표준을 제대로 지켜서 작성했는지 확인하기 위한 Validation들이 많이 있습니다. 

이중에서도 W3C에서 제공하는 http://validator.w3.org/를 한번씩 활용해 보시기 바랍니다. 

모바일 웹 사이트에 대한 검증사이트도 제공하는데요. http://validator.w3.org/mobile/ 에서 확인할 수 있습니다.


2011/11/28 - [프로그래밍/Web] - 모바일 웹 사이트 제작을 위한 표준~


마치면서

웹 표준에 대한 정리는 기본적인 HTML 마크업인 <list>, <h1>, <a>, <form>, <table>, <div>등의 사용방법에 대해서 정리해 볼 계획입니다. 

그리고 CSS의 활용법 및 레이아웃, 텍스트 스타일, 이미지 처리 등에 대해서 앞으로 살펴보도록 하겠습니다. 


그럼! 오늘도 좋은 하루 되세요~~





Trackback 0 And Comment 0

모바일 웹 사이트 제작을 위한 표준~

|



스마트 폰 사용자들이 점차 늘어남에 따라 모바일 웹 사이트 제작도 많이 늘고 있는 것 같습니다. 
기존 포털 뿐만 아니라 대부분의 웹 사이트들이 모바일 웹도 기존 웹과 함께 제작하고 있으며,
하이브리드 앱이라는 컨셉으로 기존의 App과 Web의 장점을 살려 혼합한 모델들도 나오고 있는 것 같습니다. 

모바일 웹을 만드는데 어떤 점들을 주의해야 할까요?
여러가지 있겠지만 웹 표준을 담당하는 W3C의 자료를 토대로 정리해 보고자 합니다.

다음 사이트를 보면 W3C에서 권고하는 Best Practice에 대한 한글 설명이 있습니다.
http://www.w3c.or.kr/Translation/mwbp_flip_cards/ 

하나의 웹을 위한 설계: 다양한 장비를 고려하여 설계한 콘텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다. 

웹 표준 준수:세계 곳곳의 제각기 다른 장비와 웹 브라우저의 호환을 위해서는 표준을 준수해야 한다.

유해 요소 제거:모바일 장비의 제한된 화면 크기, 키보드, 기타 기능 등에 의해 발생하는 사용자의 문제를 고려하여 설계해야 한다.

장비 제한 주의: 특정 웹 기술을 사용하고자 할 때는 모바일 장비 성능이 제각기 다르다는 것을 염두에 두어야 한다.

웹 네비게이션 최적화: 작은 화면과 키보드, 제한된 bandwidth에서는 단순한 네비게이션과 입력이 매우 중요하다.

그래픽과 색상 확인: 이미지, 색상, 스타일은 콘텐츠를 빛나게 하지만 지원되는 포맷과 저사양의 화면 등에 유의해야 한다.

가볍고 간결한 웹 사이트: 가벼운 웹 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.
    
네트워크 자원 절약: 웹 프로토콜 기능을 활용하면 네트워크 부하와 대기 시간을 줄여 사용자 이용도를 향상시킬 수 있다.

사용자 입력 가이드: 모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이런 입력을 최소화 할 수 있다.

모바일 유저 배려: 시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다. 

이외에도 다음 사이트를 보면 모바일 웹 어플리케이션에 대한 Best Practice도 설명하고 있습니다.
http://www.w3c.or.kr/Translation/MWABP/
 



또 하나 재미있는 게 있네요.. 

모바일에 적합하게 제작되어 있는지 체크하는 툴인 W3C mobileOK Checker라는 것도 있습니다.
http://validator.w3.org/mobile/check

제가 만든 모바일 웹 사이트를 점검해보니 60%가 나오네요.. 
그런데 네이버를 점검해 보니 0%가 나옵니다.
음.. 분명 네이버 모바일이 아이폰, 안드로이드, 윈도우모바일 다 적용되고 디자인이나 구성도 훨씬 좋은데.. ^^
아마도 HTML, CSS 표준만으로 체크해서 그런가 봅니다.




 



Trackback 0 And Comment 0
prev | 1 | next