개발노트

http://w3c.github.io/nfc/proposals/intel/nfc.html    

https://wiki.mozilla.org/WebAPI/WebNFC

http://dev.webinos.org/specifications/draft/nfc.html

http://mobile.tutsplus.com/tutorials/android/reading-nfc-tags-with-android/

http://developer.android.com/guide/topics/connectivity/nfc/nfc.html

http://www.cyworld.com/kjky0/3982081

Transaction 사용하기

Transaction 를 사용하기 위해서는 그룹 설정을 해줘야 한다.

service.xml 설정

xmlns:tx="http://www.springframework.org/schema/tx"

http://www.springframework.org/schema/tx

http://www.springframework.org/schema/tx/spring-tx.xsd

<context:component-scan base-package="bit.java39.dao, bit.java39.service">

<tx:annotation-driven transaction-manager="transactionManager"/>

serviceImpl.java 설정

@Transactional(rollbackFor=Exception.class)

Aspect-oriented programming

service.xml 

xmlns:aop="http://www.springframework.org/schema/aop"

http://www.springframework.org/schema/aop

http://www.springframework.org/schema/aop/spring-aop.xsd

LoggingAspect.java 

@Aspect

@Component

public class LoggingAspect {

// fully-qualified name(QName) = 패키지명 + 클래스명

// AspectJ poingcut expression

// execution(메소드 범위 리턴타입 QName.메소드명(파라미터들)

// 예) execution(public int net.bitacademy.**.add(*))

   // @Before("execution(* bit.java39.dao.*.*(..))")//("표현식")

       // @Before("execution(* *.*(..))")//("표현식")

@Before("execution(* *..dao.*.*(..))")//("표현식")

public void logBefore(JoinPoint joinPoint){

System.out.println(joinPoint.getSignature().getDeclaringTypeName());

System.out.println(joinPoint.getSignature().getName());

System.out.println(Arrays.toString(joinPoint.getArgs()));

System.out.println("============================> 이전...");

}

@After("execution(* *..dao.*.*(..))")//("표현식")

public void logAfter(){

System.out.println("==============================> 이후....");

}

}

