HTML 문서

HTML 이란 ? HTML 이란 Hyper Text Markup Language 의 약자로써 웹 페이지를 만들기 위한 언어로 웹 브라우저에서 동작하는 가장 기본적인 프로그래밍 언어의 한 종류이다. Document HTML 문서를 선언한것이다.HTML은 시작과 끝이 있고, 그 끝은 로 닫아주며, 물론 예외적으로 싱글 태그도 있다.head 는 말 그대로 문서의 두뇌의 역활을 한다고 볼수 있다. 사이에는 중요한 정보들을 담고 있으며,현재 만들어진 문서의 meta 태그보다 많은 태그 javascript / css 등 여러가지를 선언한다. 위 코드에 선언된 meta태그만 간략하게 설명 해보고자 한다. UTF-8 유니코드UTF-8은 유니코드이다. 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩 이다. 다만 ..

• format_list_bulleted 개발연습막쓰기/HTML
• · 2018. 7. 4.
• textsms

jQuery 시작하기

jQuery 시작하기 Hello World 모든 프로그래밍은 Hello World로 시작한다는 말을 어디선가?들어본듯 합니다. 그래서 저도 거창하게 프로그래밍이랄꺼 까진 없지만..기본부터 충실하게 스터디를 하며, 블로그에 포스팅해보고자 ...거창한 꿈을 갖고... 이렇게 흠흠..... 사실 오늘은 토요일이라 넘어갈까 하다가 jQuery에 대해 블로그에 포스팅을 해보기 위해 아주 간단한 예문을 하나 준비해보았습니다.간단하게 설명을 드리자면 .. See the Pen LQGKYB by uicode (@uicode) on CodePen. 위에 소스를 보시면 var는 변수를 의미합니다. var 변수를 선언하고 변수 이름을 btn 이라는 변수명을 지정했습니다.그리고 그 변수안에 button이라는 버튼 HTML을 ..

• format_list_bulleted 개발연습막쓰기/jQuery
• · 2018. 2. 3.
• textsms

jQuery 탑 버튼

jQuery 퀵 버튼 01. CSS 12345678910* {margin:0; padding:0; font-size:14px;}a, a:active {color:#333; text-decoration:none;}ul li {list-style:none;}header {height:100px; background:orchid}section {height:1500px; background:burlywood}footer {height:100px; background:darkcyan}body { position:relative; }.quick {position:fixed; bottom:20px; right:20px; display:none;}.quick.on {display:block; }.quick a {di..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 25.
• textsms

scrollTop 이벤트

스크롤 따라다니는 메뉴 01. CSS 123456789/* CSS 는 입맛에 맞게 변경 */html, body {height: 100%;}#wrap {text-align:center; height:100%}header {background:orange; box-shadow: 0px 5px 10px -5px; position:relative;}header li {display:inline-block;}header li a {display:block; padding:20px;}header.fixd {position:fixed; top:0; width: calc(100% - 15px);} section {background:orchid; min-height:100%; padding:150px 0 150px}f..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 18.
• textsms

드롭 ANIMATE 텝

텝 Animate 드롭 메뉴 01. CSS 123456789101112.tab_type02 ul:after {content:""; display: block; clear:both;}.tab_type02 li {float:left;/* width:25%;*/}.tab_type02 li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}.tab_type02 li.on a{background:#ccc; color:#fff; }.tab_type02 .box_area { position: relative;}.tab_type02 .box {border:1px solid #ccc; border-top:0; width:100%; paddi..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 17.
• textsms

텝 메뉴

텝 메뉴 Animate 01. CSS 123456789101112.tab_type03 .box_area, .tab_type03 ul.menu:after {content:""; display: block; clear:both;}.tab_type03 .menu li {float:left;/* width:25%;*/}.tab_type03 .menu li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}.tab_type03 .menu li.on a{background:#ccc; color:#fff;}.tab_type03 .box_area {width:100%; height:100px; overflow:hidden;}.tab_typ..

• format_list_bulleted 개발연습막쓰기/개발연습 막쓰기
• · 2017. 7. 17.
• textsms