'Programming'에 해당되는 글 20건

  1. 2017.07.18 JavaScript Basic #5
  2. 2017.07.18 JavaScript Basic #4
  3. 2017.07.16 JavaScript Basic #3
  4. 2017.07.15 JavaScript Basic #2
  5. 2017.07.13 JavaScript Basic #1
  6. 2017.07.12 CSS #2
  7. 2017.07.12 CSS #1
  8. 2017.07.10 HTML Basic #3
  9. 2017.07.08 HTML Basic #2
  10. 2017.07.05 HTML Basic
Programming/Web Programming2017. 7. 18. 16:12

JavaScript Basic #5

JavaScript #5 – 함수 지향 (Function-Oriented)

 

클로저 (Closure)

내부 함수가 외부 함수의 Context에 접근할 수 있는 것을 가리킴.

JavaScript는 함수 안에서 또 다시 함수를 선언할 수 있음. 외부함수 안에 선언된 함수를 내부함수라고 할 때, 외부함수의 지역변수에 내부함수는 접근할 수 있음.


이러한 관계에서 외부함수가 실행이 끝나서 소멸된 이후에도 내부함수가 소멸된 외부함수의 변수에 접근할 수 있는 메커니즘을 ‘클로저’라고 함.

 

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

inner = outter();

inner();



위 코드를 살펴보면 inner에는 outter의 결과가 대입되는데, 그 결과가 이름 없는 함수임. inner(); 명령을 실행할 때는 이미 outter 함수의 실행은 끝났기 때문에 outter 함수의 지역변수인 title은 소멸되어야 하지만, 실행 결과는 title의 문자열인 ‘coding everybody’가 그대로 나온다. 이는 title이 소멸되지 않았음을 의미함.

이를 통해 의부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸되기 전까지 소멸하지 않는 것을 알 수 있음. 이런 특성이 바로 ‘클로저’.

더 복잡한 예시:

 

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

 

alert(ghost.get_title());

alert(matrix.get_title());

 

ghost.set_title('공각기동대');

 

alert(ghost.get_title());

alert(matrix.get_title());

 





Ghost 변수와 matrix 변수는 각각 factory_movie 함수의 리턴값으로 객체를 받고 있음. 둘 다 title이라는 factory_movie의 지역변수를 사용하지만 alert 결과에서 볼 수 있듯이 각각 다른 결과를 보여주고 있음. 이를 통해 외부 함수가 실행될 때마다 새로운 지역변수를 포함시키는 클로저가 생성되어, ghost와 matrix에 있는 title은 완전히 독립된 개체가 되었음을 알 수 있음.

JavaScript는 Private 속성을 지원하지 않음. 하지만 위의 factory_movie 함수의 지역변수 title은 함수 안에서 정의된 메소드에 의해서 만들어진 객체만이 값을 읽고 수정하는게 가능하다는 클로저의 특성을 이용해 Private 속성을 구현할 수 있음.

 

다음 예시를 보자.


var arr = []

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

    arr[i] = function(){

        return i;

    }

}

for(var index in arr) {

    document.write(arr[index]()+'<br/>');

}



0, 1, 2, 3, 4가 출력될 것이라고 예상하기 쉬움. 하지만 for문은 함수가 아님. 그렇기 때문에 for문에 있는 i값에 함수 function이 접근할 수 없기 때문에, for문이 모두 돌고 난 뒤 5가 된 i값이 한번에 적용된 것. 원래 의도대로 출력되게 하려면 다음과 같이 바꿔야함.


var arr = []

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

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    document.write(arr[index]()+’<br/>’);

}



 

Arguments

함수에는 arguments라는 숨겨진 유사 배열이 있음. 함수를 호출할 때 입력한 인자가 담겨 있음.


function sum(){

    var i, _sum = 0;   

    for(i = 0; i < arguments.length; i++){

        document.write(i+' : '+arguments[i]+'<br />');

        _sum += arguments[i];

    }  

    return _sum;

}

alert('result : ' + sum(1,2,3,4));



Arguments는 함수 안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 arguments 객체의 인스턴스임. 배열과 비슷하지만 배열은 아님. arguments[0]은 함수에 전달된 첫 번째 인자를 알아낼 수 있음.

매개변수와 관련해 두 가지 수가 있음. 하나는 함수.length, 다른 하나는 arguments.length임. 함수.length는 함수에 정의된 인자의 수를, arguments.length는 함수에 전달된 실제 인자의 수를 의미함.

 

function zero(){

    document.write(

        'zero.length : ', zero.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

function one(arg1){

    document.write(

        'one.length : ', one.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

function two(arg1, arg2){

    document.write(

        'two.length : ', two.length+'<br/>',

        'arguments : ', arguments.length+'<br/>'

    );

}

zero();

one('val1', 'val2');

two('val1');



 

함수 호출


function func(){

}

func();


JavaScript는 함수를 호출하는 특별한 방법을 제공함. JavaScript에서 함수는 객체임. 위 예시 코드에서 함수 func는 Function이라는 객체의 인스턴스임. 따라서, func는 Function이 가지고 있는 메소드들을 상속하고 있음. 그 중 Function.apply와 Function.call을 활용해봄.

 

function sum(arg1, arg2){

    return arg1+arg2;

}

alert(sum.apply(null, [1,2]))



---


o1 = {val1:1, val2:2, val3:3};

o2 = {v1:10, v2:50, v3:100, v4:25};

function sum(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

document.write(sum.apply(o1));

document.write('<br/>');

document.write(sum.apply(o2));



Sum 함수는 내부에서 객체의 속성을 열거할 때 사용하는 for in 문을 이용해서 객체 자신의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 더한 후 리턴하고 있음.

메소드 apply의 첫 번째 인자는 함수가 실행될 맥락임. 객체의 메소드로 sum을 만들고 호출한 뒤에 만들었던 sum 역할을 하는 메소드를 삭제한다고 생각하면 됨. sum이 객체 소속의 메소드가 된다는 것은 ‘sum에서 this의 값이 전역객체가 아니라 객체가 된다’는 뜻임. 일반적으로 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물임. 하지만 JavaScript에서는 함수는 독립된 개체로 존재하고, apply나 call 메소드를 통해 다른 객체의 소유물인 것처럼 실행할 수 있음.

만약 apply의 첫 인자로 null을 전달하면 apply가 실행된 함수 인스턴스는 전역객체를 context로 실행하게 됨. 브라우저의 경우는 함수가 실행된 window가 될 것임.

 

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #7  (0) 2017.07.22
JavaScript Basic #6  (0) 2017.07.21
JavaScript Basic #4  (0) 2017.07.18
JavaScript Basic #3  (0) 2017.07.16
JavaScript Basic #2  (0) 2017.07.15
Posted by BinZIP
Programming/Web Programming2017. 7. 18. 02:34

JavaScript Basic #4

JavaScript #4 – 함수 지향 (Function-Oriented)


유효범위

유효 범위란 변수의 수명을 의미. 함수 밖에서 선언한 변수는 전역 변수(global variable)이 되고,안에서 선언하면 지역변수(local variable)이 됨.


var vscope = 'global';

function fscope(){

    var vscope = 'local';

    alert('함수안 '+vscope);

}

fscope();

alert('함수밖 '+vscope);




함수 안에서 vscope를 새로 정의하면 전역 변수 vscope는 제쳐두고 함수 안에서의 vscope를 새로 생성함. 이러한 사실은 다음 코드를 실행해보면 알 수 있음.


var vscope = 'global';

function fscope(){

    vscope = 'local';

    alert('함수안'+vscope);

}

fscope();

alert('함수밖'+vscope);




함수 안에서 vscope의 값을 ‘local’로 바꾸어 주었기 때문에 밖에서 전역변수 vscope를 호출해도 ‘local’이 출력됨.


‘변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 한다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 있을 때 사용하도록 하자.’


불가피하게 전역 변수를 사용해야 할 때는 하나의 객체를 전역변수로 만들고 객체의 속성을 변수로 관리하는 방법 사용.


MYAPP = {}

MYAPP.calculator = {

    'left' : null,

    'right' : null

}

MYAPP.coordinate = {

    'left' : null,

    'right' : null

}

 

MYAPP.calculator.left = 10;

MYAPP.calculator.right = 20;

function sum(){

    return MYAPP.calculator.left + MYAPP.calculator.right;

}

 

전역변수를 사용하고 싶지 않다면 익명 함수를 호출하는 것으로 대체할 수 있음.


(function(){

    var MYAPP = {}

    MYAPP.calculator = {

        'left' : null,

        'right' : null

    }

    MYAPP.coordinate = {

        'left' : null,

        'right' : null

    }

    MYAPP.calculator.left = 10;

    MYAPP.calculator.right = 20;

    function sum(){

        return MYAPP.calculator.left + MYAPP.calculator.right;

    }

    document.write(sum());

}())

 

JavaScript는 블록범위(중괄호 기준으로)를 기준으로 유효범위를 제공하는데 반해 함수에 대한 유효범위만 제공. 즉, 지역변수는 함수에서만 유효.

JavaScript는 함수가 선언된 시점에서의 유효범위를 가짐.

ð  이러한 유효범위 방식을 정적 유효범위(Static Scoping), 혹은 렉시컬(Lexical Scoping)이라고 함.


var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    document.write(i);

}

a();



 

값으로서의 함수

JavaScript에서는 함수도 객체, 즉 일종의 값임. 그러므로 객체의 값으로 포함될수도, 다른 함수의 인자로 전달될수도 있음.


function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

alert(cal(increase, 1));

alert(cal(decrease, 1));




함수는 함수의 리턴 값으로도 사용 가능하고, 객체로써 포함될 수 있으므로 당연히 배열의 값으로도 사용할 수 있음.


function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

alert(cal('plus')(2,1));

alert(cal('minus')(2,1));





var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);



 

함수가 값으로 사용될 수 있다는 특성을 사용해 함수의 인자로 전달할 수도 있음. 이는 ‘콜백’의 특성.

 

콜백: 다른 코드의 인수로서 넘겨주는 실행 가능한 코드. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있음.

일반적으로 콜백 수신 코드로 콜백 코드(함수)를 전달할 때는 콜백 함수의 포인터 (핸들), 서브루틴 또는 람다함수의 형태로 넘겨준다. 콜백수신 코드는 실행하는 동안에 넘겨받은 콜백 코드를 필요에 따라 호출하고 다른 작업을 실행하는 경우도 있다. 다른 방식으로는 콜백수신 코드는 넘겨받은 콜백 함수를 '핸들러'로서 등록하고, 콜백수신 함수의 동작 중 어떠한 반응의 일부로서 나중에 호출할 때 사용할 수도 있다 (비동기 콜백).

 

값으로 전달된 함수(Callee)는 호출될 수 있다는 점을 이용해 Caller 함수의 동작을 완전히 바꿀 수 있음.



function sortNumber(a,b){

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber));




원래 sort는 숫자를 순서대로 정렬하지만 sortNumber 함수를 인자로 넘겨줌으로써 역순으로 정렬하게 되었다.

시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면, 해당 작업이 끝났을 때 미리 등록한 작업이 실행되도록 비동기 처리를 할 수 있다.


생활코딩의 비동기 처리 강의에서는 이런 예시를 들었다. 글을 작성하면 구독자에게 이메일을 보낸 후 작성완료 문구를 띄우는 홈페이지를 사용한다고 가정한다. 여기서 글을 작성하고 구독자에게 이메일을 보내는 작업을 끝낸 후 작성 완료 문구를 띄우는 것은 일을 순차적으로 처리하는 ‘동기 처리’이다. 그런데 여기서 글을 작성하고 구독자들에게 이메일을 보내는 작업을 ‘예약’시키기만 하고 바로 작성 완료 문구를 띄운다. 그리고 클라이언트 쪽에서는 보이지 않게 백그라운드에서 이메일 발송 예약이 있는지 지속적으로 확인해 발송하는 작업을 하는 프로그램을 통해 이메일을 전송하는 작업을 계속 한다면, 이것은 ‘비동기 처리’이다.

 


 

 

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #6  (0) 2017.07.21
JavaScript Basic #5  (0) 2017.07.18
JavaScript Basic #3  (0) 2017.07.16
JavaScript Basic #2  (0) 2017.07.15
JavaScript Basic #1  (0) 2017.07.13
Posted by BinZIP
Programming/Web Programming2017. 7. 16. 02:33

JavaScript Basic #3

JavaScript#3


UI & API


API: Application Programming Interface, 프로그램에서 사용할 수 있도록 OS나 프로그래밍 언어가 제공하는 기능을 제어하기 위해 만든 조작 장치.

UI: User Interface, 유저가 직접 프로그램을 사용할 때 제공되는 인터페이스.

Java Script의 API는 크게 JavaScript 자체 API와 JavaScript가 동작하는 호스트 환경의 API로 구분

 

정규표현식


Regular Expression. 문자열에서 특정한 문자를 찾아내는 도구.

정규표현식은 두 가지 단계로 이루어짐. 하나는 컴파일, 다른 하나는 실행.


1.    컴파일 (Compile)


-       검출하고자 하는 패턴을 만드는 일.

-       먼저 정규표현식 객체를 만들어야 함. 객체를 만드는 방법은 두 가지가 있음.

1.      정규표현식 리터럴:


var pattern = /a/


2.      정규표현식 객체 생성자:


var pattern = new RegExp(‘a’);

위 코드는 정규표현식 리터럴에 예시로 적은 코드와 같은 역할을 함.

 

2.    실행 (Execution)


정규표현식 메소드 실행

-       RegExp.exec(‘인자’): 입력한 패턴(RegExp의 괄호 안에 넣은 문자열)이 제공받은 인자 안에 있으면 패턴을 반환


alert(pattern.exec(‘asdf1234’));

alert(pattern.exec(‘qwerzxcv’));




인자에서 a를 찾으면 a라는 문자열을 반환하고, 그렇지 않으면 null을 반환하는 것을 볼 수 있음.

 

-       RegExp.test(‘인자’): 인자 안에 패턴에 해당되는 문자열이 있으면 True, 아니면 False를 반환


alert(pattern.test(‘asdf1234’));

alert(pattern.test(‘qwerzxcv’));




‘a’ 패턴이 있는 문자열에서는 true를, 없는 문자열에서는 ‘false’를 반환하는 것을 확인할 수 있음.

 

문자열 메소드 실행

-       String.match(RegExp): RegExp.exec(‘인자’)와 비슷함.


alert(‘asdf1234’.match(pattern));

alert(‘qwerzxcv’.match(pattern));




패턴에 해당하는 문자가 String에 있으면 패턴의 문자열을 리턴, 그렇지 않으면 null을 리턴하는 것을 확인할 수 있음.

-       String.replace(RegExp, ‘변경할 문자열’): String에서 패턴을 검색해 패턴에 해당하는 부분을 변경할 문자열로 바꾸고 변경된 값을 리턴


alert(‘asdf1234’.replace(pattern,’q’));

alert(‘qwerzxcv’.replace(pattern,’q’));




String에 a가 q로 바뀌어 출력되는 것을 볼 수 있음.

옵션

-       i: i를 붙이면 대/소문자를 구분하지 않음.


alert('ASDF1234'.match(noCheckC));




-       g: 검색된 모든 결과 리턴


var Check = /a/;

var CheckAll = /a/g;

alert('asdfasdfasdf'.match(Check));

alert('asdfasdfasdf'.match(CheckAll));




-       캡처: 괄호 안의 패턴은 마치 변수처럼 재사용 할 수 있음.


var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

alert(result);


공백(\s)을 기준으로 문자열이 2개의 그룹으로 나뉘었다고 생각하면 됨. 즉, ‘coding’이라는 문자열이 $1, ‘everybody’라는 문자열이 $2인 것임.


-       치환


var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '빈집 채우는 중 : http://binzip2.tistory.com 입니다.';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});

