웹 디자인 및 프로그래밍 시 자주 활용되는 주요 플러그인 사이트 5
·
Development/HTML
웹 디자인 및 프로그래밍 시 자주 활용되는 주요 플러그인 사이트 5가지 를 모아보았습니다 :) 1. GSAP Greensock 에서 만든 애니메이션 플랫폼으로 jQuery에 비해 20배 빠른 성능을 보여 줍니다. 다양한 웹 애니메이션을 구현할 수 있는 JavaScript 로 구성된 애니메이션 라이브러리 입니다. 2. Fullpage 웹 사이트의 전체 화면을 스크롤 형태로 만들 수 있는 JavaScript 라이브러리 입니다. 웹 사이트 구역 안에 수직 방향으로 스크롤 되거나 수평 방향으로 슬라이드를 넣을 수 있습니다. (수평 방향 스크롤 형태는 현재 유료 입니다.) 3. AOS 스크롤 에니메이션 라이브러리 입니다. 스크롤을 내리며 박스가 나타나는 애니메이션을 지정할 수 있습니다. 사이트 전체가 예시로 이루..
Table 태그
·
Development/HTML
1. Table 태그 : 명확한 표의 형식에만 사용하는 태그 사용 예시 ) 선물용과 가정용 상품 구성 용도 중량 개수 가격 선물용 3kg 11~16과 35,000원 가정용 4kg 11~16과 21,000원 2. caption : 표 제목 , 위쪽 중앙에 표시, 생략가능 3. scope : 열 제목, 행 제목 셀에 정의하는 속성 행 제목 : 열 제목 : 낭독기에선 scope가 정의된 셀과 함께 td를 읽어준다. 4. 행을 만드는 태그 5. 행안의 셀을 만드는 태그 colspan="n" 속성 6. 제목 행에 셀을 만드는 태그 내용이 진하게 표시, 중앙 배열 7. 속성 rowspan, colspan 속성 rowspan="n" 아래와 같이 행을 합칠 때 사용 속성 colspan="n" 아래와 같이 열을 합칠 때..
HTML의 기본 구조와 개념
·
Development/HTML
1. HTML의 기본 구조 // 실제 웹 브라우저 화면에서 보여주는 내용 작성 2. 이외 개념 1) HTML 기본구조 자동입력하기 : 첫 줄에 ! 입력 후, Tab 또는 Enter, 입력 후 lang="en"을 lang="ko"로 변경 2) 웹 문서의 영역 : 헤더, 메인, 푸터, 사이드바 3) 경로 입력 시, 절대경로, 상대경로 구분 유의 절대경로 : 속성값이 항상 같은 경로 ex) https://naver.com 상대경로 : 현재 작성하는 문서의 위치를 기준으로 함. 문서의 위치에 따라 바뀜. ex) ./sub/sub2.html, ../index.html ※ 경로 표기법 / : 최상위 경로 ./ : 현재 폴더 위치 ../ : 상위 폴더 위치 4) 코딩의 대전제 : 2개 이상의 요소는 하나로 묶는다. ..
jQuery CDN 방식으로 연결하기
·
Development/Javascript
jQuery를 CDN 방식으로 연결하는 방법을 알아보겠습니다. 1. jQuery 사이트에 접속해서 오른쪽 상단의 주황박스 'Download jQuery'를 클릭해줍니다. ※ 아래 이미지 클릭 시, 바로 이동합니다. 2. 아래와 같은 페이지로 넘어가는데 스크롤을 아래로 내리며 'linkUsing jQuery with a CDN' 제목의 구문부분을 찾아줍니다. 3. 아래와 같은 구문에서 원하는 CDN을 클릭해줍니다. 예시로 google CDN을 클릭하여 들어가보겠습니다. 아래 초록 화살표 링크를 클릭하면, 'Google Hosted Libraries'로 이동합니다. 4. 아래 스니펫 리스트 중, 원하는 것을 복사해서 html 'head' 부분에 붙여넣어줍니다.