본문 바로가기

프로그래밍 언어/HTML5 + CSS327

[html] meta 태그로 페이지 이동하기 Head Css .remainSeconds {color:red} Javascript var seconds = 11; function calSeconds() { seconds--; $(".remainSeconds").html( seconds ); setTimeout(calSeconds, 1000); } $(function(){ calSeconds(); }); Body 10초 후에 티스토리로 넘어갑니다. 설명 위 메타 태그를 사이에 넣어주시면 됩니다. 10초 후에 티스토리로 이동하는 샘플입니다. 10초 후에 티스토리로 넘어갑니다. 2016. 2. 28.
[CSS] 마우스로 드래그하여 선택한 글자의 배경 색상 바꾸는 방법 마우스로 드래그해서 선택한 글자의 배경색을 바꿔보세요. 새로운 느낌일 겁니다^^ 보통은 마우스로 드래그 한 글자의 색상은 파란색 바탕에 글자색은 흰색으로 보여지는데요. 이걸 CSS 두 줄만 추가하면 바꿀수가 있습니다. ::selection { color:white; background:#ec008c; } ::-moz-selection { color:white; background:#ec008c; } /* firefox */ 아주 간단하죠. 여러분의 웹사이트 css 파일에 이 두 줄만 넣으시면 바뀝니다. 물론, 색상은 원하는 색으로 수정하시면 됩니다. 원래는 이런 색상으로 나오는데요. CSS를 추가하면 이렇게 색상이 바뀝니다. 2016. 2. 17.
[Html] javascript로 체크박스의 글자(text)를 클릭해도 체크되도록 하기 체크박스의 작은 부분을 클릭하는 게 간혹 힘들다고 느껴지는 때가 있습니다.특히, 사용자 입장에서 많은 편리함을 제공하는 요즘같은 때에는 더욱 불편하게 느껴지고, 운영자의 무심함을 탓하기도 합니다.조금만 더 신경써 줬으면 하고요. 아래처럼 작성하는 게 체크박스의 전통적인 방법인데요.checkbox” id=”hintYn” /> 힌트 포함checkbox” id=”imageUrl” /> 이미지 포함checkbox” id=”explanation” /> 설명 포함 아래처럼 정말 조금만 신경쓰면 체크박스의 영역을 텍스트로 확장할 수 있고 사용자에게 편리함을 더할 수 있습니다.“hint“>checkbox” id=“hint” /> 힌트 포함“image“>checkbox” id=“image” /> 이미지 포.. 2016. 2. 9.
[HTML] input 텍스트박스 ime-mode 속성(ie) ime-mode 속성은 다음과 같습니다. ime-mode: auto – 한영모드 ime-mode: active – 첫 로딩시 한글모드 (영어 모드가능) ime-mode: inactive – 첫 로딩시 영어모드 (한글 모드가능) ime-mode: disabled – 영문만 가능 (한글모드 불가) 안타깝게도 ie(익스플로러)에서만 작동한다고 합니다 ㅠ 2015. 7. 15.
[naradesign] CSS로 만든 깔끔하고 다양한 색상의 상단 메뉴바 CSS로 만든 깔끔하고 다양한 색상의 상단 메뉴바가 있어 소개합니다. CSS가 적용되지 않으면 이렇게 보입니다.깔끔하면서도 방탄웹으로 잘 만들었네요~http://naradesign.net/wp/2010/02/11/1185/ 2015. 6. 23.
이미지 없이 CSS로 만든 깔끔한 가로세로 막대그래프 및 별그래프 이미지 없이 CSS로 만든 깔끔한 이런 그래프 어떠세요? 1. 세로 막대그래프 2. 가로 막대그래프 3. Bar 그래프 4. 만족도 별그래프 http://naradesign.net/wp/2010/03/17/1233/여기 가시면 소스 확인하실 수 있습니다. 2015. 6. 17.
CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어보기 CSS3의 미디어 쿼리를 이용하여 가로 박스가 창 크기에 따라 세로로 바뀌는 반응형 레이어 만들어 보겠습니다. 소스 설명 반드시 사이에 위 meta 태그를 넣어 주셔야 합니다.@media (max-width: 500px) { .solid { display:block;} .dashed { display:block;} .dotted {display:block;} } 미디어쿼리가 사용되었구요. 브라우저 창이 최대 500px까지는 안의 상태를 유지하라는 뜻입니다. .solid { width:190px; height:190px; background-color:#cccccc; border:3px solid black; display:inline-block;} .dashed { width:190px; height:1.. 2015. 5. 15.
HTML 글자를 강조 태그들 - b (굵게), i (기울임), u (밑줄), ins (밑줄), tt (타자체), sup (위첨자), sub (아래첨자), s (가로선), del (가로선), small (작게), big(크게) 설명이 필요 없습니다.Result 눌러서 직접 실행된 모습을 보시면 됩니다. 2015. 1. 16.
다국어(영어, 중국어, 일본어 등등)든 한글이든 글자 깨지지 않으려면 Html/Css/Js 파일 무조건 utf-8로 저장하세요. Html/Css/Js 파일 무조건 utf-8로 저장하세요. 그래야 한국어든, 중국어든, 일본어든 글자가 깨지지 않습니다. 파일을 저장할 때 인코딩을 UTF-8로 선택해서 저장하세요. Html에서 charset="utf-8"로 저장하세요. 예전에는 한글일 경우 charset="euc-kr"로 했었는데 이렇게 하면 한글과 영어를 제외한 다른 언어는 글자가 깨지는 현상이 발생을 합니다. 머리 아프게 여러가지 경우의 수를 따질 필요없이 파일 인코딩도 utf-8, charset도 utf-8로 하시면 모든 언어가 깨지지 않고 잘 표현됩니다. 꼭 기억하세요~ 실행하면 이렇게 잘 나옵니다. 소스 English 한국어 中文 わご English 한국어 中文 わご 실행 [새창] [새창(소스포함)] 2014. 12. 7.
HTML5와 CSS3로 만드는 드롭다운 네비게이션 메뉴 HTML5 + CSS3로 만들어진 드롭다운 네비게이션 메뉴입니다. style 부분에 주석으로 간단하게 설명이 돼 있으니 자세한 설명은 생략합니다. 소스만 참고하시고 필요한 곳에 알맞게 변경하여 사용하시면 됩니다. 2014. 11. 27.
HTML5 문서의 기본구조 HTML5로 해석하라는 뜻입니다. 소문자로 써도 되고 대문자로 써도 됩니다. … lang=”ko”라고 표시를 해주면 검색사이트에서 ‘한국어 검색’처럼 특정언어로 제한해서 검색할 때 사용됩니다.문서 제목웹 브라우저의 제목표시줄에 표시될 내용입니다. 이 제목으로 검색엔진에서 검색 결과를 보여줄 때 사용을 하기 때문에 문서 제목을 잘 넣어주어야 유리합니다.HTML5에서는 이렇게 간단하게 charset을 지정할 수 있습니다. 2014. 11. 21.
HTML과 CSS만으로 구축하는 웹 - NaraDesign 이미지 없이 HTML / CSS 만으로 템플릿을 깔끔하게 만들어놓은 곳이 있어서 링크합니다. http://naradesign.net/ouif 정찬명 님이 직접 만들어서 올려놓은 소스들인데,,, 너무 맘에 드네요~게다가 웹표준까지 지킨 소스라고 하니 브라우저와 상관없이 잘 동작하리라 봅니다.앞으로 자주 애용할 듯.. 2012. 11. 15.

티스토리툴바