'분류 전체보기'에 해당되는 글 185건

  1. [Java] 쓰레드 기본
  2. [Spring] Locale 처리
  3. [CSS3] CSS 선택자
  4. [Comparison] 후손 선택자와 자식 선택자
  5. [HTML5[ <table> 태그
  6. [HTML5] <a> 태그
  7. [HTML5] <input> 태그
  8. [HTML5] <form> 태그_GET과 POST
  9. [HTML5] <form> 태그 2
  10. [HTML5] <form> 태그 1

[Java] 쓰레드 기본


쓰레드 기본


1. 프로세스와 쓰레드

프로세스란 간단히 말해서 '실행 중인 프로그램'이다. 프로그램을 실행하면 OS로부터 실행에 필요한 자원(메모리)을 할당받아 프로세스가 된다.


프로그램 ---------------실행---------------> 프로세스


프로세스는 프로그램을 수행하는 데 필요한 데이터메모리 등의 자원 그리고 쓰레드로 구성되어 있으며 프로세스의 자원을 이용해서 실제로 작업을 수행하는 것이 바로 쓰레드이다.

그래서 모든 프로세스에는 최소한 하나 이상의 쓰레드가 존재하며, 둘 이상의 쓰레드를 가진 프로세스를 멀티쓰레드 프로세스라고 한다.

(쓰레드를 프로세스라는 작업공간(공장)에서 작업을 처리하는 일꾼으로 생각하자)


싱글쓰레드 프로세스 = 자원 + thread

멀티쓰레드 프로세스 = 자원 + thread + thread+..........


하나의 프로세스가 가질 수 있는 쓰레드의 개수는 제한되어 있지 않으나 쓰레드가 작업을 수행하는데 개별적인 메모리공간(호출 스택)을 필요로 하기 때문에 프로세스의 메모리 한계(호출 스택의 크기)

에 따라 생성할 수 있는 쓰레드의 수가 결정된다. 실제로는 프로세스의 메모리 한계에 다다를 정도로 많은 쓰레드를 생성하는 일은 없을 것이니 이에 관해서는 걱정하지 않아도 된다.

현재 우리가 사용하고 있는 윈도우나 유닉스를 포함한 대부분의 OS는 멀티태스킹(다중 작업)을 지원하기 때문에 여러 개의 프로세스가 동시에 실행될 수 있다.

멀티캐스팅과 마찬가지로 멀티쓰레딩은 하나의 프로세스 내에서 여러 쓰레드가 동시에 작업을 수행하는 것이 가능하다. 실제로는 한 개의 CPU가 한 번에 단 한가지 작업만 수행할 수 있기 때문에 아주 짧은 시간동안

여러 작업을 번갈아 가면 수행함으로써 동시에 여러 작업이 수행되는 것처럼 보이게 하는 것이다. 그래서 프로세스의 성능이 쓰레드의 개수에 비례하지 않으며, 하나의 쓰레드를 가진 프로세스 보다 두 개의 쓰레드를 가진 프로세스가 오히려 더 낮은 성능을 보일 수 있다.

도스와 같이 한번에 한가지 작업만 할 수 있는 OS와 윈도우와 같은 멀티태스킹이 가능한 OS의 차이는 이미 경험으로 잘 알 수 있을 것이다. 싱글쓰레드 프로그램과 멀티쓰레드 프로그램의 차이도 이와 같다고 생각하면 된다.


멀티쓰레딩의 장점

1 CPU의 사용률을  향상시킨다.

2 자원을 보다 효율적으로 사용할 수 있다.

3 사용자에 대한 응답성이 향상된다.

4 작업이 분리되어 코드가 간결해진다.


메신저의 경우 채팅하면서 파일을 다운로드 받거나 음성대화를 나눌 수 있는 것이 가능한 이유가 바로 멀티쓰레드로 작성되어 있기 때문이다. 만일 싱글쓰레드로 작성되어 있다면 파일을 다운로드 받는 동안에는 채팅을 할 수 없을 것이다. 여러 사용자에게 서비스를 해주는 서버 프로그램의 경우 멀티쓰레드로 작성하는 것은 필수적이어서 하나의 서버프로세스가 여러 개의 쓰레드를 생성해서 쓰레드와 사용자의 요청이 일대일로 처리되도록 멀티쓰레드로 프로그래밍해야 한다. 만일 싱글쓰레드로 서버프로그램을 작성한다면 사용자의 요청 마다 새로운 프로세스를 생성해야하는데 프로세스를 생성하는 것은 쓰레드를 생성하는 것에 비해 훨씬 더 많은 시간과 메모리공간을 필요하기 때문에 많은 수의 사용자 요청을 서비스하기 어렵다.

--> 쓰레드를 가벼운 프로세스 즉, 경량 프로세스하고 부르기도 한다.


그러나 멀티쓰레딩에 장점만 있는 것이 아니어서 멀티쓰레드 프로세스는 여러 쓰레드가 같은 프로세스 내에서 자원을 공유하면서 작업을 하기 때문에 발생할 수 있는 동기화, 교착상태(deadlock)와 같은 문제들을 고려해서 신중히 프로그래밍해야한다. 


2. 쓰레드의 구현과 실행

쓰레드를 구현하는 방법은 Thread클래스를 상속받는 방법 Runnable 인터페이스를 구현하는 방법, 모두 2가지가 있다.

그러나 Thread 클래스를 상속받으면 다른 클래스를 상속받을 수 없기 때문에, Runnable 인터페이스를 구현하는 방법이 일반적이다.

1) Thread 클래스를 상속

class MyThread extends thread{

public void run(){/*작업 내용*/}// Thread 클래스의 run()을 오버라이딩

}


2) Runnable 인터페이스를 구현

class MyThread implements Runnable{

public void run(){/*작업 내용*/}// Runnable인터페이스의 추상메서드 run()을 구현

}

Runnable 인터페이스는 run()메서드만 정의되어 간단한 인터페이스이다. Runnable 인터페이스를 구현하기 위해서 해야 할 일은 추상 메서드인 run()의 몸통을 만들어 주는 것일 뿐이다.


class ThreadEx1 {

public static void main(String args[]) {

A t1 = new A();


Runnable r = new B();

Thread t2 = new  Thread(r); // 생성자 Thread(Runnable target)

// Runnable 인터페이스를 구현한 경우, Runnable 인터페이스를 구현한 클래스의 인스턴스를 생성한 다음, 이 인스턴스를 가지고 Thread 클래스의 인스턴스를 생성할 때 생성자의 매개변수로 제공해야 한다.

// 이 때 사용되는 Thread 클래스의 생성자는 Thread(Runnable target)로 호출시에 Runnable인터페이스를 구현한 클래스의 인스턴스를 넘겨줘야 한다.

t1.start();// 쓰레드를 생성한 다음에는 start()를 호출해야한 비로소 작업을 시작하게 된다.

t2.start();

//한 번 사용한 쓰레드는 다시 재사용할 수 없다. 즉 하나의 쓰레드에 대해 start()가 한 번만 호출될  수 있다는 뜻이다.

//그래서 쓰레드의 작업이 한 번 더 수행되기를 원한다면 오른쪽의 코드와 같이 새로운 쓰레드를 생성한 다음에 start()를 호출해야 한다.

}

}


class A extends Thread {

public void run() {

for(int i=0; i < 5; i++) {

System.out.println(getName()); // 조상인 Thread의 getName()을 호출, 즉 쓰레드의 이름을 반환한다.

}

}

}


class B implements Runnable {

public void run() {

for(int i=0; i < 5; i++) {

// Thread.currentThread() - 현재 실행중인 Thread를 반환한다.

     System.out.println(Thread.currentThread().getName());

    // Thread 클래스를 상속받으면, Thread 클래스의 메서드를 직접 호출할 수 있지만, Runnable을 구현하면 Thread클래스의 static 메서드인 currentThread()를 호출하여 쓰레드에 대한 참조를 얻어 

    // 와야만 호출이 가능하다.

}

}

}

실행결과)

Thread-0

Thread-0

Thread-0

Thread-0

Thread-0

Thread-1

Thread-1

Thread-1

Thread-1

Thread-1

(실행결과는 그때그때 달라요!~)

