hgroup 태그, HTML5에서 제외(hgroup removed from HTML)

웹표준/HTML5 훑어보기 2014.02.27 10:52

hgroup 태그, HTML5에서 제외(hgroup removed from HTML)


뒤늦게 올린다만. 2013 4월경 hgroup 태그가 html5에서 제외됬다.

다음링크참조

http://www.webmonkey.com/2013/04/w3c-drops-hgroup-tag-from-html5-spec/
http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11731


http://beautifulcss.com/archives/882

W3C는 더이상 <hgroup> 태그를 표준 명세에 표함시키지 않겠다고 밝혔습니다. 이 태그는 문서의 개요를 작성할 때 사용되는데, 반드시 <h1>부터 <h6>까지의 태그만을 포함할 수 있고, 그 외의 태그는 포함시킬 수 없습니다. 이렇다보니 실제로 <hgroup> 태그를 쓸모있게 사용할 일이 거의 없다는 것에 바탕을 둔 결정으로 보입니다.

  

HTML이란?

HTML의 역사

<hgroup>의 기본적인 사용 예제입니다. 사실 저런 식으로 목차를 만들기에는 <hgroup> 보다는, 들여쓰기와 머릿그림을 자동으로 만들어 주는 <ul> 태그가 훨씬 효율적입니다. 굳이 개요를 설명하는데 있어 헤딩 태그를 쓰지 않고도 <ul> 태그가 문서의 <header> 태그에 안에 위치한다면 그것으로 충분히 개요의 의미를 살릴 수 있기 때문이죠.

  • HTML이란?
    • HTML의 역사

작성하는 HTML 코드의 양은 다소 많다하더라도, 아무런 CSS를 사용하지 않은 상태에서의 화면 표현을 본다면 분명 <ul> 태그가 훨씬 우월합니다.

또 한가지로 예로는, 우리가 흔히 보는 인터넷 매체의 기사들은 주로 1개의 대제목만 사용합니다. 대제목 이후에 부제목을 사용해서 기사 자체를 개요화하기 보다는, 태그라인이나 날짜, 작성자 혹은 조회 수 따위를 표현합니다. 다른 태그를 품을 수 없는 <hgroup>의 특성상 사용빈도가 무척 떨어질 수 밖에 없지요.


882-01
일반적인 블로그 기사의 형식

이렇다보니 오히려 대제목을 뒷받침 해줄 수 있는 <subhead><subline> 태그의 명세를 준비하고 있는 듯 합니다. 해외 각종 블로그에서 보면 이런 태그들의 환영을 알리는 기사들이 점점 늘고 있거든요. 물론 정확한 정보는 아닙니다.

http://www.w3.org/html/wg/wiki/ChangeProposals/hgroup


아무튼, HTML도 개발자와 사용자 추세에 따라 그 명세를 유연하게 맞추어가고 있는 듯 합니다. 대부분의 웹 브라우저들은 <hgroup> 태그를 화면에 표현 할 수 있고, 혹시 지금까지 만들어 놓은 웹 사이트에 이 태그가 사용되었다면 굳이 당장 없애거나 바꿀 필요는 없습니다. 시간이 지남에 따라 웹 브라우저들도 단계적으로 <hgroup> 태그를 사용자 도구에서 제외시키겠지만 아직 시간은 충분합니다.

각종 명세나 규칙등은 HTML 언어의 버전(개정판)에서 빈번하게 제외되고 추가되고 재정의됩니다. 지금 제외되었다고 해서 영원히 그렇다는 것은 아닙니다. HTML의 다음 버전에서는 <hgroup>이 다시 새롭게 정의되어 추가될 수도 있다는 뜻입니다. 명세가 변하는 것에 일일이 대응하기 보다는, 그때그때 규칙에 맞는 작성을 지향해 나가는 것이 중요합니다.


저작자 표시
신고

설정

트랙백

댓글

CSS 폰트 (font) 정하기

CSS 2012.02.22 14:39

CSS 폰트 (font) 정하기

먼저 한번에 지정할수 있는 font 말고 font-size등 간단정리하고 전체를 정의하는 font를 알아보자

폰트 크기 설정

폰트크기는 여기서 참조하자 바로테스트확인할수 있다.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small

예제는 다음과 같다

h1{ font-size: 100%;}
h2{ font-size: larger;}
h3{ font-size: small;}
h4{ font-size: 1.9em;}
p{  font-size: 9pt;}

다음은 폰트크기를 요약 한것

