CobaltBlue

11. 응용예시 1) 게시판 만들기 글번호 제목 작성자 조회수 작성일 6313 청담동점집.압구정점집.신사동점집 태을천천상화 5 2022.10.31 6312 도곡동점집.삼성동점집.역삼동점집 1setew116 2 2022.10.31 6191 올해 부자되게 해주세요 제발... 대구포에버 10 2022.10.19 - 게시글을 클릭하면 보여줄 곳 선택된 게시글 정보 : 글번호 / 제목 / 작성자 / 조회수 / 작성일 - 스크립트와 스타일 미리 지정하기 (사전작업) - 게시글 번호부터 순차적으로 접근해보면(console창에 찍어보기) $(function(){ $('tbody>tr').click(function(){ console.log($(this).children().eq(0).text()); console.lo..

5. 탐회(순회)메소드_조상 1. jQuery 라이브러리 연결하기 2. 페이지 가독성을 위해 스타일 부여 1) Ancestors(조상) 메소드 : 기준이 되는 요소의 상위요소들을 선택할 수 있는 메소드 - 스타일을 부여할 요소 생성 조상 div(증조할머니) ul(할머니) li(엄마) span(기준점) div(할아버지) p(아빠) span(기준점) (1) $('선택자').parent() 선택된 요소를 기준으로 바로 위 상위 부모요소 하나만을 선택 $(function(){ //parent() $('span').parent().css({color:'purple', border:'2px solid skyblue'}); (2) $('선택자').parents() 선택된 요소를 기준으로 모든 상위요소를 선택 //pa..

1. 개요 1) jQuery란? - 기존의 자바스크립트 언어만으로 구현하기에 복잡했던 구문작성들을 간소화하기 위해 "존 레식"에 의해 개발된 JavaScript기반의 라이브러리 (유용한 기능들의 모음집) 즉, JavaScript언어로 유용한 함수나 내용들이 이미 만들어져 있는(정의되어있는) 모음집 - jQuery의 장점 1) DOM요소와 관련된 스크립트를 보다 쉽게 구현할 수 있다. 2) AJAX(비동기식 통신), 이벤트 처리 등 폭 넓게 지원한다. 3) jQuery와 관련된 확장 플러그인, 오픈 API 등을 지원한다. => 적은 양의 코드로 빠르고, 풍부한 기능을 제공함 == 생산성 향상 2) jQuery 라이브러리 연결방법 head태그 내부에 script태그로 jQuery관련 .js파일 가져오기 오프..

3. HTML요소에 접근하기(해당 요소 객체 가져오기) 1) 아이디로 접근하기 아이디로 요소에 접근할 때, document라는 객체가 요소들의 정보를 가지고 있음(접근해야 함) var 변수명 = document.getElementById('접근할 요소의 아이디 속성 값'); == 요소객체 (document, 변수) 아이디로 접근 * 출력 전 console로 확인하는 습관 길들이기 ! 2) 태그명으로 가져오기 태그명으로 요소에 접근 * 하나가 아닐 수도 있기 때문에 Elements document.getElementsByTagName('접근하고자하는 태그명'); => 선택된 여러개의 요소객체들이 배열에 담겨서 반환 자바스크립트에서 배열은 [ ]로 표현 목록1 목록2 목록3 목록4 목록5 태그명으로 접근 4..

web(Front-end)의 3요소 - HTML : 웹 문서의 큰 틀(뼈대) - CSS : 스타일(색상, 테두리, 디자인 등등) - JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리(동적인 효과) * 이벤트 : 사용자가 하는 모든 행위 (자바라는 프로그래밍 언어와는 전혀 무관) 1. 개요 1) 스크립트 언어란? - 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해줌. 매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨. 2) 자바스크립트란? 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어 - 자바 : 컴파일 방식 => 컴파일 단계를 거치고 나서 실행되는 개념 => 오류 잡기 수월 - 자바스크립트 : 인터프리..

1. 화면구조잡기-기본 2. 화면구조잡기 실습 3. 화면구조잡기 상세구조 4. 세부 footer 만들기

6. 영역 관련 태그 (요소를 확연하게 보기 위해 내부 스타일 부여) 1) 블럭 요소 : 한 줄 단위로 영역을 차지하는 요소 줄바꿈이 적용되어 이미 존재하는 요소 다음줄에 출력됨 (textarea, p, pre, h1~h6, ... "div") 2) 인라인 요소 : content 내용만큼만 영역을 차지하는 요소 줄바꿈이 적용되지 않아 옆으로 연이어져 출력 다음 줄로 넘기고자 할 때 로 개행해야 함 (input, label, mark, s, img, ... "span") - 태그들은 모두 의미가 있지만 div와 span은 의미가 없음 3) div태그와 span태그의 차이 (1) div 태그 : 블럭요소로 영역을 지정할 수 있는 태그 (한 줄 차지) (2) span 태그 : 인라인 요소로 영역을 지정할 수 ..

0. 설치 - visual studio code 설치 -> 확장프로그램 korean, Live Server, Auto Rename Tag 설치 0. 워크스페이스 생성 미리 'frontend-workspace' > '1_html_workspace'폴더 생성 후 폴더열기 > 주소복사 'C:\frontend-workspace\1_html_workspace' 0. Test - 새파일 > 0_test.html (확장자가 html) 여는 html 태그 닫는 html 태그 합쳐서 '요소' - - html의 자식요소 이면서 h1의 부모요소 HTML 제목 Open with Live Server시, - 버튼 태그 : 버튼 표시 만들기 버튼 - 태그 : 구분선(긴 실선) 가로로 구분선, 수평선을 긋는 태그 1. 글자 관련 ..