반응형 [Front-End] 프론트엔드55 [css3] mark 태그 형광펜 마크 색상 변경 소스 코드 예제 안녕하세요. css3에서는 html5에서 새로 지원하는 형광펜 태그의 색상을 변경할 수 있습니다. 스타일시트 부분에서 태그 선택자를 이용하여 변경하시면 됩니다. background-color 속성을 사용하세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css3 mark 태그 형광펜 마크 색상 변경 소스 코드 예제 body { background-color: #9adaca; } codeomni mark 태그 소스 codeomni mark 태그 소스 Colored by Color Scripter cs ▲ 실행 화면입니다. ▲ 기본 색상은 노란색입니다. 2018. 8. 21. html5 mark 태그 형광펜 마크 소스 코드 예제 안녕하세요. html5에서는 html4에서 지원하지 않는 태그를 사용할 수 있습니다. 태그의 색상을 변경하기 위해서는 스타일시트의 background-color 속성을 사용해야 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 codeomni.tistory.com html mark 태그 형광펜 마크 소스 코드 예제 body { background-color: #9adaca; } codeomni mark 태그 소스 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 21. [css3] 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 안녕하세요. css3에는 html5를 디자인 할 수 있는 다양한 스타일을 지원합니다. 글자에 그림자 속성을 사용한 것처럼 박스에도 box-shadow 속성을 적용할 수 있습니다. 사용 방법은 box-shadow: 오른쪽 아래 흐림도 색상 순서입니다. 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 css3 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 body { background-color: #cce0d6; } #box { border: 3px solid; width: 400px; padding: 10px; box-shadow: 10px 5px 10px #a89c86; } codeomni 박스.. 2018. 8. 20. 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. 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. 이전 1 2 3 다음 반응형