cf.) 인스턴스 변수로 Runnable타입의 변수 r을 선언해 놓고 생성자를 통해서 Runnable 인터페이스를 구현한 인스턴스를 참조하도록 되어 있는 것을 확인할 수 있다. 그리고 run()을 호출하면 참조변수 r을 통해서 Runnable 인터페이스를 구현한 인스턴스의 run()이 호출된다. 이렇게 함으로써 상속을 통해 run()을 오버라이딩하지 않고도 외부로부터 제공받을 수 있다.


3. start()와 run()

쓰레드를 실행시킬 때 run()이 아닌 start()를 호출한다는 것에 대해서 다소 의문을 들었을 것이다.

run()을 호출하는 것은 생성된 쓰레드를 실행시키는 것이 아니라 단순히 클래스에 속한 메서드 하나를 호출하는 것이다.

반면에 start()는 새로운 쓰레드가 작업을 실행하는데  필요한 호출스택을 생성한 다음에 run()을 호출해서, 생성된 호출스택에 run()이 첫 번째로 저장되게 한다.

모든 쓰레드는 독립적인 작업을 수행하기 위해 자신만의 호출스택을 필요로 하기 때문에, 새로운 쓰레드를 생성하고 실행시킬 때마다 새로운 호출스택이 생성되고 쓰레드가 종료되면 작업에 사용된 호출스택은 소멸된다.


(1) start()와 run() - 쓰레드의 호출 구조

main()에서 start()호출 -> start()에서 호출스택 생성 -> 호출스택에서 run()호출하여 쓰레드 작업수행 ->

호출스택이 2개이므로 스케쥴러가 정한 순서에 의해서 번갈아가며 작업 수행. 


1 main 메서드에서 쓰레드의 start메서드를 호출한다.

2 start 메서드는 쓰레드가 작업을 수행하는데 사용될 새로운 호출스택을 생성한다.

3 생성된 호출스택에 run 메서드를 호출해서 쓰레드가 작업을 수행하도록 한다.

4 이제는 호출스택이 2개이기 때문에 스케줄러가 정한 순서에 의해 번갈아 가면서 실행된다.


호출스택에서는 가장 위에 있는 메서드가 현재 실행중인 메서드이고 나머지 메서드들은 대기상태에 있다.

그러나 쓰레드가 둘 이상일 때는 호출스택의 최상위에 있는 메서드 일지라도 대기상태에 있을 수 있다는 것을 알 수 있다.

스케줄러는 시작되었지만 아직 종료되지 않은 쓰레드들의 우선순위를 고려하여 실행 순서와 실행 시간을 결정하고 각 쓰레드들은 작성된 스케줄에 따라 자신의 순서가 되면 지정된 시간동안 작업을 수행한다.

cf.) start()가 호출된 쓰레드는 바로 실행되는 것이 아니라는 것에 주의하자. 일단 대기상태로 있다가 스케줄러가 정한 순서에 의해서 실행된다.


이때 주어진 시간동안 작업을 마치지 못한 쓰레드는 다시 자신의 차례가 돌아올 때 까지 대기상태에 있게 되며, 작업을 마친 쓰레드, 즉 run()의 수행이 종료된 쓰레드는 호출스택이 모두 비워지면서 이 쓰레드가 사용하던 호출스택은 사라진다.

자바프로그램을 실행하면 호출스택이 생성되고 main 메서드가 처음으로 호출되고 main 메서드가 종료되면 호출스택이 비워지고 프로그램이 종료되는 것과 정확히 일치한다.

쓰레드는 일꾼이다. 프로그램이 실행되기 위해서는 작업을 수행하는 일꾼이 최소한 하나는 필요하다. 그래서 프로그램을 실행하면 기본적으로 하나의 쓰레드(일꾼)를 생성하고, 그 쓰레드가 main 메서드를 호출해서 작업이 수행되도록 하는 것(main 메서드의 작업을 수행하는 것도 쓰레드이다.)이다.

지금까지는 main 메서드가 수행을 마치면 프로그램이 종료되었으나, main 메서드가 수행을 마쳤다하더라도 다른 쓰레드가 아직 작업을 마치지 않은 상태라면 프로그램이 종료되지 않는다.(실행중인 사용자 쓰레드가 하나도 없을 때 프로그램은 종료된다.)


class ThreadEx2 {

public static void main(String args[]) throws Exception {

MyThreadEx2_1 t1 = new MyThreadEx2_1();

t1.start();

}

}


class MyThreadEx2_1 extends Thread {

public void run() {

throwException();

}


public void throwException() {

try {

throw new Exception();

} catch(Exception e) {

e.printStackTrace();

}

}

}

실행결과)

java.lang.Exception

at MyThreadEx2_1.throwException(ThreadEx2.java:15)

at MyThreadEx2_1.run(ThreadEx2.java:10)

새로 생성한 쓰레드에서 고의로 예외를 발생시키고 printStackTrace()를 이용해서 예외가 발생한 당시의 호출스택을 출력하는 예제이다.

호출스택의 첫번째 메서드가 main 메서드가 아니라 run 메서드인 것을 확인하자.

그리고 한 스레드에서 예외가 발생해서 종료되어도 다른 쓰레드의 실행에는 영향을 미치지 않는다.


class ThreadEx3 {

public static void main(String args[]) throws Exception {

MyThreadEx3_1 t1 = new MyThreadEx3_1();

t1.run();

}

}


class MyThreadEx3_1 extends Thread {

public void run() {

throwException();

}


public void throwException() {

try {

throw new Exception();

} catch(Exception e) {

e.printStackTrace();

}

}

}

실행결과)

java.lang.Exception

at MyThreadEx3_1.throwException(ThreadEx3.java:15)

at MyThreadEx3_1.run(ThreadEx3.java:10)

at ThreadEx3.main(ThreadEx3.java:4)

이 예제 역시 고의적으로 예외를 발생시켜서  호출스택의 내용을 확인할 수 있도록 했다. 이전 예제와는 달리 main 메서드가 호출스택에 포함되어 있음을 확인하자.


4. 핵심

1 Thread를 상속받는 클래스는 독립적인 흐름을 갖는 하나의 쓰레드로서의 역할을 수행한다. 

2 run()는 main() 쓰레드와 별개의 독립적인 실행 흐름을 갖는다. 또는 별개의 움직이는 실행 위치이다.

3 run()만하면 단순히 메소드 호출에 불과하다.--> 독립적인 실행을 하는 쓰레드가 아니다.

4 Runnable 인터페이스에는 start()라는 메서드가 없다. 그래서 Runnable을 매개변수로 갖는 Thread 생성자를 사용한다.  객체를 Thread 생성자의 매개변수로 담아 버리면 Thread 클래스와 같이 사용할 수 있다.

5 main () 쓰레드를 실행하면 main 메서드만 실행하는 클래스가 되나, 쓰레드이나, 만약 main() 하고 마치 동시에 실행되는 듯한 클래스를 만들고 싶다면 멀티쓰레드의 개념이 성립된다.

6 멀티쓰레드를 사용하면 여러개의 프로세스가 동시에 실행하는 듯한 모습을 보인다.

7 쓰레드라는 것은 프로세스이기 때문에 준비하는데 약간의 시간이 필요하다. t1.run()의 경우 단순히 메서드 호출하므로 시간이라는 것이 필요한것이 아니다.


'Programing > Java' 카테고리의 다른 글

[Java] 쓰레드 그룹  (0) 2014.12.21
[Java] 쓰레드의 우선순위  (0) 2014.12.21
[Java] 직렬화  (0) 2014.12.17
[Java] File 클래스  (0) 2014.12.16
[Java] 문자 기반 스트림  (0) 2014.12.16

[Spring] Locale 처리


Locale 처리


스프링 제공하는 <spring:message> 커스텀 태그는 웹 요청과 관련된 언어 정보를 이용해서 알맞은 언어의 메시지를 출력한다.

웹 브라우저의 언어 설정을 한국어(ko_kr)로 했을 때와 영어(en_us)로 했을 때 <spring:message> 커스텀 태그가 언어에 따라 알맞은 메시지를 출력해 주는 결과 화면을 보여주고 있다.


실제로, 스프링 MVC는 LocaleResolver를 이용해서 웹 요청과 관련된 Locale을 추출하고, 이 Locale 객체를 이용해서 알맞은 언어의 메시지를 선택하게 된다.

본 절에서는 스프링이 제공하는 LocaleResolver를 사용해서 Locale을 변경하는 방법에 대해서 살펴보도록 하겠다.


