달력

1

« 2020/1 »

  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  

HTML 요소를 선택자로 사용시

tag { … }

특정 요소에 특정 스타일을 적용 : <p> 태그에 대한 스타일만 적용

p { font-family: 휴먼매직체; font-size: 20pt; }

   

tag, tag, … tag { … }

여러 요소에 동일 서식 적용 : <p>,<b> 태그에 적용

p, b { font-family: 휴먼매직체; font-size: 20pt; }

   

tag1 tag2 { … }

tag1 내의 tag2에만 스타일을 적용할 때 사용

p b { font-family: 휴먼매직체; font-size: 20pt; }

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

CSS 주석  (0) 2015.03.10
CSS 데이터 형식  (0) 2015.02.01
HTML 요소를 선택자로 사용시  (0) 2015.01.01
참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
Posted by codedragon codedragon

댓글을 달아 주세요

자식선택자

   

소스코드

   

   

소스코드

//자식 선택자

//태그의 자식(직계자식)으로 범위 한정

$('body > div').css('border', '5px solid orange')

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 클래스선택자 연결

   

   

소스코드

<script type="text/javascript">

//$(document).ready(function(){}) = $(function(){})

$(function(){

$('.item').css('color', 'orange');                

});

</script>

</head>

<body>

<h1 class="item">Header-0</h1>

<h1 class="item select">Header-1</h1>

<h1 class="item">Header-2</h1>

<p class="item">Item-0</p>

</body>

   


   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

   


   

   

   

   

소스코드

$('.item').css('color', 'orange');

$('h1.item').css('background', 'red');

$('h1.item.select').css('background', 'yellow');

   


   

Posted by codedragon codedragon

댓글을 달아 주세요

CSS의 기본 구성 요소

   

선택자(selector)

표시 정보를 적용하는 요소 타입으로 적용 대상 범위 지정

XHTML의 모든 요소 사용 가능

프로퍼티(property)

CSS의 실질적인 기능을 의미, 선택자에 대해 어떤 스타일을 부여할지를 지정

값(value)

프로퍼티의 종류에 따라 지정하는 일정 범위의 값, 대상 프로퍼티의 값

키워드

그 자체가 의미를 가진 값으로, 큰 따옴표를 사용하지 않는다

일반값

< > 안에 표기한 데이터 형태를 가리킨다.

  

   

   

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
시멘틱 태그- 01.html  (0) 2014.10.17
태그  (0) 2014.10.11
CSS Color Names  (0) 2014.10.09
Posted by codedragon codedragon

댓글을 달아 주세요

태그선택자와 id선택자 연결

   

   

소스코드

<body>

<h1>header-0</h1>

<h1 id="target">header-1</h1>

<h1>header-2</h1>

</body>

   

출처: <https://github.com/10zeroone/study_jQuery/blob/master/jQuery/WebContent/ch01-selector/05.html>

   

출력결과

   

   

소스코드

//특정 id속성을 가지는 태그 선택

$('h1#target').css('color', 'red');

   


   

출력결과

Posted by codedragon codedragon

댓글을 달아 주세요

여러 개의 태그 선택

   

   

소스코드

<body>

<h1></h1>

<p>여름</p>

<h1>가을</h1>

<div>겨울</div>

</body>

   


   

   

   

소스코드

//여러개의 태그 선택

$('h1, p').css('color', 'red');

   


   

   

Posted by codedragon codedragon

댓글을 달아 주세요

CSS 용어

용어

설명

제작자(Author)

XHTML이나 XML문서를 제작자를 의미합니다.

사용자(User)

"클라이언트"라고도 불리며 제작자가 만든 문서를 사용하는 사람을 의미합니다.

유저 에이전트(User Agent)

사용자가 하려는 행위를 대신해주는 프로그램을 지칭합니다.

즉, 사용자가 문서를 볼 수 있도록 해주는 것으로, 제작자가 만든 문서를 시작적, 청각적인 형태로 바꾸어 사용자에게 제고하는 프로그램을 말합니다.

웹 브라우저등의 웹클라이언트 프로그램이 이에 해당됩니다.

문서 언어(Document Language)

웹 문서를 만드는데 사용되는 언어를 의미합니다.

XHTML, XML등이 있습니다.

요소(Element)

문서 언어의 요소를 말합니다.

속성(Attribute)