AspectJ의 Pointcut 표현식

  □ POJO 클래스를 이용하여 AOP를 적용하는 두 가지 방법

    - XML 스키마를 이용하여 Aspect를 설정하는 방법.

    - @Aspect 어노테이션을 이용하여 Aspect를 설정하는 방법.

    ■ 두 방법의 공통점

      - AspectJ의 문법을 이용하여 Pointcut을 설정.

    ■ <aop:태그>를 이용하여 Aspect를 설정하는 경우

      - execution 명시자를 이용하여 Advice가 적용될 Pointcut을 설정.

 <aop:aspect id="cacheAspect" ref="cache">

    <aop:around method="read"

        pointcut="execution(public * kame.spring.chap03.core.*.readArticle(..))" />

 </aop:aspect>

  □ AspectJ의 Pointcut 표현식

    - AspectJ는 Pointcut을 명시할 수 있는 다양한 명시자를 제공.

    - 스프링은 메서드 호출과 관련된 명시자만을 지원.

    ■ execution 명시자

      - Advice를 적용할 메서드를 명시할 때 사용.

      ○ 기본 형식

 execution(수식어패턴? 리턴타입패턴 패키지패턴?이름패턴(파라미터패턴)

        ● 수식어 패턴

          - 생략가능한 부분.

          - public, protected 등이 옴.

        ● 리턴타입패턴

          - 리턴 타입을 명시

        ● 클래스이름 패턴, 이름패턴

          - 클래스 이름 및 메서드 이름을 패턴으로 명시.

        ● 파라미터패턴

          - 매칭될 파라미터에 대해서 명시.

      ○ 특징

        - 각 패턴은 '*'를 이용하여 모든 값을 표현.

        - '..'을 이용하여 0개 이상이라는 의미를 표현.

      ○ 설정 예

        ● execution(public void set*(..))

          - 리턴 타입이 void이고 메서드 이름이 set으로 시작하고, 파라미터가 0개 이상인 메서드 호출.

        ● execution(* kame.spring.chap03.core.*.*())

          - kame.spring.chap03.core 패키지의 파라미터가 없는 모든 메서드 호출.

        ● execution(*.kame.spring.chap03.core..*.*(..))

          - kame.spring.chap03.core 패키지 및 하위 패키지에 있는 파라미터가 0개 이상인 메서드 호출.

        ● execution(Integer kame.spring.chap03.core.WriteArticleService.write(..))

          - 리턴 타입이 Integer인 WriteArticleService 인터페이스의 write() 메서드 호출.

        ● execution(* get*(*))

          - 이름이 get으로 시작하고 1개의 파라미터를 갖는 메서드 호출.

        ● execution(* get*(*, *))

          - 이름이 get으로 시작하고 2개의 파라미터를 갖는 메서드 호출.

        ● execution(* read*(Integer, ..))

          - 메서드 이름이 read로 시작하고, 첫 번째 파라미터 타입이 Integer이며, 1개 이상의 파라미터를 갖는 메서드 호출.

    ■ within 명시자

      - 메서드가 아닌 특정 타입에 속하는 메서드를 Pointcut으로 설정할 때 사용.

      ○ 설정 예

        ● within(kame.spring.chap03.core.WriteArticleService)

          - WriteArticleService 인터페이스의 모든 메서드 호출.

        ● within(kame.spring.chap03.core.*)

          - kame.spring.chap03.core 패키지에 있는 모든 메서드 호출.

        ● within(kame.spring.chap03.core..*)

          - kame.spring.chap03.core 패키지 및 그 하위 패키지에 있는 모든 메서드 호출.

    ■ bean 명시자

      - 스프링 2.5 버전부터 스프링에서 추가적으로 제공하는 명시자.

      - 스프링 빈 이름을 이용하여 Pointcut을 정의.

      - 빈 이름의 패턴을 갖는다.

      ○ 설정 예

        ● bean(writeArticleService)

          - 이름이 writeArticleService인 빈의 메서드 호출.

        ● bean(*ArticleService)

          - 이름이 ArticleServie로 끝나는 빈의 메서드 호출.

    ■ 표현식 연결

      - 각각의 표현식은 '&&' 나 '||' 연산자를 이용하여 연결 가능.

      ○ @Aspect 어노테이션을 이용하는 경우

        - '&&' 연산자를 사용하여 두 표현식을 모두 만족하는 Joinpoint에만 Advice가 적용.

 @AfterThrowing(

    pointcut = "execution(public * get*()) && execution(public void set*(..))")

 public void throwingLogging() {

    ...

 }

      ○ XML 스키마를 이용하여 Aspect를 설정하는 경우

        - '&&'나 '||' 연산자를 사용.

 <aop:pointcut id="propertyMethod"

     expression="execution(public * get*()) &amp;&amp; execution(public void set*(..))" />

         - XML 문서이기 때문에 값에 들어가는 '&&' '||'를 '&amp;&amp;'로 표현.

         - 설정파일에서 '&&'나 '||' 대신 'and'와 'or'를 사용할 수 있도록 하고 있음.

 <aop:pointcut id="propertyMethod"

     expression="execution(public * get*()) and execution(public void set*(..))" />

  □ 프록시 구현 방식에 따른 execution 적용 차이

    - Pointcut은 실제로 프록시가 구현하고 있는 인터페이스를 기준으로 Pointcut을 적용.

    - 인터페이스를 구현하고 있는 대상 객체에 대해서 Pointcut을 정의하려면 인터페이스를 기준으로 Pointcut을 작성.

 <aop:aspect id="cacheAspect" ref="cache">

    <aop:around method="read"

        pointcut="execution(public * kame..core.ReadArticleServiceImpl.get*(..))" />

 </aop:aspect>

 <bean id="readArticleService" class="kame.spring.chap03.core.ReadArticleServiceImpl" />

         - ReadArticleServiceImpl 클래스가 ReadArticleService 인터페이스를 구현하고 있다면, 

           <aop:around>는 ReadArticleServiceImpl 클래스의 get으로 시작하는 메서드에 적용.

           (<aop:around> 태그에서 명시한 Pointcut은 readArticleService 빈에는 적용되지 않음.)

         - ReadArticleServiceImpl 클래스가 인터페이스를 구현하고 있지 않다면,

           생성된 프록시는 ReadArticleServiceImpl 클래스를 상속받아 생성됨. (Pointcut은 readArticleService 빈에만 적용.)

transaction =>> insert, update, delete

transaction

프로그래밍 (직접 코딩) coding

filter(by aop) coding (코딩) aop ==> 메소드 앞 뒤로 지정

annotation 서버에서 직접 작업(유지보수에 좋다)

ownership – 서비스는 여러개의 Dao를 사용 가능하다.

Signature() 메서드 선언규칙 ==> 리턴타입 메소드명(파라미터)

node.js 설정

http://nodejs.org/ 에 접속해서.. 인스톨 파일을 다운받는다.

컴퓨터 속성에서 환경 변수를 변경해야한다.

시스템 변수 - Path

본인 컴퓨터에 맞는 설치 위치의 폴더명을 추가해서 넣으세요

C:\Users\Administrator\AppData\Local\Android\android-sdk\platform-tools;

C:\Users\Administrator\AppData\Local\Android\android-sdk\tools;

명령프롬프트  창을 실행

node 입력

npm install -g cordova

npm info cordova

프로젝트 만들기

cordova create HelloWorld net.bitacademy.java39.hello " Hello World"

cordova platform add android

폴더가 만들어진다.

cordova platforms ls

cordova build

이클립스에서 Hello_World 

안드로이드 어플리케이션을 실행

CSS

<!--[if !supportEmptyParas]--> <!--[endif]-->

CSS는 스타일을 일괄적으로 정의하는 것을 의미한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

html과 css는 html4 부터 분리되었으며 따라서 이 표준을 따라줘야한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

CSS는 OPP처럼 상속의 개념이 있다. 기본적으로 CSS의 자료구조는 DOM과 같이 '트리'이다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

스타일의 대상이 되는 것은 <body> 엘리먼트 안에 있는 엘리먼트들이며 여기서 <body>가 루트 엘리먼트, 즉 최상위 부모 엘리먼트가 되는 것이다. 그리고 내가 CSS에서 선택자를 통해 body엘리먼트에 스타일을 정의하면 body 하위에 있는 모든 엘리먼트들에게도 적용된다. 자식의 자식, 그 자식의 자식에게 까지 말이다. 하지만 body 안에 있는 엘리먼트들을 개별적으로 디자인 하는 경우가 더 많다. 이럴때는 바로 '오버라이딩' 기능을 쓰면 된다. 선택자를 이용해 엘리먼트를 선택하고 스타일을 정의하면 그것은 부모 엘리먼트로 부터 상속받은 디자인은 무시하고 오버라이딩한 디자인이 적용되는 것이다.

먼저 트리구조로 엘리먼트를 나열하고 상속 개념을 이용하여 CSS파일을 작성해야한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

기본적으로 선택자는 엘리먼트 이름, id, 클래스로 나눌수 있다. 하지만 이보다 훨씬더 복잡하고 다양한 선택자가 있다는것을 알아야한다.

선택자(Selector)

상속

CSS에서 상속이란 특정 속성들이 부모 요소로부터 자식 요소로 전달되는 개념입니다. 이것은 유전학에서 말하는 상속과 매우 흡사합니다. 부모의 눈이 파란색이라면, 자식들의 눈 또한 파란색일 확률이 높습니다.

모든 CSS 속성들이 상속되는 것은 아닙니다. 상속된다면 좀 이상한 것들이 있기 때문이죠. 예를 들어, 마진은 상속되지 않습니다. 자식 요소가 부모와 동일한 마진을 가지는 경우는 많지 않기 때문입니다. 대부분의 경우, 상식적으로 생각하면 어떤 속성들이 상속되고 어떤것들이 그렇지 않을 지 쉽게 짐작할 수 있습니다. 좀 더 구체적인 내용을 원한다면, CSS 2.1 명세의 속성 요약 테이블을 보면 될 것입니다.

상속이 유용한 이유

그러면 CSS는 왜 상속이라는 메커니즘을 가지고 있을까요? 가장 쉬운 답안은, 상속이라는 시스템이 없었다면 어땠을지 생각해 보는 것입니다. 상속의 개념이 없었다면 글꼴, 글씨크기, 글색상 같은 것은 모든 요소들에 대해서 전부 각각 지정했어야 했을 것입니다.

html 요소나 body 요소에서 글씨 속성을 정하고 모든 요소들이 그것을 물려받게끔 할 수 있습니다. 특정한 컨테이너 요소에서 배경색과 전경색을 정하면, 그 컨테이너에 들어 있는 모든 자식 요소들이 전경색과 배경색을 물려받습니다. 원래 배경색은 상속되지 않는것이 맞지만 각 요소들의 기본 배경색이 투명하기 때문에 컨테이너가 가진 배경색이 그대로 비쳐 보이는 것입니다. 이 효과는 마치 배경색이 상속되는 것 처럼 보이지만 그렇지는 않습니다. 만약 배경 이미지가 상속된다면 그 결과는 아주 이상할 것입니다.

상속의 원리

HTML의 모든 요소들은 부모로부터 상속할 수 있는 속성은 전부 상속합니다. 유일한 예외라면 html 요소입니다. 부모가 없으니 당연하지요.

물려받은 속성이 적용될지 아닐지는 다른 것들과의 관계에서 설정됩니다. 나중에 캐스케이딩을 다루면서 다시 살펴볼 것입니다. 지금은 그냥, 어머니가 파란 눈을 가졌더라도 아이가 갈색 눈을 가질 수 있는 정도로만 이해하세요.

Descendant Selector

하위 선택자. 부모를 지정해주면 그 아래있는 자손만 선택

부모를 앞에 쓰고 그 뒤에 자식을 쓰면 된다.

li a {속성: 값;}                   li 안에 위치한 자손 a 를 선택함

p strong {속성: 값;}           p 안에 위치한 자손 strong을 선택함

html body p {속성: 값;}       html 안에 위치한 body 안에 위치한 자손 p 를 선택함

자식 선택자 child Selector / 꺾음 괄호( > )사용

자손 선택자와 비슷하게 자식 선택자로 사용하여 자식을 선택할 수 있다. 꺾음 괄호( > ) 사용

어느 부모의 어느 자식인지 정확히 지정할 수 있는 선택자.

#nav>p                           아이디 nav (부모)의 자식 p를 모두 선택함

p>strong                         p(단락:부모)내부의 자식 strong을 모두 선택함

인접 형제 선택자 / ( + ) 플러스 기호 사용

부모의 가장 가까운(인접한) 형제를 찾는 선택자.

h1 + p                         h1(부모)의 가장 가까운 자식 p 를 선택함

                                  (h1 아래 자식 p가 많을 경우 가장 h1에 인접한 단 하나의 p만 선택됌)

일반 형제 선택자 / ( ~ ) 물결 기호 사용

위의 인접 형제에서는 h1에 가장 인접한 단하나의 자식 p만 찾는 반면에,

이 일반 형제 선택자는 h1의 자식들 p를 모두 선택한다.

h1 ~ p                           h1 자식의 p를 모두 선택

body {

/* font-family: 폰트, 폰트, 폰트, 폰트 패밀리;

1. Serif(명조체) : Times, 궁서체, 바탕체

2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕

3. Monospace(고정 폭; 모든 알파벳 폭이 똑같다.): Courier, Monaco

4. Cursive(흘림체): Comic Sans

5. Fantasy: impact

*/

font-family: Verdana, Geneva, Arial, Sans-serif;

/*

Verdana 먼저 찾고, 없으면 Geneva. 없으면 Arial. 없으면 sans-serif 를 찾는다.

1. 가장 많이 웹페이지보는 운영체제에 적합한 폰트를 정의한다.

2. 없으면 그 다음 적합한 폰트를 정의.

3. 위와 같다.

4. Sans-serif는 브라우저가 디폴트로 사용하기로한 폰트를 찾아 보여준다.

*/

<!--[if !supportEmptyParas]--> <!--[endif]-->

/* font-size: 폰트의 높이

1. px : 픽셀 단위로 지정 가능하다.

2. % : 기존 다른 폰트 크기를 기준으로 설정

3. em: 배수. 기존 다른 폰트 크기를 기준으로 설정

4. 상수: xx-smail ~ xx-large

-> body에서 폰트의 기본 크기 값을 설정한다.

-> 가능하면 상수값으로 설정한다.

-> body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.

<!--[if !supportEmptyParas]--> */

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

상속

스타일 중 일부는 자손에게 상속된다.

예시) font

<!--[if !supportEmptyParas]--> <!--[endif]-->

상속안되는 것

예시) border