1. LocaleResolver 인터페이스

org,springframework.web.serlvet.LocaleResolver 인터페이스는 다음과 같이 정의 되어 있다.


package org.springframework.web.servlet;

import java.util.Locale;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;


public interface LocaleResolver{

Locale resolveLocale(HttpServletRequest request);

void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale);

}

resolveLocale() 메서드는 요청과 관련된 Locale을 리턴한다. DispatcherServlet은 등록되어 있는 LocaleResolver의 resolveLocale() 메서드를 호출해서 웹 요청을 처리할 때 사용할 Locale을 구한다.

setLocale() 메서드는 Locale을 변경할 때 사용된다. 예를 들어, 쿠키나, 쿠기나 HttpSession에 Locale 정보를 저장할 때에 이 메서드가 사용된다.


2. LocaleResolver의 종류

스프링이 기본적으로 제공하는 LocaleResolver 구현 클래스는 다음과 같다.


※ 스프링이 제공하는 LocaleResolver 구현 클래스

 클래스

 설 명

 AcceptHeaderLocaleResolver

 웹 브라우저가 전송한 Accept-Language 헤더로부터 Locale 선택한다. setLocale() 메서드를 지원  하지 않는다.

 CookieLocaleResolver

 쿠키를 이용해서 Locale 정보를 구한다. setLocale() 메서드는 쿠키에 Locale 정보를 저장한다.

 SessionLocaleResolver

 세션으로부터 Locale 정보를 구한다. setLocale() 메서드는 세션에 Locale 정보를 저장한다.

 FixedLocaleResolver

 웹 요청에 상관없이 특정한 Locale로 설정한다. setLocale() 메서드를 지원하지 않는다.


(1) AcceptHeaderLocaleResolver

LocaleResolver를 별도로 설정하지 않을 경우 AcceptHeaderLocaleResolver를 기본 LocalResolver로 사용한다.

AcceptHeaderLocaleResolver는 AcceptLanguage 헤더로부터 Locale 정보를 추출한다.

헤더로부터 Locale 정보를 추출하기 때문에, setLocale() 메서드를 이용해서 Locale 설정을 변경할 수 없다.


(2) CookieLocaleResolver

CookieLocaleResolver는 쿠키를 이용해서 Locale 정보를 저장한다. setLocale() 메서드를 호출하면 Locale 정보를 담은 쿠키를 생성하고, resolveLocale() 메서드는 쿠기로부터 Locale 정보를 가져와 Locale 정보를

담은 쿠키가 존재하지 않을 경우, defaultLocale 프로퍼티의 값을 Locale로 사용한다. defaultLocale 프로퍼티의 값이 null인 경우에는 Accept-Language 헤더로부터 Locale 정보를 추출한다.

CookieLocaleResolver는 쿠티와 관련해서 별도 설정을 필요로 하지 않지만. 생성할 쿠키 이름, 도메인, 경로 등의 설정을 직접하고 싶다면 프로퍼티에 알맞게 설정해주면 된다.


※ CookieLocaleResolver의 쿠키 설정 관련 프로퍼티

프로퍼티 

설 명  

 cookieName

 사용할 쿠키 이름

 cookieDomain

 쿠키 도메인

 cookiePath

 쿠키 경로, 기본값은 "/"이다.

 cookieMaxAge

 쿠키 유효 시간

 cookieSecure

 보안 쿠키 여부, 기본값은 false 이다.


(3) SessionLocaleResolver

SessionLocaleResolver HttpSessio에 Locale 정보를 저장한다. setLocale() 메서드를 호출하면 Locale 정보를 세션에 저장하고, resolveLocale() 메서드는 세션으로부터 Locale을 가져와 웹 요청의 Locale을 설정한다.

만약 Locale 정보가 세션에 존재하지 않으면, defaultLocale 프로퍼티의 값을 Locale로 사용한다. defaultLocale 프로퍼티의 값이 null인 경우에는 Accept-Language 헤더로부터 Locale 정보를 추출한다.


(4) FixedLocaleResolver

FixedLocaleResolver는 웹 요청에 상관없이 defaultLocale 프로퍼티로 설정한 값을 웹 요청을 위한 Locale로 사용한다. FixedLocaleResolver는 setLocale() 메서드를 지원하지 않는다.

setLocale() 메서드를 호출할 경우 UnsupportedOperationException 예외를 발생시킨다.


3. LocaleResolver를 이용한 Locale 변경

LocaleResolver를 빈으로 등록했다면, 컨트롤러에서 LocaleResolver를 이용해서 Locale을 변경할 수 있게 된다. 예를 들어 다음과 같이 LocaleResolver를 설정했다고 하자.


<bean class="madvirus.spring.chap07.controller.LocaleChangeController">

<property name="localeResolver" ref="localeResolver" />

</bean>

<bean id="localeResolver" class="org.springframework.web.servlet.i18n.SessionLocaleResolver" />


이 경우, 컨트롤러 클래스는 다음과 같이 LocaleResolver의 setLocale() 메서드를 호출해서 클라이언트의 웹 요청을 위한 Locale을 변경할 수 있다.

import org.springframework.web.servlet.LocaleResolver;


@Controller

public class LocaleChangeController {


private LocaleResolver localeResolver;


@RequestMapping("/changeLanguage")

public String change(@RequestParam("lang") String language, HttpServletRequest request, HttpServletResponse response) {

Locale locale = new Locale(language);

localeResolver.setLocale(request, response, locale);

return "redirect:/index.jsp";

}


public void setLocaleResolver(LocaleResolver localeResolver) {

this.localeResolver = localeResolver;

}

}


LocaleResolver를 이용해서 Locale을 변경하면, 이후 요청에 대해서는 지정한 Locale을 이용해서 메시지 등을 로딩하게 된다.

ResolverContextUtils 클래스는 웹 요청과 관련된 LocaleResolver를 구할 수 있는 메서드를 제공하고 있으므로, 위 코드를 다음과 같이 변경할 수도 있다.

@Controller

public class LocaleChangeController2 {


@RequestMapping("/changeLanguage2")

public String change(@RequestParam("lang") String language, HttpServletRequest request, HttpServletResponse response) {

Locale locale = new Locale(language);

LocaleResolver localeResolver = RequestContextUtils.getLocaleResolver(request);

localeResolver.setLocale(request, response, locale);

return "redirect:/index.jsp";

}

}


4. LocaleChangeInterceptor를 이용한 Locale 변경

Locale을 변경하기 위해 별도의 컨트롤러 클래스를 개발한다는 것은 다소 성가신 일이다.

이 경우, 스프링이 제공하는 LocaleChangeInterceptor 클래스를 사용하면 웹 요청 파라미터를 이용해서 손쉽게 Locale을 변경할 수 있다.


LocaleChangeInteceptor 클래스는 handlerInterceptor로서 다음과 같이 HandlerMapping의 intercaptors 프로퍼티에 등록만 하면 설정이 완료된다. 아래 코드는 설정 예이다.

<bean id="localeChangeInterceptor" class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor"

p:paramName="language" />


<bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">

<property name="interceptors">

<list>

<ref bean="localeChangeInterceptor" />

</list>

</property>

</bean>

paramName 프로퍼티는 Locale을 설정할 때 사용할 파라미터 이름을 명시한다. 예를 들어, 위 코드에서는 paramName 프로퍼티의 값으로 language를 설정했는데,

이 경우 language 요청 파라미터를 사용해서 Locale을 변경할 수 있다.


http://localhost:8080/chap07/jsp/login/login.do?language=en

LocaleChangeInterceptor는 paramName 프로퍼티로 설정한 요청 파라미터가 존재할 경우, 파라미터의 값을 이용해서 Locale을 생성한 뒤 LocaleResolver를 이용해서 Locale을 변경한다.

이후, 요청에서는 변경된 Locale이 적용된다.


[CSS3] CSS 선택자


CSS 선택자




 선택자 종류

 선택자 형태

 선택자 예

 전체 선택자

 *

 태그 선택자

태그 

h1 

 아이디 선택자

#id 