요소에서 세부적인 속성을 의미합니다.

값(Value)

속성의 값을 의미합니다.

선택자(Selector)

CSS에서 사용하는 용어로 문서 언어에서의 요소에 해당합니다.

프로퍼티(Property)

CSS에서 사용하는 용어로 문서 언어에서 속성과 같은 개념입니다.

프로퍼티 값(Property Value)

CSS에서 사용하는 용어로 프로퍼티에 지정되는 값을 의미합니다.

속기 프로퍼티(ShortHand Property)

CSS의 프로퍼티에서 비슷한 것들을 묶어 한 번에 표현하는 것을 의미합니다.

문서의 트리 구조

XHTML문서의 여러 요소를 제어하기 위해 문서의 트리 구조가 생성됩니다. 각 요소들은 서로 간에 종속 관계를 가지게 되며, 루트 요소(body)를 제외한 모든 요소는 하나의 상위 요소를 가지게 됩니다.

루트 요소(body)

XHTML에서 <body>태그는 모든 요소의 상위 요소가 되며, 이를 루트 요소하고 합니다.

상위 요소(Parents)

한 요소가 다른 요소를 표함하고 있거나 내용상, 구조상으로 상위 구조에 있는 경우를 말합니다.

하위 요소(Child)

상위 요소를 가진 요소를 하위 요소라고 합니다.

자손 요소(Descendant)

하위 요소의 하위 요소를 의미합니다.

조상 요소(Ancestor)

한 요소의 상위 요소의 상위 요소를 조상 요소라고 합니다.

형제 요소(Sibling)

동일한 상위 요소를 가지는 두 개 이상의 요소를 형제 요소라고 합니다.

 

'Development > HTML, CSS, XML, ...' 카테고리의 다른 글

태그  (0) 2014.10.11
CSS Color Names  (0) 2014.10.09
CSS 용어  (0) 2014.10.03
HTML 기본 구조  (0) 2014.10.01
CSS 개요  (0) 2014.09.25
01.html-Hello World  (0) 2014.09.13
Posted by codedragon codedragon

댓글을 달아 주세요

태그 선택자, 클래스 선택자, ID선택자

   

id는 반드시 중복되지 않토록 uniqe하게 명명해야 되며

class나 name은 동일 명칭을 가져도 상관없습니다.

   

(주의)

class선택자

.

id선텍자

#

   

   

소스 파일

<body>

<p class="study">jQuery 실습</p>

<div>

<div id="content">id값이 content div tag</div>

</div>

<span>span1</span>

<span class="study">span2</span>

</body>

   


   

   

   

//태그 선택자 (중복 가능)

//속성, 속성값

$('span').css('border', '5px solid red');

   


   

   

   

//클래스 선택자 (중복 가능)

$('.study').css('border', '7px solid olive');

   


   

   

   

//id선택자(중복 불가능)

$('#content').css('background', 'magenta');

   


   

Posted by codedragon codedragon

댓글을 달아 주세요

전체 선택자

  • CSS와 동일하므로 익숙하게 익혀야 함

선택자

설명

*

  • 전체 선택자
  • 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

   

   

jQuery 내용 분량

1/3

선택자

CSS에서도 사용되는 선택자 임

1/3

DOM and event

1/3

ajax

   

   

소스코드

<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//*        : 전체 선택자로 문서 객체 전체 선택(DOM에서는 태그가 객체로 인식됨)

$('*').css('color', 'blue');

});

</script>

</head>

<body>

<h1>계절</h1>

</body>

 


 

   

출력결과

   

마우스 우클릭 > 요소 검사

모든 태그에 적용된 것을 확인 할 수 있습니다.

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

js파일 인코딩 방식 설정 방법 3가지  (0) 2014.09.26
NaN(Not a Number)  (0) 2014.09.22
02.html-전체 선택자  (0) 2014.09.21
객체의 프로퍼티 접근하기  (0) 2014.09.10
Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
Posted by codedragon codedragon

댓글을 달아 주세요

   

jQuery(document).ready()

문서의 준비가 완료되면 매개 변수로 전달된 함수를 실행하라는 의미 

<script>

$(document).ready(function(){

 

});

</script>

   

아래의 표현도 동일한 기능 수행

   

<script>

$(function(){

 

});

</script>

   

   

jQuery 기본 선택자

   