<!--[if !supportEmptyParas]--> <!--[endif]-->

!부모로부터 상속받는 key가 있고, 상속받지 않는 key가 있다는 걸 알고 있자.

<!--[if !supportEmptyParas]--> <!--[endif]-->

italic: 폰트에서 제공하는 기울림체 사용

oblique: 폰트에 기울림체가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생.

벡터 폰트: 창을 늘였다가 줄여도 폰트 크기는 유지된다. 단점은 출력이 느리다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

* Box

□

배경안에 색, 그림을 넣을 수 있다.

border안에 내용물이 들어온다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding - 박스 안쪽 폭

margin - 박스 바깥쪽 폭

width - 박스 안에 내용물의 너비

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin 설정 시 두 개 박스 사이에 간격은 겹친다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

□

↕ 두 박스 사이에 마진은 겹침

□

실제너비 = width + border(경계선 좌/우 너비) + padding(좌/우) + margin(좌/우)

웹 페이지 크기는 1024.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

#guarantee {

line-height: 1.9em;

font-style: italic;

background-color: #a7cece;

border-color: white;

border-style: dashed;

border-width: 5px;

padding: 25px;

padding-left: 80px;

margin: 30px;

margin-right: 250px;

background-image: url(images/background.gif);

background-position: bottom right;

