본문 바로가기

프론트엔드(Front-End)5

[jQuery] - 클래스(Class), 부모 - 형제 노드(태그) 제어 jQuery에서 선택된 노드(태그)들에 대한 클래스들을 직접 제어, 선택된 노드의 부모 노드, 자식 노드, 형제 노드들에 대한 각 노드들을 제어할 때 자주 사용되는 메서드를 알아보도록 하겠습니다. 1. 클래스 제어 메서드 : addClass(), removeClass(), toggleClass() 문법) 1. $("선택자").addClass("class01"); // class01 값은 예시입니다. 2. $("선택자").removeClass("class01"); 3. $("선택자").toggleClass("class01"); - addClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 추가합니다. - removeClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 삭제합니다. - .. 2022. 7. 20.
[jQuery] - 선택자(Selector), val(), attr(), html(), CSS 속성 제어 이번엔 jQuery에서 자주 쓰이는 선택자(Selector) 지정, 여러 가지 노드의 속성을 제어할 수 있는 val(), attr(), html()과 CSS 스타일 속성 제어 메서드에 대해 알아보겠습니다. 1. jQuery에서 자주 쓰이는 선택자(Selector) 선택자(Selector)란, 말 그대로 선택을 해 주는 요소를 의미하며, 웹 페이지의 구조, 데이터에 대한 노드(태그)에 접근하여 노드에 대한 속성값들을 제어하기 위해 선택자를 지정합니다. 자주 쓰이는 선택자는 아래와 같고, 선택자 지정 시 $로 시작하여 표기합니다. 1. $("태그에 대한 ID name") 2. $("태그에 대한 Class name") 3. $("특정 요소[ Attribute name = Attribute value]") ex.. 2022. 7. 20.
[jQuery] - jQuery의 정의, 사용 방법 프론트엔드 사이드에서 웹 페이지의 동적인 요소들을 제어해 줄 수 있는 Javascript라는 프로그래밍 언어가 존재했습니다. 이번엔 해당 언어의 라이브러리 중 하나인 jQuery(제이쿼리)에 대해 알아보겠습니다. 1. Javascript와 jQuery(제이쿼리)의 연관성 위에서 말씀드린 것처럼, Javascript는 경우 주로 웹 페이지 또는 응용 프로그램의 다양한 제어를 위해 개발된 스크립트 언어이며 jQuery는 이러한 Javascript를 더욱 더 간결하게 사용할 수 있도록 설계된 크로스 플랫폼 기반의 Javascript 라이브러리입니다. ※ 여기서 크로스 플랫폼 (Cross Platform)이란? 쉽게 말하면 여러 종류의 컴퓨터가 존재해도 모두 동일하게 동작할 수 있다는 의미입니다. 2. jQue.. 2022. 7. 19.
[HTML] HTML의 여러 가지 태그 (2), 부모 요소(Parents element)와 자식 요소(Child element) 이전 포스팅에서는 HTML의 정의와 특징, 태그의 뜻, 속성, 여러 가지 태그에 대해 정리하였습니다. 이번 포스팅은 자주 사용되면서도 중요한 HTML 태그들을 마지막으로 더 정리해 보겠습니다. 1. 입력 양식 태그 : input 태그 - 입력 양식 태그의 경우, 사용자의 입력 값을 받기 위해 태그가 먼저 선언되고 이후에 input 태그가 입력된다. - 사용자로부터 특정 값을 받고자 할 때, 입력 값에 대하여 서버와 통신하고자 할 때 사용된다. - 속성으로 type을 이용하여 다양한 값을 받을 수 있다. - 아래는 대표적인 input 태그의 속성값을 나타낸다. (1) button - 버튼을 생성 (2) checkbox - 체크박스를 생성 (3) file - 파일 선택 버튼 생성 (4) radio - 라디오.. 2022. 7. 13.
[HTML] - HTML의 뜻, 여러 가지 태그(Tag) (1) 1. HTML의 정의 - HTML(Hypertext Markup Language)란, 웹 페이지에 대하여 제목, 단락과 같은 구조적인 요소를 기술할 수 있는 마크업(Markup) 언어로써, 오늘날 웹 페이지를 구성을 이루는 중요한 언어 중 하나이다. 주요 문법으로 태그(Tag) 명령어를 이용하여 웹페이지의 전반적인 문서 구조를 기술할 수 있다. - 메모장(Notepad), 한글, 워드 등 문서 작업이 가능한 환경에선 모두 해당 언어로 웹 페이지를 작성할 수 있다. - 태그(Tag)를 이용하여 웹 페이지의 전반적인 구조를 기술하는 언어로써, 프로그래밍 언어는 아니다. - 여기서 태그(Tag)란, 웹 페이지가 어떻게 구성되어 있는지에 대한 정보를 나타내는 요소이다. 2. 태그(Tag)의 기본 형식과 속성(A.. 2022. 7. 13.