#header 

 클래스 선택자

 .class

 .item

 후손 선택자

 선택자 선택자

 header h1

 자식 선택자

 선택자 > 선택자

 header > h1

 속성 선택자

 선택자[속성=값]

 input[type=text]

 선택자[속성~=값]

 div[data-role~=row]

 선택자[속성|=값]

 div[data-role|=row]

 선택자[속성^=값]

 div[data-role^=row]

 선택자[속성$=값]

 div[data-role$=row]

 선택자[속성*=값]

 div[data-role*=row]

 동위 선택자

 선택자 +선택자

 h1+div

 선택자 ~ 선택자

 h1 ~ div

 구조 선택자

 선택자:first-child

 li:first-child

 선택자:last-child

 li:last-child

 선택자:nth-child(수열)

 li:nth-child(2n+1)

 선택자:nth-last-child(수열)

 li:nth-last-child(2n+1)

 선택자:first-of-type

 h1:first-of-type

 선택자:last-of-type

 h1:last-of-type

 선택자:nth-of-type(수열)

 h1:nth-of-type(2n+1)

 선택자:nth-last-of-type(수열)

 h1:nth-last-of-type(2n+1)

 반응 선택자

 선택자:active

 div:active

 선택자:hover

 div:hover

 상태 선택자

 :checked

 input:checked

 :focus

 input:focus

 :enabled

 input:enabled

 :disabled

 input:disabled

 링크 선택자

 :link

 a:link

 :visited

 a:visited

 문자 선택자

 ::first-letter

 p::first-letter

 ::first-line

 p::first-line

 ::after

 p::after

 ::before

 p::before

 ::selection

 p::selection

 부정 선택자

 선택자:not(선택자)

 li:not(.item)


1. 후손 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* id 속성으로 header를 가지는 태그의

           후손 위치에 있는 h1 태그의

           color 속성을 red 키워드로 적용합니다.*/

        #header h1  { color: red; }

        

         /* id 속성으로 section을 가지는 태그의

            후손 위치에 있는 h1 태그의

            color 속성을 orange 키워드로 적용합니다.*/

        #section h1 { color: orange; }

    </style>

</head>

<body>

    <div id="header">

        <h1 class="title">Lorem ipsum</h1>

        <div id="nav">

            <h1>Navigation</h1>

        </div>

    </div>

    <div id="section">

        <h1 class="title">Lorem ipsum</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

</body>

</html>

※ 후손 선택자 주의사항

#header h1, h2  { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 h2 태그의 color 속성을 red로 적용한다.


#header h1, #header h2  { color: red; }

--> id 속성이 header인 태그의 후손 위치에 있는 h1 태그와 id 속성이 header인 태그의 후손 위치에 있는 h2 태그의 color 속성을 red로 적용한다.


2. 자식 선택자 예제
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
        /* id 속성으로 section을 가지는 태그의
           자식 위치에 있는 h1 태그의
           color 속성을 orange 키워드로 적용합니다.*/
        #header > h1  { color: red; }
        
        /* id 속성으로 section을 가지는 태그의
           자식 위치에 있는 h1 태그의
           color 속성을 orange 키워드로 적용합니다.*/
        #section > h1 { color: orange; }
    </style>
</head>
<body>
    <div id="header">
        <h1 class="title">Lorem ipsum</h1>
        <div id="nav">
            <h1>Navigation</h1>
        </div>
    </div>
    <div id="section">
        <h1 class="title">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</body>
</html>


3. 동위 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* h1 태그의 바로 뒤에 위치하는 h2 태그의

           color 속성에 red 키워드를 적용합니다. h1 바로 뒤의 태그 1개만*/

        h1 + h2 { color: red; }

        

        /* h1 태그의 뒤에 위치하는 h2 태그의

           background-color 속성에 orange 키워드를 적용합니다. h1 뒤의 모든 h2태그*/

        h1 ~ h2 { background-color: orange; }

    </style>

</head>

<body>

    <h1>Header - 1</h1>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

    <h2>Header - 2</h2>

</body>

</html>


4. 반응 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* h1 태그에 마우스를 올릴 경우에

           color 속성에 red 키워드를 적용합니다. */

        h1:hover { color: red; }

        

        /* h1 태그를 마우스로 클릭할 때에

           color 속성에 blue 키워드를 적용합니다. */

        h1:active { color: blue; }

    </style>

</head>

<body>

    <h1>User Action Selector</h1>

</body>

</html>


5. 상태 선택자 예제

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* input 태그가 사용 가능할 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:enabled { background-color: white; }


        /* input 태그가 사용 불가능할 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:disabled { background-color: gray; }


        /* input 태그에 체크박스나 라디오 버튼에 체크되었을 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:checked { background-color: orange; }


        /* input 태그에 초점이 맞추어진 경우에

           background-color 속성에 white 키워드를 적용합니다. */

        input:focus { background-color: orange; }

    </style>

</head>

<body>

    <h2>Enabled</h2>

    <input />

    <h2>Disabled</h2>

    <input disabled="disabled"/>

</body>

</html>


cf.) 상태 선택자와 동위 선택자의 복합 활용

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>

        /* input 태그의 type 속성이 checkbox인 태그가 체크되었을 때,

            바로 뒤에 위치하는 div 태그의 height 속성을 0픽셀로 적용합니다. */

        input[type=checkbox]:checked + div {

            height: 0px;

        }


        div {

            overflow: hidden;

            width: 650px; height: 300px;


            /* 변환 효과를 적용합니다. */

            -ms-transition-duration: 1s;

            -webkit-transition-duration: 1s;

            -moz-transition-duration: 1s;

            -o-transition-duration: 1s;

            transition-duration: 1s;

        }

    </style>

</head>

<body>

    <input type="checkbox" />

    <div>

        <h1>Lorem ipsum</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

</body>

</html>


6. 문자 선택자

(1) 시작 문자 선택자

1) ::first-letter: 첫 번째 글자를 선택한다.

2) ::first-line: 첫 번째 줄을 선택한다.

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic Page</title>

    <style>

        p::first-letter { font-size: 3em; }

        p::first-line { color: red; }

    </style>

</head>

<body>

    <h1>Lorem ipsum dolor sit amet</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p>Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>



(2)  전후 문자 선택자

1) ::after: 태그 뒤에 위치하는 공간을 선택한다.

2) ::before: 태그 앞에 위치하는 공간을 선택한다.

<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic Page</title>

    <style>

        p { counter-increment: rint; }

        p::before { content: counter(rint) "."; }

        p::after { content: " - " attr(data-page) " page"; }

        p::first-letter { font-size: 3em; }

    </style>

</head>

<body>

    <h1>Lorem ipsum dolor sit amet</h1>

    <p data-page="52">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <p data-page="273">Aenean ac erat et massa vehicula laoreet consequat et sem.</p>

</body>

</html>


7. 링크 선택자 예제

(1) :link: href 속성을 가지고 있는 a 태그를 선택한다.(사용자가 아직 방문하지 않은 링크레 스타일을 적용한다.)
(2) :visited: 방문했던 링크를 가지고 있는 a 태그를 선택한다.(기본 자주색)
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic</title>
    <style>
       /* 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.*/
        a { text-decoration: none; }
        a:visited { color: red; }

        /* href 속성을 가지고 있는 a 태그의 뒤의 공간에 
           "- (href 속성)"을 추가합니다. */
        a:link::after { content: ' - ' attr(href); }
    </style>
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>
    <h1><a href="http://www.w3.org/">W3C</a></h1>
    <h1><a href="https://github.com/">Github</a></h1>
</body>
</html>


[Comparison] 후손 선택자와 자식 선택자


후손 선택자와 자식 선택자 


<!DOCTYPE html>

<html>

<head>

    <title>CSS3 Selector Basic</title>

    <style>


    </style>

</head>

<body>

    <div>

        <h1>CSS3 Selector Basic</h1>

        <h2>Lorem ipsum</h2>

        <ul>

            <li>universal selector</li>

            <li>type selector</li>

            <li>id & class selector</li>

        </ul>

    </div>

</body>

</html>

이때 div 태그를 기준으로 바로 한 단계 아래에 위치한 태그를 자식(h1, h2, ul)이라고 부르고,

div 태그 아래에 위치한 모든 태그를 후손(h1, h2, ul, li)이라고 한다.

-->  후손이 자식보다 포괄적이다.


1. 후손 선택자

후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다.

(1) 선택자 형태

선택자A 선택자B

ex.) #header h1, h2  { color: red; }

      #header h1, #header h2  { color: red; }


(2) 설명

