FrontEnd (9) 썸네일형 리스트형 [JQuery] Tab 메뉴 만들기 아래와 같이 Tab메뉴를 만들고 , 버튼을 눌러 Tab메뉴와 내용이 넘어가도록 기능을 구현해보았다. tab메뉴와 Content 생성 MENU1 MENU2 MENU3 MENU4 MENU5 Content1 Content2 Content3 Content4 Content5 이전, 다음버튼을 만들어 주고 Tab 메뉴 리스트와 그에 대한 내용을 만들었다. 이때 Menu1과 Content1에만 on클래스를 주었다. on 클래스는 삭제와 동시에 다른 Menu, Content에 생성되도록 기능을 부여할 것이다. 기본 틀, 제목, 내용 스타일 /* 기본 틀, 제목, 내용 스타일 */ ul { list-style: none; padding: 0px; } #container { width: 700px; height: .. [JQuery] 네비게이션바 상단 고정 기능 웹 브라우저에서 스크롤을 내려도 네비게이션바가 상단에 고정되어 따라내려오는 기능을 구현해보자 먼저, 아래의 코드를 이용해 퀵메뉴와 네비를 생성 하고, 스타일을 지정해주었다. (네비가 상단에 고정되어있는 것을 한 눈에 보기위해 바디 구역을 구분하여 백그라운드 컬러를 지정했다.) MENU1 MENU2 MENU3 MENU4 body1 body2 body3 이번엔 제이쿼리를 이용하여 상단 네비 고정 기능을 구현했다. //네비 고정 기능 구현 $(document).ready(function(){} : 문서가 다 띄워질때까지 기능이 실행되지 않고 기다림 - 브라우저가 실행 되기 전 기능이 실행되면 구현이 이상해질 수 있기 때문 $(window).on('scroll',function(){}) :scroll 기능 사용.. [JQuery] JQuery 기본개념 제이쿼리(jQuery) 제이쿼리는 자바스크립트 언어를 간편하게 사용하기 위해 단순화시킨 오픈 소스 기반 자바스크립트 라이브러리다. JQuery 장점 1. 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능하다. 2. HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용할 수 있다. 3. 애니메이션 효과나 대화형 처리를 간단하게 적용할 수 있다. 4. 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현할 수 있다. 5. 다양한 플러그인과 참고 문서가 많이 존재한다. 6. 오픈 라이선스를 적용하여 누구나 자유롭게 사용할 수 있다. 제이쿼리 사용 방법 헤드에 다음과 같은 오픈소스를 입력한다. 제이쿼리 문법 $(선택자).동작함수(); $ - 제이쿼리에 접근할 수 있.. [JavaScript] 변수의 선언 자바스크립트 실행문을 작성할때 변수를 선언하는 방식에 대해 알아보자! 변수(variable)란 데이터를 저장할 수 있는 메모리 공간을 의미한다. 변수 이름은 id(식별자:identifier)와 같다 변수 이름은 동일할 수 없다. 변수의 값은 변경할 수 있다. 여러 변수를 동시에 선언할 수 있다 변수 타입이 정해져 있지 않아 같은 변수에 다른 타입의 값을 대입할 수 있다. 자바스크립트에서는 주로 let 키워드를 사용하여 변수를 선언한다. 위 변수에 대한 설명을 예제에 적용해보았다. 1) let let color = "black" //color 변수를 만들어 정의하고, 이 변수에 black 값을 담는다. color = "pink" //color 변수의 값을 pink로 변경 console.log(color) .. [HTML] 자주 사용하는 6가지 태그 HTML 실행문을 통해 웹 페이지를 만들기 위한 핵심적인 6가지 태그에 대해 알아보겠습니다. 태그 영역을 나누어준다 여러 HTML 요소들을 하나로 묶어준다. 태그 문단을 나누어준다. (div태그와 거의 비슷한 용도이나 단지 주위 공간이 더 생성) 예제 My name is MinsuKim I am 24 years old nice to meet you 실행결과 태그 이미지 넣어주는 태그 단일 태그(열고 닫는 태그 없음) 문법 : *src = source 예제 실행결과 태그 글자 입력란 단일태그 type 속성값 : 어떤 값을 받을지 정할 수 있음 예제 //숫자 입력가능 (숫자 올리고 내리는 화살표 버튼 생성) //문자 입력가능 //비밀번호 입력 (입력되는 값이 문양으로 표시) 실행결과 태그 버튼 생성 문법 :.. [HTML] 블록과 인라인 HTML 요소는 display 속성을 가진다. 대부분 HTML 요소는 두 가지 값 중 하나를 가지게된다. 1. 블록(block) 타입 새로운 라인에서 시작한다. 해당 라인 전체를 차지한다. width/height 조절 가능 margin/padding 지정 가능 ex) , , , , , , 2. 인라인(inline) 타입 해당 라인 안에 소속되어 있다. content 만큼의 크기를 차지한다. width/height 조절 불가능 margin 위아래 지정 불가능 padding 위아래 적용 된것처럼 구현되지만, 실제 공간 차지X ex) , , 3.인라인 블럭(inline-block) 타입 inline과 block 특징 모두 가짐 줄바꿈이 이루어지지 않는다. width/height 조절 가능 width/heigt.. [JavaScript] 기본 개념 HTML로 웹 화면을 구현하고, CSS로 웹을 디자인 해보았다. 그렇다면 이제는 만들어진 웹 페이지를 사용하려면 웹에 기능을 넣어줄 차례이다. 웹의 동작을 구현하는 JavaScript에 대해 알아보자! 자바스크립트(JavaScript) 자바스크립트는 객체(object)기반의 스크립트 언어이다. 웹의 동작을 구현할 수 있다. 자바스크립트의 특징 1. 객체 기반의 스크립트 언어이다. 2. 동적이며, 타입을 명시할 필요가 없다. *자바스크립트 언어는 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어이기 때문 3. 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현할 수 있다. 자바 vs 자바스크립트 코딩을 공부하기 전 자바스크립트가 자바에서 파생된 언어일 것이라 생각했다. 하지만 두 언어는.. [HTML] <head> 속 태그 HTML 코드 작성 시 'Visual Studio Code'프로그램에서 ! 작성 후 Enter 키를 사용하면 HTML 기본 구조가 자동 작성 된다. ! 를 사용하여 작성한 HTML 기본 구조이다. 이때, 태그 속은 빈공간이지만 태그 속에 여러 태그들이 형성되어 있는 것을 볼 수 있다. 태그 속 코드는 웹 브라우저 상에서 나타나지 않지만, HTML의 기본 정보를 담고 있다. 속 태그 : 문서 자체의 특성 - 웹 서버와 웹 브라우저 사이에 주고받는 정보를 정의하는데 사용한다. : HTML 문서의 제목 - 웹 사이트가 열리면 상단에 생기는 tab의 이름을 설정할 수 있다. - 웹 브라우저의 즐겨찾기에 추가 할 때 즐겨찾기의 제목이 된다. - 검색 엔진의 결과 페이지에 제목으로 표시. : 필요한 스타일이나 아이.. 이전 1 2 다음