alert(result);



Html 하이퍼링크 태그로 치환시킨 것을 볼 수 있음.

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #5  (0) 2017.07.18
JavaScript Basic #4  (0) 2017.07.18
JavaScript Basic #2  (0) 2017.07.15
JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
Posted by BinZIP
Programming/Web Programming2017. 7. 15. 04:58

JavaScript Basic #2

JavaScript #2


연산자


대입 연산자

- =: 우항의 값을 좌항의 변수에 대입

비교 연산자

1.     ==: 동등 연산자. 좌항과 우항을 비교해 값이 서로 같으면 True, 다르면 False

2.     ===: 일치 연산자. 좌항과 우항이 모든 부분에서 ‘정확하게 같으면’ True, 아니면 False

예를 들어, alert(1==’1’)은 True라고 출력되지만 alert(1===’1’)은 False가 출력. 같은 수를 표현하고 있지만 데이터 형이 다르기 때문에 일치 연산자에서는 False를 반환.

일반적으로 동등 연산자(==) 보다 일치 연산자(===)을 사용할 것을 권함. 다음 예시를 보자.


참고로 null은 값이 없음을 명시적으로 표시한 것이고, undefined는 값이 없는 상태이다.

3.     !=: 동등 연산자와 반대 결과를 출력한다.

4.     !==: 일치 연산자와 반대 결과를 출력한다.

5.     >: 좌항이 우항보다 크면 참, 그렇지 않다면 거짓이다. ‘<’는 >의 반대이다.

6.     >=: 좌항이 우항보다 크거나 같으면 참, 그렇지 않다면 거짓이다. 마찬가지로 ‘<=’는 반대이다.

7.     &&: 좌항과 우항이 모두 참일 때 참이 된다. (AND)

8.     ||: 좌항과 우항 중 하나가 참일 때 참이 된다. (OR)

9.     !: ‘!’는 부정을 의미한다. 즉, True 혹은 False를 역전시키는 연산자이다. (NOT)

 

조건문

1.     If: if 뒤의 괄호에 조건이 오고, True라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행됨

2.     Else: if 문 안에 담긴 조건문의 값이 False일 때 중괄호 안의 코드가 실행된다.

3.     Else if: 이전 if문의 판별식의 결과가 False일 때 다시 한 번 조건을 걸어 참과 거짓을 판결해 참일 때 중괄호 안의 코드를 실행한다.