상댓값
%   : 부모 엘리먼트와 비교한다
em : 현재 폰트 크기에 비교(1.9는 190%)
px  : 모니터 해상도에 비교
larger, smaller : 현재잣보다 한단계 올리거나내린다 예로 현재값이 medium로 되어있다면 large로 된다

절대댓값 : pt,pc,mm, cm, in (72pt = 1inch ,1pc =12pt)

html페이지를 참조하는 키워드 이는 html에서 <font size=x>으로 정의될수 있다 x값과 키워드비교는다음표를참고하자 w3c 참조

http://www.w3.org/TR/CSS2/fonts.html#font-styling

HTML Keyword Example Sizes
Not Applicable xx-small 9px
size=1, size=-2 x-small 10px
size=2, size=-1, small small 13px
size=3 medium 16px
size=4, size=+1, big large 19px
size=5, size=+2 x-large 24px
size=6, size=+3 xx-large 32px
size=7, size=+4 Not Applicable 48px

폰트 크기를 설정하기전 집고 넘어갈 것이 있다. 일단 100%로 하던 1em으로 하던간에 크기는 브라우저의 디폴트 값에 근거한다는 점을 유의해야 한다.이말은 무엇이냐하면 우리가 웹표준을 다룰때 가장 짜증나는 IE6를 비롯하여 브라우저별로 크기가 다르게 나온다는 말이다.

이에 대한해결은 Owen Briggs가 내놓은것으로 가능한 body에 상대크기를 잡아놓고 내부에 절대폰트 상대폰트크기를 사용하는 것이다. 예제처럼하면 브라우저뿐만아니라 매체에 따라서도 적절한크기가 적용된다.

/* body에 %사이즈 결정 */
body { font-size: 76%; }

/* 개별 재설정*/
p { font-size: 1em; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }

폰트 스타일 설정

이랙릭이나 빗김체나 비슷하다. 정확한 차이는 이탤릭체는 말그래로 폰트의 이탤릭버전으로 하게한다. 빗김체는 글을 기울일 뿐이다. 딸서 이탤릭체가 없는경우는 빗김체를 사용하겠지만 거의 그런 경우도 없고, 또 브라우저들이 이 둘을 잘 구분하지 않는다.

h1{ font-style: italic;}
h2{ font-style: normal;}
p{  font-style: oblique; }

폰트 굵기 설정

h1{ font-weight: bold;}
h2{ font-weight: nomal;}
h3{ font-weight: lighter;}
h4{ font-weight: bolder;}
p{  font-weight: 450; }

예제에서 숫자는 900이 최고다 100~900으로 설정가능하다.

스몰 캡(small-cap) 설정

h1{ font-variant:small-caps; }

스몰캡은 모든문자가 대문자가 되고 첫번째 글자가 다른문자에 비해 조금커진다. 제목이나 부제목 강조에 사용하면 효과적이다.

한번에 설정

귀찮을때 한번에 하기. 순서는 다음과같다

font-style, font-variant, font-weight, font-size/line-height, font-family
여기서 폰트사이즈뒤에 슬러쉬하고 나오는 것은 행간격이다. 문자기준의 %라고 생각하면된다 (.9=90%)

p{ font:italic bold small-caps .7em/.9 Georgia, "Times New Roman", Times, serif  ; }

시스템 폰트..

p{ font: caption;}

caption | icon | menu | message-box | small-caption | status-bar

위의것이 시스템 폰트라고 지정된 것들이있다.
순서대로 버튼,아이콘,메뉴,태화상자,컨트롤라벨,위도우 상단표시줄에 적절하게 사용으로 지정되어 있지만..잘 사용되는걸 못봤다. 그냥 이런게 있다고만 알아두자.

CSS3 폰트에 자세한건 여기 http://www.w3.org/TR/css3-fonts/

저작자 표시
신고

설정

트랙백

댓글

CSS 폰트 : 웹안전 폰트와 다운

CSS 2012.02.21 14:56

CSS 폰트 : 웹안전 폰트와 다운

웹안전폰트

폰트는 사용자가 컴퓨터에 있어야 사용가능하다. 옛날에는 단지화려하게 꾸미기위해서 별 폰트들을 남발했지만 요즘은 사라진지오래다. 일단 웹안전 폰트부터 살펴보자.

