반응형 전체 글900 css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 안녕하세요. css3에는 사용자가 쉽게 디자인을 할 수 있도록 그림자 속성을 지원합니다. text-shadow는 글자에 그림자를 적용하는 속성입니다. 사용 방법은 text-shadow: 오른쪽 아래 흐림도 색상 입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 body { background-color: #316097; } h1 { color: #d9cbb3; text-shadow: 10px 5px 10px #a89c86; } codeomni 텍스트 그림자 속성 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 20. css3 스타일시트 font 글꼴 속성 소스 코드 예제 안녕하세요. css3를 통해 html로 제작된 페이지를 다양한 디자인을 할 수 있습니다. 스타일시트에서 지원하는 폰트 속성으로 폰트를 적용할 수 있습니다. -color: 글자의 색상을 지정합니다. -font-size: 글자의 크기를 지정합니다. -font-family: 글꼴을 지정합니다. -font-style: 글자의 스타일을 지정합니다. -font-weight: 글자의 두께를 지정합니다. -text-align: 글자의 정령 방식을 지정합니다. -line-height: 글자의 높이를 지정합니다. -text-decoration: 하이퍼링크의 글자를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.tistory.com c.. 2018. 8. 19. html5 a 하이퍼링크 태그 소스 코드 예제 안녕하세요. 워드프로세서나 웹 페이지에서는 하이퍼링크를 사용할 수 있습니다. html5에서도 하이퍼링크를 지원하는 ~ 태그를 사용할 수 있습니다. 하이퍼링크 태그는 여러 속성일 있습니다. - 절대 경로: 접속한 페이지의 위치와 상관없이 웹 페이지의 파일의 위치를 사용합니다. - 상대 경로: 접속한 페이지의 위치로 결정되는 웹 페이지의 파일을 사용합니다. - 아이디 경로: 접속한 페이지의 다른 태그의 id를 사용합니다. - 메일 경로: 메일 주소를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html a 하이퍼링크 태그 소스 코드 예제 body { background-color: #316097; } codeom.. 2018. 8. 19. css 스타일시트 background 배경 속성 소스 코드 예제 안녕하세요. html5은 다양한 css3(스타일시트)를 지원합니다. 많은 웹 페이지에서 배경을 효과적으로 사용합니다. css에서 배경 속성을 지원하기 때문입니다. background: 배경의 속성을 한 번에 사용합니다. background-image: 배경에 사용할 이미지를 지정합니다. url()를 사용합니다. background-size: 이미지의 크기를 지정합니다. (너비, 높이) background-repeat: 이미지의 반복을 지정합니다. (가로, 세로 반복) background-attachment: 이미지의 부착하는 형태를 지정합니다. background-position: 이미지의 위치를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 co.. 2018. 8. 18. html 목록 ul ol li 태그 소스 코드 예제 안녕하세요. 네비게이션을 만들 때 html5에서는 목록 태그를 사용합니다. 목록 태그는 편의를 위해서 다양하게 지원합니다. 스타일시트를 사용해서 기호를 변경할 수 있습니다. - : 글머리 기호 목록 태그입니다. - : 순서 번호 목록 태그입니다. - : 목록 요소입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html 목록 ul ol li 태그 소스 코드 예제 codeomni.tistory 글머리 기호 목록 태그 순서 번호 목록 태그 순서 번호 목록 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 18. javascript 자바스크립트 autofocus 입력 양식 자동 초점 설정 소스 코드 안녕하세요. 자바스크립트는 html과 css로 만든 페이지를 동적으로 만듭니다. 웹 페이지에서 아이디나 비밀번호 부분이 입력 부분이 다음 칸으로 넘어갑니다. 오토포커스를 사용하면 쉽게 구현할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 codeomni.tistory.com javascript autofocus 입력 양식 자동 초점 설정 소스 코드 window.onload = function () { var input1 = document.querySelectorAll('input')[0]; var input2 = document.querySelectorAll('in.. 2018. 8. 17. css rgb, rgba, hex 색상 단위 소스 코드 안녕하세요. 스타일시트는 html를 손쉽게 스타일을 적용할 수 있습니다. css3에서는 다양한 색상을 적용할 수 있도록 색상 단위를 제공합니다. - rgb(red, green, blue): RGB 색상 단위입니다. 0~255 사이의 숫자를 입력할 수 있습니다. - rgba(red, green, blue, alpha): RGBA 색상 단위입니다. 투명도를 사용할 수 있습니다. (0,0 투명) - #000000: HEX 코드 단위입니다. 16진수 단위를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 codeomni.tistory.com css rgb, rgba, hex 색상 단위 소스 코드 codeomni.tistory.com rgb(red, green, blue) RGB 색상 단위.. 2018. 8. 17. css 외부 스타일 시트 사용 소스 코드 안녕하세요. css 시트는 html로 작성한 웹 페이지의 스타일을 적용합니다. 스타일시트는 내부 스타일시트와 외부 스타일시트가 있습니다. 내부 시내일 시트는 태그를 사용해 html 문서 안에 작성하는 방법입니다. 외부 스타일시트는 태그에 href속성을 사용하여 html로 불러 사용합니다. 외부 스타일시트는 협업을 할 경우, 프로젝트 단위가 클 경우 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 Colored by Color Scripter cs ▲ html 소스 코드입니다. 1 2 3 4 5 6 7 body { background.. 2018. 8. 16. html5 img 이미지 넣기 소스 코드 안녕하세요. HTML5에서는 기존 프로그래밍 언어보다 쉽게 이미지를 넣을 수 있습니다. 스타일 시트(css)를 이용하여 원하는 스타일을 지정할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 codeomni.tistory.com html img 이미지 넣기 소스 코드 Colored by Color Scripter cs src: 이미지 파일의 경로를 지정합니다. 다른 폴더도 지정할 수 있습니다. 웹 서버를 통해 이미지를 가져올 수 있습니다. alt: 이미지가 출력할 수 없을 경우 대체하는 글자를 지정합니다. width: 이미지의 너비를 지정합니다. height: 이미지의 높이를 지정합니다. ▲ 실행화면입니다. 2018. 8. 16. [Windows 10] 윈도우 10 데이터 사용량 확인 안녕하세요. 이번에 포스팅하는 글은 윈도우 10에 꿀팁입니다. 윈도우 10 운영체제도 모바일 운영체제처럼 사용자가 사용한 데이터를 확인 할 수 있습니다. ▲ 윈도우 키를 눌러서 나오는 설정 버튼이나 설정을 검색하세요. ▲ 설정에 들어가시면 네트워크 및 인터넷이 있습니다. ▲ 그 중 데이터 사용량에 들어가시면 사용된 Wi-Fi와 데이터를 확인할 수 있습니다. ▲ 그 중에서 개요에 있는 앱별 사용량 보기를 선택하시면 ▲ 사용된 프로그램에 따라 확인할 수 있습니다. 2018. 8. 16. html5 특수기호 특수 문자 소스 코드 안녕하세요. html5로 웹 페이지를 제작할 때 특수 문자가 필요한 경우가 있습니다. 특수문자를 입력할 경우는 html5에서 제공하는 코드를 사용해야 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 codeomni.tistory.com html 특수기호 소스 코드 codeomni html 특수기호 소스 코드 &amg; " | ( ) , - ´ Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 15. css px pt ex em 글자 크기 값 소스 코드 안녕하세요. css에는 웹 페이지에 알맞은 여러 글자 크기의 단위를 제공합니다. 글자 크기의 단위를 사용하면 웹 페이지가 모바일에서도 작동합니다. - px: 일반적인 픽셀입니다. 모니터의 픽셀에 따른 상대적 크기입니다. - pt: 문서에서 사용하는 포인트 단위입니다. - em: 사용하고 있는 글꼴에서 대문자 M의 너비를 기준으로 적용합니다. - ex: 사용하고 있는 글꼴에서 소문자 x의 높이를 기준으로 적용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css px pt ex em 글자 크기 값 소스 코드 codeomni 글자 크기 값 소스 코드 글자 크기 px 단위 글자 크기 pt 단위 글자 크기 ex 단위 글자 크기 em 단위 Colore.. 2018. 8. 15. bootstrap tooltip 부트스트랩 툴 소스 코드 안녕하세요. 부트스트랩은 웹 페이지를 구성하는 좋은 기능들이 있습니다. 툴팁은 웹 페이지의 방문자에게 추가적인 정보를 쉽게 전달할 수 있습니다. 또한 정보를 요약해서 UI를 개선할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 codeomni.tistory.com bootstrap tooltip 부트스트랩 툴 소스 코드 body { padding: 100px 100px; } codeomni 위 툴팁 아래 툴팁 오른쪽 툴팁 $(function () { $('[data-toggle="tooltip"]').tooltip() }) Colored by Color S.. 2018. 8. 14. j Query 플러그인 풀 스크린 배경 Backstretch.js 플러그인 소스 코드 안녕하세요. 풀 스크린 배경인 웹 페이지는 특정 주제를 강조하거나 정보를 쉽게 전달할 수 있습니다. 웹 페이지로 풀 스크린 배경을 제작하는 방법은 여러 방법이 있습니다. j Query, bootstrap 등의 플러그인을 사용해서 쉽게 제작할 수 있습니다. j Query에는 풀 스크린 배경을 지원하는 Backstretch이 있습니다. 플러그인은 j Query에 포함되어 있기 때문에 쉽게 소스 코드로 구현할 수 있습니다. Backstretch 페이지(http://www.jquery-backstretch.com/)에 접속하시면 다운로드와 함께 사용방법을 얻을 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29.. 2018. 8. 14. bootstrap navigationbar navbar 부트스트랩 네비게이션바 네비바 소스 코드 안녕하세요. 부트스트랩은 여러가지 편의 기능을 제공합니다. 이번에 게시할 글은 부트스트랩의 네비바(navbar)입니다. 대부분 웹 페이지에 접속하시면 상단에 보이는 메뉴입니다. 사용자에게 웹 페이지의 기능을 편하게 제공합니다. 구현하기 위해서는 많은 코드가 필요하지만 부트스트랩에서는 작성자를 위한 간단한 코드를 제공합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 codeomni.tistory.com bootstrap navigationbar navbar 부트스트랩 네비게이션바 네비바 소스 코드 body { padding: 100px.. 2018. 8. 13. bootstrap navigation 부트스트랩 네비게이션 소스 코드 안녕하세요. 부트스트랩은 웹 페이지에 방문하는 사용자들을 위해 다양한 편의 기능을 제공합니다. 네비게이션은 웹 페이지 안에서 사용자들의 이동을 쉽게 합니다. html로 네비게이션을 구현하기 위해서는많은 소스 코드가 필요합니다. 부트스트랩은 작성자의 편의를 위해 .nav를 사용합니다. 또한 네비게이션의 다양한 UI도 제공하고 있습니다. 구현할 웹 페이지에 맞는 스타일을 사용하세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 6.. 2018. 8. 13. html bootstrap dropdown 부트스트랩 드롭다운 소스 코드 안녕하세요. 웹 페이지를 구현하기 쉽도록부트스트랩에는 다양한 html 스타일을 지원합니다. 드롭다운은 웹 페이지에서 메뉴를 구현할 때 사용되는소스 코드입니다. 드롭다운을 사용하면 메뉴들을 쉽게 정리할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 codeomni.tistory.com bootstrap dropdown 부트스트랩 드롭다운 소스 코드 body { padding: 100px 100px; } Dropdown codeomni 리스트 2 리스트 3 Colored by Color Scripter cs ▲ 실행 화면입니다. 참고 문헌 javascript . (Aug 12 2018).. 2018. 8. 12. html bootstrap popover 부트스트랩 팝오버 소스 코드 안녕하세요. 부트스트랩에는 웹 페이지를 쉽게 구현할 수 있는다양한 기능들이 있습니다. 기능들은 사용자에게 편의를 주고 시각적인효과를 줍니다. 팝 오버는 웹 페이지에 메모처럼 추가적인 내용을효과적으로 표현합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 codeomni.tistory.com bootstrap popover 부트스트랩 팝오버 소스 코드 body { padding: 100px 100px; } Popover button $("#pop").popover(); Colored by Color Scripter cs ▲ 실행 화면입니다. 참고 문헌 Popovers . (Aug 12 2018). http://boo.. 2018. 8. 12. vegas 플러그인 풀스크린 배경 소스 코드 안녕하세요. html 문서에는 다양한 플러그인이 있습니다. 플러그인을 통해서 작성자에게 알맞는 홈페이지를 구현할 수 있습니다. Vegas 플러그인을 사용하시면 손쉽게 풀 스크린 홈페이지를 구현할 수 있습니다. https://vegas.jaysalvat.com/ Vegas 플러그인 홈페이지입니다. 접속하시면 다운로드와 사용 방법을 파악할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 codeomni.tistory.com vegas 플러그인 풀스크린 배경 소스 코드 $(function(){ $('body').vegas({ slides:[ {src:'veg.. 2018. 8. 11. css ghost button 고스트 투명 버튼 소스 코드 안녕하세요. 웹 페이지에서 투명 버튼인 고스트 버튼은 쉽게 css로 구현할 수 있습니다. 구현하고 싶은 페이지에 알맞게 색상, 크기, 위치를 변경하기 쉽습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 codeomni.tistory.com css ghost button 고스트 투명 버튼 소스 코드 body { background:url('background.png') no-repeat center fixed; background-size:cover; } .ghost-button { align-items: center; display: inline-block; padding: 25px 40px; marg.. 2018. 8. 11. html favicon icon 아이콘 소스 코드 안녕하세요. 접속한 웹 페이지의 탭 부분을 보면 해당 사이트에 로고나, 아이콘을 볼 수 있습니다. 파비콘(favicon)으로 웹 사이트를 대표하는 아이콘입니다. html 코드 중 태그를 이용하여 간단하게 구현할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 codeomni.tistory.com html favicon icon 아이콘 소스 코드 html favicon icon 소스 코드입니다. Colored by Color Scripter cs ▲ 아이콘의 크기는 16*16 픽셀로 제작합니다. ▲ 실행 화면입니다. 2018. 8. 10. javascript alert() 메시지 알림창 경고창 띄우기 소스 코드 안녕하세요. javascript는 html과 css로 구현 할 수 없는 동적인 부분을 구현합니다. javascript에는 다양한 함수가 내장되어 있습니다. alert()는 웹 페이지에서 사용자에 접근을 경고하거나 알림을 표시하는 기능을 가지고 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 codeomni.tistory.com javascript alert 소스 코드 alert("javascript alert() 경고창입니다."); Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 10. css 선택자 종류 소스 코드 안녕하세요. css3 선택자를 작성하여 html를 선택하면 코드의 효율성 증가,시간을 절약할 수 있다는 장점이 있습니다. css 선택자는 여려 종류가 있습니다. 기본적으로 많이 사용하는 기본 선택자가 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 codeomni.tistory.com css 선택자 소스 코드 /*전체 선택자*/ * { color: orange; } /*태그 선택자*/ h1 { color: red; } /*아이디 선택자*/ #header { background-color: yellow; } /*클래스 선택자*/ .selection { color: black; }.. 2018. 8. 10. html 글자 모양 태그 소스 코드 안녕하세요. html5에는 다양한 글자 모양 태그를 사용할 수 있습니다. 웹 페이지를 작성할 때 필요한 곳에 해당 태그를 사용하세요. 글자 모양 태그는 제목 글자 태그~, 본문 글자 태그와 함께 사용 가능합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html 글자 모양 태그 소스 코드 b 태그 i 태그 small 태그 sub 태그 sup 태그 ins 태그 del 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 9. [bootstrap] 부트스트랩 모달 modal 소스 코드 예제 안녕하세요. 부트스트랩은 반응형 웹 페이지를 작성할 때 많이 사용되는 코드 중 하나입니다. 반응형 웹 페이지에서 접속자에게 특정 정보나 공지 사항은 효과적으로 전달할 수 있다는 장점이 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 codeomni.tistory.com 모달 소스 코드 모달 실행 공지 사항 안녕하세요. codeomni 입니다. 방문해주셔서 감사합니다. 궁금하신 사항이나 문의 사항은 방명록에 공개 또는 비공개로 남겨주세요. 블로그 주소는 http://codeomni.tistory.com/입니다. 닫기 Colored by Color Scr.. 2018. 8. 8. html 뷰포트 소스 코드 viewport 스마트폰 안녕하세요. 뷰포트는 데스크탑과 스마트폰에서 웹 페이지나 문서가 모두 표시되는 기능입니다. 1 cs 태그는 웹 문서의 내용을 요약합니다. 사이에 작성됩니다. name은 viewport로 지정하였고 width=device-width는 사용자의 매체의 px크기에 맞게 웹 문서를 실행합니다. initial-scale=1은 웹 문서를 실행할 때 배율을 1로 설정하여 너비를 지정합니다. 2018. 8. 7. html 이미지 풀 스크린 배경 소스 코드, 제작, 만들기 안녕하세요. 페이지에 정보를 효과적으로 전달하기 위해 이미지나 동영상을 풀 스크린으로 지정하여 사용합니다. 코딩 방법은 css를 사용해서 크기를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 codeomni.tistory.com 풀 스크린 소스 코드 html { background: url(background.png) no-repeat center center fixed; background-size: cover; } body { font-family: Fixedsys; color: #d9cbb3; } div { margin-top: 100px; padding:200px 100px; } h1 제목입니다. conten.. 2018. 8. 6. 정말 간단한 홈페이지 만들기 소스, 코드 안녕하세요. html로 홈페이지를 쉽게 만들 수 있는 방법이 있습니다. 먼저 , 텍스트 편집기를 실행합니다. 일반적으로 Windows(윈도우) 컴퓨터에서는 메모장을 사용하고 Mac 사용자는 텍스트/편집을 사용합니다. 전문 html 편집기를 사용하여 웹 페이지를 만들고 수정할 수 있습니다. 그런 다음 html 쓰기를 작성하거나 일부 html을 메모장에 복사합니다. 그런 다음 html페이지를 저장합니다. 파일을 컴퓨터에 저장합니다. 1 2 3 4 5 6 7 8 9 10 탭 부분 표시 제목 부분입니다. 일반 글 부분입니다. cs 2018. 8. 5. html 우클릭 방지 함수, 선택 방지, 스크립 방지, 드래그 방지 안녕하세요. 특정 홈페이지에서 컨텐츠 보호나 보안을 위해 마우스의 우클릭을 방지합니다. 이 기능은 html에서 구현할 수 있습니다. 1 cs 코드는 여러가지로 구성되어 있습니다. html 코드에서 작성자가 원하는 부분에 추가하여 구현할 수 있습니다. 1 documentd .oncontextmenu=new Function('return false'); cs 페이지에서 오른쪽 마우스 버튼을 클릭하면 보이는 메뉴를 false로 설정합니다. 1 document.ondragstart=new Function('return false'); cs 페이지에서 왼쪽 마우스 버튼을 이용한 드래그를 false로 설정합니다. 1 documentd .onselectstart=new Function('return false'); .. 2018. 8. 4. 어려운 빅데이터의 용어, 개념, 정리 Bigdata 빅데이터는 과거 아날로그 환경의 데이터에 비해 디지털 환경에서 생성되는 데이터로 그 규모가 방대하고, 생성 주기도 짤고, 형태도 수치 데이터뿐 아니라 문자와 영상 데이터를 포함하는 대규모 데이터를 말합니다. 또한 기존의 기술로는 처리할 수 없는 데이터여서 그 내용을 분석해 보지 못했는데, 기술의 발달로 그 내용을 분석해 보니 가치가 인정되는 데이터를 말합니다. 대용량의 다양한 데이터가 반복적으로 누적된느 환경에서 실시간으로 예측 및 최적화를 수행하는 것을 목적으로 하는 대규모 데이터입니다. 가트너(미국의 리서치 전문업체): 데이터 양이(Volume)이 많고 데이터 형태가 다양(Variety)하며, 데이터 속도(Velocity)가 빠른 데이터로 정의하였습니다. 빅데이터와 스몰데이터의 차이점 .. 2018. 8. 4. 이전 1 ··· 27 28 29 30 다음 반응형