선택자A의 후손에 위치하는 선택자B를 선택한다.

--> 후손 선택자를 사용해 h1 태그를 선택하지만 특정한 대상의 후손을 선택할 수 있다.


2. 자식 선택자

자식 선택자는 특정한 태그 아래에 있는 자식을 선택할 때 사용하는 선택자이다.

(1) 선택자 형태

선택자A > 선택자B 

ex.) #header > h1  { color: red; }


(2) 설명

선택자A의 자식에 위치하는 선택자B를 선택한다.


[HTML5[ <table> 태그

<table> 태그


1. 표란?

table, 표는 데이터를 일목요연하게 표현하기 위한 방법이다.


2. 문법(Syntax)

<table>

    <tr>

       <th>제목</th>

    </tr>

    <tr>

       <td>데이터</td>

    </tr>

</table>


3. 설명(Description)

- 데이터를 구조화할 때 사용됨

- 레이아웃으로도 활용되나, 불가피한 경우를 제외하면 div와 css등을 이용

- th는 데이터 그룹의 제목에 해당함 (header cells)

- td는 th에 속하는 데이터 그룹 (standard cells)


4. 예제(Example)

example1.html - 테이블은 행(tr) 안에 열(td)가 포함되는 형식을 가지고 있다. 아래 예제에서 tr은 3행을 의미하고, 각각의 행은 3개의 td를 가지면서 3개의 열을 표현하고 있다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">// 표는 table로 시작

            <tr>//tr로 한줄씩 만든다.

                <td>이름</td><td>성별</td><td>나이</td>

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td>6</td>

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>


example2.html - <th>는 제목을 의미한다. 아래 예제는 이름, 성별, 나이를 제목으로 표현하는 방법을 보여준다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>//th은 각각의 contents의 제목에 해당한다.

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td>6</td>

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>


example3.html - 행을 병합하고 싶다면 rowspan 속성을 사용한다.

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>

            </tr>

            <tr>

                <td>최진혁</td><td>남</td><td rowspan="2">비공개</td>//row:행, span: 묶는다.(통합한다.)--> 두개의 행을 하나의 행으로 묶는다.--> 병합될 대상은 다음행을 말한다.

            </tr>

            <tr>

                <td>최유빈</td><td>여</td>

            </tr>

        </table>

    </body>

</html>


example4.html - 열을 병합하고 싶다면 colspan을 사용한다. 

<!DOCTYPE html>

<html>

    <body>

        <table border="1">

            <tr>

                <th>이름</th><th>성별</th><th>나이</th>

            </tr>

            <tr>

                <td>최진혁</td><td colspan="2">비공개</td>// 두개의 열을 하나의 박스로 묶는다.

            </tr>

            <tr>

                <td>최유빈</td><td>여</td><td>2</td>

            </tr>

        </table>

    </body>

</html>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <a> 태그  (0) 2014.12.21
[HTML5] <input> 태그  (0) 2014.12.21
[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20

[HTML5] <a> 태그

<a> 태그


1. 요약(Summary)

문서에서 다른 문서로 이동할 수 있는 수단을 의미한다.


2. 문법(Syntax)

<a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>

- href : 링크이름과 연결되어 있는 리소스(resource)의 주소

- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.

- target : 문서가 로드될 대상으로 아래와 같은 것들이 있다.

_self : 현재의 문서가 로드된 프래임, 현재 문서 사라짐

_blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드

_parent : 현재 문서가 frame나 iframe에 로드된 경우 현재 문서를 로드한 프래임에 문서로를 로드

프래임의 이름


3. 설명(Description)

하이퍼텍스트란 문서에서 다른 문서로 쉽게 이동할 수 있도록 연결되어 있는 문서시스템을 의미하는데, 이 연결성을 제공하는 것을 링크라고 한다.

- 문서에서 문서로 이동하는 수단

- 태그명 a(anchor)을 사용함

- href에 #을 사용하면 같은 문서 내에서도 특정한 위치로 이동이 가능

- target을 지정해서 문서가 로드될 위치를 지정할 수 있다.


4. 예제(Example)

example1. 아래 예제는 여러가지 형태의 링크를 보여준다. 

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

   <body>

        <p>

            <a href="http://opentutorials.org/course/1">생활코딩</a> : 생활코딩 홈페이지로 이동한다.

        </p>

        <p>

            <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a> : 새창에서 생활코딩 홈페이지를 연다.

        </p>   

        <p>

            <a href="http://opentutorials.org" target="_self">생활코딩</a> : 현재 프래임에서 생활코딩 홈페이지를 연다.

        </p>

        <p>

            <a href="http://opentutorials.org" title="생활코딩 홈페이지">생활코딩</a> : 링크에 부가 설명을 추가한다. 링크에 툴팁을 표시한다.

        </p>

        <p>

            <a href="http://opentutorials.org/course/11/10#reference" title="생활코딩 html이란 무엇인가 참조">HTML 소개 참조</a> : 생활코딩의 HTML소개 페이지 중 참조 부분으로 문서를 이동한다

<!--페이지 열리면서 특정 지점으로 이동: #북마크-->

        </p>

</body>

</html>

해당 문서 안의 a 태그중 name의 속성 값에 reference가 있는 지점으로 스크롤을 자동으로 이동시켜준다.--> 북마크 기능


example2. 아래 예제는 링크에 연결된 문서를 아이프래임으로 로드한다.--> 하나의 문서안에 다른 문서를 로드할 수 있는 기법을 프래임이라고 한다.

<!DOCTYPE html>

<html>

    <body>

        <iframe id="sample" src="http://w3c.org/" width="100%" height="300"></iframe>

        <a href="http://opentutorials.org/" target="sample">아이프래임</a>

    </body>

</html>

--> target의 대상을 <iframe>의 id 속성이다. 


5. 빈 링크

a 태그는 본래 가지고 있는 하이퍼링크 기능을 제거하고 사용하는 경우도 있다. 하지만 하이퍼링크 기능을 제거해도 웹 표준을 따르려면 a 태그에 href 속성을 반드시 입력해야 한다.

따라서 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 #을 입력한다.

그리고 이를 빈 링크라고 부른다.


6. 페이지 내부 이동

a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있다. 이때는 원하는 장소에 id 속성을 부여해야 한다.

이동하기를 원하는 태그에 id 속성을 부여하고 a 태그의 href 속성에 # 아이디 형태의 문자열을 입력한다.

<!DOCTYPE html>

<html>

<head>

    <title>HTML5 Basic</title>

</head>

<body>

    <a href="#alpha">Move to Alpha</a>

    <a href="#beta">Move to Beta</a>

    <a href="#gamma">Move to Gamma</a>

    <hr />

    <h1 id="alpha">Alpha</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <h1 id="beta">Beta</h1>

    <p>Duis nec risus a ante pellentesque rhoncus at et leo.</p>

    <h1 id="gamma">Gamma</h1>

    <p>Nullam porta, felis sit amet porttitor vestibulum.</p>

</body>

</html>

a 태그를 클릭하면 지정한 id 속성이 있는 위치로 스크롤바가 자동으로 이동한다.

cf.) id 속성이 중복될 경우 먼저 나오는 태그로 이동한다.

'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그  (0) 2014.12.21
[HTML5] <input> 태그  (0) 2014.12.21
[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20

[HTML5] <input> 태그


<input> 태그


1. type 속성에서 사용할 수 있는 유형

 키워드

설 명 

 hidden

 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가지는 필드이다.

 text

 한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣는다.

 search

 검색 상자를 넣는다.

 tel

 전화번호 입력 필드를 넣는다.

 url

 URL 주소를 입력할 수 있는 필드를 넣는다.

 email

 메일 주소를 입력할 수 있는 필드를 넣는다.

 password

 비밀번호를 입력할 수 있는 필드를 넣는다.

 number

 숫자를 조절할 수 있는 화살표를 넣는다.

 color

 색상 표를 넣는다.

 checkbox

 주어진 항목에서 2개 이상 선택 가능한 체크 박스를 넣는다.

 radio

 주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣는다.

 datatime

 국제 표준시(UTC)로 설정된 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)를 넣는다.

 datatime-local

 사용자가 있는 지역을 기준으로 날짜와 시간(년, 월, 일, 시, 분, 초, 분할 초)을 넣는다.

 date

 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.

 month

 사용자 지역을 기준으로 날짜(연, 월)을 넣는다.

 week

 사용자 지역을 기준으로 날짜(연, 주)를 넣는다.

 time

 사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣는다.

 button

 버튼을 넣는다.

 file

 파일을 첨부할 수 있는 버튼을 넣는다.

 submit

 서버 전송 버튼을 넣는다.

 image

 submit 버튼 대신 사용할 이미지를 넣는다.

 reset

 리셋 버튼을 넣는다.

 range

 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.


































보충 설명)

(1) [type="color"]

color 필드는 사용자가 색상표에서 색상을 선택할 수 있게 해준다. 현재까지는 일부 브라우저에서만 지원하고 있지만. 표준 규약이 완성되면 모든 웹 브라우저상에서 표시할 수 있다.


※ 속성

1) list: 선택할 수 있는 색상 목록을 따로 정의했을 경우 그 datalist의 id를 지정한다.