조건문이 참과 거짓을 판별할 때 판별식의 결과가 ‘0’이면 거짓, ‘0’이 아닌 거의 모든 값을 참으로 인식한다. 0 이외에 False로 간주되는 것들에는 ’’(빈 문자열, undefined, 값이 할당되지 않은 변수, null, NaN이 있다.

 

반복문


1.     While: 조건문을 만족시키는 동안 중괄호 안의 코드를 계속 반복한다.

2.     For: 기본 구조는 for(초기문;조건문;증감식){ 코드 } 이다. 초기문은 for문에 최초에 진입할 때 한 번만 실행된다. 이후 조건문을 판별하고 참이면 코드를 모두 실행하고, 증감문 실행 후 다시 판별, 참이면 다시 코드를 실행하며 거짓이면 for문을 탈출한다.

3.     Break: 반복문을 탈출하는 역할을 한다.

4.     Continue: 반복문의 처음으로 이동한다. 반복문 안의 코드를 즉시 중단하고 반복은 지속되게 할 때 사용한다. for문의 경우는 증감식으로, while문의 경우 판별식으로 이동한다.

 

함수


function add( var a, var b ){

           alert(a);

           alert(b);

           return a+b;

}

함수를 정의할 때 function 뒤에 함수 이름(add)를, 소괄호 안에는 전달하는 인자를 써 넣는다. 각각의 인자는 콤마(,)로 구분짓는다. 함수가 호출되면 중괄호 안의 코드(alert(a); alert(b);)를 실행하고 반환값(a+b)를 return 한다.

 

배열


여러 개의 데이터를 하나의 변수에 담음. 기본 구조는 다음과 같음.


var 배열명 = [‘첫 번째 요소’, ‘두 번째 요소’, …]

첫 번째 요소는 0 번째 인덱스이다. n번째 인덱스에 있는 요소는 n+1번째 요소인 셈. member라는 배열의 n번째 요소를 alert하는 명령은 alert(member[n-1]); 임. n-1을 감싸는 것은 대괄호임에 주의.


배열 요소 추가/제거/정렬

1.     Push: 배열의 맨 끝에 원소를 추가

2.     Concat: 배열의 맨 끝에 여러 개의 원소를 추가

3.     Unshift: 배열의 시작점에 원소를 추가

4.     Splice: 배열의 첫 번째 인자에 해당하는 원소부터 두 번째 인자에 해당하는 원소의 숫자만큼 값을 배열로부터 제거한 후 리턴, 세 번째 인자부터 전달된 인자들을 첫 번째 인자의 원소 뒤에 추가.


5.     Shift: 배열의 첫 번째 원소를 제거

6.     Pop: 배열의 마지막 원소를 제거

7.     Sort: 배열을 정렬

8.     Reverse: 배열을 역순으로 정렬

 

객체


var level = {‘BinZIP’:1, ‘Newbie’:1, ‘ZzangHacker’:999};

위와 같이 객체를 선언할 수 있다. BinZIP은 key가 되고, 1은 value에 해당함. 아래와 같이 객체를 만들 수도 있음.


var level = new Object();

level[‘BinZIP’] = 1;

level[‘Newbie’] = 1;

level[‘ZzangHacker’] = 999;

for문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수에 담아서 반복문을 실행. 반복문이 실행될 때 변수 값에 key 값이 순차적으로 할당됨.

객체에는 객체를 담을 수도, 함수를 담을 수도 있음. 아래 코드를 참고.


var grade = {

           'list': {'BinZIP':1,'Newbie':1,'ZzangHacker':999},

           'show': function(){

                     for(var name in this.list){

                                alert(name+':'+this.list[name]);

                     }

           }

};

grade.show();

실행 결과는 다음과 같음.





 

모듈


객체지향형 프로그래밍이 등장하게 된 배경은 코드의 재활용성을 높이고 유지보수를 쉽게 하기 위해서라고 할 수 있음. 이런 목적을 위해 다양한 기법들이 사용되는데, 그 중 하나가 코드를 여러 개의 파일로 구분하는 것임. 이를 통해서 얻을 수 있는 효과는 다음과 같음.

ð  자주 사용되는 코드를 별도의 파일로 만들어 필요할 때마다 재활용 가능

ð  코드를 개선하면 이를 사용하는 모든 애플리케이션의 동작에 적용

ð  코드 수정 시에 필요한 로직 빠르게 찾을 수 있음

ð  필요한 것만 로드해 메모리 낭비를 줄임

ð  한 번 다운로드 된 모듈은 웹 브라우저에 의해 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽 절약 가능. 이는 웹 브라우저에만 해당되는 장점.

모듈은 라이브러리, C언어 및 다른 여러 언어의 헤더 파일과 비슷한 개념으로 생각할 수 있음. 라이브러리는 잘 정렬된 코드의 집합이라고 생각하면 됨

모듈을 로드하기 위해서는 <head> 범위 안에 다음과 같이 작성해줌.


<script scr=”모듈의 주소”></script>

 

node.js에서 모듈 로드

모듈을 로드하는 방법은 호스트의 환경에 따라서 달라짐. 아래 그림 참고(출처: 생활코딩 JavaScript 기본 – 객체 – node.js에서의 모듈의 로드)


 

라이브러리 사용

모듈과 라이브러리를 사용해야 하는 이유를 단적으로 보여주는 예시이다.


<!DOCTYPE html>

<html>

<head>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

<body>

    <ul id="list">

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

    </ul>

    <input id="execute_btn" type="button" value="execute" />

    <script type="text/javascript">

     $('#execute_btn').click(function(){

        $('#list li').text('coding everybody');

     })

    </script>

</body>

</html>

위 코드는 유명 라이브러리인 jQuery를 사용해 버튼을 클릭했을 때 ‘Coding Everybody’ 화면의 empty가 있는 자리에 출력하는 예시이다. 동일한 코드를 jQuery 라이브러리를 사용하지 않고 구현한 코드는 다음과 같다.


<!DOCTYPE html>

<html>

<body>

    <ul id="list">

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

        <li>empty</li>

    </ul>

    <input id="execute_btn" type="button" value="execute" />

    <script type="text/javascript">

    function addEvent(target, eventType,eventHandler, useCapture) {

        if (target.addEventListener) { // W3C DOM

            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);

        } else if (target.attachEvent) {  // IE DOM

            var r = target.attachEvent("on"+eventType, eventHandler);

        }

    }

    function clickHandler(event) {

        var nav = document.getElementById('list');

        for(var i = 0; i < nav.childNodes.length; i++) {

            var child = nav.childNodes[i];

            if(child.nodeType==3)

                continue;

            child.innerText = 'Coding everybody';

        }

    }

    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);

    </script>

</body>

</html>

 




저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #4  (0) 2017.07.18
JavaScript Basic #3  (0) 2017.07.16
JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
Posted by BinZIP
Programming/Web Programming2017. 7. 13. 03:53

JavaScript Basic #1

Javascript(JS)

Javascript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해 고안된 언어

오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어

HTML이 한 번 화면에 출력된 후에는 그 형태나 동작 방법을 바꿀 수 없는 문제를 해결하기 위해서 네스케이프에서 만들어짐

ECMA라는 표준화 기구가 현재 JavaScript의 관리 주체

 

Hello, World!

다음과 같은 HTML 문서를 작성

 

<!DOCTYPE html>

<html>

           <head>

                     <meta charset="utf-8">

                     <title>Exercise </title>

           </head>

           <body>

                     <script>

                                alert('Hello, World!');

                     </script>

           </body>

</html>



우리가 중요하게 볼 것은 <script>…</script> 안에 있는 내용이다. 이것이 바로 JavaScript의 코드. <script> 태그는 이 부분부터 JavaScript의 문법에 따라서 해석해서 실행하라고 알려주는 셈

이렇게 HTML을 직접 작성하는 방법도 있는가 하면, 크롬의 개발자 도구의 콘솔 창을 이용할수도 있음. 콘솔 창을 띄우는 방법은 [Ctrl+Shift+J]를 키보드로 입력하면 됨 (참고: Mac 사용자의 경우 [Alt+Command+J])


 

숫자 & 문자

JavaScript에서는 큰따옴표(“)나 작은따옴표(‘)가 붙지 않은 숫자는 숫자로 인식함


연산 기호: +, -, *, /

Math.pow(a,b) // a의 b승

Math.round(a); // a를 반올림

Math.ceil(a); // a 올림

Math.floor(a); // a 버림

Math.sqrt(a); // a의 제곱근

Math.random(); // 0부터 1.0 사이의 랜덤한 숫자

 

문자는 큰따옴표나 작은따옴표로 감싸야 함


만약 따옴표가 없으면 다음과 같은 결과가 출력됨



따옴표가 붙으면 string 형식인 것을 알 수 있음

문자열 안에 ‘나 “를 넣고 싶을 때는 C언어에서 처럼 그 앞에 ‘\’를 붙여주면 됨


여러 줄로 표시하고 싶을 때는 C언어와 마찬가지로 ‘\n’을 사용함

문자열을 이어 붙여서 표시하고 싶을 때는 +를 사용함


문자열의 길이를 구하고 싶을 때는 문자 뒤에 .length를 붙임


변수

var로 정의. 다른 변수형도 있지만 나중에 차례로 할 예정


문자열도 변수에 저장 가능함


주석은 C에서와 같이 ‘//’를 사용

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #3  (0) 2017.07.16
JavaScript Basic #2  (0) 2017.07.15
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
Posted by BinZIP
Programming/Web Programming2017. 7. 12. 15:54

CSS #2

CSS #2

 

레이아웃 구성 스타일

1.    display

             - 웹 페이지의 태그 간의 배치를 결정

             => display:block;: 태그를 블록 형식으로 구성

             => display:inline;: 태그를 인라인 형식으로 구성

             => display:inline-block;: 태그를 인라인블록 형식으로 구성

             => display:none;: 태그를 화면에 표시하지 않음

 

#cssex10_1.css

@charset "utf-8";

body { display:block; width:950px; margin:0; padding:0; }

#head_area { float:left; width:100%; background-color:yellow; }

#foot_area { clear:both; width:100%; background-color:yellow; }

#wrapper { width:950px; }

#left_area { float:left; width:200px; background-color:aqua; min-height:100px; }

#content_area { float:left; width:300px; background-color:#fff; min-height:100px; }

#right_area { float:left; width:150px; background-color:skyblue; min-height:100px; }

 

#cssex10_2.html

<head>

             <title> 레이아웃 구성하기 </title>

             <meta charset="utf-8" />

             <link href="./cssex10_1.css" rel="stylesheet" />

</head>

<body>

             <div id="head_area"> HEADER </div>

             <div id="wrapper">

                           <div id="left_area"> LEFT </div>

                           <div id="content_area"> CONTENT </div>

                           <div id="right_area"> RIGHT </div>

             </div>

             <div id="foot_area"> FOOTER </div>

</body>

 


 

 

2.    Flexible Box Model

             - 문서 구조를 나타내는 레이아웃이 나타나는 화면의 크기에 따라 유연하게 크기가 다시 조정되어 콘텐츠를 보여주는 구조를 의미

             - 하나의 컨텐츠를 다양한 크기의 기기에서 보여 줄 때 유용하게 사용됨

             => display:속성값;: 태그를 박스(box) 또는 인라인 박스(inline-box)로 설정

             => box-orient:속성값;: 박스의 방향을 수평(horizontal), 수직(vertical)으로 지정

             => box-pack:속성값;: 박스의 배치(앞:start, 뒤:end, 가운데:center, 분배:justify)를 지정

             => box-flex:속성값;: 박스를 유연하게 하거나 (1 이상의 값) 유연하지 않게(0) 설정

 

#cssex11_1.css

@charset "utf-8";

body { text-align:center; padding:0; margin:0; }

header { width:100%; background-color:yellow; }

footer { width:100%; background-color:yellow; }

section { width:100%; box-orient:horizontal; display:box; display:-moz-box; display:-webkit-box; }

#box-1 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }

#box-2 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:#ccc; }

#box-3 { box-flex:1; -webkit-box-flex:1; min-height:100px; background-color:aqua; }

 

#cssex11_2.html

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 유연한 박스 모델 구성하기 </title>

                           <meta charset="utf-8" />

                           <link href="./cssex11_1.css" rel="stylesheet" />

             </head>

             <body>

                           <header>

                           <h1> HEADER </h1>

                           <p> 머리글 영역입니다. </p>

                           </header>

                           <section>

                                        <nav id="box-1">

                                                     <h1> LEFT </h1>

                                                     <p> 이곳은 왼쪽 영역입니다. </p>

                                                     <p> 내비게이션을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </nav>

                                        <article id="box-2">

                                                     <h1> CONTENT </h1>

                                                     <p> 이곳은 가운데 영역입니다. </p>

                                                     <p> 주요 본문을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </article>

                                        <aside id="box-3">

                                                     <h1> RIGHT </h1>

                                                     <p> 이곳은 오른쪽 영역입니다. </p>

                                                     <p> 어사이드 내용을 주로 작성하는 곳으로 사용됩니다. </p>

                                        </aside>

                           </section>

                           <footer>

                                        <h1> FOOTER </h1>

                                        <p> 바닥글 영역입니다. </p>

                           </footer>

             </body>

</html>


 

이런 유연한 구조를 가진 웹페이지를  동적 웹 페이지라고 한다.

 

 

 

 