background-repeat: no-repeat;

width: 100px;

}

아이디 guarantee로 되어있는 것에 대해 스타일을 바꿔준다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

line-height: 1.9em;

/* 라인 폭넓이를 1.9배로 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

font-style: italic;

/* 글자 스타일을 '기울임'으로 바꾼다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

color: #444444;

/* 글자 색상을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

font-family: Georgia, "Times New Roman", Times, serif;

/* 글꼴 그룹 지정하는 것으로, Times New Roman같은 경우에는 이름 사이에 공백이 있기 때문에 쌍따옴표로 감싸줘야 한다. 각각의 폰트는 하나로만 되어 있는 것이 아니라 세트로 구성되어 있다. 위 font-family 참조. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding: 25px;

/* 해당 엘리멘트 박스 안쪽에 너비를 조절한다.

상 / 우 / 하 /좌 너비를 25px로 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding-left: 80px;

/* 해당 엘리멘트 박스 안쪽에서 왼쪽 너비를 80px만큼 더 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin: 30px;

/* 해당 엘리멘트 박스 바깥쪽 모든 너비를 30px만큼 더 늘린다.

padding과 마찬가지로 상 / 우 / 하 / 좌 너비로 순으로 간다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin-right: 250px;

/* 해당 엘리멘트 박스 바깥쪽 우측 너비를 250px만큼 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-style: dashed;

/* 테두리(경계)선 스타일을 dashed로 설정한다 */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-width: 5px;