2) value: 색상 값을 지정한다. 색상은 16진수로 표시하고, Red나 Yellow 같은 색상 키워드는 사용할 수 없다.


(2) [type="datetime", type="datatime-local"]

날짜(연도, 월, 일)와 시간을 함께 표시할 수 있다.

<input tpye="datatime">은 UTC라는 국제적인 표준시를 기준으로 한 날짜와 시간을 표시하고, <input="datetime-local"은 지역의 날짜와 시간을 표시한다.


HTML에서 날짜와 시간을 표기할 때는 유효한 형식을 지켜야 한다.

1) 날짜를 나타내는 날짜 문자열(연도 4자리, 월과 일은 2자리)

2) 영문자 T(대문자)

3) 시간을 나타내는 시간 문자열

4) 영문자 Z(대문자) 또는 시차: Z는 타임 존이 UTC일 때 사용한다.

(시차란: 로컬 시간과 UTC 시간과의 차이를 말하는 것으로, 로컬 시간에서 UTC 시간을 뺀 값을 쓴다. 시간을 분까지 표시한다. 예를 들어, 22:50:00와 18:50:00-04:00는 같은 시간을 나타낸다.)


(3) [type="date", type="month", type="week"]
type="date"로 지정하면 달력에서 날짜를 선택했을 때 필드에 "yyyy-mm-dd" 일까지 입력 할 수 있다.
type="month"로 지정하면 달력에서 날짜를 선택했을 때 "yyyy-mm" 형식으로 월까지만 입력할 수 있다.
type="week"로 지정하면 1월 첫째 주를 기준으로 몇 번째 주인지, 연도와 주가 표시된다. 예를 들어, 24째주라면 "yyyy=W24"로 표시된다.

(4) [type="time"]
시간을 지정할 때는 type="time"을 사용한다. 시간은 00:00부터 23:59까지 입력하거나 스핀 박스의 화살표를 클릭해 선택할 수 있다.

※ 날짜와 시간을 나타내는 유형에서 공통으로 사용할 수 있는 속성
1) min: 날짜와 시간의 최소값을 지정한다.
2) max: 날짜나 시간의 최대값을 지정한다.
3) step: 스핀 박스 화살표를 누를 때마다 날짜나 시간을 얼마만큼씩 커지거나 작아지게 할지 그 값을 지정한다.
4) value: 화면에 표시할 초기값을 지정한다.
<!doctype html>
<html lang="ko">
  <head>
     <title> 웹 폼</title>
     <style>
body {
background-color:#fff; 
}
form fieldset{
margin-bottom:25px; 
}
form legend{
font-size:15px;
font-weight:600; 
}
form label.reg {
font-size:14px;
width:110px;
color:#390;
font-weight:bold;
float:left;
text-align:right;
margin-right:10px;
}
form ul li{
list-style:none; 
margin: 15px 0;
font-size:14px;
}
 

#member, #stuffs {
width:50px; 
}
</style>
  </head>
  <body>
<form>
    <fieldset>
    <legend>
    <label for="today">Today</label>
        <input type="datetime-local">     
    </legend>
    </fieldset>
 <fieldset id="register">
    <legend>수강 과목을 선택하세요</legend>
    <ul>
             <li>
                <label class="reg" for="color">선호색상</label>
                <input type="color" id="color">
            </li>        
       <li>
            <label class="reg" for="spk">신청 과목<small>(회화)</small></label>
                <input type="radio" name="spk" id="spk" value="low" checked>영어 회화(초급)
                <input type="radio" name="spk" id="spk" value="middle">영어 회화(중급)
                <input type="radio" name="spk" id="spk" value="high">영어 회화(고급)
            </li>
       <li>
            <label class="reg" for="cert">신청 과목<small>(자격)</small></label>
                <input type="radio" name="spk" id="cert" value="toeic">TOEIC
                <input type="radio" name="spk" id="cert" value="toefl">TOEFL
                <input type="radio" name="spk" id="cert" value="opic">OPIC
            </li>                    
             <li>
            <label class="reg" for="pre">관심분야</label>
                <input type="text" id="interest" list="engChoices">
                <datalist id="engChoices">
                     <option value="grammar" label="문법"></option>
                    <option value="voca" label="어휘"></option>
                    <option value="speaking" label="회화"></option>
                    <option value="listening" label="리스닝"></option>
                    <option value="news" label="뉴스청취"></option>
                </datalist>                         
            </li>
        </ul>
    </fieldset>
    <fieldset id="timetable">
    <legend>강의 시간을 선택하세요</legend>
    <ul>
            <li>
            <label class="reg" for="startw">개강 주</label>
            <input type="week" id="startw">
            </li>
            <li>
            <label class="reg" for="startt">강의 시간</label>
            <input type="time" id="startt">
            </li>            
        </ul>
    </fieldset>
  </form>
  </body>
</html>

(5) [type="image"]
submit 버튼 대신에 사용할 이미지가 준비되어 있다면 type="image"를 사용해 전송 이미지를 넣을 수 있다.

type=" button"
폼 안에 버튼 형태를 만든다. 이 버튼은 sublmit나 reset 같은 자체 기능을 가지고 있지 않고 오직 버튼만 넣기 때문에 스크립트 함수 등을 연결해서 사용한다. value 속성을 사용하여 버튼에 표시할 내용을 지정한다.
<input type="button" value="우편 번호 검색" onclick="zipSearch()">

2. <input> 태그의 다양한 속성


(1) readonly 속성

readonly 속성은 해당 필드를 일기 전용으로 바꾼다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고, 사용자 입력은 할 수 없게 하는 속성이다.

readonly 속성은 boolean value를 가지기 때문에 true 또는 false 값을 지정해도 되고, 간단히 readonly라고만 쓰거나 readonly="readonly" 또는 readonly="true"로 인식한다.


(2) placeholder 속성
placeholder 속성은 <input> 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것이다. placeholder 속성을 이용하면 텍스트 필드 앞에 레이블을 사용하지 않고
사용자에게 해당 필드에 어떤 내용을 입력해야 할지 알려줄 수 있어 편리하다.
<label>연락처:<input type="text" placeholder="숫자만 입력"></label>

(3) autofocus 속성
autofocus 속성은 페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서가 표시되도록 하는 것이다.
마우스 커서가 표시되면 바로 입력할 수 있어서 아주 편리하다. 이전에는 이렇게 하려면 자바스크립트를 이용해야 했는데, HTML5에서는 autofocus라는 속성으로 쉽게 해결할 수 있다.
<label>아이디:<input type="text" size="10" autofocus></label>

다음 예제는 웹 문서를 로딩하자마자 '이름' 옆의 텍스트 필드에 마우스 커서가 표시된다. 그리고 '학번' 옆의 텍스트 필드에는 '7자리 학번'이라는 placeholder가 표시되어 있다가 해당 텍스트 필드를 클릭하면 placeholder가 사라진다.
<li>
            <label class="reg" for="uid">학번</label>
            <input type="text" id="uid" placeholder="7자리 학번">
</li>


