본문 바로가기

웹표준80

HTML5 변경점 추가된 새속성 HTML5 변경점 추가된 새속성 HTML 5는 기존 HTML 4 내의 요소에 대해 여러 가지 새 속성들을 제공 하고 있다. a와 area 요소는 link와 함께 사용 가능한 media 속성을 이용할 수 있다. a와 area 요소는 ping이라는 새 속성을 통해 하이퍼 링크에 대해 ping 정보를 보내야하는 URI 목록에 대해 한칸 공백으로 분리해서 제공할 수 있다. 이 속성은 사용자 에이전트가 어떤 URI에 ping 정보를 보냈는지 사용자에게 알려 주거나 개인 정보를 우려하는 사용자를 위해 기능 끄기도 제공 한다. area 요소는 좀 더 견고 하도록 hreflang와 rel 속성 모델을 사용한다. base 요소는 a 요소에서 이미 널리 지원되는 target 속성을 지원한다. a와 area에서 iframe.. 2010. 4. 3.
최근 부라우저들의 CSS3,HTML5 지원현황 http://www.findmebyip.com/litmus/#target-selector 여전히 문제는 IE거의 지원을 못해주고있다.제대로 병맛. 2010. 3. 31.
html5 엘리먼트 변경점 새로생긴 엘리먼트 html5 엘리먼트 변경점 새로생긴 엘리먼트 HTML5 추가된 엘리먼트포스팅에서 간단히 봤지만 새로추가된것들 더자세히보자 section은 태그는 일반적인 문서 및 애플리케이션 영역을 표시할 때 사용한다. article은 뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 한다. aside는 문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용한다. hgroup은 섹션 머리말을 표시할 때 사용한다. header은 문서 내 소개 및 네비게이션 메뉴 모음을 표시할 때 사용한다. footer는 문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있다.. nav는 문서 내 네비게이션. figure는 그림이나 비디오 같은 임베딩 컨텐츠와 함께 캡션을.. 2010. 3. 30.
HTMl5 레이아웃 만들기 HTMl5 간단한 레이아웃 만들기 html5를 이용해서 간단한 레이아웃을 만들어보자 먼저 생각하는 레이아웃의 모양은 다음과 같다. 각 엘리먼트와 그 크기는 그림과 같이 할것이다 html5 소스 위 그림에서 알수있듯이 먼저 헤더(header) 그리고 네비게이션(nav) 그다음에는 사이드바(aside)와 콘테츠(section, artucle) 맨아래 풋터(footer)를 둘것이다. 소스는 다음과 같다. html5 simple test header nav link link link aside section article footer 위에서 div엘리먼트를 쓰면서 왜 전체를 감싸주었는지는 아래에 설명하겠다. CSS로 완성 이제 css로 꾸며보자. 항상 해주는것이지만 일단 마진과 패딩을 0, 그리고 리스트스타일을.. 2010. 2. 20.
html5 변경점 사라진 엘리먼트 html5 엘리먼트 변경점 사라진 엘리먼트 html5에서는 사라진것도 많고 새로 만들어진 엘리먼트도 많다. 하나하나 살펴보자 사라진 엘리먼트 CSS로 다루는것이 더 좋기때문에 사라진 엘리먼트 basefont 이런식으로 문서 전체의 기본 폰트를 설정하기도했으나 css에서 완전히 처리해주니 불필요하다고 여겨짐 big, small 문자를 크게 또 작게 변경 해 주는 엘리먼트였으나 이것역시 css에서 가능 center 중앙에 배치하는 역할을 했으나 이것역시 css에서 가능하다. font font역시 basefont와 마찬가지 s,strike,u 줄로 텍스트를 꾸며주는 이들역시 css에서 가능하므로 사라졌다. tt 공지나, 상표를위해 사용했던것 이역시 css별도 강조 가능하기에 사라졌다. 프레임, 더이상 없다! .. 2010. 2. 19.
웹표준 간단한 폼(form) 양식 웹표준 간단한 폼(form) 양식 리스트를 이용한 간단한 폼을 만들어보겠다. 그전에 폼에 사용되는 엘리먼트부터 보자 가장 기본적으로 구축할 모습은 다음과 같다. 개인정보입력 form form은 양식을 시작한다는 의미를가진다.또한 action옵션을 가짐으로서 입력완료하고 실행시 작동연결을 담당한다. fieldset fieldset은 양식의 테두리를 보여준다. 구역의 의미로 임력해야할여러 정보가있다면 큰범위로 나누어 줄때 사용한다. legend legend은 나누어진 구역의 의미를 가르켜준다.여기서는 개인정보입력이라고 되어있다. label label은 input엘리먼트가 사용될 목적을 지칭할때 사용된다. input input은 입력 양식을 보여준다, 잘 알다시피 라디오버튼,체크 박스, 텍스트등을 옵션으로 가.. 2010. 2. 18.
CSS dispay 프로퍼티 CSS dispay 프로퍼티 dispay 프로퍼티는 엘리먼트를 어떻게 보여주냐(또는 어떤 타입으로 참조:엘리먼트의 분류)를 정하는 css 프로퍼티이다. 가장대표적인 값으로 none, inline, block가 있다.이세가지부터 간단히 보자 none 영문 뜻그대로다. 보이지 않게 한다.엘리먼트가 화면에 보이지않는다. 아무것도 안보임ㅠㅠ p{display:none;} inline 인라인(inline) 엘리먼트처럼 보여준다. 즉 한줄로 보여주게 된다.예제를 보자.가장대표적으로 li의경우 사용되는 경우가 많다. 한줄로 나란히 줄서기 li{display:inline;} 이러면한줄로 나란히 줄서기이렇게 한줄로 화면에 표시될것이다 block 앞서설명한 inline과 반대로 블록(block) 엘리먼트처럼 보여준다 아래.. 2009. 10. 25.
인라인(inline) ,블록(block) ,그룹(group)엘리먼트 엘리먼트의 종류 inline , block ,group block 엘리먼트 h1, h2,h3...p, ul,ol,li,form,div등이 있다. 한블록을 차지한다,즉 이러면 두엘리먼트가 두 층으로 쌓인다. 인라인 엘리먼트를 내부에 포함한다. inline 엘리먼트 span,em,img, strong, a등이 있다. 한줄을 차지한다.워드프로그램에서 엔터를치지않는한 이어지듯이 인라인 엘리먼트역시 한줄로 이어진다. img엘리먼트로 두그림을 넣었다고 가정해보자. 두그림은 연이어 보여질것이다. group 엘리먼트 div,span엘리먼트를 특별히 칭하는말이다. 엘리먼트나 텍스트 데이터를 그룹으로 묶을 수 있는 기능을 가진 엘리먼트이다. 앞서 말했듯이 div는 블록 엘리먼트고 span은 인라인엘리먼트이다 이 점에서유의.. 2009. 10. 25.
jQuery를 이용한 CSS 효과 jQuery CSS 메소드 css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자 CSS 지정 css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자 #example{backgound: #fcc;} /*선택자는 아이디인 #example 그리고 프로처티는 배경인backgound 마지막으로 그배경색은 #fcc로 한것*/ 이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자 jQuery css()메소드 jQuery에서 사용해보자 방법은 다음과 같다. .css('프로퍼티' ,'값') 만약 여.. 2009. 10. 24.
API 대체 뭔고? API (Application Program Interface) air-position indicator , American Petroleum Institute 등 이런게아니라 프로그램에서 "API는 뭡니까"하는 질문이 많았다. 간단히 요약해서보자 API가 Application Program Interface인 만큼 인터페이스 부터 정의해보자 인터페이스 하나의 시스템을 구성하는 하드웨어와 소프트웨어 또는 2개의 시스템이 상호 작용할 수 있도록 접속되는 경계(boundary)나 이 경계에서 상호 접속하기 위한 것들(하드웨어, 소프트웨어, 조건, 규약)을 포괄적으로 가르킨다. GUI(graphical user interface),UI(user interface)는 잘 알다시피 인간과 프로그램사이에 상호작용을.. 2009. 10. 7.

티스토리툴바