/* 테두리(경계)선 굵기를 5px만큼 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-color: red;

/* 테두리(경계)선 색상을 red로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-color: #a7cece;

/* 해당 엘리멘트 박스 배경색상을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-image: url(images/background.gif);

/* 해당 엘리멘트 박스 배경그림을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-repeat: no-repeat;

/* 해당 엘리멘트 박스 안에 배경 이미지를 반복해주는데, no-repeat 은 반복하지 않고 한 번만 출력한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-position: bottom right;

/* 해당 엘리멘트 박스 안에 배경 이미지 위치를 잡아준다. 우측 하단으로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

width: 100px;

/* 해당 엘리멘트 박스 가로 크기를 100px로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> 

div - block

span - in line

<!--[if !supportEmptyParas]--> <!--[endif]-->

웹 브라우저는 HTML 문서에 기록된 순서대로 출력한다.

출력하다가 화면의 오른쪽 경계에 부딪히면 다음 라인으로 넘어간다.

만약, 출력하다가 오른쪽이나 왼쪽에 공중부양된 엘리멘트가 있다면 그 엘리멘트의 경계면을 따라서 출력한다.

왜냐하면 콘텐츠는 보여야 되기 때문이다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

1. div

- UI 컴포넌트를 묶는 역할. 여러 개의 UI 컴포넌트를 하나의 단위로 다루기 위함.

- block 형식. 라인 전체를 점유한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

HTML에서 쓰지 말아야 할 태그

<b>, <i>, <center> 의미를 나타내지 않고 모양을 나타내는 것.

*float

속성: left, right, none, inherit

순서가 아래와 같이 있다면 1번이 빠지고 뒤에 있던 숫자들이 앞으로오고 1번은 우측이나 좌측으로 빠져서 같이 있다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

①      ②, ①

②      ③

③ - > ④

④      ⑤

⑤

<!--[if !supportEmptyParas]--> <!--[endif]-->

footer에서 주로 사용되는 것은 clear이다.

footer는 하단에 copyright를 쓰이는데에 사용된다.

2. span

- 콘텐츠의 일부를 논리적으로 구분하기 위함.

- inline 형식.

<ul>

<li><span class="cd">Buddha Bar</span>,

<span class="artist">Claude Challe</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">When It Falls</span>,

<span class="artist">Zero7</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Earth 7</span>,

<span class="artist">L.T.J. Bukem</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>,

<span class="artist">Enigma</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Music for Airports</span>,

<span class="artist">Brian Eno</span></li>

</ul>

<!--[if !supportEmptyParas]--> <!--[endif]-->

body {

background-color: #b5a789

font-family: Georgia, "Times New Roman", Times, serif /* 글씨체중에 띄어쓰기가 있는 글씨체는 “ ” 안에 넣어준다.

font-size:10pt

/* margin: 0px 0px 0px 0px; */

