HTML 썸네일형 리스트형 [Html5+CSS3]HTML의 역사, 젠코딩(ZenCoding), 브라우저성능테스트, 사이트유효성검사, 실전 HTML5 가이드 HTML 5 != HTML5 HTML 5와 HTML5는 다르다 HTML -> HTML4 까지 발전된 시간은 대략 7년? W3C에서 XHTML를 배포한뒤 XHTML2 까지 개발을 하려 했으나, 많은 사용자들이 HTML4를 더 선호하게 됨 따라서, HTML4 -> HTML5 개발이 필요했지만, 저작권 문제로 HTML 5가 먼저 나오고, 인수를 통해 최종적으로 HTML5가 나오게 됨 용어정리 TEXT attribute(속성) : href tag(태그) : , contents(컨텐츠) : TEXT element(엘리먼트) : TEXT *property(속성)는 CSS에서 attribute(속성)는 HTML에서 사용하는 것이다 Zen Coding Zen Coding(http://code.google.com/p/z.. HTML 버전별 Doctype 선언 정리 HTML 버전별 Doctype 선언 정리 DOCTYPE은 Document Type의 줄임말입니다. 태그 위에 선언 해줘야 하며, 어떤 종류의 html을 사용할지 웹 브라우저에게 알려줍니다. HTML 버전별 DOCTYPE을 간단히 표로 정리해 보았습니다. 더 자세한 내용을 알고 싶으신 분은 DOCTYPE 알아보러 가기! 를 클릭해주세요. 표를 보면 일정하게 DTD 라는 것이 들어가 있다는 것을 알 수 있습니다. DTD는 Document Type Definition의 줄임말로 현재 사용하는 버전에서 어떤 태그들을 사용할 수 있는지 알려줍니다. 크게 strict, transitional, frameset 세 가지로 나뉩니다. strict - 웹 표준을 엄격하게 지킨다는 의미입니다. center, font를 포.. 웹페이지, 윈도우 창에서 스크롤바 강제로 없애기 웹페이지에서 스크롤 없애는 방법입니다. scrolling="no" ->스크롤 없애기 scrolling="auto" ->자동스크롤 1.프레임내의 스크롤바 없애기 프레임셋 소스에서 스크롤바를 없애고자 하는 프레임에 scrolling="no"를 추가 해 줍니다. 예) 2.아이프레임에서 스크롤바 없애기 아이프레임 태그안에 scrolling="no"를 추가 해 주면 됩니다. 예) 3.특정 웹페이지의 스크롤바 없애기 시작하는 body~태그안에 scroll=no를 추가 해 줍니다. 예) 4. 가로 스크롤바 없애기 시작하는 body~태그안에 style="overflow-x:hidden"를 추가 해 줍니다. 예) 세로 스크롤바를 없애려면 [CSS] text-overflow, overflow 속성 text-overflow, overflow 속성 Text-overflow - text가 overflow되었을 때 어떻게 처리할 것인가를 나타내는 속성 - overflow 속성이 hidden 등 overflow 속성이 값을 갖고 있을 때 적용이 가능 - 엘리먼트 크기 이상의 글이 들어있음을 말 줄임표 ...을 이용하여 나타내줌 text-overflow : clip | ellipsis | string clip - Clips the text ellipsis - Render an ellipsis ("...") to represent clipped text string - Render the given string to represent clipped text text-overflow-mode - clip | e.. iframe 스크롤 색상 바꾸기 예제 첫번째 HTML의 TAG는 ------------------------------------------------------------------------------ ------------------------------------------------------------------------------- 와 같고. 위의 붉은색으로 표시된 부분이 iFrame 테그와 그 속성 지정 테그들. 다른 부분은 학생들마다 다를수 밖에 없을 듯. width : iFrame의 좌우 넓이 height : 상하 높이 frameborder : iframe의 테두리 보더 두께 id : iframe의 프로그래밍을 위한 ID name : iframe의 target 지정을 위한 이름 marginwidth, marginheigh.. CSS - line-height으로 제어 하는 폰트 행간 CSS - line-height으로 제어 하는 폰트 행간 폰트 속성에 따라 행간이 간격이 달라지는걸 알면서도 그때마다 화면캡쳐로 진행해왔던 일입니다. 이제라도 정리해 보고자^^;; 위 그림에서 보듯 폰트가 굴림인지 돋움인지는 상관없이 동일했으며 line-height 에 따라 달라집니다. 다행이도 ie와 FF도 동일하고 왼쪽은 항상 1px씩 기본적으로 갖고 있네요. ie(7이하버전) / FF : line-height: 14px일경우 0 0 3px 1px; : line-height: 16px일경우 1px 0 4px 1px; : line-height: 18px일경우 2px 0 5px 1px; Opera : line-height: 14px일경우 1px 0 1px 1px; : line-height: 16px일경우.. HTML 4.01 DTD 코딩을 할때...당연히 되야 하는데 안되는 상황이...발생한다면...dtd를 먼저 확인해보세요... 코딩을 할때...에효...당연히 되야 하는데 안되는 상황이...발생한다면...dtd를 먼저 확인해보세요... 저처럼 시간 낭비 하지 않으시려면.. 모든 markup 문서 상단에는 이 문서가 어떠한 형식을 따른 문서인지를 명시해주는 Document TypeDefinition 이 존재 해야 한다. 이 DTD 선언은 브라우져가 어떠한 랜더링 모드를 선택할 것인지를 판별하게 하거나,파서가 문서 파싱을 어떻게 해야 하는지를 알려주는 중요한 정보이다. DTD 선언은 해당 문서를 어떻게 읽어야 하는 지를 알려주게되고 validator는 전적으로 이 DTD 선언에 의지 하여 문서를 판별하게 된다. 웹에서 주로 사용하는 .. html 문서에서 파일 다운로드 모듈(?) asp 문서 소스 get 방식으로 asp 모듈 문서를 호출한다. 물론 변수로 다운로드할 파일명을 같이 전달한다. 페이지 종류별 인클루드 방법(php, jsp, asp, html include) PHP JSP (추천:include directive)include directive include action include direcitve 는 translation phase 에서 include 된다. include action 은 request phase 에 include 된다. include directive 가 더 빠르다. 때문에 include 되는 파일이 빈번히 바뀌지 않는 한 성능 향상을 위해서 include directive 를 쓰는 것이 좋다. jsp 파일의 글자가 깨지면 아래줄을 최상단에 넣어 주면 된다. ASP (추천:절대경로)절대경로 상대경로 HTML 출처 http://hyeonseok.com/pmwiki/index.php/Main/Include ASP에서 인클루드 하는 방법 2가.. CSS로 이미지파일 필요없이 라운드 테이블,DIV 만들기 예제만 봐도 충분히 알수 있다.... 맨처음 도대체 어떤 원리인가 했는데... 내가 이해한 바로는...픽셀하나하나로 장난치는 것뿐이라는 거... 어렵지 않다...ㅋㅋ 이미지 없이 라운딩 박스 표현하기! 이미지 없이 라운딩 박스 + 보더 표현하기! html 문서 안에 다른 html 문서 삽입하기 1. 확장자 .htm, .html안에 삽입시 사이에 코드 삽입 2. 확장자 .jsp 사이에 코드삽입 -> top2.html을 인클루더 시켜 원본 파일에 삽입 location.href와 location.replace의 차이점 location.href와 location.replace의 차이점 1. 특징 - 브라우저에서 URL 이동할 때 사용됨. 2. location - 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체. 3. location.href □ 용법 location.href = “next.html”; □ 특징 - 값을 정의해야하는 프로퍼티. - 주소표시줄에 키보드로 직접 주소를 넣고 enter를 치는 것과 같은 일을 함. - history에 정보가 남아 next.html로 이동 후 [뒤로] 버튼으로 이전 페이지로 갈 수 있다. □ 동작 ■ 새로운 페이지로 이동 - 브라우저 옵션에 손대지 않았을 경우, 브라우저의 주소값이 바뀌면 브라우저는 인터넷 임시파일 (c:\Documents and Settings\.. 실전 UI(HTML/CSS)개발 가이드 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드. 본문 건너 뛰기 올해 하반기에 해야 할 일들이 많이 쌓여 있었습니다. 강의, 책, XE(오픈UI프로젝트)에서 사용해야 할 ‘교재, 콘텐츠, 가이드’를 만들어야 했는데 따로 따로 준비 하자니 너무 소모적인 일들이라 벌어진 일들을 한 번에 일망타진할 수 있는 묘안이 필요했고 제 결단은 ‘세 가지 일을 한 번에 해치우기’ 였습니다. ‘토, 일’ 모두 사무실로 출근하면서 후배들이 궁금해 할만한 질문들을 추린 다음 스스로 답변을 달기 시작 했는데 오늘 문서를 완성(?) 했습니다. 여러 문서들을 참조 했지만 주관적인 의견이 포함된 내용도 있어서 ‘정답’이라고 할 수는 없습니다. 하지만 UI 개발자들이 한 번 쯤은 고민했던(또는 해야 할) 주제들의 FA.. CSS 유용한 기초정리 CSS(Cascading Style Sheet) - HTML이 가진 디자인의 한계를 보완하기 위해서 만들어진 언어로, 웹페이지에 자주 적용하는 디자인을 하나의 규칙으로 정의한 뒤 호출하여 사용할 수 있다. 스타일 시트의 구성 - 스타일시트는 사이에 위치하며, 로 끝난다. - 로 사용하는 보편적인 방식이다. [사용형식] Inline style sheet(각각의 태그에 적용하는 방법) 이 방식은 스타일 시트의 정의 없이 태그내에 직접 삽입하는 방식이다. [사용형식] External style sheet(외부문서를 불러와 적용하는 방식) 사이에 태그로 스타일시트 파일을 연결하여 사용하는 방식으로, 하나의 스타일시트를 여러 문서에 적용하는 방식이다. [사용형식] rel : 연결할 파일과 적용할 html 파일의 .. html 문서에 외부 CSS파일 삽입하기 3가지 방법~! html 문서에 css를 적용하는 방법에는 크게 3가지가 있다... method 1 문서에 직접 삽입 - style 엘리먼트 사용 css 문서를 내부에 삽입 method 2 외부에 css파일을 두고 불러오기 - 외부스타일 시트 사용 ..... /* link태크는 단독태그라서 뒤에.. /를 붙여준다. */ ..... method 3 외부에 css파을 두고 불러오기 - @import 사용 ..... ..... 방법3으로 하게 되면 지원하지 않는 css를 숨김으로 해서 레이아웃이 깨지거나 잘못된 해석을 막을수 있다. css를 숨기지 않는다면 예전 브라우저에서는 알아볼 수 없는 변형된 페이지를 보여주게 된다. method 4 인라인 스타일 ..... 내용을 적어주세요 ..... 케스케이드의 가장 낮은 단계로써 .. 외부 페이지 인클루드 include 하기 이전 1 2 3 다음
