달력

1

« 2020/1 »

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

   

CSS 지정방식

  • 태그 내부 삽입형(ln-line style)
  • 문서 내 지정형(Embedding style)
  • 외부 경로 삽입형(link style)

   

태그 내부 삽입형(ln-line style)

<태그 style="속성:값;속성:값;" />

   

   

문서 내 지정형(Embedding style)

<style type="text/css">

<!–

스타일 내용

//-->

</style>

   

   

외부 경로 삽입형(link style)

<link rel=stylesheet href="스타일 외부 파일 전체 경로" type="text/css" />

   

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

wix, 무료 홈페이지/블로그 제작 사이트  (0) 2015.04.26
HTML5 포럼  (0) 2015.04.20
CSS 지정방식  (0) 2015.04.01
CSS 주석  (0) 2015.03.10
CSS 데이터 형식  (0) 2015.02.01
HTML 요소를 선택자로 사용시  (0) 2015.01.01
Posted by codedragon codedragon

댓글을 달아 주세요

   

CSS 주석

/*로 시작해서 */로 끝남

CSS 주석은 대.소문자 구분하지 않음

W3C가 권고하는CDATA 주석 문법 사용.

"<![CDATA[ ~ ]]>"는 CSS 미인식 웹 브라우저에서 내용이 그대로 출력되는 것을 방지

p { line-height: 120%; } /* 요소의 글꼴 크기('font-size')의 120% */

   

   

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

HTML5 포럼  (0) 2015.04.20
CSS 지정방식  (0) 2015.04.01
CSS 주석  (0) 2015.03.10
CSS 데이터 형식  (0) 2015.02.01
HTML 요소를 선택자로 사용시  (0) 2015.01.01
참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
Posted by codedragon codedragon

댓글을 달아 주세요

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

댓글을 달아 주세요

   

CSS 선언

선택자 { 프로퍼티1 : 값1; 프로퍼티2 : 값2; … … 프로퍼티n : 값n; }

   

문자 색을 red로 지정

h { color: red; }

   

글꼴 red, 크기 12 포인트 지정

p { color: red; }

p { font-size: 12pt; }

p { color: red; font-size: 12pt; }

   

값(value)

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

키워드

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

일반값

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

   

   

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

참고 & 출처 HTML5, CSS, XML  (0) 2014.11.25
색상 태그  (0) 2014.11.20
CSS 선언  (0) 2014.11.14
특수문자  (0) 2014.11.13
문단 태그  (0) 2014.10.26
CSS 기본 구성요소  (0) 2014.10.25
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

댓글을 달아 주세요

CSS Color Names

http://www.w3schools.com/cssref/css_colornames.asp

   

[ff0000][ff8c00][ffff00][008000][0000ff][4b0082][800080]

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

시멘틱 태그- 01.html  (0) 2014.10.17
태그  (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
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

댓글을 달아 주세요

http://www.sencha.com/

Products - Sencha Touch 클릭

   

우측의 Download 클릭

   

Working in Open Source? 라고 적힌 곳의 Download버튼 클릭

   

다운 중

   

다운 받은 파일의 압축을 풉니다.

   

압축을 푼 경로

C:\javanAndroid\sencha-touch-2.3.1a-gpl\touch-2.3.1\로 이동합니다.

   

   

해당 폴더 (통째로)2개와 js파일 4개을 이클립스의 WebContent\touch폴더로 복사

폴더

resources

src

파일

sencha-touch.js

sencha-touch-all.js

sencha-touch-all-debug.js

sencha-touch-debug.js

   

이클립스에 복사를 완료한 화면.

설치 완료!

   

   

해당 파일 설명

구분

설명

resources

CSS나 이미지 등 센차터치에서 사용하는 리소스 파일이 존재

src

기능을 수행하는 개별 라이브러리 존재

sencha-touch.js

debug가 붙지 않은 파일형태는 압축된 형태

기초 라이브러리만 있으며 다른 기능을 사용하려면 src폴더내의 파일을 가져와서 써야 합니다.

현업에서 사용

sencha-touch-all.js

debug가 붙지 않은 파일형태는 압축된 형태

현업에서 사용

sencha-touch-all-debug.js

모든 라이브러리 내용을 볼 수 있음

개발 시 사용

sencha-touch-debug.js

모든 라이브러리 내용을 볼 수 있음

개발 시 사용

 

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

02.html-전체 선택자  (0) 2014.09.21
객체의 프로퍼티 접근하기  (0) 2014.09.10
Sencha 라이브러리 설치  (0) 2014.09.04
01.html-객체 생성 2  (0) 2014.09.02
00.jQuery 기본  (0) 2014.08.31
객체 생성1  (0) 2014.08.26
Posted by codedragon codedragon

댓글을 달아 주세요

XML VIEWER

http://codebeautify.org/xmlviewer/

   

   

http://codebeautify.org/

다양한 포멧의 뷰어와 에디터를 온라인으로 제공하고 있습니다.

JSON, MXML, XML Viewer

CSS, HTML, JavaScript, RSS, JAVA, C#, Action Script, SQL, Online Editor

EXCEL to HTML, CSV to HTML, API Test

Posted by codedragon codedragon

댓글을 달아 주세요

jQuery의 특징

  • DOM과 관련된 처리를 쉽게 구현
  • CSS 선택자를 이용하여 쉽고 편리하게 요소를 선택
  • 일괄된 이벤트 연결을 쉽게 구현
  • 시각적 효과를 쉽게 구현
  • Ajax 애플리케이션을 쉽게 개발
Posted by codedragon codedragon

댓글을 달아 주세요