/* margin: 0 0 0 0; */

/* 첫번째(위/아래) 두번째(좌/우) */

/* margin: 0px 0px; */

margin: 0px /* 상/하/좌/우 */

}

.beanheading img {

position: relative /* 출력 순서를 지키며 상/하/좌/우 이동 */

left: 120px

}

rgba(R,G,B,A) / hsla(H,S,L,A)

Source

div{

  padding:10px;

  color: rgba(0,0,0,1);

  color: hsla(180,0%,0%,1);

  background-color: rgba(150,100,80,.5);

  background-color: hsla(220,64%,69%,.5);

}

속성사용방법

color: ①rgba(0,0,0,1);

color: ②hsla(180,0%,0%,1);

background-color: ①rgba(150,100,80,.5);

background-color: ②hsla(220,64%,69%,.5);

같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.

① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)

좀 더 디테일하게 적용 할 수 있는 속성들

color:

background-color:

gradient

배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.

Source

div{

  padding:10px;

  border:solid 5px #66CCFF;

  border-radius: 20px;

  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));

  background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));

}

opacity

요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.

Source

div{

  padding:10px;

  opacity:.5;

  background:#<| class="nu0">777|>;

}

text-shadow

일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.

Source

div{

  text-shadow:4px 4px 4px #aaa;

  font-size:5em;

  font-family: arial;

}

