본문 바로가기

웹표준80

HTML5 둘러보기 HTML5 둘러보기 추가된 엘리먼트 API의 확장 모바일에서 구동가능, 미디어 지원 이런특징을 가지고 개발되는 html5에 대해 간단히 둘러보자 The DOCTYPE 문서타입 선언 아주 간단해졌다. html1.0, html4.0문서선언 보다 훨씬 간단해졌다. 훨씬 간단하고, 기억하기쉽고, 간편하게 의미있어보인다 새로 만들어진 엘리먼트(Element) 이전에 엘리먼트에 새로운 엘리먼트가 추가되었다. 대체적으로 과다하게 쓰였던 div엘리먼트를 좀더의미화 하여 구체적으로 나누어졌다고 보면된다. 추가된 엘리먼트는 다음과 같다. 글자그대로 머리부분이다.브랜드이름이나,페이지 맨위에서 사이트를 소개할떄 사용한다. nvigation의 약자로 nav로 쓴다.흔히 사용하는 메뉴 네비게이션 부분에 쓰일 것이다. 이제 div.. 2009. 9. 29.
CSS IE6 브라우저 버그 - 더블마진,3픽셀,문자중복,피커부 IE6 브라우저 버그들 IE6는 아직 많은 버그를 가진다.아래가 대표적인사례이며 해결방법을 보자 더블마진 플로트(float) 버그 플로트된 엘리먼트에 마진을 줄경우 두배가 나타난다. 아래와같이줄경우 #box{ float:left; margin-left:20px; } 이와같이 할경우 IE6에서는 왼쪽으로 40px의 마진이 나타난다.해결방법으로는 display: inline;을 주면된다 #box{ float:left; margin-left:20px; display: inline;/*IE6더블마진 해결*/ } 텍스트 주변 3픽셀 공간 버그 플로트 지정한 엘리먼트 주변에 텍스트가 있을때 엘리먼트와 접촉부분에 3px의 공간이 생긴다. 해결방법으로는 텍스트에 height:1%;를 주는것이다. #box{ float:.. 2009. 9. 10.
브라우저 버그 해결 기초 브라우저 버그 해결 기초 개녑 잡기 문서를 다 작성후 브라우저에서 적용시켜보면 문제가 발생한다.이런 버그(bug)를 해결하기 앞서 기초 부터보자. 가장 기본적으로 일어나는 문제는 문서가 제대로 작성되지않았을 경우이다. 엘리먼트에서 " /" 이라던가 " >" 등 빼먹었을떄 당연히 문제는 일어난다. css경우도 마찬가지다.그래서 문서작성을 마치면 반드시 유효성검사를 해볼필요가있다. html의 유효성검사 css의 유효성검사 IE 레이아웃.. IE는 특별나게 "레이아웃"이라는 개념을 사용한다.레이아웃을 가지는 엘리먼트는 다음과 같다. body, html, table, tr,td,img,hr,input,select,textarea,button, iframe, embed,object,applet,marquee 엘리.. 2009. 9. 10.
웹표준 폼(form) 코딩(1) 웹표준 폼(form) :: 필드셋(fieldset)과 레이블(label) 예시로 소스부터보자 2009. 9. 10.
웹표준 테이블 코딩 웹표준 테이블 코딩하기 테이블의 본래 목적은 자료를 가독성있게 ,쉽게알아볼수 있도록 행렬로 표시해주는 것이다. 이런 표의 올바른 사용법 그리고 올바른 코딩을 알아본다 우리가 흔히 알고 있는 태그틑 table, td, tr 이세가지이다. 명확한 표의 사용을 위해 엘리먼트들을 살펴보자 써머리와 캡션 caption은 테이블의 제목으로 보면된다. 테이블의 가운데 정렬된다 최근 인기가요 참고로 table의 속성 엘리먼트 summary는 이미지의 속성 엘리먼트 alt와 같이 마우스를 올릴때 설명해준다 thead,th,tbody,td,tfoot thead 는 표의 맨 머릿부분이다.다름것도 마찬가지로tbody는 주요 내용tfoot은 마지막을 나타낸다. 이렇게하면 좀더의미를 명확히 할 수 있다. th는td차이도 마찬가지.. 2009. 9. 10.
CSS 가로형 내비게이션 float CSS 가로형 내비게이션 가로형 내비게이션을 만드는 방법은 두가지가 있다 하나는 float를 이용하는 것이고 하나는 display:inline;을 이용하는 것이다,float 부터 보자 배경그림을 다음과 같이 할것이다 단 이미지 크기가 크니 작게 자르고 가로로 반복되도록 할것이다. 아래그림은 작게자른 그림 first second third forth fifth ul{ margin:0; padding:0; list-style-type:none; /*여기까지가 초기화*/ width:520px;/*가로길이는 520px로 정해줬다*/ background:url(images/mainbg_re.jpg) repeat-x; /*위같은 그림을 하기위해 일부분을 잘라 작은파일로 하고 가로로 반복해 줬다*/ float:lef.. 2009. 9. 9.
CSS 세로형 내비게이션 CSS세로형 내비게이션 앞서 롤오버 효과에 대해 소개했다. 여기참조 http://siana.tistory.com/trackback/54 일단 사용할 이미지는 다음과 같다 이 이미지를 이용해 올렸으때 오른쪽이 나오도록 효과를 적용하고 세로형 내비게이션을 만들어 보자 html은 간편하다 first second third forth fifth css는 각기 설명을 참조 ul{ margin:0; padding:0; list-style-type:none; /*초기화*/ } ul li a{ display:block; width:200px;/*이미지크그에 맞게 가로 세로 정한다*/ height:30px; line-height:30px; color:#000;/*글자색은 검정*/ text-decoration:none; .. 2009. 9. 9.
내비게이션 기초 태그 소스 CSS 내비게이션 이제 까지 많이 표로 내비게이션을 만들어 왔다.웹표준과 CSS를 사용하면서 리스트 태그를 사용하게된다.리스트 태그는 크게 3가지로 나뉜다 ul,ol, dl ul은 비순차적인 리스트작성시 ,ol은 순차적 리스트 작성시, dl은 정의 할 때 사용된디 내비게이션 활용에 사용되는데 포탈사이트 네이버의 예를보자. 여기는 dl 리스트를 사용하고 있다. 콘텐츠 바로가기 내 정보 뉴스캐스트 오픈캐스트 네이버캐스트 타임스퀘어 쇼핑 마케팅 센터 다음경우 소스를 보면 ul을 사용하고 있다 메일 카페 블로그 뉴스 쇼핑 d&shop 게임 키즈 이와 같이 내비게이션은 리스트 소스로 시작된다. 여기에 CSS를 어떻게꾸미냐에따라 세로,가로형 네비게이션이 만들어진다. 2009. 9. 7.
DOM 라운드박스 심플 먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다. 그런데 굳이 가로가 일정치라면 그방법대로 할필요가 없다. 이번엔 가로 사이즈가 정해진경우 목적은 태그 내용물 //아래 라운드박스 //먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 //두함수의 기능은 insertBefore(A, B); :B 엘레먼트앞에 A를 삽입 insertAfter(A, B); :B 엘레먼트뒤에 A를 삽입 //먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다. function insertAfter(newElement,targetElement) { var parent = targetElement.parent.. 2009. 7. 2.
dom 라운드 박스 원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다. 의도하고자하는 기본 html는 다음과 같고 sdsasd 사용될 html은 준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란 라운드 박스) borders.gif(양쪽 라인)이둘. css는 .box { margin: 15px 0 0 0; padding: 5px 0 5px 0; } /* cbb 자바스크립트가 지원 안될때 */ .cbb { margin: 0 10px 0 10px; background: #FFF; padding: 5px 0 5px 0; line-height: 170%; } /* 메인박스 */ .cbb p, .cb p { margin: 0; padding: 0 5px 5p.. 2009. 7. 2.

티스토리툴바