Generic Family Family Name Example
Windows Font Name Mac Font Name
Sans-serif Normal fonts without serifs Arial Arial Safe Fonts, 안전서체, 安全書体, 安全字体
Arial Black Arial Black Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Sans Unicode Lucida Grande Safe Fonts, 안전서체, 安全書体, 安全字体
Tahoma Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Trebuchet MS Helvetica Safe Fonts, 안전서체, 安全書体, 安全字体
Verdana Verdana Safe Fonts, 안전서체, 安全書体, 安全字体
MS Sans Serif Geneva Safe Fonts, 안전서체, 安全書体, 安全字体
Serif Normal fonts with serifs Georgia Georgia Safe Fonts, 안전서체, 安全書体, 安全字体
Palatino Linotype Book Antiqua Safe Fonts, 안전서체, 安全書体, 安全字体
Times New Roman Times Safe Fonts, 안전서체, 安全書体, 安全字体
MS Serif New York Safe Fonts, 안전서체, 安全書体, 安全字体
Monospace Fixed-width fonts Courier New Courier New Safe Fonts, 안전서체, 安全書体, 安全字体
Lucida Console Monaco Safe Fonts, 안전서체, 安全書体, 安全字体
Cursive Fonts that emulate handwriting Comic Sans MS Comic Sans MS Safe Fonts, 안전서체, 安全書体, 安全字体
Fantasy Decorative fonts, for titles, etc. Impact Impact Safe Fonts, 안전서체, 安全書体, 安全字体

위폰트는 기본적으로 탑재되어있는것들이다.

그리고 Windows 버전별로 어떤 서체가 모든 국가별 버전에 기본 탑재되어 있는지 좀더 확인하려면 Microsoft의 Typography 웹 사이트에 있는 Fonts and products 페이지를 참고하면 된다.


다운로드가능한 폰트

그래도 원하는 폰트를 꼭 사용하고 싶게하면 어떻게 해야 할까? 
css에서 @font-face 로 설정할 수 있다.(SIFR방법도 있지만....이 방법은 폰트자체를 건드린다는 개념과 다르니 따로 포스팅하겠다.)

일단 웹에서 다운로드가능한 폰트의 확장자는TTF,OTF,EOT,SVG,WOFF이다. (자신에게 어떤폰트가 있는지 알아보려면  C:\Windows\Fonts 에서 확인해보자.) 사용방법은 아래와 같다.

자신이 원하는 폰트파일을가지고 이 사이트로 가자 @font-face Generator


1. add fonts를 클릭하고 원하는폰트파일을 불러온다.
2. 옵션중선택하고 agreement에 체크 그러면 오른쪽 아래에 다운로드박스가 나오는데 클릭하면 다운받을 수 있다.
3. 이때 샘플로 예제 웹문서까지 첨부되니 참고

위에 이걸 잘알면 사용해도 관계없고 이번엔 사용하는 CSS코드를 살펴보자.

@font-face {
	font-family: 'sketch'; /*폰트이름을 지정*/
	src: url('font/hnaksec-webfont.eot');
	src: local('☺'), url('font/hnaksec-webfont.woff') format('woff'), 
	url('font/hnaksec-webfont.ttf') format('truetype'), 
	url('font/hnaksec-webfont.svg#CRegular') format('svg');
}

body{font-family: 'sketch';}

주의 할 점은 로컬폰트를 사용할 수 있게 src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥(mac)에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체한다.

참고로 svg폰트의 #CRegular부분은 svg폰트로 변환시에 지정되는 id이다. 이에대한 정보는 svg폰트를 메모장으로 열고 id를 검색해보면 알수 있다.

이정도 알면 사용하는데 문제는 없다. 

위의 예제는 여기서 확인가능하다 http://sianasiatiger.cafe24.com/study/load-font.html

또 더 자세히 깊게 파고 들고 싶다면 여기를 참조 http://circlash.tistory.com/578



저작자 표시
신고

설정

트랙백

댓글

웹표준을 어떻게 생각하는가?

웹표준 2011.06.30 11:44

웹표준을 어떻게 생각하는가?


