본문 바로가기

분류 전체보기

 (383)
[DOM-01]Document Object Model : DOM의 뜻 자바스크립트(javascript) 강의를 시작하기 전에DOM에 대해 간략하게 알아보고 시작 하겠습니다. 자바스크립트로 HTML과 CSS를 제어하기 위해서는 필수로 알고 계셔야겠죠. 우선 DOM 단어의 뜻을 알아 보겠습니다. DOM은 document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부릅니다.DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식입니다. Document Object Model , 이하 DOM. 아래 이미지가 DOM의 모든것을 말해주고 있네요. (위키백과) By Birger Eriksson - 자작, CC BY-SA 3.0, 링크 HTML, CSS가 사용자에게 직접적으로 보이는 것이라면 DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에..
Lesson #2 CSS 선택자에 대해서 알아봅시다. 이 포스팅의 목차 1. 선택자 (selector) 2. 속성 및 값 (properties and values) 3. Lengths 4. Recap CSS 선택자 Selectors 속성을 적용할때, 요소를 선택하는 구문을 '선택자'라고 합니다. Type Selector 요소 선택자 : HTML 태그 이름으로 선택합니다. span {color:#0000ff;} Class selector 클래스 선택자 : HTML 태그에 선언한 class 이름으로 선택합니다. class 이름은 여러번 재 사용이 가능하여, 일반적으로 사용되는 방법입니다. 이름있는 DIV 이름있는 span .nameDiv { font-size:200%; } id selector 아이디 선택자 : HTML 태그에 선언한 id 이름으로 선택합니다...
Lesson #1 CSS ( Cascading Style Sheet ) 기본적인 특징과 적용방법, 적용 우선순위 알아보기. Lesson #1 CSS ( Cascading Style Sheet ) 기본적인 특징과 적용방법, 적용 우선순위 알아보기. 이 포스트의 목차 1. CSS 기본 특징. 2. 적용(연결) 방법 3. 우선순위 CSS 기본 특징 CSS는 HTML 문서를 보기좋게 만드는, 디자인 코드라고 생각하시면 쉽습니다. CSS 이름에서 짐작해볼수 있듯이 Cascading의 의미는 폭포 같은, 계속되는, 연속적인 뜻을 가지고 있으며 가장 큰 특징입니다. 계단식 연결을 의미 한다고 생각하세요. 브라우저가 따라가는 계층 구조는 외부, 내부, 인라인 입니다. 특정 계층 구초를 따르기 때문에 상위 요소에서 지정한 속성이 하위 요소까지 연속적으로 적용된다는 의미라고 생각하시면 쉽습니다. 폭포가 위에서 아래로 떨어지는 듯한 느낌으로 적..
[jQuery] 메뉴 요약 정보 표시하기 메뉴에 마우스 오버시, 간략한 정보를 표시하는 툴팁tooltip같은 것을 적용해보도록 하겠습니다. ,h3>jQuery $(document).ready(function(){ // hide span element $('.w').hide(); $('.m').hide(); $('.s').hide(); // show class name 'w' $('#w').hover(function(event){ $('.w').show(); $('.m').hide(); $('.s').hide(); $('#w').addClass('hover'); }, function(){ $('#w').removeClass('hover'); }); //show class name'm' $('#m').hover(function(event){ $('..
[jQuery] 메뉴 항목에 Hover 효과 추가하기 HTML 파일에는 "강아지"라는 리스트로, 순서가 없는 엘리먼트를 작성합니다. 강아지의 종류로 웰시코기, 말라뮤트, 시바 3가지 항목을 추가했습니다. HTML 코드는 아래 codepen을 확인해주세요. 순서없는 리스트가 메뉴모양을 갖추도록 간단하고 심플하게 스타일을 적용했습니다. 스타일시트에 타입 선택자를 작성해서 세 엘리먼트에 자동 적용되도록 합니다. 아래와 같이 CSS를 작성합니다. css div{width:200px; box-sizing:border-box;} ul{list-style:none; box-sizing:border-box; margin:0; padding:0; background:#eeeeee; } ul > li {width:100%; padding:0.8em; box-sizing:bo..
[jQuery] ul 메뉴를 브랜드크럼 메뉴( breadcrumb ) 스타일로 표현하기. 브랜드크럼 메뉴 breadcrumb 현재의 위치를 홈 > 서비스 > 서비스 상세 같이 표시하는 것을 브랜드크럼이라고 부릅니다. 빵조각이라는 뜻으로 '헨젤과 그레텔'이야기에서 빵조각으로 돌아갈 길을 표시한다는 의미에서 유래되었습니다. CSS .listStyle{padding:20px; display:inline;} .listStyle::before {padding-right:15px; content:">"; font-size:0.75em; color:#266FEF; } .ulListStyle {list-style: none; display:inline; margin:0; padding:0;} jQuery $(document).ready(function(){ $('ul').addClass('ulListSty..
[자바스크립트]상단 고정된 sticky 메뉴 응용 (function() { 'use strict'; var contents = document.querySelector(".contents"); var h = document.querySelector("header"); var H_height ; function seTopPadding(){ H_height = h.offsetHeight; contents.style.paddingTop = H_height + "px"; } function onScroll(){ window.addEventListener("scroll", callbackFnc); function callbackFnc(){ var y = window.pageYOffset; if(y > 500){ h.classList.add("scroll"); }..
[jQuery] scroll to top 스크롤 탑 버튼 만들기 $(document).ready(function(){ // hide #toTop first $("#toTop").hide(); // fade in #toTop $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); // scroll body to 0px on click $('#toTop a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); See the Pen scroll to top butto..

티스토리툴바