주 메뉴 레이아웃 구성해보기

 

#cssexadv_1.css

@charset"utf-8";

* { margin:0; }

ul, li { list-style:none; }

a { color:#fff; text-decoration:underline; }

a:hover { color:#000; text-decoration:none; }

.gnb{padding:0}

.gnb a {width:135px; padding:0 5px 0 5px; display:block; text-decoration:none; }

.gnb li { position:relative; float:left; margin-right:11px; }

.gnb li a { height:50px;text-align:center; line-height:50px; font-size:1.05em; color:#000; }

.gnb li a:hover { color:#09f; }

.gnb li ul { display:none; position:absolute; top:50px; left:0; }

.gnb li:hover ul { display:block; }

.gnb li ul a {width:120px; height:35px; background-color:#000; color:#fff; text-align:center; line-height:37px; border-bottom:1px solid #fff; }

.gnb li ul a:hover { background-color:#555; }

#wrap{width:980px; height:auto; float:left;}

#main_menu{width:700px; height:50px; float:left; background:#92c121;}

 

#cssexadv_2.html

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title>메인 메뉴</title>

                           <meta charset="utf-8" />

                           <link href="./cssexadv_1.css" rel="stylesheet" />

             </head>

             <body>

                           <div id="wrap">

                                        <div id="main_menu">

                                                     <ul class="gnb">

                                                                  <li>

                                                                                <a href="http://binzip2.tistory.com" title="블로그 이동">블로그 이동</a>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/index.php/1" title="웹 프로그래밍">웹 프로그래밍</a>

                                                                                <ul>

                                                                                             <li>

                                                                                                          <a href="/index.php/1" title="HTML">HTML</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/index.php/2" title="CSS">CSS</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/index.php/3" title="JS">JS</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/board/sub.php/list" title="방문자 게시판">방문자 게시판</a>

                                                                                <ul>

                                                                                             <li>

                                                                                             <a href="/board/sub.php/list" title="자유게시판">자유게시판</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                                  <li>

                                                                                <a href="/member/sub.php/login" title="로그인">로그인</a>

                                                                                <ul>

                                                                                             <li>

                                                                                                          <a href="/member/sub.php/login" title="로그인">로그인</a>

                                                                                             </li>

                                                                                             <li>

                                                                                                          <a href="/member/sub.php/join" title="회원가입">회원가입</a>

                                                                                             </li>

                                                                                </ul>

                                                                  </li>

                                                     </ul>

                                        </div>

                           </div>

             </body>

</html>

 


저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #2  (0) 2017.07.15
JavaScript Basic #1  (0) 2017.07.13
CSS #1  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic #2  (0) 2017.07.08
Posted by BinZIP
Programming/Web Programming2017. 7. 12. 04:28

CSS #1

CSS #1

스타일 시트(style sheet): HTML5 문서에서 디자인의 표현 한계를 극복하고 다양한 레이아웃 효과를 높이기 위해 글꼴과 글자 크기, 여백과 배경색, 정렬 방식 등의 여러가지 스타일을 모아 작성하는 기술

이점: 하나의 스타일을 작성한 후 여러 개의 HTML5 문서에서 불러들여 사용할 수 있고, 테이블이나 프레임에 의존하지 않고 문서 구조를 표과적으로 표현할 수 있어 편리함

 

CSS3

CSS(Cascading Style Sheet)3란 W3C에서 웹 표준으로 제작하고 있는 CSS의 최신 버전으로, 웹 페이지에 다양한 스타일을 지정하기 위해서 사용하는 기술

스타일 정의는 스타일 대상(selector)과 스타일 선언부(declaration)로 구성됨

 

HTML 문서에서 <p>태그 내의 텍스트에 대해 이탤릭체, 파란색 효과를 지정하는 CSS 코드는 다음과 같음

 

@charset "utf-8"; p {

font-style:italic; color:blue;

}

 

태그의 스타일을 작성하여 저장한 CSS3 파일은 여러 HTML5 문서에 연결할 수 있으며, HTML5 문서 본문에 존재하는 모든 <p>태그에 적용됨

 

특징과 기능

1.    브라우저나 플랫폼의 종류에 관계 없이 적용 가능

2.    플래시나 자바 스크립트를 사용하지 않고 동적인 웹페이지 작성 가능

3.    웹 페이지의 스타일 표현 설계 영역을 담당해 HTML 문서 마크업을 간결하게 함

4.    글자, 줄 간격, 여백, 테두리, 배경, 이미지, 하이퍼텍스트 등의 서식을 다양하게 설정 가능

5.    하나의 CSS3 문서로 여러 HTML 문서의 스타일을 한꺼번에 관리하고 효과 적용 가능

 

선택자

CSS3에서 HTML5의 특정 대상에 대해 스타일을 지정할 때 그 스타일을 적용할 대상을 선택자(selector)라고 함

선택자의 종류에는 범용 선택자, 태그 선택자, 아이디 선택자, 클래스 선택자 등이 있음

 

1.    범용 선택자

             - 웹 페이지의 일부분이 아닌 전체를 대상으로 한 선택자

             - ‘*’ 기호로 표현하며 웹 페이지를 전체적으로 디자인 할 때 사용

 

* { margin:0; padding:0; }

 

위와 같이 설정하면 문서의 모든 요소의 외부, 내부 여백을 0으로 선언한 것이다.

 

2.    태그 선택자

             - 특정 태그를 선택자로 지정한 것

             - 하나의 태그를 대상으로 스타일을 지정할수도, 같은 스타일을 여러 태그에 지정할수도 있음

             - 태그 선택자에 지정된 스타일을 HTML 문서에서 참조됨

 

태그 { 속성:값; }

 

3.    아이디 선택자

             - 특정 태그가 가진 아이디를 선택자로 지정한 것

             - 아이디명은 HTML 문서 내에서 중복 없이 유일하게 하나만 존재함

 

#id명 { 속성:값; }

 

4.    클래스 선택자

             - 특정 태그가 가진 클래스를 선택자로 지정한 것

             - 클래스 명은 여러 태그에서 중복으로 지정하여 사용할 수 있으며, 여러 태그에 같은 스타일을 적용할 때 사용함

 

.클래스명 { 속성:값; }

 

 

스타일 작성

특정 일부 태그에만 필요한 경우, 하나의 웹 페이지에만 필요한 경우, 여러 문서에서 공통으로 필요로 하는 경우 등의 상황에서 스타일이 적용됨

 

1.    인라인 스타일

             - 스타일이 필요한 특정 태그에 속성을 기술하는 것처럼 style=“속성:값;”의 형태로 스타일 속성을 태그 안에 작성

 

<body>

             <p style="color:blue;"> 인라인

                           <span style="color:red;"> 스타일입니다.

                           </span>

             </p>

             <p> 일반 스타일입니다.

             </p>

</body>

 


 

2.    임베디드 스타일

             - HTML5 문서의 헤드 부분에 <style> 태그를 사용하여 필요한 스타일들을 한꺼번에 모아 작성하는 방법, 내부 스타일이라고도 함

             - 선언해둔 스타일은 본문에서 선언 대상이 나타나면 참조하여 적용됨

 

<head>

             <style>

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

             </style>

</head>

<body>

             <p> 내부 스타일입니다.

             </p>

             <span> 일반 스타일입니다.

             </span>

</body>

 


p 태그에 대해 임베디드 스타일을 지정한 코드의 실행 화면

 

3.    외부 스타일

             - HTML 문서 외부에 스타일 시트 파일을 작성해두고 여러 웹 페이지에서 해당 스타일이 필요할 경우 스타일 시트 파일을 불러들여 참조하는 방식

             - HTML 문서의 head 부분에서 link 태그로 스타일 시트 파일을 연결

 

#cssex3_1.css

@charset "utf-8";

p{ display:block; font-size:20pt; color:green;

text-align:right; border:5px double red; }

 

#cssex3_2.html

<head>

             <link rel="stylesheet" href="./cssex3_1.css" />

</head>

<body>

             <pre>

                           <p>

외부 스타일이 적용되어 블록이 설정되고

블록의 테두리 두께는 5px, 빨간 이중선으로, 글자는 녹색의 20pt로 블록의 오른쪽에 나타납니다.

                           </p>

             </pre>

             <span>

             일반 스타일입니다.

             </span>

</body>

 

 

 


 

 

서식 관련 스타일

1.    글자 관련 속성

             => font-family:글꼴1,글꼴2,…;: 글꼴의 종류 설정. ‘,’로 구분하여 작성하며 차례로 검색해 해당하는 글꼴이 시스템에 있으면 적용

             => font-size:속성값;: 글자 크기 설정(pt, px, %, small, medium, large 등)

             => font-style:속성값;: 글자 효과 설정(italic 등)

             => color:속성값;: 글자 색상 설정(색상 코드, rgb(r,g,b), rgba(r,g,b,a) 등)

             => overflow:속성값;: 태그 표현 범위를 벗어나는 글자 처리에 대해 설정(scroll, visible, auto, hidden 등)

             => font-spacing:속성값;: 글자 간격 설정(normal, pt, px 등)

             => font-weight:속성값;: 글자 굵기 설정(normal, bold, bolder, lighter 등)

 

#cssex4_1.css

@charset "utf-8";

body { text-align:center; }

#txt1 { font-size:28px; color:rgba(0,0,255, 0.7); }

.over1 { font-family:"궁서", Arial;

width:200px; height:100px; margin:10px auto;

line-height:1.5; overflow:auto; border:1px solid #ccc; }

 

#cssex4_2.html

<head>

             <title> 글자 효과 지정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex4_1.css" />

</head>

<body>

             <div id="txt1"> 글자 관련 스타일 </div>

             <br />

             <br />

             <div class="over1"> 글자 관련 스타일 속성을 이용하여 글꼴, 글자크기와모양,색상,표현범위지정등을설정한다.이외에도자간,굵기,줄간격을설정할수있다.

             </div>

</body>

 

 


 

 

2.    문단 관련 속성

             => text-align:속성값;: 문단 정렬 설정(left, center, right, justify(좌우 정렬))

             => text- indent:속성값;: 문단 들여쓰기/내어쓰기 설정(px, %, 음수(내어쓰기))

             => line-height:속성값;: 줄 간격 설정(normal, pt, px, % 등)

             => text-transform:속성값;: 영문자의 대소문자 변환 설정(none, uppercase, lowercase, capitalize)

             => text-decoration:속성값;: 문장 장식 설정(none, underline, overline, line-through 등)

             => text-shadow:x,y,blur,color;: 글자의 그림자 설정(글자로부터의 x,y 이동 좌표, 번짐 정도, 그림자의 색상)

 

#cssex5_1.css

@charset "utf-8";

h1 { text-align:center; text-indent:50px; }

#text1 { text-transform:capitalize; }

#text2 { text-decoration:underline; }

#text3 { text-decoration:line-through; }

a:link { text_decoration:none; }

a:hover { text-decoration:underline; color:red; }

 

#cssex5_2.html

<head>

             <title> 문단과 링크 효과 설정 </title>

             <meta charset="utf-8" />

             <link rel="stylesheet" href="./cssex5_1.css" />

</head>

<body>

             <h1> 문단과 링크 효과 </h1>

             <p id="text1"> CSS3의 문장과 문단 style </p>

             <p id="text2"> 문장 밑줄 효과(underline) </p>

             <p id="text3"> 문장 취소선 효과(line-through) </p>

             <a href="http://www.naver.com"> 네이버로 이동 </a>

             <br />

             <br />

             링크 위에 마우스를 올리면 밑줄이 나타납니다. <br />

</body>

 


 

3.    여백과 위치 관련 속성

             => margin:속성값;: 태그 문단 바깥쪽 여백 설정

             => padding:속성값;: 태그 문단 안쪽 여백 설정

             => float:속성값;: 태그 문단 수평 방향 배치(left, right)

             => position:속성값;: 태그 문단 위치 설정(static, relative, absolute)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 여백과 위치 지정 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { margin:0; padding:0; }

                                        p, div { display:block; margin:50px 10px; width:300px; text-align:center; background:#ddd; }

                                        .text1 { border:1px solid red; color:green; float:left; }

                                        .text2 { border:3px dotted green; float:left; }

                           </style>

             </head>

             <body>

                           <div class="text1"> 여백과 위치 1 </div>

                           <p class="text2">여백과위치2 </p>

             </body>

</html>

 


 

 

4.    목록 관련 속성

             => list-style:속성값;: 전체 목록 스타일 지정

             => list-style-type:숫자 타입;: 숫자 타입(아라비아 숫자, 로마자) 글머리 기호 설정(none, decimal, upper-alpha(영문 대문자), lower-alpha, upper-roman(로마자 대문자), lower-roman 등)

             => list-style-image:url(“이미지 경로”);: 글머리 기호를 이미지로 대체 지정

             => list-style-position:속성값;: 글머리 기호의 위치 지정(inside(목록 안쪽), outside(목록 바깥쪽))

 

<head>

             <style>

             body { margin:0; padding:0; }

             #main_menu { background:#aaa; }

             #main_menu li { padding:5px; display:inline-block; list-style:none; }

             </style>

</head>

<body>

             <nav id="main_menu">

                           <ul>

                                        <li> 회사 소개 | </li>

                                        <li> 공지사항 | </li>

                                        <li> 자주 묻는 질문 | </li>

                                        <li> 자유게시판 </li>

                           </ul>

             </nav>

</body>

 


 

 

5.    테두리 관련 속성

             => outline:속성값;: 전체 아웃라인 설정(두께, 스타일, 색상 등 지정)

             => border:속성값;: 전체 테두리 설정(두께, 스타일, 색상 등)

             => border-width:속성값;: 테두리 두께 설정(pt, px, in, cm값 지정)

             => border-color:속성값;: 테두리 색상 설정(색상명 혹은 색상값)

             => border-style:속성값;: 테두리 스타일 설정(none, solid(단일 선), double(이중 선), dash(대시), dot(점), groove(홈 모양) 등)

             => border-radius:속성값;: 테두리의 둥근 정도 설정(px 등 값)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 테두리와 아웃라인 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { text-align:center; font:bold 16px Arial; }

                                        .box1 { display:block; width:600px; height:100px; border:2px solid red; outline:3px dotted #00f; outline-offset:10px; }

                           .box2 { display:block; width:600px; height:100px; border:3px dashed #000; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; }

                           </style>

             </head>

             <body>

                           <h2> 테두리와 아웃라인 효과 </h2>

                           <p class="box1"> 높이100px,너비300px크기의블록에 <br/>

                           빨간색 단선 테두리와 <br />

                           파란색 점 아우트라인 효과를 준 스타일입니다. </p>

                           <br />

                           <p class="box2"> 높이100px,너비300px크기의블록에<br/>

                           대시 테두리, <br />

                           박스의 둥근 모서리 효과를 준 스타일입니다. </p>

             </body>

</html>

 


 

6.    배경 관련 속성

             => background:속성값;: 배경과 관련한 전체적인 스타일 지정

             => background:url(“이미지 경로”);: 배경 이미지 삽입

             => background-color:속성값;: 배경색 삽입

             => background-size:속성값;: 배경 이미지 크기 설정(auto, cover, contain)

             => background-repeat:속성값;: 배경 이미지의 반복 설정(repeat, repeat-x, repeat-y, no-repeat)

 

<!DOCTYPE html>

<html lang="ko">

             <head>

                           <title> 배경 이미지 </title>

                           <meta charset="utf-8" />

                           <style>

                                        body { background:url("./LA1.png"); background-repeat:no-repeat; background-size:cover; text-align:center; }

                                        #title { display:block; width:300px; height:30px; text-align:center; margin:50px auto; border:1px solid; border-radius:20px; background:-webkit-linear-gradient(top,#fff,#000); }

                                        #font1 { color:rgb(255,255,255); font-size:16px; }

                           </style>

             </head>

             <body>

                           <p id="title"> 그래디언트 배경 설정 </p>

                           <p id="font1" > 배경 이미지가 가로/세로 크기 비율은 고정되고

                           이미지의 가로 크기만 본문의 가로 크기에 맞추어 집니다. </p>

             </body>

</html>

 



 

 

 

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic #2  (0) 2017.07.08
HTML Basic  (0) 2017.07.05
Posted by BinZIP
Programming/Web Programming2017. 7. 10. 02:55

HTML Basic #3

HTML#3


웹 표준

방대한 웹 자료와 모호한 표현의 웹페이지는 정확한 정보 검색을 어렵게 함, 이를 해결하기 위해서 규칙적이고 일관성 있는 정보의 표현과 문서의 구조화가 필요함

웹 표준: W3C(World Wide Web Consortium)에서 권고하는 웹 페이지 기술에 대한 표준안을 말함

웹 표준을 준수한 웹 페이지는 문서 구조 계층(ex. HTML5), 문서 표현 계층(ex. CSS3), 동작 계층(ex. PHP, JS 등)으로 분리하여 작성하고 이들을 상호 연계하여 운영

 

웹 표준이 필요한 이유는 다음과 같음:

1.     크로스 브라우징 실현(다양한 운영체제와 브라우저에서 동일한 웹페이지가 보이도록 함)

2.     코딩의 단순화 실현(역할에 따라 계층을 나누어 각각의 문서 작성)

3.     가독성 향상, 로딩 속도 향상

4.     유지보수의 간편화, 개발자와 디자이너 협업 가능

 

시맨틱 웹

시맨틱 웹(semantic web): 웹페이지에서 사람이 인식하는 정보를 기계가 이해할 수 있도록 하는 컴퓨터 기술을 말함

시맨틱 웹을 실현하기 위해서는 메타 데이터(기계가 읽고 이해할 수 있는 설명 정보)를 웹 페이지가 표함하고 웹 표준을 준수하는 문서 표현과 구조를 가져야 함

 

목적: 기존 웹을 확장하여 사람과 컴퓨터 간의 효과적인 협력 체제를 구축하고, 사용자를 대신해 지능형 로봇 프로그램이 정보의 의미를 파악하고 실행, 메타 데이터를 기술해 정보에 대한 자동화된 접근성을 높여 정보를 효과적으로 공유하고 전달

 

HTML은 시맨틱 웹 페이지라고도 불림 - 웹 표준 준수, 시맨틱 표현 요소(address, mark, meter, time 등) 다수 존재, 웹 페이지 레이아웃을 위한 시맨틱 문서 구조 요소가 추가되어 의미가 부여된 웹 페이지 형성 가능

 

HTML5 시맨틱 문서 구조

 

예시는 위와 같다. 웹 페이지를 용도에 따라 구분 짓는 것이다.

 

1.     header

           - 웹 페이지의 본문 전체나 각 섹션의 머리글을 정의하는 문서 구조 태그

           - 웹 페이지에 대한 소개, 네비게이션 메뉴 모음, 주요 로고 이미지 등과 헤딩 요소(Hn, hgroup) 포함

           => hgroup: 섹션 제목이 여러 계층일 때 대제목과 부제목, 소제목을 묶어 그룹화하는 문서 구조 태그

 

2.     footer

           - 웹 페이지의 본문 전체나 각 섹션의 바닥글을 정의하는 문서 구조 태그

           - 저자, 저작권 정보, 연락처, 관련 문서로의 링크 등을 포함

           - 바닥글이라고 항상 마지막에 존재하는 것은 아님

 

3.     section

           - 문서의 구조를 의미에 맞게 구성하는 기능

           => article: 문서 내에서 독립된 글을 표현하는 영역

           => aside: 문서의 주요 내용과 관련성이 낮은 보조 내용을 표현하는 영역

           => nav: 네비게이션 요소를 표현하는 영역

           => section: 실제 본문 주제에 해당하는 내용을 표현하는 영역



위와 같이 구조화 한다고 생각하고 HTML 시맨틱 문서 구조를 작성한 코드는 아래와 같음

 

<body>

           <header>

                     <hgroup>

                                <h1> Semantic Structure</h1>

                                <h2> HTML5 섹션 </h2>

                     </hgroup>

           </header>

           <hr />

           <nav>

                     <h1> navigation 영역 </h1>

                     웹 페이지의 주요 메뉴 부분이 위치하는 영역이다.

           </nav>

           <article>

                     <h1> article 영역 </h1>

                     문서 내의 독립적인 글을 작성하는 영역이다.

           </article>

           <section>

                     <h1> section 영역 </h1>

                     문서의 중요한 본문을 작성하는 영역이다.

           </section>

           <hr />

           <footer> footer 영역 </footer>

</body>

 

구조화 했던 그림과 같이 세로로 세 영역(article, aside, section)을 나누어 사용하려면 CSS단에서 레이아웃 스타일을 적용해야 함

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #2  (0) 2017.07.08
HTML Basic  (0) 2017.07.05
Posted by BinZIP
Programming/Web Programming2017. 7. 8. 04:00

HTML Basic #2

HTML #2

 

폼 정의

폼이란 입력, 출력을 지원하는 양식 및 사용자와 상호작용이 이루어지는 영역 전반을 이름.

HTML 본문에 위치하며 폼 영역을 구성하는 태그는 <form> … </form>을 사용.

             => [form] name=“폼명”: 폼명을 지정하는 속성. 웹페이지에 여러개의 폼이 있는 경우 각각의 폼을 구분하기 위해 사용.

             => [form] method=“전송 방식”: 폼 입력 데이터의 서버 전송 방식을 지정. GET 방식과 POST 방식이 있음. 기본은 GET.

             => [form] action=“프로그램명”: 폼 입력 데이터를 처리할 서버용 프로그램(CGI, ASP, PHP 등)을 지정하는 속성. 서버와 사용자 간의 상호 정보 교환을 실행

             => [form] novalidate: ‘유효성 검사 안 함’을 지정(기본값: 유효성 검사 함)

 

필드 셋과 캡션

필드 셋은 입력, 출력 등의 여러 폼 양식 요소를 함께 묶어 그룹화하여 범위를 지정한 것

<fieldset> … </fieldset> 태그 사용

그룹화 한 범위의 캡션은 <legend> … </legend> 태그 사용

 

<fieldset>

             <legend> 폼 캡션 </legend>

             입력 양식 : <input type="text" />

</fieldset>

 


입출력 폼

사용자의 데이터를 받아들이거나 내보내기 위해서는 구성된 폼 영역 내부에 양식을 만들어 주어야 함

즉, 사용자가 처리할 데이터의 종류에 따라 양식을 선택하여 작성함

 

1.    input

             - 사용자의 입력을 받아들이는 양식을 만들고, 어떤 종류의 데이터를 입력받을 것인지를 type  속성을 이용해 지정

             - 종료 태그 없는 홑 태그

             => type=“입력 타입”: 입력 영역과 타입을 지정. text, password, check-box, radio, submit, reset, file, email, url, number, range, tel, date, time 등의 종류가 있음

             => name=“이름”: 입력 필드의 이름을 나타냄. 서버로 전송될 때의 변수명으로 사용되며, 웹 페이지 내에서 중복된 이름 사용 가능

             => id=“id 명”: 입력 필드의 아이디명을 지정하며 유일한 명칭을 사용해야 함

             => size=“ 값”: 입력 필드의 크기를 지정

             => value=“문자열”: 입력 필드의 초기 문자열 지정

             => maxlength=“값”: 입력 필드의 최대 문자열 길이 지정

             => autofocus: 입력 필드 로드시 필드에 커서를 자동으로 표시하는 기능

             => placeholder=“문자열”: 입력 힌트 문자열 표시 기능

             => checked: 항목 입력 필드에 선택 표시를 지정

             => required: 입력 필드 내용의 작성 여부 체크

 

1.    텍스트 & 암호

                           => type=“text”: 입력 필드에 한 줄로 작성한 텍스트를 그대로 입력받는 양식

                           => type=“password”: 한 줄로 작성한 텍스트를 ‘●’로 표시하여 입력받는 양식

 

<h1> 로그인 폼 </h1>

<form>

             ID : <input type="text" size="16" maxlength="10" value="id" />

             <br /> <br />

             PASS : <input type="password" name="p1" size="12" />

</form>



 

2.    라디오 & 체크박스

                           => type=”radio": 제시된 여러 항목 중 하나의 항목만을 선택할 때 사용

                           => type=“checkbox”: 제시된 여러 항목 중 사용자가 원하는 여러 개의 항목을 다중으로 선택할 때 사용

                           => value=“값”: 서버로 전송되는 값을 지정하는 옵션으로 필수적으로 지정해야함. 선택한 항목이 어떤 것인지 구별 할 수 있도록 각각의 value 값을 다르게 설정해야 함.

                           => name=“이름”: 선택할 항목에 이름을 부여하는 것으로 같은 이름을 부여한 2개 이상의 항목들이 하나의 그룹으로 인식되어 처리됨.

 

<body>

             <form>

                           <h1> 성별 구분 </h1>

                           <input type="radio" name="ra_btn" value="1" checked /> 남자 <br />

                           <input type="radio" name="ra_btn" value="2" /> 여자 <p>

                           <h1> 취미 활동을 선택하세요. </h1>

                           <input type="checkbox" name="ch_btn" value="1" checked /> 등산 <br />

                           <input type="checkbox" name="ch_btn" value="2" checked /> 골프 <br />

                           <input type="checkbox" name="ch_btn" value="3" /> 마라톤 <p>

             </form>

</body>

 


 

3.    submit & reset

                           - submit은 사용자가 입력한 모든 데이터를 서버로 전송하는 버튼 양식. type=“submit" 지정.

                           - reset은 작성한 모든 데이터 내용을 지우고 초기화하는 버튼 양식. type=“reset” 지정.

 

4.    email & url

                           - email은 이메일 주소를 입력받는 양식. type=“email” 지정.

                           - url은 웹페이지의 주소를 입력받는 양식. type=“url" 지정.

                           - 두 양식은 유효성 검사를 하는 기능이 있어서 입력 형식에 오류가 있으면 에러를 반환함

                           => placeholder: 입력 힌트. 사용자에게 입력 예시를 보여줌

                           => required: 해당 필드를 필수 입력 사항으로 지정

 

<body>

             <form method="post" action="./action.php">

                           <label for="e_id"> 이메일 보내기 </label>

                           <input type="email" id="e_id" name="e_name" placeholder="abc@abc.com" required />

                           <br />

                           <br />

                           <label for="u_id"> 인터넷 사이트 이동하기 </label>

                           <input type="url" id="u_id" name="u_name" placeholder="http:// " required />

                           <br />

                           <br />

                           <input type="submit" value="확인" />

             </form>

</body>



 

5.    number & range

                           - number는 사용자의 수치 데이터 입력을 쉽게 하기 위해서 스핀 컨트롤을 클릭하거나 직접 숫자를 입력하는 양식. type=“number” 지정.

                           - range는 슬라이드 컨트롤로 숫자의 크고 작은 정도를 표현하는 입력 양식. type=“range” 지정

 

<form>

             <label for="num_id"> 숫자 입력(스핀 컨트롤) </label> &nbsp;

             <input type="number" id="num_id" min="0" max="10" step="2" value="2" /> <br />

             <br />

             <label for="r_id"> 숫자 입력(슬라이드 컨트롤) </label> &nbsp;

             <input type="range" id="r_id" min="0" max="100" step="10" /> <br />

             <input type="submit" value="확인" />

</form>

 


6.    file & search

                           - file은 사용자의 컴퓨터에 있는 파일을 선택하여 서버에 전송하는 양식. type=“file” 지정

                           - search는 찾고자 하는 정보의 검색 단어를 입력하는 텍스트 필드 양식. type=“search" 지정.

                           => multiple: 여러 파일을 한 번에 선택할 수 있는 기능

 

<form>

             파일 선택 : <input type="file" />

             <br />

             <br />

             이미지 파일 선택(multiple) : <input type="file" accept="image/*" multiple />

             <br />

             <br />

             <input type="search" />

             <input type="submit" value="검색" />

             <input type="reset" value="다시 입력" />

</form>

 


 

7.    날짜 & 시간

                           - 사용자가 달력 폼, 스핀 컨트롤 등을 활용해 날짜와 시간을 편리하게 선택하여 입력받는 폼.

                           - 속성값 종류에는 date, month, week, time, datetime 등이 있음

 

 

2.    output

             - 폼 이벤트 처리 결과를 화면에 출력하거나 value 속성을 이용하여 관련 있는 요소들의 수치 계산 결과를 보여주는 역할을 함

             - input 태그의 id 속성값과 output 태그의 for 속성값을 동일하게 지정함으로써 입력 폼과 출력 폼을 상호 연계하고, id와 for의 속성값을 폼 이벤트의 변수로 사용하여 연산 결과를 처리할 수 있음

             =>

 

<form>

             <label> 좋아하는 과목 이름을 입력하세요. </label>

             <br />

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

             <br />

             <br />

             <table border="1">

                           <tr>

                           <th> 입력한 내용은 : </th>

                                        <td>

                                        <output for="class" onForminput="value=class.value"> 입력 결과 </output>

                                        </td>

                           </tr>

                           <tr>

                           <th> 입력한 글자 수는 : </th>

                                        <td>

                                        <output for="class" onForminput="value=class.value.length"> 글자 수 </output>

                                        </td>

                           </tr>

             </table>

</form>

 


 

 

목록 & 텍스트 영역 폼

폼을 구성하는 양식에는 입력 폼, 출력 폼 외에도 목록과 텍스트 영역 폼을 만들어주는 select, datalist, textarea 태그가 있음

1.    select

             - 콤보 박스와 리스트 박스의 목록 폼을 만들 때 사용.

             => name=“이름”: 콤보 박스와 리스트 박스의 이름 지정

             => size=“값”: 목록 크기를 지정하여 형태를 결정

             => multiple: 여러 개의 목록을 선택하는 기능을 제공

             => [option] value=“값”: 서버로 넘겨지는 값 결정

 

<form>

             <label> 당신의 혈액형을 선택하세요. </label>

             <br />

             <select name="combo_box">

                           <option value="a"> A형 </option>

                           <option value="b"> B형 </option>

                           <option value="o"> O형 </option>

                           <option value="ab"> AB형 </option>

             </select>

             <br />

             <br />

             <label> 좋아하는 언어를 선택하세요.(다중 선택) </label>

             <br />

             <select name="list_box" size="4" multiple>

                           <option value="1"> C </option>

                           <option value="2"> C# </option>

                           <option value="3"> C++ </option>

                           <option value="4"> HTML </option>

                           <option value="5"> Python </option>

                           <option value="6"> ASM </option>

             </select>

</form>

 


 

2.    datalist

             - 텍스트 입력 필드에 데이터 선택 목록이 나타나도록 함

             - input 태그의 list 속성과 datalist 태그의 id 속성 값을 동일하게 부여해 입력 필드와 데이터 목록이 연계되도록 함

 

<form>

             <fieldset>

                           <legend> 가장 좋아하는 언어는? </legend>

                           <input type="text" name="lang" list="talent" />

                           <datalist id="lang">

                                        <option value="C">

                                        <option value="C++">

                                        <option value="C#">

                                        <option value="HTML">

                                        <option value="Python">

                           </datalist>

                           <br />

                           <br />

                           <label> 당신의 선택은? : </label>

                           <output for="lang" onForminput="this.value=lang.value">

                           </output>

             </fieldset>

</form>

 


 

3.    textarea

             - 텍스트 영역 폼을 만들어 줌

             - 텍스트 필드의 성격을 가지고 있으면서 여러 줄을 입력받는데 사용됨

             => name=“이름”: 텍스트 영역의 이름 지정

             => rows=“줄 수”: 텍스트 영역의 줄 수 지정(기본값: 1). 내용이 박스의 크기를 넘으면 자동으로 스크롤바 생김

              => cols=“칸 수”: 텍스트 영역의 칸 수를 지정(기본값: 1)


<form>

             <h2> 메모장 </h2>

             <textarea name="textarea_1" rows="5" cols="50"> 의견을 남겨 주세요.

             </textarea>

</form>


 



저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic  (0) 2017.07.05
Posted by BinZIP
Programming/Web Programming2017. 7. 5. 03:11

HTML Basic

HTML #1

현재 우리가 사용하고 있는 HTML5(Hyper Text Markup Language 5)는 웹 브라우저에 표현되는 콘텐츠를 작성하기 위해 고안된 차세대 웹 표준 ‘마크업 언어’로써, 브라우저의 자체 해석, ActiveX 설치 등 비표준으로 혼재되어 왔던 웹 문서 기술에 표준화를 가져왔다.

 

HTML 특징

1.    간단한 DYD 선언(<!DOCTYPE html>)을 지원.

2.    기존의 HTML 문서와 호환할 수 있음.

3.    편리한 폼 기능을 제공하여 유효성 검증 시간이 절약됨.

4.    컴퓨터  시스템, 운영체제, 전자 기기에 상관없이 지원할 수 있음.

5.    시맨틱 웹 기술을 지원하여 의미있는 문서 구조 표현을 할 수 있음.

6.    표준 코덱 내장으로 별도의 플러그인 없이 멀티미디어를 재생함.

 

구성요소

1.    시작 태그: HTML5 요소를 ‘<‘와 ‘>’로 둘러싼 표현으로 요소의 시작을 의미.

2.    속성: 태그의 구체적인 설정 사항을 의미.

3.    인수: 속성에 실제 적용될 값을 의미.

4.    내용: 브라우저에 나타날 실제 내용으로 텍스트, 이미지, 멀티미디어 등을 의미.

5.    종료 태그: HTML5 요소를 ‘</‘와 ‘>’로 둘러싼 표현으로 요소의 마지막을 의미하며 생략하는 경우도 있음.

 

기본구조

HTML5 문서는 태그들의 집합체로 구성된 일반적인 텍스트 파일. 웹 브라우저에서 읽어 들이면 서식이 있는 문서로 해석되어 실행되므로, 빈 화면이라 하더라도 기본 구조로 작성된 문서가 있어야 함.

기본 구조는 다음과 같음.


 <!DOCTYPE html>

<html lang=“ko">

<head>

             <title>HTML5</title>

             <meta charset = “utf-8” />

</head>

<body>

             <p>HTML5 Document</p>

</body>

</html> 


위 코드를 저장하고 Chrome 브라우저에 올린 모습


상단 탭에는 title이, 본문에는 body 태그 안에 넣은 내용이 보이는 것을 볼 수 있음. 코드를 설명하면 다음과 같음.

 

<!DOCTYPE html>: 문서의 타입을 선언. HTML5 문서라는 것을 알려 표준 모드로 작동하도록 지정.

<html>, </html>: HTML5 문서의 시작과 종료를 선언. 유일한 속성으로 lang이 있는데, 문서의 주요 내용이 어떤 언어인지 표시. ‘ko’는 한국어임을 의미.

<head>, </head>: 웹페이지의 머리글을 나타내는 부분으로 title, meta, link, script, style 태그를 포함.

<title>, </title>: 웹 브라우저 상단의 웹 페이지 제목을 나타냄.

<meta />: 웹 브라우저에게 문서 작성자, 문서 형식, 문서 인코딩 방식 등의 문서 정보를 알려줌. Charset 속성으로 문자 인코딩을 정의하며, 속성값은 주로 국제 표준 코드인 ‘utf-8’을 채택함. 종료 태그가 없는 홑 태그.

<body>, </body>: 웹 브라우저를 통해 나타나는 웹 페이지의 모든 내용을 기술하는 부분. 본문 요소는 사용되는 성격에 따라 블록 요소, 인라인 요소, 시맨틱 구조 요소 등으로 나눌 수 있음.

 

HTML의 기본 문법

1.    일반적으로 시작 태그와 종료 태그로 쌍을 이루어 사용.

2.    태그는 대소문자를 구분하지 않음.

3.    홑 태그는 종료 태그 없이 사용할 수 있음.

4.    주석 글은 기호 ‘<!—‘와 ‘—>’사이에 작성.

5.    띄어쓰기는 빈 공백 하나만 인식하고 둘 이상의 공백은 무시.

6.    브라우저에서 인식되지 않는 태그나 오류는 무시하고 실행하지 않음.

7.    HTML5 문서는 텍스트파일로 *.htm 혹은 *.html로 저장.

 

문단 관련

1.    <br>

             - 문단에서 줄 바꿈 기능을 하며 종료 태그가 없는 홑 태그. 여러 줄을 띄우고자 하면 해당 줄 수 만큼 반복하여 작성.

 

2.    <p>

             - 문단을 나누고 한 줄의 여백을 띄어 줌.

 

3.    <pre>

             - 문서 내용에 편집되어 있는 모든 여백, 탭, 줄 바꿈 모양 그대로 보여줌.

 

4.    <hr>

             - 주제 변경, 내용 구분 등 웹 페이지의 문단을 구별하는 용도로 수평선 줄을 삽입하여 종료 태그가 없는 홑 태그.

 

5.    <span>

             - 문장 내 일정 부분에 텍스트 색상 변경 등의 특정 스타일을 지정하는 인라인 태그.

 

6.    <div>

             - 높이와 너비를 가진 독립된 영역을 만들어 웹 페이지 화면에 블록 구조를 표현한다. 이는 블록 구조에 의해 화면이 분할된 것을 의미.

 

<!DOCTYPE html>

<html lang = "ko">

<body>

             <h2>==Paragraph Tag==</h2>

             <p>p: 문단 나눔</p>

             br: 줄 바꿈<br/>

             hr: 문단을 나눠 주는 용도로 수평선 줄 긋기<hr />

             <div style="background-color:skyblue;">div: 블록에 하늘색 배경 스타일 지정</div>

             <p style ="color:red;">빨간색 글씨 사이에 <span sytle="color:blue;">파란색 글씨</span>

             를 넣을때는 span을 사용</p>

             <pre>

             엥                                                              엥?                                  엥

엥                                    엥                                                               엥

             </pre>

</body>

 


@ 블록요소, 인라인요소, 시맨틱 구조 요소

구분

블록 요소

인라인 요소

시맨틱 구조 요소

의미

하나의 독립된 영역을 가진 요소

독립된 영역 없이 한 줄에 작성되는 요소

의미를 가진 문서 구조를 생성하는 요소

특징

-     자동 줄 바꿈이 실행됨

-     블록 내에 텍스트와 인라인 요소를 포함할 수 있고 블록 간에는 여백이 주어짐

-     경우에 따라 또 다른 블록 요소를 포함할 수 있음

-     줄 바꿈과 여백 기능이 없음

-     인라인 요소 내에 텍스트와 또 다른 인라인 요소를 포함할 수 있음

-     인라인 요소 내에 블록 요소를 포함할 수 없음

-     블록 요소의 성격을 지님

-     사용자 뿐만 아니라 검색 엔진도 더욱 정확하고 신속하게 의미를 파악하고 검색할 수 있다.

해당 요소

div, hr, h1~h6, ul, ol, dl, li, p, address, blockquote, from, table 등

a, detail, em, i, img, mark, q, strong, span, time 등

header, footer, article, aside, nav, section 등

 

 

텍스트 관련 태그

1.    <h(n)>

             - 제목을 표현. 6단계(n=1~6)의 계층으로 구분.

 

2.    <abbr>

             - 축약어를 표현. 축약어 위에 마우스가 위치하면 title 속성에서 지정한 원래 단어를 표시

 

3.    <meter>

             - 알려진 범위 내에서 무게, 점수, 수량, 백분율 등의 측정된 값을 그래픽 형태로 표현할 때 사용. value는 필수 속성으로 현재 측정값을 지정

 

4.    <time>

             - 날짜와 시간을 지정, 작성된 날짜의 텍스트 표현을 사람뿐만 아니라 기계가 알아볼 수 있도록 하는 시맨틱 태그. 실제 날짜와 데이터는 datetime 속성에 지정

 

5.    텍스트 효과

             - 텍스트에 강조, 기울임, 인용문, 하이라이트 마크 등을 표현하는 다양한 효과 태그

태그명

설명

태그명

설명

<address>

 주소나 연락처의 의미로 텍스트 기울임 표현

<blockquote>

긴 글 인용문을 들여쓰기 처리하여 표현

<b>

강조의 의미로 텍스트 굵게 표현

<q>

짧은 글 인용문을 “” 처리하여 표현

<strong>

강한 강조의 의미로 텍스트 굵게 표현

<mark>

특정 텍스트에 하이라이트 마크 표현

<cite>

책, 그림 등의 작품 제목을 알리는 의미로 기울임 표현

<ruby>,<rt>

루비 문자(동아시아 문자) 선언(ruby), 루비 문자 위 설명(발음) 표현(rt)

<em>

강조의 의미로 텍스트 기울임 표현

<sub>

아래 첨자 표현

<i>

이탤릭체로 텍스트 기울임 표현

<sup>

위 첨자 표현

<small>

작은 글자나 코멘트를 표현

<del>

가운데 줄이 그어진 글자 표현

 

 

<h1>제목과 텍스트 관련 효과</h1>

<h2>abbr,b태그</h2>

abbr: <abbr title="Hyper Text Markup Language">HTML</abbr> 축약어의 원래 단어 말풍선 표현

b:<b>굵은 글씨</b>표현.

<h3> cite, mark, meter 태그</h3>

cite: <cite> 책, 영화 등의 제목 인용구를 기울임 </cite> 표현.

mark: <mark> 특정 부분을 하이라이트 마크</mark> 표현.

meter: 측정값 <meter min="0" max="10" value="7"> 70% </meter> 그래프 표현<br/>

<h5> q와 blockquote 태그</h5>

q: <q> 짧은 글 인용문을 인용 부호로 </q> 표현 <br/>

blockquote: <blockquote> 긴 글의 인용문을 들여쓰기 표현하는 블록요소</blockquote>

 


목록 관련 태그

1.    순서 있는 목록

             - 항목 앞에 순서의 표현으로 일련번호를 부여하여 목록을 만듬

             => type=“타입”: 1(숫자,기본값), a,A(알파벳), i,I(로마자)

             => start=“숫자”:목록의 시작 번호 지정 / reversed:번호를 역순으로 지정

 

2.    순서 없는 목록

             - 항목 앞에 특정 글머리 기호를 부여하여 목록을 만듬

 

3.    정의 목록

             - 특정 항목에 대하여 정의 부분과 설명 부분으로 나누어 목록을 만듬

 

4.    다중 목록

             - 목록 태그 내에 다시 목록을 중첩하여 구성하는 다중 목록을 만든다.

 

<h3> 정의 목록(dl) </h3>

<dl>

             <dt> 목록 구성 요소 </dt>

                           <dd> 목록을 구성하는 요소에는 ol, ul, dl이 있다.</dd>

</dl>

<h3> 순서 있는 목록(ol)</h3>

<ol type="2">

             <li> 백두산 </li>

             <li> 한라산 </li>

             <li> 지리산 </li>

</ol>

<h3> 순서 없는 목록(ul) </h3>

<ul>

             <li> 버스</li>

             <li> 기차</li>

             <li> 트럭</li>

</ul>

 


이미지 관련 태그

1.    img

             - 이미지 파일을 웹사이트에 삽입하는 기능을 하는 홑 태그

             => src=“이미지 경로”:이미지 경로를 지정(절대 경로, 상대 경로)

             => alt=“대체 텍스트”:이미지를 브라우저가 보여주지 못한 경우 대체 텍스트를 표시

             => title=“설명 팁”:마우스 이미지 위에 위치할 때 설명 팁을 나타냄

             - 이미지를 웹 페이지에 표현할 때에는 이미지가 표현되는 영역의 크기를 지정하기 위해 width=“너비”, height=“높이”의 속성을 지정함

 

2.    figure, figcaption

             - 이미지에 설명을 부여하는 이미지 캡션은 img 태그와 함께 사용함

             - 사진, 그림, 표 등에 캡션, 즉 설명 글을 포함하여 그룹화하는 figure 태그와 캡션 대상에게 실제 설명 글을 붙이는 figcaption 태그가 있음

 

하이퍼링크 관련 태그

1.    a - 다른 문서 또는 URL 연결

             - 현재의 웹 페이지에서 다른 문서나 URL을 연결하는 기능. 연결 지정은 대상에 따라 URL 주소, 문서 절대 경로, 문서 상대 경로로 작성함

             => href=“링크”:링크 문서나 인터넷 URL을 상대 경로 또는 절대 경로로 표시

             => title=“설명 팁”:마우스가 링크 위에 위치할 때 설명 팁을 나타냄

             => target=“윈도”:_blank(새로운 창 또는 새로운 탭에 문서 내용 표시),_self(현재 창에 문서 내용 표현)

 

1.    텍스트로 하이퍼링크 연결


<body>

<h3> 회원출입문 </h3> <ul>

<li> <a href="./login.html" title="로그인" target="_blank"> 로그인 </a> </li>

<li> <a href="./join.html" title="회원가입" target="_blank"> 회원가입 </a> </li> </ul>

 

2.    이미지로 하이퍼링크 연결


<h3> 회원출입문2 </h3>

<a href="./login.html" title="로그인"> <img src="./images/login-1.jpg" /> </a> &nbsp; &nbsp;

<a href="./join.html" title="회원가입"> <img src="./images/join-1.jpg" /> </a>

</body>

 


 

 

2.    a - 문서 내에서 연결

<h3> 웹 페이지 상단입니다. </h3>

<ul>

<li> <a href="#content1"> 하이퍼링크 1 </a> </li>

<li> <a href="#content2"> 하이퍼링크 2 </a> </li>

</ul>

~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> <a id="content1">▶ 하이퍼링크 - 1 </a>

<p> 하이퍼링크 - 1 위치로 오신 것을 환영합니다. </p>

<a href="#"> 위로 </a>

<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> ~<br /> <aid="content2">▶하이퍼링크-2 </a>

<p> 하이퍼링크 - 2 위치로 오신 것을 환영합니다. </p>

<a href="#"> 위로 </a>

<br /> ~<br /> ~<br /> ~<br /> ~<br />

 


 

 

3.    이미지 맵

             - 이미지에 영역 크기를 지정하여 나누어 주는 기능. 이미지 맵을 정의하는 map 태그와 영역을 나눠주는 area 태그가 있으며, 구분된 각 영역은 클릭하면 다른 곳으로 이동하는 하이퍼링크 기능을 실행함

             => [map] name=“맵 이름”: 맵 이름을 지정하여 img 태그의 username=“맵 이름” 속성과 상호 연결됨

             => [area] shape=“맵 모양”: 맵 모양을 지정하며 형태는 default(전체 영역), poly(다각형), rect, circle이 있음

             => [area] coords=“좌표”: 이미지 맵 형태에 따른 크기를 지정하며 사각형의 경우 “x1,y1,x2,y2”, 원의 경우 ”x1,y1,r”, 다각형의 경우 “x1, y1, x2, y2, …, xn, yn”으로 지정

             => [area] href=“링크 문서”: 링크하여 이동할 문서 지정

 

<body style="text-align:center;">

<h3> 웹 브라우저 방문하기 </h3>

<img src="./images/browser.jpg" width="200" height="150" usemap="b_map" />

<map name="b_map">

<area shape="rect" coords="10,60,100,140" href="http://www.mozilla.or.kr/ko/" title="파이어폭스" /> <area shape="rect" coords="110,60,190,140" href="https://www.google.com/" title="크롬" /> </map>

</body>


왼쪽 부분을 클릭하면 mozila 홈페이지로, 오른쪽을 누르면 google로 간다.

 

 

표 관련 태그

1.    표 구성

             - 행(세로):<tr> / 열(가로):<td>

             => border:표의 테두리 두께 지정(1 or “ “) - border를 작성하지 않으면 테두리 없는 표로 처리

 

2.    셀 병합

             => colspan=“열 수”: 지정한 수 만큼 열을 병합

             => rowspan=“행 수”: 지정한 수 만큼 행을 병합

 

3.    표 그룹 및 구조화

             - 표에 의미를 부여하여 시맨틱하게 인식되도록 처리하면 웹 페이지 검색 등에 유용하게 사용될 수 있음. 즉, 표 전체를 대표하는 제목을 표시하며, 각 열을 그룹화하여 해당 열에 대한 효과를 별도로 지정할 수 있음. 또한 표 안에서 표 머리글, 표 본문, 표 바닥글로 구조화하여 구성 가능.

             1. 표 캡션: 표 전체 내용을 대표하는 제목. <caption> 태그 사용

             2. 열 그룹화: 표에 속한 열을 그룹으로 만듬. <colgroup> 태그 사용

             3. 표 구조화: 표를 의미와 용도에 따라 표 머리글, 표 본문, 표 바닥글로 구분하여 구조화. <thead>, <tbody>, <tfoot> 태그 사용

 

 

<table style="text-align:center;" border="1">

<tr>

<th rowspan="2" scope="row"> 성명 </th> <!-- 2개의 행을 병합한 열 제목 --> <th colspan="2" scope="col"> 성취 평가 </th> <!-- 2개의 열을 병합한 열 제목 -->

</tr> <tr>

<td> 컴퓨터 일반 </td>

<td> 웹 프로그래밍 </td> </tr>

<tr>

<td> 이순신 </td> <td> 98 </td> <td> 100 </td>

</tr>

</table>

<br/>

<table border="1">

<caption> 컴퓨터 주변 기기 </caption>

<thead>

<tr>

<th> 주변 기기 </th> <th> 이미지 </th> <th> 주변 기기 </th> <th> 이미지 </th>

</tr>

</thead> 

<tbody>

<tr>

<td> 마우스 </td> <td> <img src="./images/mouse.jpg" /> </td> <td> 프린터 </td> <td> <imgsrc="./images/printer.jpg" /> </td>

</tr>

</tbody> 

<tfoot>

<tr>

<td colspan="4"> <address> 신청 연락처 : 02-123-4567 </address> </td>

</tr> 

</tfoot>

</table>

 



 

 

멀티미디어 관련 태그

1.    video

             - 웹 페이지에서 동영상 파일을 삽입하여 별도의 플러그인 없이 브라우저 자체의 내장 플레이어로 재생하는 기능


<video autoplay="autoplay" controls="controls">

<source src="비디오파일1"type="비디오타입1"/>

<source src="비디오파일2"type="비디오타입2"/>

</video>


             => [video] src=“비디오 파일”: 비디오 파일의 경로 지정

             => [video] autoplay=“autoplay”: 자동 재생 기능 지정

             => [video] controls=“controls”: 컨트롤 바가 표시되도록 지정

             => [video] poster=“이미지 파일”: 비디오 파일이 화면에 나타나지 않을 경우 대체할 이미지 경로 지정

             => [video] width=“너비”: 비디오 파일이 재생될 너비 지정

             => [video] height=“높이”: 비디오 파일이 재생될 높이 지정

             => [source] src=“비디오 파일”: 비디오 파일의 경로 지정

             => [source] type=“비디오 타입”: 비디오 파일의 타입 지정

 

2.    audio

             - 웹 페이지에 음악을 삽입하여 별도의 플러그인 없이 브라우저 자체의 내장 플레이어로 재생하는 기능


<audio autoplay="autoplay" controls="controls">

<source src=“오디오파일1"type="오디오타입1"/>

<source src="오디오파일2"type="오디오타입2"/>

</audio>


             => 속성은 비디오와 거의 동일, 단 poster 대신 loop 옵션이 있음.

             => [audio] loop=“loop”: 반복 재생 지정

 

3.    embed

             - 플러그인이 설치된 브라우저 혹은 플러그인이 필요한 멀티미디어 파일을 재생하는 태그

<embed src=“파일 경로”></embed>

             => src=“파일 경로”: 외부 파일 경로 지정

             => type=“파일 타입”: 파일 타입 지정

             => width=“너비”: 너비값 지정

             => height=“높이”: 높이값 지정

저작자표시 비영리 동일조건

'Programming > Web Programming' 카테고리의 다른 글

JavaScript Basic #1  (0) 2017.07.13
CSS #2  (0) 2017.07.12
CSS #1  (0) 2017.07.12
HTML Basic #3  (0) 2017.07.10
HTML Basic #2  (0) 2017.07.08
Posted by BinZIP

티스토리툴바