(4) autocomplete 속성
웹 브라우저의 자동 완성 기능은 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력한 경우 이전에 입력했던 내용을 힌트로 보여준다.
자동 완성 기능을 사용하지 않으려면 브라우저의 환경 설정 명령을 이용해 꺼야 했는데, HTML5에서 새롭게 추가한 <input> 요소의 autocomplete 속성을 이용하면 웹 페이지상에서 자동 완선 기능을 제어할 수 있다.
예를 들어, 사용자가 웹 브라우저에서 자동 완성 기능을 끄지 않은 상태인데 아주 중요한 개인 정보를 입력한다거나 인증번호 입력과 같이 한 번만 사용하고 말 정보를 입력한다면 자동 완성 기능을 끄는 것이 좋다.
이럴 경우 autocomplete 속성을 이용해 폼에서 직접 자동 완성 기능을 끌 수 있다.
autocomplete 속성은 세 가지(on, off, defalut) 상태를 가지고 있어서 이 상태 중에서 하나를 골라 사용한다.


(5) required 속성

폼에 내용을 입력한 후 [submit]를 클릭하면 서버로 촘에 전송하는데, 이때 필수 필드에 필요한 내용이 모두 채워졌는지 검사할 수 있다.

<li>

           <label class="reg" for="uname">이름</label>

           <input type="text" id="uname" autofocus required>

</li>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그  (0) 2014.12.21
[HTML5] <a> 태그  (0) 2014.12.21
[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20

[HTML5] <form> 태그_GET과 POST


<form> 태그_GET과 POST


1. 서버, 클라이언트

폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고, 클라이언트는 정보를 제공 받는 쪽을 의미한다. 

웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게 생활코딩 컨텐츠를 요청한다. 

이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고, opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다.


아래 그림은 서버와 클라이언트의 관계를 나타낸 것이다.



2. 폼 (form)

폼이란 사용자의 데이터를 서버에 전송하는 방법이다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용한다.

- 로그인을 위해서 아이디/비밀번호를 입력할 때

- 회원가입을 하기 위해서 개인정보를 입력할 때

- 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때


3. 문법

form의 문법은 아래와 같다. <form> 태그 안쪽에 텍스트를 입력 받는 텍스트 필드나, 원하는 항목을 선택 할 수 있는 라디오 버튼등이 위치한다. 

이러한 요소들을 컨트롤 (control)이라고 부른다. 사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다. 

서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">

    텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그

</form>

- action : 사용자가 입력한 데이터를 전송할 서버의 URL

- method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.

get : action에 입력한 URL에 파라미터의 형태로 전송

post : header의 body에 포함해서 전송


4. GET과 POST의 차이점

(1) GET

- URL에 정보가 담겨서 전송된다.

- 전송할 수 있는 정보의 길이가 제한되어 있다.

- 퍼머링크로 사용될 수 있다.--> 정보를 식별하는 고유한 식별자.(고유한 주소체계)

- URL 상에 파라미터를 표현할 때에는 '?' 앞뒤로 구분하여 앞에 것은 URL 뒤의 것은 파라미터이다.

- 각각의 파라미터는 '&'로 구분하여 nickname과 job이라는 두개의 파라미터가 온 것을 알 수 있다.

- '='을 이용하여 파라미터와 파라미터의 값을 구분한다.


(2) POST

- header의 body에 담겨서 전송된다.

- URL 상에 전달한 정보가 표시되지 않는다.

- GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)

- 전송할 수 있는 데이터의 길이 제한이 없다.

- 퍼머링크로 사용할 수 없다.

- 서버 쪽에 어떤 작업을 명령할 때 사용한다.

  (데이터의 기록, 삭제, 수정 등)


개발자 도구의 'network' 탭은 클라이언트와 서버간의 데이터 전달 과정을 열람할 수 있다.




5. 예제

example1.html - 사용자가 입력한 정보를 서버로 전송하는 예제 

페이지 내부에는 여러개의 form이 올 수 있고 각 form은 독립적으로 데이터를 전송할 수 있다.

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <fieldset>

            <legend>

                GET

            </legend>

            <form action="./example2.php" method="GET">

                <p>

                    닉네임 :

                    <input type="text" name="nickname" />// 문자 정보 입력

       // <input type="button" name="nickname" />// 버튼 형식으로 입력

                    <br />

                </p>

                <p>

                    직업 :

                    <select name="job">

                        <option value="designer">디자이너</option>

                        <option value="programmer">프로그래머</option>

                        <option value="planner">기획자</option>

                    </select>

                </p>

                <input type="submit" value="전송"/>// submit: 사용자가 클릭 form 내부(<form></form>)의 지금까지 입력한 정보를 action 속성의 URL로 전송

            </form>

        </fieldset>

        <fieldset>

            <legend>

                POST

            </legend>

            <form action="./example2.php" method="POST">//'./':URL 전체 주소의 현재 폴더까지(상대경로)/example2.php

                <p>

                    닉네임 :

                    <input type="text" name="nickname" />

                    <br />

                </p>

                <p>

                    직업 :

                    <select name="job">

                        <option value="designer">디자이너</option>

                        <option value="programmer">프로그래머</option>

                        <option value="planner">기획자</option>

                    </select>

                </p>

                <input type="submit" value="전송"/>

            </form>

        </fieldset>

    </body>

</html>


example2.php - 사용자가 전송한 데이터를 받아서 화면에 표시해주는 예제 

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        </head>

        <body>

                <?php

                echo $_REQUEST['nickname'].'님의 직업은 '.$_REQUEST['job'].'이군요!';

                ?>

        </body>

</html>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <a> 태그  (0) 2014.12.21
[HTML5] <input> 태그  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] <form> 태그 1  (0) 2014.12.20
[HTML5] 아이프레임과 프레임  (0) 2014.12.20

[HTML5] <form> 태그 2


<form> 태그 2


1. 폼 요소 그룹으로 묶기

(1) <fieldset>, <legend> 태그


<fieldset>, <legend> 태그는 폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그이다. 예를 들어 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 배송 정보'를 따로 나우어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있다.

이렇게 하나의 폼 안에서 여러 구현을 나눠 표시하려고 할 때 <fieldset> 태그를 이용하면 <fieldset> 과 </fielset> 태그 사이의 폼들을 하나의 영역으로 묶고

외곽선을 그려준다.


(2) <fieldset> 태그의 속성

1) disabled: 이 속성을 사용하면 <fieldset> 태그의 자식 요소들을 사용할 수 없게 만든다. 즉, 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없다.

2) form: 현재 <fieldset> 태그가 속해 있는 form의 이름을 표시할 수 있다.

3) name: 이 속성을 이용해 서버로 넘겨줄 이름을 지정할 수 있다.


<fieldset> 태그로 나누어진 구역에 제목을 붙이고 싶다면 <legend> 태그를 사용한다. <legend> 태그는 <fieldset> 태그 다음에 오며, 필수 옵션은 아니므로 생략할 수 있다.

<!doctype html>

<html>

  <head>

  <meta charset="utf-8">

  <title>폼 만들기</title>

     <style>

       ul {

        list-style-type:none;

       }

       fieldset {

        margin : 5px 2px;

        width: 350px;

       }

     </style>

  </head>

  <body>

    <h1> 회원 가입 양식</h1>

<form>    

    <fieldset>

      <legend> 로그인 정보 </legend>

      <ul>

        <li>아이디 : <input type="text" id="user_id"></li>

        <li>비밀번호 : <input type="password" id="pw"></li>

      </ul>

    </fieldset>

    <fieldset>

      <legend> 가입자 정보</legend>

      <ul>

        <li>이름 : <input type="text" id="user_name"></li>

        <li>메일 주소 : <input type="text" id="user_mail"></li>

        <li>생년월일 : <input type="text" id="birth"></li>

      </ul>  

    </fieldset>

    <fieldset>

      <input type="submit" value="가입하기"></input>  

    </fieldset>

</form>

  </body>

</html>

2. 폼 요소 캡션 붙이기


(1) <label> 태그

<label> 태그는 폼 요소에 캡션을 붙이기 위한 것으로, 폼 요소와 캡션으로 사용하는 텍스트가 짝을 이루고 있으므로 폼 요소의 위치가 바뀌더라도 캡션이 항상 따라다니게 된다.

cf.) 기존 input 태그

아이디(6자이상)<input type="text" id="id">


cf.) <label> 태그 사용하면 장점

체크 박스나 라디오 버튼에서 텍스트(영어 회화)를 클릭해도 체크가 된다.


※ <label> 태그를 사용하는 방법

1) <label> 태그 안에 폼 요소를 넣는다.

<label>아이디(6자이상)<input type="text" id="id></label>