마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.

View

속성사용방법

text-shadow: ①4px 4px ②4px ③#aaa;

① – 가로,세로 그림자거리 ② – 그림자 blur 크기

③ – 그림자 색상

text-overflow

텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.

Source

div{

    padding:10px;

    width:300px;

    text-overflow:ellipsis;

    white-space:nowrap;

    overflow:hidden;

    border:5px solid #ccc;

}

css는 엘리먼트가 보여지는 방법을 제어하기 위해 박스 모델을 사용한다. 박스는 콘텐츠 영역과 선택 가능한 패딩, 테두리 그리고 마진으로 구성되어 있으며, 콘텐츠 영역은 엘리먼트의 콘텐츠를 포함한다.

박스 모델

박스 모델은 좁은 범위로 보면 HTML로 구조화된 콘텐츠를 다른 콘텐츠와 구분하고 조화롭게 배치하기 위한 개념이며, 큰 범위로 보면 모든 HTML 요소가 갖는 블럭 개념입니다.

블럭 레벨 요소 뿐만 아니라, 인라인 레벨 요소 또한 박스 모델을 갖습니다. 다만, 지정할 수 있는 속성이 제한되어 있습니다.

박스 모델의 구성 요소

넓이 : 컨텐츠의 가로 크기

높이 : 컨텐츠의 세로 크기

패딩 : 컨텐츠와 테두리 사이의 간격, 테두리를 경계로 안쪽 여백이라고도 함. 배경이 표시됨

테두리 : 패딩과 마진의 경계

마진 : 인접한 박스와 간격, 테두리를 경계로 바깥 여백이라고도 함.

박스 모델의 크기

가로 크기 : "왼쪽 마진 + 왼쪽 테두리 + 왼쪽 패딩 + 컨텐츠 넓이 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 마진"의 크기를 모두 더한 값이다.

세로 크기 : "위쪽 마진 + 위쪽 테두리 + 위쪽 패딩 + 컨텐츠 높이 + 아래쪽 패딩 + 아래쪽 테두리 + 아래쪽 마진"의 크기를 모두 더한 값이다.

박스모델의 속성

• margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
• border : 박스의 테두리
• padding : 테두리와 content간의 간격
• content : 엘리먼트 안에 포함되는 컨텐츠

content(컨텐츠)

• 엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
• content는 폭(width)과 높이(height)를 지정할 수 있다.

border(보더), 테두리

• 엘리먼트의 테두리
• 테두리는 margin과 padding의 경계가 된다.
• 테두리의 굵기와 색상과 스타일을 지정할 수 있다.

padding(패딩)

• 테두리와 컨텐츠 간의 여백

margin(마진)

• 엘리먼트와 엘리먼트 간의 여백
• 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)

- M I N -

폰트와 색으로 장식하기

- 대부분의 컴퓨터에서는 특정한 폰트들만이 설치되며, 따라서 사용할 폰트를 선택하는데 있어서 신중해질 필요가 있다.

폰트 패밀리(font family)란?

일반적인 특성을 공유하는 폰트의 집합체를 담고 있으며, 산세리프(snas-serif), 세리프(serif). 모노스페이스(monospace), 흘림체(cursive) 그리고 판타지(tantasy)의 총 5개가 존재한다.

