Contents// WEB\CSS\Web PageNavigation barGNB (Global Navication bar)LNB (Local Navigation Bar)SNB(Side Navigation Bar)FNB (Foot Navigation Bar)Skip Navigation Homework
전체 글
Navigation barGNB (Global Navication bar)메인메뉴어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴최상위 메뉴 보통 상단에 위치 LNB (Local Navigation Bar)GNB를 누를 경우 소제목 형식으로 나오는 메뉴네비게이션을 통해 특정 지역으로 가는 네비게이션 바 SNB(Side Navigation Bar)일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 함메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴 FNB (Foot Navigation Bar)하단 메뉴 ⚒️ 예제index.htmlmain.cssreset.css웹 페이지 만들기 (HTML, CSS 만) Skip NavigationSkip Navigatio..
지도Javscript API 는 키 발급을 받아야 사용할 수 있다키를 발급받기 위해서는 카카오 계정이 필요 카카오 API키 발급 및 적용카카오 개발자 사이트 접속 내 애플리케이션 만들기앱 아이콘, 앱 이름, 카테고리 아무거나플랫폼 설정플랫폼 > Web 플랫폼 등록운영중인 사이트 주소(url) 입력 (http://localhost:8080)저장발급받은 JavaScript 키 복사하기 1. 뷰포트 선언 >2. 컨텐트 선언 content="width=device-width (디바이스 크기에 맞추겠다고 선언) initial-scale=1.0 (초기 크기 스케일 설정) minimum-scale=1.0 (최소 크기 설정 / 범위: 0~10.0) ..
JavaScriptHTML 페이지에 결과 출력HTML 페이지의 태그 안을 document(문서)라고 부른다Document document; 안에 새로운 내용을 출력document.writ("출력할 내용"); 태그 안에 출력되는 내용이므로, 다른 HTML 태그를 포함하여 출력할 수 있다 ⚒️ 예제// JavaScript\webapp\jsexam01.htmldocument.write(" "); 변수 & 상수1. 개념변수의 자료형은 값이 할당될 때 자동으로 결정된다var, let, const 으로 선언//선언 var a; var b; //할당 a = 10; b = 43.5; 2. 종류cf) [Do it! HTML CSS JavaScript] 560p 변수 스코프, 호이스팅cf) hoisting : 자..
@keyframes1. 개념@keyframes로 어떤 모양에서 어떤 모양으로 변할지 지정IE는 버전 10 이상에서 사용 가능@keyframes animationName { 0% { /* 애니메이션의 시작 상태 */ } n% { /* 중간 상태 */ } 100% { /* 애니메이션의 끝 상태 */ }} .element { animation-name: animationName; /* 정의한 애니메이션 이름 사용 */ animation-duration: 2s; /* 애니메이션의 지속 시간 */} 2. 단계0%시작할 때의 모양 지정0% 대신 from을 사용 가능n% n% 일 때의 모양 지정100%끝날 때의 모양 지정100% 대신 to를 사용 가능 3. 예제CSS\webapp\08_cssDynamic ..
Shadow 1. values;text-shadow: offset-x ;그림자의 수평 거리 지정 (필수)offset-x의 값을 증가시키면 그림자의 위치가 오른쪽으로 이동text-shadow: offset-y;그림자의 수직 거리 지정 (필수)offset-y의 값을 증가시키면 그림자의 위치가 아래로 이동text-shadow: blur-radius; 흐림 정도 지정 (선택 : 값을 정하지 않으면 0)blur-radius의 값을 증가시키면 그림자가 흐려짐text-shadow: color;색 지정 (선택 : 값을 정하지 않으면 브라우저 기본값)text-shadow:none ;글림자 효과 제거text-shadow: initial; 기본값으로 설정text-shadow: inherit; 부모 요소의 속성값을 상속 받..