'프로그래밍' 카테고리의 글 목록 (10 Page)

article :

1. (신문·잡지의) 글, 기사

2. (합의서·계약서의) 조항

3. (특히 세트로 된 물건의 개별) 물품

section:

1. (여러 개로 나뉜 것의 한) 부분, 부문, 구획

2. (조립식) 부품

3. (문서책 등에서) 절(節), (신문의) 난(欄)

nav (navigation):

1. (지도 등을 보며) 길을 찾다

2. (바다·강 등을) 항해하다

3. (힘들거나 복잡한 상황을) 다루다

각각의 이런뜻이 있습니다.

옜날에는 모든것을 div로 묶어서 표현하였지만 HTML5 로 오면서 묶는거에도

의미를 두자 해서 여러가지 태그들이 나왓습니다

그중 많이쓰이는것이 HEADER , FOOTER , MAIN , NAV ,SECTION ,ARCTILE 등등

여러가지가 있찌만 (HTML5에서 나온태그들입니다.) 각각의 태그들은 이름 그대로의 의미를 가지고

딲히 다른 태그들처럼 특별한 기능은 없이 HTML문서를 레이아웃으로 구역화시키고 나누고 레이아웃을 짜고 묶는데를 주력으로 만들었다고 생각합니다.

자그럼 이태그들을 어떨때 사용해야하는지를이제 알아보겠습니다. 간단하게!

arctile 은 내용이 각기 독립적이고, 홀로 설 수 있는 내용 (블로그 글 , 뉴스기사)

section 은 내용이 서로 관계있을 경우 (주로 문서를 다른주제로 구분 짓기)

div 는 오로지 내용을 묶는 역할.

여러개의 section을 article 로 묶을수 있고,

마찬가지로 여러개의 article 을 section 으로 묶을수 있습니다.

nav 는 메뉴바 등의 다른 링크들을 모으는 구역? 레이아웃을 설정할떄 젤 상위로 사용합니다.

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML 태그 (0)	2019.02.27

HTML 은? Hyper Text Markup Language

크게 <head> 태그와 <body>의 태그로 나뉘어진다

<head> 태그의 내용들은 브라우저가 보기 위한 정보로 되어있어 일반사용자는 보질 못하고

<body> 태그의 내용들로 일반사용자가 자주 본다.

<head> 태그안에 태그 (브라우저를 위한 정보)

속성 : charset : Character encoding (UTF-8 , EUC-KR 같은 언어셋)

name : 페이지의 상세설명 및 내용을 간략히 적는것

이렇게 작성할경우 구글 서치시 저렇게 아래 표시될수 있다.

********메타태그 추가설명 링크********

<구글>

https://support.google.com/webmasters/answer/79812?hl=ko

<공식문사 MDN>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

<body> 태그안에 태그 (사용자를 위한 정보)

<Strong> 태그 : 문자열 진하게

<U> 태그 : 문자열 밑줄

<h1> ~<h6> : heading 제목 태그 글씨커짐 , 제목이라 줄바꿈도됨

<p> </p> 단락 ? 구문? 태그 (구문 넣은곳이 줄바꿈이됨)

<br> 줄바꿈 태그

<li> : list 의 준말 목차 태그 ul태그의 자식

<ul>: 들여쓰기 li태그의 부모

<ol>: 번호가 자동으로 할당됨 (li랑 같이씀 li에 번호가 할당됨)

<a>: 태그 link 걸기(anchor)

W3C 웹을 만드는 기관

'프로그래밍 > HTML' 카테고리의 다른 글

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28

라이브러리 (jquery.com)

자주사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리 라고 한다.

CDN(Content Delivery Network)

제이쿼리 같은 JS 파일을 직접 로컬에 다운 받지 않고 웹주소 URL 로 통하여 클라이언트가 직접

접속해서 자원을 바로 전달해주는 URL 주소이다.

그냥 URL 주소를 넣으면 주소를 사용할수있다.

주소에 http 나 https 를 안붙인 이유는 접속자가

http 나 https 를 이용해서 들어오면 같은 프로토콜을 이용해서 접속하겠다는

상대적인 경로이다.

jquery가 2점대 이상은 IE 6,7,8 은 사용 불가하다.

jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹 페이지를 조작할 수 있도록 돕는 도구이다.

DOM (Document Object Model)

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 문서들을 객체를 사용하여 시각화 표시 한다고 생각하면된다.

웹페이지도 결국 하나의 문서이기 때문이다.

jQuery 는 javascript의 라이브러리 이다.

라이브러리지만 지금 안쓰는곳이 없다 할정도로

아주 많은 javascript 개발자들이 사용하고있다.

지금 이글을 작성한 지금도 react,view,agular 스펠링이 맞나 모르겠지만...