※ 폰트들은 컴퓨터에 따라서 다르게 보일 수 있다. 사실 사용 가능한 폰트들의 집합은 컴퓨터에 실치 된 폰트와 어플리케이션뿐만 아니라 운영체제에 따라 바뀔 수 있다. 따라서 컴퓨터에 있는 폰트들은 사용자들의 컴퓨터에서 사용 가능한 폰트들과 다를 수 있다는 점을 기억해야한다.

css는 font-family, font-weight, font-size, font-style 같은 속성들을 포함하여 폰트가 보이는 모습을 제어한다.

font-size 속성을 사용하여 폰트의 크기를 제어 할 수 있다.

px, em, %혹은 키워드로 명시 한다.

폰트 크기를 픽셀로 명시하는 것은 문자의 높이를 구성하는데 얼마나 많은 픽셀이 사용되는지 브라우저에가 말해주는 것이며,

키워드를 사용하는 것은 body 규칙에 있는 기본 폰트 크기로 설정하는 것이다. 따라서 사용자들이 텍스트를 좀더 크게 혹은 작게 만들기를 원한다면 모든 브라우저에서 폰트 크기를 조절이 가능하다.

예) body { font – size: 14px; }

body {

/* font-family: 폰트, 폰트, 폰투, 폰트패밀리;

1. Serif(명조체) : times,  궁서체, 바탕체

2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕

3. Monospace : Courier, Monaco

4. Cursive(흘림체) : Comic Sans

5. Fantasy : impact

*/

  font-family:     Verdana, Geneva, Arial, sans-serif;

  /* font-size : 폰트의 높이

  1. px : 픽셀

  2. % : 기존의 크기를 기준으로 설정

  3. em : 배수, 기존의 크기를 기준으로 설정

  4. 상수 : xx-small ~ xx-large

  => body에서 폰트의 기본 크기 값을 설정한다. 가능하면 상수값으로 설정한다.

  => body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.

  */

  font-size:       small;

  color: blue;

  background-color: gray;

}

h1 {

  font-size:       170%; 

}

h2 {

  font-size:       1.3em;

}

#p1{

color: red;

border: 1px solid green;

}

/* italic : 폰트에서 제공하는 기움림체 사용

   oblique : 폰트에서 기움림채가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생 

   */

blockquote {

font-family: Didot;

  font-style:      italic;

}

color 속성을 사용하여 텍스트에 색을 추가한다.

css는 검정색, 흰색, 빨강, 파랑, 녹색을 포함한 17가지의 미리 정의도니 색을 가지고 있다.

색의 비율이나 0에서 255까지의 숫자 값, 혹은 hex 코드를 사용하여 사용자가 원하는 색을 명시 할 수 있다.

예) body { font-weigth: bold; }

/* color (빛의 삼원색 사용 Red, Green, Blue) R B G

1. rgb(255,255,255)

2. rgb(20%, 30%, 100%)

3. #ffffff

4. #ffffffff (투명도 포함)

*/

h1, h2 {

  font-weight:     normal;

  color:           #ff0000;

  border-bottom:   thin dotted #888888;

  background-color: rgba(255,255,255,0.5); a는 투명도이다. 0~1사이로 소수점으로 지정할 수 있다.

}

text-decoration 속성을 사용하여 텍스트에 더 많은 스타일을 추가 한다

밑줄이나 윗줄, 가운데 줄과 일부 브라우저에서 동작하는 깜박거리는 텍스트 같은 텍스트에 장식적인 효과를 추가하는 역할을 한다.

예) body { text-decoration: underline; }

예) em { text-decoration: line-through; }

예) em { text-decoration: underline overline; }

원하지 않는 텍스트 데코레이션을 상속받았다면 속성값을 none으로 해서 장식을 하지 않을 수 있다.

예) em { text-decoration: none; }

- M I N -