폼 요소의 앞뒤에 <label> 태그와 </label> 태그를 붙여도 결과 화면은 달라지지 않지만, 브라우저에서 폼 요소를 인식할 때 '아이디(6자이상)'이라는 캡션과 텍스트 입력 창을 한 묶음으로 인식하게 된다.

<form>

      <fieldset>

      <legend>로그인 정보</legend> 

        <ul>

            <li>

              <label>아이디(6자 이상)<input type="text" id="id"></label>

            </li>

            <li>

             <label>비밀번호<input type="password" id="pw1"></label>

            </li>

        <li>

        <label>비밀번호(확인)<input type="password" id="pw2"></label>

            </li>  

        </ul>

      </fieldset>

      <fieldset>

      <legend>개인 정보</legend>

        <ul>

<li><label>이름 <input type="text" id="name"></label></li>

<li><label>이메일 주소 <input type="email" id="email"></label></li>

<li>...</li>

       </ul>

      </fieldset>

</form>


2) <label> 요소와 폼 요소를 따로 쓰고 for 속성과 id 속성을 이용해 연결한다.

<label [속성="속성 값"] for="이름"> 캡션 </label>

<input ....id="이름">


<form>

      <fieldset>

        <legend>로그인 정보</legend> 

        <ul>

<li><label for="id">아이디(6자 이상)</label>

             <input type="text" id="id"></li>

        <li><label for="pw1">비밀번호</label>

             <input type="password" id="pw1"></li>

        <li><label for="pw2">비밀번호(확인)</label>

             <input type="password" id="pw2"></li>  

        </ul>

      </fieldset>

      <fieldset>

        <legend>개인 정보</legend>

        <ul>

<li><label for="name">이름</label>      

    <input type="text" id="name"></li>

<li><label for="email">이메일 주소</label>

    <input type="email" id="email"></li>

<li>...</li>

       </ul>

      </fieldset>

</form>

<label> 태그에서 for 속성을 사용해 어떤 폼 요소에 연결할지를 결정하게 된다. 







'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <input> 태그  (0) 2014.12.21
[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 1  (0) 2014.12.20
[HTML5] 아이프레임과 프레임  (0) 2014.12.20
[HTML5] <meta> 태그  (0) 2014.12.20

[HTML5] <form> 태그 1


<form> 태그 1


1. 텍스트 입력


(1) 텍스트 필드

사용자로부터 텍스트 입력 받는다. 한줄 정도의 단문에 적당하고 긴 줄의 텍스트는 <textarea> 를 이용한다. 


1) 문법

<input type="text" name="값의 이름" value="값" disabled="disabled" readonly="readonly" />


- type : text를 사용해야 텍스트 필드가 된다. 

- name : 입력한 데이터의 이름

- value : 데이터의 값. 입력한 데이터의 기본 값으로 이 값이 기본적으로 텍스트 필드에 표시된다. 

- disabled : 값으로 disabled을 지정하면 텍스트 필드가 불능 상태가 된다. 서버로 전송해도 이 속성이 설정된 컨트롤의 데이터는 서버로 전송되지 않는다. 

- readonly : 값으로 readonly를 지정하면 텍스트 필드에 값이 입력되지 않는다. 서버로는 데이터가 전송된다. 


2) 예제

example1.html

<!DOCTYPE html>

<html>

    <head>

        <title>생활코딩</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <form action="url" method="GET">

            닉네임 :

            <input type="text" name="nickname" />

            <br />

            <input type="submit" />

        </form>

    </body>

</html>


(2) 비밀번호

보안이 중시되는 데이터의 입력을 받는다.  


1) 예제 

example2.html

<!DOCTYPE html>

<html>

    <head>

        <title>생활코딩</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <form action="url" method="GET">

            비밀번호 :

            <input type="password" name="password" />

            <br />

            <input type="submit" />

        </form>

    </body>

</html>


(3) hidden data

화면상에 표시되지 않는 컨트롤을 생성한다. 서버로 전달할 데이터이지만 사용자에게는 노출될 필요가 없는 데이터인 경우 사용한다. 

사용자가 지정하지 않은 정보의 데이터를 전송하기 위함.


1)  예제

example3.html

<html>

    <head>

        <title>생활코딩</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <form action="url" method="GET">

            이름 :

            <input type="text" name="name" />

            <input type="hidden" name="language" />

            <br />

            <input type="submit" />

        </form>

    </body>

</html>


(4) textarea

여러줄의 텍스트 입력 할 때 사용한다. (text: 한 줄)


1) 문법

<textarea name="값의 이름" rows="행의 수" cols="열의 수" disabled="disabled" readonly="readonly">값</textarea>


rows : 입력한 행위 수 만큼 높이가 정해진다. ex.) 10행

cols : 입력한 열의 수 만큼 폭이 정해진다. ex.) 한 줄에 10글자


2) 예제

example4.html 

<!DOCTYPE html>

<html>

    <head>

        <title>생활코딩</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <form action="url" method="GET">

            내용 : <br />

            <textarea rows="5" cols="20"></textarea> <br />

            <input type="submit" />

        </form>​

    </body>

</html>


2. 선택

(1)  라디오 버튼 

여러개의 항목 중에서 하나만을 선택 할 수 있도록 제한하는 컨트롤


1) 문법

<input type="radio" name="값의 이름" value="값" checked="checked">


- name이라는 속성의 값은 같은 값을 사용하고 있어야 한다.

- value라는 속성의 값은 다른 값을 사용하고 있어야 한다.


2) 예제

example1.html

<!DOCTYPE html>

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        </head>

        <body>

                <form action="example_receive_single.php" method="POST">

                    관심사 : <br />

                    <input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />

                    <input type="radio" name="interest" value="design" /> 디자인<br />

                    <input type="radio" name="interest" value="planning" /> 기획<br />

                    <input type="submit" />

                </form>

        </body>

</html>


example_receive_single.php - 사용자가 전송한 데이터를 서버 쪽에서 처리한다. 

<html>

        <body>

                당신의 관심사는? <?=$_POST['interest']?>

        </body>

</html>


(2) 콤보박스

여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤로 흔히 콤보박스라고 부른다. --> 공간의 효율성 높인다.


1) 문법

<select name="값의 이름" multiple="multiple">

   <option value="선택될 경우 name의 값이 됨" selected="selected">값에 대한 표시값</option>

   ...option 반복

</select>


- multiple : 이 속성의 값을 mulitple로 지정하면 여러개의 항목을 선택할 수 있는 컨트롤이 된다. --> 복수 선택 방법(ctrl+항목지정)


2) 예제

example2.html 

<!DOCTYPE html>

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        </head>

        <body>

                <form action="example_receive_single.php" method="POST">

                        관심사 : <br />

                        <select name="interest">

                                <option value="programming">프로그래밍</option>

                                <option value="design" selected="selected">디자인</option>

                                <option value="planning">기획</option>

                        </select>

                        <input type="submit" />

                </form>

        </body>

</html>


(3) 체크 박스

여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤로 체크박스라고 부른다.


1) 문법

<input type="checkbox" name="값의 이름" value="값" />


- checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정한다. 

- name의 이름 끝에 '[]'를 붙이면 서버 쪽에서 실행되는 언어가 이 값을 배열로 인지한다. 


2) 예제

example3.html

<!DOCTYPE html>

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        </head>

        <body>

                <form action="example_receive_multi.php" method="POST">

                    관심사 : <br />

                    <input type="checkbox" name="interest[]" value="programming" /> 프로그래밍<br />

                    <input type="checkbox" name="interest[]" value="design" /> 디자인<br />

                    <input type="checkbox" name="interest[]" value="planning" checked="checked" /> 기획<br />

                    <input type="submit" />

                </form>

        </body>

</html>​


example_receive_multi.php 

<html>

    <body>

        당신의 관심사는? <br />

        <ul>

            <?php

            foreach($_POST['interest'] as $entry){

                echo "<li>$entry</li>";

            }

            ?>

        </ul>

    </body>

</html>



'WebFont-end > HTML5' 카테고리의 다른 글

[HTML5] <form> 태그_GET과 POST  (0) 2014.12.21
[HTML5] <form> 태그 2  (0) 2014.12.20
[HTML5] 아이프레임과 프레임  (0) 2014.12.20
[HTML5] <meta> 태그  (0) 2014.12.20
[HTML5] 이스케이핑  (0) 2014.12.20