위 언급한 라이브러리 들이 커지고 있는상황이지만 그래도 아직까지

점유율은 jQuery가 가장 크다.

제이쿼리는 $ 로 시작한다

$ <-- 함수를 $의 변수로 저장한것

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
제이쿼리의 기본문법 (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

$('li').css('color','red');

제이쿼리는 항상 $로 시작합니다

$ = jquery function 입니다. (제이쿼리 함수다)

$('css 선택자') <-- 대부분 어떤 element 의 css 선택자가 올지를 정한다 # id선택자 . class 선택자 그냥은 태그

$('li') <-- 는 제이쿼리 함수이다 (li 태그의 모든요소들을 객체로 객체로 바꾼결과

// $('li') 는 var object2 = (function() { return document.getElementsByTagName('li') });

약간 이런느낌??

chaining

$('li').css('color','red').css('textDecoration' , 'underline');

$('li')의 객체를 .css 프로퍼티로 전달햇는대 결국

$('li').css('color','red') 이것도 객체이기 때문에 .css 프로퍼티를 또 붙혀서 사용할수있다

이것을 chaining 라고한다.

내가 이렇게 선택한 엘리먼트 들을 연속적으로 또 메소드를 호출한다

html객체의 이름찾기

<body>
    <ol>
        <li name= 'name'>안녕하삼</li>
        <li id = 'active'>안녕하삼</li>
        <li class = 'class'>안녕하삼</li>
        <li>안녕하삼</li>
        <span id = 'act'>스판</span>
    </ol>
    <script>
            var li = document.getElementById('active');
            console.log(li.constructor.name);  // HTMLLIElement

            var li2 = document.getElementById('act');
            console.log(li2.constructor.name);  // HTMLSpanElement

            var lis = document.getElementsByTagName('li');
            console.log(lis.constructor.name); // HTMLCollection
    </script>
</body>

저렇게 id로 하나만 선택하는 것들은 HTML(엘리먼트이름)Element 가 나오고

Elements로 복수개를 선택하는 것들은 HTMLCollection 으로 나온다

HtmlCollection 은 유사배열이다.

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다.

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다.

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고도 있는데, 이것은 성격에 따라서 달라진다.

HTMLElement 는 Element의 자식이고 Element는 Node의 자식이다.

Node는 Object의 자식이다.

이런 관계를 DOM Tree 라고 한다.

Dom Tree (이고잉 자바스크립트 출처) DOM Tree

jquery 객체

html collection 은 실시간으로 구조가 변경이된다.

제어대상찾기

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
jQuery 란? (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

제이쿼리는 자바스크립트보다 보다 실용적이고 적은 코딩으로 작성하기 때문에 줄임말을 자주사용한다

setAttribute , getAttribute 에 대응 되는 jquery의 메소드는 attr이다.

$('t1').attr('checked'); // getAttribute 고

$('t1').attr('checked' , false); // setAttribute 이다

또한 removeAttribute 에 대응되는 jquery의 메소드는 remobeAttr 이다.

제이쿼리에 .attr 은 속성제어자 이고 .prop 는 프로퍼티방식 이다

t1.prop('href'); // 은 href 의 값을 가져오는 것이고 get

t1.prop('href','abcd'); // 는 t1.href = 'abcd' 와 같다

또 javascript 에서는 속성제어자와 프로퍼티방식이 미묘한 차이가 있다고 했지만

제이쿼리에서는 이것을 내부적으로 보완 해주기 때문에

$('#t1').prop('className' , 'important');

$('#t2').prop('class' , 'important');

는 내부적으로 보완해줘서 서로 같은결과를 나타낸다.

제이쿼리 하위엘리먼트 선택 (조회범위 제한)

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
    <ul>
        <li class="marked">html</li>
        <li>css</li>
        <li id="active">JavaScript
            <ul>
                <li>JavaScript Core</li>
                <li class="marked">DOM</li>
                <li class="marked">BOM</li>
            </ul>
        </li>
    </ul>

    <script>
        $(".marked","#active").css("background-color","red");
        $("#active .marked").css("background-color","red");
         //id값이 active 인 값중에 class가 marked 인 걸 red로 지정한다
        $('#active').find('.marked').css("background-color","red");
         //id값이 active 인 값중에 class가 marked 인 걸 찾아서 red로 지정한다
         //위 3개의 구문은 같다고 봐도된다

        $('#active').css('color','blue').find('.marked').css('background-color','red');
         //id값이 active 인 값은 글씨 blue 로 그중에 클래스가 .marked인걸 찾아서 배경을 빨강
    </script>
    
</body>
</html>

'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환 (2)	2019.04.02
jQuery 란? (0)	2019.02.27
제이쿼리의 기본문법 (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

아빠개발자의 노트