웹표준에 대한 생각들을 다음에 달아보자.출처는 웹스탠다드포럼 http://cssdesign.kr/forum/viewtopic.php?pid=19094#p19094


  • 웹 표준 뭐라고 생각하세요?

    • 웹 표준 뭐라고 생각하세요?
    •  HTML 시멘틱마크업,CSS오류없슴, '정보'와 '꾸밈(장식)', '기능'의 역할요소를 구분

    • 웹 표준 어떻게 생각하세요?

        현재 웹 설계의 필수요소.

    • 웹 표준의 장점은 뭘까요?

       역할분담과 알아볼수 있는 체계의 명확화. 웹표준을 지킴으로서 검색기능의 향상, 명확한 역할 구분,분담이 이루어진다. 예로 내가한작업을 넘겨줄 때도 이 규약을 지킴으로서 알기쉽다. 또한 접근성향상

    • 웹 표준의 단점은 뭘까요?

      아직까지 시간이 지나도 웹표준에 대한 이해  그리고 공통적인 개념이 서로 이견, 오해가 있고 또 입문자들에게도 아리송하다. 또한 단순한 작업물의 경우 시간낭비를 가져올 수도 있고, 디자인의 입장에서는 웹표준에 집착한 나머지 한계를 두고 작업하는 사람도 더러있다. 아직 웹표준이 이거다라고 보편화되기까지 시간이 필요하다.



    저작자 표시
    신고

    설정

    트랙백

    댓글

    웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

    CSS 2011.03.27 11:34

    웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

    유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨)

    어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다.

    http://www.positioniseverything.net/articles/sidepages/pie-calc.php



    위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다.


    브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다.

    좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점이다.
    아래가 마련된 소스이다

    
    
    
    


    저작자 표시
    신고

    설정

    트랙백

    댓글

    웹 CSS 폰트 테스트 미리보기 사이트 typeteste

    CSS 2011.03.17 13:30

    http://www.typetester.org/


    CSS를 다루면서 여러폰트를 사용하고 크기 색깔 마진 패딩들을 다루게 되는데 미리한번 볼수 있는 좋은 사이트가 있다. 좋은점은 위에는 우리가 흔히 사용하는 기본적인 폰트 그리고 아래는 자신이 가지고 있는 폰트가 있다.


    모두테스트 가능 설정함에 따라 아래에 뜬다.



    아쉬운 점이라면 한글로 못본다는점?

    저작자 표시
    신고

    설정

    트랙백

    댓글

    HTML5 엘리먼트 알아보기 (계속업데이트) HTML5

    웹표준/HTML5 훑어보기 2010.07.22 15:50

    HTML5 엘리먼트 알아보기 (계속업데이트)

    업데이트로 올린글 링크


    section 엘리먼트

    group 엘리먼트

    text-level 엘리먼트

      edit 엘리먼트

      emdedded엘리먼트

    table엘리먼트

    form 엘리먼트

    canvas 엘리먼트

    interative 엘리먼트


    저작자 표시
    신고

    설정

    트랙백

    댓글

    HTML5 menu,command 엘리먼트(element)

    웹표준/HTML5 훑어보기 2010.07.22 15:44

    HTML5 menu, command 엘리먼트(element)

    커맨드리트를 표현하는 menu엘리먼트 상세히 표현하기위해 command엘리먼트가 자식엘리먼트로 html5에서 추가되었다.

    커맨드엘리먼트는텍스등으 여러가지로 나타난다.커맨드는 현재 아직지원하지않는다. 냉무 역시차후 업데이트

    저작자 표시
    신고

    설정

    트랙백

    댓글

    HTML5 details, summary 엘리먼트(element)

    웹표준/HTML5 훑어보기 2010.07.22 15:24

    HTML5 details 엘리먼트(element)

    스크립트와 더불어 흔히 웹사이트에서 클릭시 화면에 새로운정보를보여주고 클릭시 사라지는경우를 봤을 것이다. 이를 구현해주는것이 이엘리먼트이다. 클릭할것은 삼각형버튼으로 되어있다. 하지만 아직 브라우저에서 지원하지 않는다.summary는 details의 자식엘리먼트로 요약해서 설명해준다.

    <details open>
     <summary>어쩌고저쩌고</summary>
     <p>울라불라울라불라....</p>
    </details>
    

    open속성 엘리먼트는 보이는 상태로 시작된다

    저작자 표시
    신고

    설정

    트랙백

    댓글

    HTML5 canvas 엘리먼트(element)

    웹표준/HTML5 훑어보기 2010.07.22 15:13

    HTML5 canvas 엘리먼트(element)

    canvas엘리먼트는동적그래픽을 구현한다. 단독으로 이 엘리먼트만으로 구현 되지 않는다.

    스크립트를 동반해서 사용하여 구현하다.속성엘리먼트로는 가로세로를 지원한다.

    간단한 예

    <canvas width="300" heifgt="300">
     <p><img src="img_backup" alt=" "/></p>
    </canvas>
    

    자바스크립트에서는 아이디로 접근,그리고 getContext로 시작한다. 이예대한 예는 차후에 ....


    저작자 표시
    신고

    설정

    트랙백

    댓글


    티스토리 툴바