선택자

설명

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

입력 양식 필터 선택자

  

 필터 선택자

기본 필터 선택자와 함수 필터 선택자가 있음

   

   

전체 선택자

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

태그 선택자

HTML 페이지 있는 문서 객체를 태그 이름으로 선택하는 선택자

   

<script>

$(document).ready(function(){

$('h1').css('color','orange');

});

</script>

   

아이디 선택자

HTML 페이지 안의 특정 ID 속성을 가지고 있는 문서 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

$('#target').css('color','red');

});

</script>

   

클래스 선택자

HTML 페이지 안의 특정 class 속성을 가지고 있는 문ㅅ 객체를 선택하는 선택자

   

<script>

$(document).ready(function(){

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

});

</script>

   

자식 선택자

자식 선택자는 자식을 선택하는 선택자이며 '부모 > 자식'의 형태로 사용

   

<script>

$(document).ready(function(){

$('body > div').css('color','red');

});

</script>

   

후손 선택자

후손 선택자는 이름 그대로 후손을 선택하는 선택자. '요소 A 요소 B'의 형태로 사용하여 요소 A의 후손으로 범위를 한정

   

<script>

$(document).ready(function(){

$('body div').css('color','red');

});

</script>

   

속성 선택자

속성 선택자는 태그이름에 속성을 조합해서 선택하는 방식

   

선택자 형태

설명

요소[속성]

특정 속성을 가지고 있는 문서 객체를 선택

요소[속성=값]

속성 안의 값이 특정 값과 같은 문서 객체를 선택

요소[속성~=값]

속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택

요소[속성^=값]

속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택

요소[속성$=값]

속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택

요소[속성*=값]

속성 안의 값이 특정 값을 포함하는 문서 객체를 선택

   

입력 양식 필터 선택자

   

선택자 형태

설명

요소:button

input 태그 중 type 속성이 button인 문서 객체와 button 태그를 선택

요소:checkbox

input 태그 중 type 속성이 checkbox인 문서 객체를 선택

요소:file

input 태그 중 type 속성이 file인 문서 객체를 선택

요소:image

input 태그 중 type 속성이 image인 문서 객체를 선택

요소:password

input 태그 중 type 속성이 password인 문서 객체를 선택

요소:radio

input 태그 중 type 속성이 radio인 문서 객체를 선택

요소:reset

input 태그 중 type 속성이 reset인 문서 객체를 선택

요소:submit

input 태그 중 type 속성이 submit인 문서 객체를 선택

요소:text

input 태그 중 type 속성이 text인 문서 객체를 선택

   

선택자 형태

설명

요소:checked

체크된 입력 양식을 선택

요소:disabled

비활성화된 입력 양식을 선택

요소:enabled

활성화된 입력 양식을 선택

요소:focus

초점이 맞춰져 있는 입력 양식을 선택

요소:input

모든 입력 양식을 선택(input,textarea,select,button 태그)

요소:selected

option 객체 중 선택된 태그를 선택

   

필터 선택자

   

기본 필터 선택자 

선택자 형태

설명

요소:odd

홀수 번째에 위치한 문서 객체를 선택

요소:even

짝수 번째에 위치한 문서 객체를 선택

요소:first

첫 번째 위치한 문서 객체를 선택

요소:last

마지막에 위치한 문서 객체를 선택

   

함수 필터 선택자 

선택자 형태

설명

요소:contains(문자열)

특정 문자열을 포함하는 문서 객체를 선택

요소:eq(n)

n번째에 위치하는 문서 객체를 선택

요소:gt(n)

n번째 초과에 위치하는 문서 객체를 선택

요소:has(h1)

h1태그를 가지고 있는 문서 객체를 선택

요소:lt(n)

n번째 미만에 위치하는 문서 객체를 선택

요소:not(선택자)

선택자와 일치하지 않는 문서 객체를 선택

요소:nth-child(3n+1)

3n+1번째에 위치하는 문서 객체를 선택(1,4,7,...)

   

    

'Development > JavaScript, jQuery, ...' 카테고리의 다른 글

Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
00.jQuery 기본  (0) 2014.08.31
객체 생성1  (0) 2014.08.26
프로젝트 생성  (0) 2014.08.24
jQuery API 문서 2  (0) 2014.08.23
Posted by codedragon codedragon

댓글을 달아 주세요