Jay.log

제이쿼리 라이브러리(jQuery Library)

Tue, 08 Feb 2022 08:55:38 GMT

※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 바탕으로 작성되었음

제이쿼리 라이브러리(jQuery Library)

본격적으로 jQuery를 학습하기 전에 jQuery(이하 제이쿼리)의 개념에 대하여 잠깐 언급하겠다. 제이쿼리는 자바스크립트의 가장 대표적인 라이브러리 언어라고 할 수 있다.

라이브러리(Library)란? 제이쿼리에는 일반 자바스크립트에서 볼 수 없는 다양한 애니메이션 효과의 구현을 위한 기능적인 함수들이 많이 추가되어 있다. 이렇게, 그대로 불러와 사용할 수 있도록 구성된 기능적인 함수나 작은 프로그램의 집합을 라이브러리(Library)라고 한다.

따라서, 그 다양한 기능을 사용하려면 우선 jQuery.com에 접속하여 '제이쿼리 라이브러리' 파일을 다운로드해야 한다.

제이쿼리의 연동 방식에는 두 가지가 있다.

첫 번째는 직접 제이쿼리 파일을 '다운로드' 받아서 연결하는 방식이며, 두 번째는 직접 링크 주소를 입력하여 불러오는(import) 'CDN 호스트 링크 방식'이다.

다운로드 방식

[Download] 버튼의 위를 보면 'minifield(축소)'와 'uncompressed(원본)' 버전 중 한 가지를 체크할 수 있따. 우선 minified 방식을 체크하고 [Download] 버튼을 클릭한다.

'minified' 방식은 코드의 줄바꿈이나 개발을 위한 주석(설명) 등이 생략된 버전이다. 'uncompressed' 파일은 그에 비해 큰 용량을 차지하지만 줄바꿈과 코드 내에 주석이 달려있어 제이쿼리를 개발할 때 편리하게 사용된다.

현재 우리는 새로운 제이쿼리 라이브러리를 개발하는 것이 아닌, 구현되어 있는 기능을 불러와 사용할 목적이므로 용량이 가벼운 'minified' 방식으로 다운로드한다. 다운로드한 *.js 파일을 HTML 파일의 하나위에 임의로 만든 [js] 폴더에 저장한다.

이렇게 다운로드한 js 파일은 다음과 같이 HTML의 요소 안에서 불러올 수 있다.

CDN 호스트 링크 방식

제이쿼리를 제공하는 기업별 주소들이다. 그 중 http://code.jquery.com/jquery-latest.js를 사용하면 가장 최신의 버전으로 자동 연동된다.

google --- http://ajax.googlrapis.com/ajax/libs/jquery/1.8.1/jquery.min.js microsoft --- http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js jquery --- http://code.jquery.com/jquery-1.8.1.min.js / http://code.jquery.com/jquery-latest.js

참고로, 위 다운로드 방식 등 설명에 등장한 '1.8.1' 버전은 참고하고 있는 도서가 집필된 2012년 9월 기준이다. 더욱 최신의 버전이 새롭게 공개되었을 수 있으니 기본적으로 가장 최신의 라이브러리도 연동시키는 마지막 링크(~latest.js)를 권장한다고 한다.

앞의 링크 중 하나를 골라 다음과 같이 링크 방식으로 삽입할 수 있다.

선택자 및 속성(Selector & Attribute)

앞 장 '자바스크립트 기본 다지기'에서 살펴 본 바로는 DOM(문서 객체)을 불러오는 선택자에 따라 '표준방식 브라우저(크롬, 파이어폭스, 사파리 등)'와 '비표준 방식 브라우저(IE8 이하 버전)' 간의 호환성에 문제가 있었지만 제이쿼리에는 그러한 문제점들이 없다.

자바스크립트는 기본적으로 인터프리터 언어이므로, 실행문을 윗줄부터 순서대로 수행한다. 제이쿼리에서 선택자를 사용할 경우, '$(document).ready(function(){실행문})'의 형식으로 실행 함수를 작성해야 한다.

이유는 제이쿼리가 요소보다 위에서 import(삽입)되기 때문에 문서의 모든 요소들이 로딩된 이후에야 요소 선택자를 사용할 수 있기 때문이다.

$(document).ready(function(){
  실행문;
});

다음과 같이 $를 사용하여 간단히 줄여 써도 결과는 같다.

$(function(){
  실행문;
});

※ 선택자 HTML 문서의 특정 요소를 선택하고자 할 때 사용하며, 그 종류는 다음과 같다.

$("*") --- 전체 요소 선택 $("태그명") --- 태그명으로 요소 선택 $("#아이디명") --- 아이디명으로 요소 선택 $(".클래스명") --- 클래스명으로 요소 선택 ("태그명1 태그명2") --- 태그명1의 하위 요소 중 태그명2의 요소들 선택 ("태그명1>태그명2") --- 태그명1의 자식 요소 중 태그명2의 요소들 선택 $("선택 요소").parent() --- 선택 요소를 기준으로 부모 요소를 선택 $("선택 요소").children("태그명") --- 선택 요소를 기준으로 자식 요소들 선택 $("선택 요소").prev() --- 선택 요소들 기준으로 형제 요소 중 이전 요소 선택 $("선택 요소").next() --- 선택 요소를 기준으로 형제 요소 둥 다음 요소 선택 $("선택 요소").siblings("태그명") --- 선택 요소를 기준으로 형제 요소들 모두 선택 $(":종류"); --- 폼의 input 요소 중 종류(type)가 일치하는 요소들 선택

예를 들어, 표에 정리된 선택자를 사용하여 특정 css 스타일을 적용하려면 '선택자.css("속성", "속성값")'의 형태로 쓸 수 있다. 즉, $("h1").css("color","red") 형식이 되겠다.

문서 객체 조작(DOM Control)

탐색 선택자

탐색 선택자는 좀 더 정확히 요소 선택을 가능하게 하는데, 그 종류는 다음과 같다.

$("ul li:odd") ---

요소 중 홀수 인덱스 요소만 선택 $("ul li:even") ---
- 요소 중 짝수 인덱스 요소만 선택 $("ul li:first") ---
  - 요소 중 첫 번째 요소만 선택 $("ul li:last") ---
    - 요소 중 마지막 요소만 선택 $("ul li:eq(1)"), $("ul li").eq(1) ---
      - 요소 중 두 번쨰 요소만 선택(인덱스 0부터 시작) $("ul li:lt(2)") ---
        의
        요소 중 세 번째 이전 요소만 선택 $("ul li:gt(2)") ---
        의
        요소 중 세 번째 이후 요소만 선택 $("ul li:nth-child(2n)") ---
        의
        요소 중 2의 배수 번째 요소만 선택 $('ul li:contains('문자')") ---
        의
        요소 중 "문자"가 포함된 요소만 선택 $("ul li:has('span')") ---
        의
        요소 중 span 태그를 포함하는 요소만 선택 $("ul li")fitter(".theObj") ---
        의
        요소 중 class='theObj"인 요소만 선택 $("ul li").find("a") ---
        의
        요소가 포함되는 요소만 선택 $("ul li:visible") ---
        의
        요소 중 보이는 요소만 선택 $("ul li:hidden") ---
        의
        요소 중 숨겨져 있는 요소만 선택 $("h1, h2") --- h1, h2 요소들만 선택 $("ul li").not(:emoty) ---
        의
        요소 중 내용을 가진 요소만 선택
        
        문서 객체 조작 메서드
        
        문서 객체의 생성, 복제, 추가, 삭제 및 속성에 대한 변경, 삭제할 때 사용한다.
        
        $("선택 요소").html() --- 선택한 요소의 하위 요소들을 반환 $("선택 요소").html("새 요소") --- 선택한 요소의 하위 요소들을 새 요소들로 변경 $("선택 요소").text("새 텍스트") --- 선택한 요소의 텍스트를 새 텍스트로 변경 $("새 요소") --- 새 요소를 생성 $("선택 요소").append("새 요소") --- 선택 요소의 마지막 자식요소로 새 요소를 추가 $("선택 요소").prepend("새 요소") --- 선택 요소의 첫 자식 요소로 새 요소를 추가 $("새 요소").appendTo("요소 선택") --- 선택 요소의 마지막 자식 요소로 새 요소를 추가 $("새 요소").prependTo("요소 선택") --- 선택 요소의 첫 자식 요소로 새 요소를 추가 $("새 요소").insertBefore(요소 선택) --- 선택 요소 이전 위치에 형제요소로 새 요소를 추가 $("새 요소").insertAfter(요소 선택) --- 선택 요소 다음 위치에 형제요소로 새 요소를 추가 $("선택 요소").clone(true / false) --- 선택 요소를 복제 (true:하위요소 포함 복제) $("선택 요소").remove() --- 선택 요소를 삭제 $("선택 요소").empty() --- 선택 요소의 하위 요소들 모두 삭제 $("선택 요소").attr("속성") --- 선택 요소의 특정 속성을 지정 $("선택 요소").attr("속성", "값") --- 선택 요소의 지정한 속성을 새 값으로 변경 $("선택 요소").addClass("클래스명") --- 선택 요소에 새 클래스명을 부여 $("선택 요소").removeClass("클래스명") --- 선택 요소에 지정된 클래스명을 삭제 $("선택 요소").toggleClass("클래스명") --- 선택 요소에 클래스명이 없으면 추가, 있으면 삭제 $("선택 요소").hasClass("클래스명") --- 선택 요소에 클래스명이 있으면 true를 반환 $("선택 요소").wrap("
        ") --- 선택 요소를
        요소로 둘러 쌈 $("선택 요소").wrapAll("") --- 선택 요소들 전체를
        요소가 한 번에 둘러 쌈
        
        이벤트(Event)
        
        앞서 자바스크립트 영역에서 설명한 바와 같이, 웹 브라우저 내에서 벌어지는 버튼 클릭이나 마우스의 움직임 등 모든 행위를 '이벤트'라고 한다. 그리고 이벤트가 발생했을 때 함수 또는 실행문이 수행되도록 해당 이벤트를 지정해두는 요소를 이벤트 핸들러라 하는데, 이벤트의 종류는 다음과 같다.
        
        click() --- 선택 요소를 클릭했을 때 발생 dblclick() --- 이벤트 대상에 더블클릭했을 때 발생 mouseover() --- 마우스를 이벤트 대상에 올려놓았을 때 발생 mouseout() --- 마우스가 이벤트 대상에서 벗어났을 때 발생 focus() --- 이벤트 대상에 포커스가 생겼을 대 발생 blur() --- 이벤트 대상에 포커스가 잃었을 때 발생 focusin() --- 이벤트 대상에 포함된 input 요소에 포커스가 있으면 발생 focusout() --- 이벤트 대상에 포함된 input 요소에 포커스를 잃었을 때 발생 keydown() --- 키를 눌렀을 때 발생 keypress() --- 키를 눌렀을 때 발생 mouseenter() --- 마우스가 선택 요소 내로 들어오면 발생 mouseleave() --- 마우스가 선택 요소 밖으로 나가면 발생 mousemove() --- 마우스가 움직일 때마다 발생 resize() --- 윈도우 창에 사이즈를 조절할 때마다 발생 submit() --- 양식(form)에서 전송 버튼을 누를 때 발생 reset() --- 양식(form)에서 취소 버튼을 누를 때 발생 toggle() --- 클릭할 때마다 순차적으로 함수를 번갈아가면서 실행 hover() --- 마우스 올렸을 때와 마우스가 벗어났을 때 각각의 함수를 실행 unload() --- 문서를 종료했을 때 실행 change() --- 값이 바뀌고, 포커스가 옮겨졌을 때 실행 bind() --- 여러 개의 이벤트를 적용 시 사용
        
        이벤트 함수는 아래의 [기본형식] 과 같이 작성한다. 자바스크립트에서는 이벤트 핸들러에 'on'을 붙였지만 제이쿼리에서는 붙이지 않는다. 단, 이때에도 제이쿼리 실행문을 잊으면 안된다!
        
        [기본형식]
        
        $("선택 요소").click(function() { 실행문; });
        
        효과(Effects)
        
        효과 메서드를 사용하면, 선택 요소를 숨기거나 노출할 때 다양한 효과를 적용할 수 있으며, 이러한 효과들로 인해 보다 다이내믹하고 인터랙티브한 사이트의 제작이 가능하다. 효과 메서드에는 다음과 같은 종류가 있다.
        
        $("요소선택").hide() --- 선택 요소를 숨김 $("요소선택").show() --- 선택 요소를 노출 $("요소선택").toggle() --- 선택 요소가 보이면 숨기고, 숨겨져 있으면 노출 $("요소선택").slideUp() --- 선택 요소를 말아 올라가듯 숨김 $("요소선택").slideDown() --- 선택 요소를 말아 내리듯 노출 $("요소선택").slideToggle() --- 위의 slideUp/slideDown 효과를 번갈아 적용 $("요소선택").fadeOut() --- 선택 요소를 서서히 사라지게 함 $("요소선택").fadeIn() --- 선택 요소를 서서히 나타나게 함 $("요소선택").fadeToggle() --- 위의 fadeIn/fadeOut 효과를 번갈아 적용 $("요소선택").fadeTo() --- 선택 요소를 원하는 만큼 투명화시킴
        
        효과 메서드에는 속도와 콜백함수를 입력하는데, 입력값에 따라 효과의 진행 속도가 달라진다. 속도는 slow, normal, fast 등의 문자형식이나 시간(milliseconds)을 표시하는 숫자형식을 사용할 수 있다. 콜백함수란, 효과의 진행이 끝난 뒤에 실행되는 함수이다.
        
        [기본형식]
        
        $("선택 요소").hide("속도", 콜백함수);
        
        ※속도 : slow, normal, fast 또는 milliseconds(천분의 1초, <예> 1000 = 1초) ※콜백함수 : 메소드가 모두 완료된 후에 실행될 함수(생략 가능)
        
        애니메이션(Animation)
        
        선택 요소를 움직이거나 크기를 변형시킬 때에는 애니메이션 효과를 적용한다.
        
        다음 [기본형식] 과 같이 반응 속도에 따라 애니메이션 진행 속도는 달라진다. 콜백함수는 애니메이션 효과의 진행이 끝난 후 실행되는 함수이며, 역시 생략할 수 있다.
        
        [기본형식]
        
        $(선택요소).animatee({애니메이션 속성}, 반응속도, 콜백함수);
        
        ※반응속도 : slow, normal, fast 또는 millisecond(천분의 1초, <예. 1000 = 1초0 ※콜백함수 : 메소드가 모두 완료된 훙에 실행될 함수(생략 가능)
        
        애니메이션의 구현을 위해서는 '방향(top, left, bottom, right)'이나 '크기(width, height)', '위치(position)'에 대한 옵션이 필요하며 경우에 따라 투명도(opaacity)를 조정하기도 한다.
        
        Tip 버튼을 여러 번 클릭하면 요소가 혼자서 움직인다. 이런 현상을 어떻게 막을 수 있을까? 요소를 클릭한 수만큼의 '실행 명령'이 메모리의 대기열(queue, 큐)에 쌓여서 다시 버튼을 누르지 않아도 대기 중이던 효과들이 모두 진행되는 현상이다. 이를 막으려면 clearQueue 메서드로 큐를 비우거나 stop 메서드로 강제 종료해야 한다. ※clearQueue() : 큐에 쌓인 효과들을 삭제한다. ※stop() : 현재 진행 중인 효과를 정지시킨다.
        
        제이쿼리 모바일(jQuery Mobile)
        
        제이쿼리(jQuery)는 데스크탑 PC 환경의 웹 브라우저에 최적화된 기능을 제공한다. 그래서 최근 급성장하는 스마트폰이나 태블릿 등의 모바일 기기에서는 구현할 수 없는 기능들이 존재한다. 예를 들어, 우리가 앞에서 학습한 이벤트 중에는 스마트폰이나 태블릿에서의 기본적인 입력 방식인 '스크린 터치'와 관련된 이벤트가 없었다.
        
        하지만 '제이쿼리 모바일(jQuery Mobile)'을 사용하면 스마트폰이나 태블릿 등 모바일 기기에 최적화된 췝 프레임워크를 제공받을 수 있다.
        
        제이쿼리 모바일 준비과정
        
        우선 제이쿼리 모바일 홈페이지 www.jquerymobile.com 에 접속한다.
        
        제이쿼리 라이브러리를 다운로드 했듯 이제 '제이쿼리 모바일 라이브러리(library)'를 설치해야 하는데, 이 또한 제이쿼리와 비슷하게 링크를 사용하여 라이브러리 파일을 연동하는 CDN 호스트 링크 방식과 직접 다운로드하여 연동하는 방식 등 2가지를 제공한다.
        
        다음과 같이 요소 안에 css와 js파일을 연동시키면 되는데, 주의할 점은 제이쿼리 라이브러리 연동이 제이쿼리 모바일에 대한 것보다 상위에 위치해야 한다는 것이다.
        Page Title
        
        제이쿼리 모바일 기본 구조
        
        제이쿼리 모바일 기본 구조는 다음과 같이 각 영역에 data-role 속성으로 역할 표시를 한다. data-role값으로는 한 페이지의 전체 영역을 의미하는 'page'와 페이지 내부에서의 영역 구분을 위한 'header', 'content', 'footer' 등이 있으며, 모두
        로 둘러싸게 된다.
        
        [기본 구조]
        
        메인 타이틀 컨텐츠 내용 영역 푸터 영역
        
        다음은 페이지를 2개로 나누어 작성한 예이다. 각각 'mainPage'와 'subPage1'라는 id를 부여한
        를 작성하고 'data-role'을 'page'로 작성함으로써 서로 다른 페이지가 된다.
        
        jquery mobile메인 타이틀 서브 페이지1 풋터영역 sub1 타이틀 컨텐츠 내용 영역 풋터영역
        
        이제, 첫 페이지의 컨텐츠 영역에 있는 '서브페이지1'이라는 링크를 터치하면 slidedown 효과가 자동으로 적용되어 다음 페이지가 위에서 미끄러지듯이 내려오고, 서브페이지가 열리면 상단에는 [뒤로 가기]버튼이 배치된다. 또한, 'data-theme'은 디자인에 관련된 '테마' 기능으로, a~z까지 제공하므로 연습 시 활용해 볼 수 있다.
        
        제이쿼리 모바일 이벤트
        
        제이쿼리 모바일은 스마트폰, 태블릿 등 모바일 환경에 특화된 이벤트를 제공한다.
        
        tap --- 스크린에서 선택 요소를 터치할 때 발생 taphold --- 스크린에서 선택 요소를 오래 터치할 때 발생 swipe --- 스크린에서 선택 요소를 좌/우로 문지를 때 발생 swipeleft --- 스크린에서 선택 요소를 좌측으로 문지를 때 발생 swiperight --- 스크린에서 선택 요소를 우측으로 문지를 때 발생 orientation --- 모바일, 태블릿 기기의 방향을 전환할 때 발생 가로가 긴 방향인 경우 'Landscape' 반환 / 세로가 긴 방향인 경우 'Potrait' 반환 vmouseover --- 선택 요소를 터치하거나 마우스가 오버될 때 발생 vmouseout --- 선택 요소를 터치하거나 마우스가 아웃될 때 발생

문서 객체(Document Object Model)

Tue, 08 Feb 2022 08:43:17 GMT

※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 바탕으로 작성되었음

문서 객체(Document Object Model)

DOM(Document Object Model)이란 '문서 객체'들을 일컫는다. 웹페이지의 구조는 이 모든 태그들을 감싸고 있으며, 그 내부는 다시 각종 설정과 선언으로 이워진 요소와 본문 내용이 모두 담긴 요소로 나누어진다. 그리고 요소로 나누어진다. 그리고 요소 안에는

 등의 요소들이 배치된다.
선택자
특정 문서 요소(객체)에 스타일을 적용하거나 삭제하려면 그 문서 요소에 접근하는 방법을 알아야 한다. 요소 선택자에는 '원거리 선택자'와 '근거리 선택자'가 있다.
_요소에 포함되는 id 속성 또는 요소(태그)명 등을 이용하여 직접 접근_하는 방식을 원거리 선택자라고 하며, _선택된 요소를 기준으로 그 가까운 요소를 선택_하고 싶을 때에는 근거리 선택자를 이용한다.
일반적으로, 요소에 접근할 때에는 우선 원거리 선택자를 이용하여 접근한 후 근거리 선택자를 이용하여 그 관련 요소들을 선택한다.
다음 실습예제를 통하여 원거리 선택자와 근거리 선택자에 대해서 상세히 알아보자.
예제1

  
    선택자
    원거리 선택자
    
      getElementById
      getElementsByTagName
    
    근거리 선택자
    
      parentNode
      childNodes
      children
      firstChild
      previousSibling
      nextSibling
    
  
 
원거리 선택자
크게 'id 선택자(getElementById)'와 '요소명 선택자(getElementsByTagName)'가 있다.
id 선택
태그에 지정한 id 속성값을 이용하여 특정 요소에 접근할 수 있는 선택자이다.

**선택대상.getElementById("아이디명");
그럼, 예제1에서 연습한 HTML 중 'title'이라는 id의 
요소에 접근한 후 다음과 같이 스타일을 적용하여 그 내부 텍스트의 폰트 색상을 바꿔 보도록 하자.
var myObj = **document.getElementById("title");        //아이디를 이용하여 요소 선택
myObj.style.color = "#f00";                            //폰트 색상 스타일 적용
단, 7과 '이벤트'에서 언급했듯 자바스크립트는 늘 보다 앞서는  영역에 정의되어 문서 요소들을 불러오기 전에 실행되므로,  내 요소들에 대한 선택자를 사용할 때에는 반드시 '전체 문서를 로딩 후 실행'하라는 이벤트 조건을 등록해야 한다.
function loadFnc() {
  var myObj = **document.getElementById("title");        //id를 이용하여 요소 선택
  myObj.style.color = "#f00";
}
if(window.addEventListener){
  window.addEventListener("load", loadFnc, false);        //표준 방식 브라우저
}else id(window.attachEvent){
  window.addEventListener("onload",loadFnc);            //IE8 이하 버전
}
요소(태그)명 선택자
요소(태그)명을 이용해서 접근할 수 있는 선택자인데, 이때 같은 이름의 태그들이 여럿 존재하면 이들이 모두 '배열'로 저장된다. 따라서 getElements와 같이 's'가 붙는다.

선택대상.getElementsByTagName("태그명");
우선 예제1의 HTML 중 첫 번째 
요소에 접근한 후, 그 하위 요소 중 두 번째  요소에 border(경계선)를 생성해 보자.
var myList = **document.getElementsByTagName("ul");** --- 1. ul 요소들 선택
var myObj = **myLest[0].getElementsByTagName("li")[1];** --- 2. ul > li 요소들 선택
myObj.style.border = "solid 1px #f00"; --- 3. 선 스타일 적용

myList = document.getElementsByTagName("ul");

예제1*의 HTML을 보면 
요소가 모두 2개가 존재한다. 따라서 myList라는 변수는 자동으로 배열 객체가 되며 다음과 같이 요소 2개가 차례로 저장된다.



myList* = 0 : 
 / 1 : 

var myObj = myList[0].getElementsByTagName("li")[1];
MyList에는 
요소 객체 2개가 저장되어 있다. 여기서 0번 인덱스(첫번째)의 요소를 '선택대상'으로 삼은 후, 그 하위에 있는 요소들 중 1번 인덱스(두번째)를 선택했다. 그렇게 선택된 
요소를 myObj라는 이름으로 저장한 것이다.

myObj.style.border = "solid 1px #f00";
지정된 
요소에 1px 두께와 빨간색(#f00) 선(border)을 실선(solid)으로 생성한다.


그럼, 한 번만 더 해보자
이번에는 두 번째 
요소의 하위 요소 중 네 번째 요소 안에 포함된 'firstChild'라는 텍스트의 색을 파란색으로 바꿔보자.
바로 앞에서와 같이 '요소명 선택자'를 활용해 배열로 저장하고 인덱스 번호를 통해 다시 한 번 골라내는 식으로도 가능하지만, 잘 살펴보면 우리가 접근해야 할 두 번째 
요소에는 미리 'list'라는 id를 부여해뒀다.
즉, 먼저 'id명 선택자(getElementById)'로 'list'라는 id의 
요소를 변수로 저장(예:listZone)한 후, 비로소 그 아래의 요소들을 '요소명 선택자(getElementsByTagName)'를 활용하여 배역 객체(예:listObj)로 저장한다.
그럼 다음과 같은 배열 객체가 되는데, 이 중 'firstChild'라는 텍스트를 지닌 
 요소는 네 번째 
이므로 아래에서와 같이 인덱스 3번([3])을 선택하면 되겠다.


listObj = 0 : 
 / 1 : 
 / 2 : 
 / 3 : 
 / 4 : 
 / 5 : 

그리고 마지막으로 스타일을 적용하면 된다. 이 모든 과정을 적용한 스크립트는 다음과 같이 작성하면 되겠다.
var listZone = **document.getElementById("list");** --- 1. id가 'list'인 요소 선택
var listObj = **listZone.getElementsByTagName("li")[3];** --- 2. ``중 인덱스 3번 선택
listObj.style.color = "blue"; --- 3. 선택 요소에 글자색 적용
근거리 선택자
특정 요소를 기준으로 상대적인 다른 요소를 선택할 때 사용하며, 다음과 같다.


parentNode --- 선택된 요소 기준으로 부모 요소를 선택할 때 사용
childNodes --- 선택된 요소 기준으로 자식 요소를 선택할 때 사용
children --- 선택된 요소 기준으로 자식 요소를 선택할 때 사용
firstChild --- 선택된 요소 기준으로 첫 번째 자식 요소를 선택할 때 사용
lastChild --- 선택된 요소 기준으로 마지막 자식 요소를 선택할 때 사용
previousSibling --- 선택된 요소 기준으로 형제 요소 중 이전 요소를 선택할 때 사용
nextSibling --- 선택된 요소 기준으로 형제 요소 중 ㄷ다음 요소를 선택할 때 사용
tagName (속성) --- 선택된 요소의 태그명을 반환(요소 노드의 속성)
nodeValue (속성) --- 선택된 요소의 텍스트를 반환(텍스트 노드의 속성)
parentNode(부모 요소 선택자)
id가 'list'인 
요소를 시준으로  그 상위의  요소에 '근거리 선택자'를 통해 접근하려면 parentNode(부모 요소)를 사용할 수 있다.
document.getElementById("list").parentNode; → ``요소
그럼, 
의 입장에서는 전체를 감싸는 도 부모가 아닐까?
그렇지 않다. 부모 요소는 오로지 '바로 상위'의 한 개만 존재한다. 따라서 에게는 오로지 만 부모가 될 수 있다.
childNodes(자식 요소 선택자)
역시 id가 'list'인 
요소를 기준으로 그 하위의 들을 '근거리 선택자'로 접근하려면 'childNodes 또는 children'을 사용한다. 먼저 childNodes의 사용법은 다음과 같다.
childObj = document.getElementById("list").chiildNodes; → ``요소 6개(배열)
이때, 표준 방식 브라우저에서는 인덱스 0,2,4,6,8,10,12번 저장소에 공백 문자가 저장되지만,


childObj = 0:" " / 1:
 / 2:" " / 3:
 / 4:" " / 5:
 / 6:" " / 7:
 / 8:" " / 9:
 / 10:" " / 11:
 / 12: " "
비표준 방식 브라우저(IE8 이하 버전)에서는 다음과 같이 공백을 무시한다.


childObj = 0:
 / 1:
 / 2:
 / 3:
 / 4:
 / 5:

위와 같이 서로 다르게 저장되는 이유는 무엇일까?
선택자가 호환되지 않아서인데, 먼저 다음의 HTML 코드를 보도록 하자.
 (Enter)
  parentNode (Enter)
  childNodes (Enter)
  children (Enter)
  firstChild (Enter)
  previousSibling (Enter)
  nextSibling (Enter)

태그를 작성할 때에는 기본적으로 줄바꿈을 하게 되는데, 이런 상태에서 childNodes를 사용하면 표준 방식의 브라우저는 저 줄바꿈 하나를 모두 '공백 문자'로 인식하여 자식 요소로 가져오는데, IE8 이하 버전에서는 줄바꿈을 무시하게 되어 있는 것이다.
그럼 표준 브라우저에서의 호환을 위해 태그를 모두 붙여서 써야 할까? 그럼 코드의 가독성이 떨어질 것이다. 이런 문제로 childNodes 대신 children이 존재하는 것이다.
children(자식 요소 선택자)
그럼 이번에는 childNodes와 같은 자식 요소 선택자, children의 사용법을 보도록 하자.
childObj = document.getElementById("list").children;
children은 childNodes와 달리 줄바꿈을 무시하고 다음과 같이 요소 노드만 선택한다.


childObj = 0:
 / 1:
 / 2:
 / 3:
 / 4:
 / 5:

이때 childObj 배열 변수에 저장된 요소명을 출력해보자
for(var i = 0; i < childObj.length; i++){
  document.write(childObj[i].tagName + "
");
}


출력값
Li
Li
Li
Li
Li
이렇게, 호환성을 위해 자식 요소들을 선택해야 할 때에는 chidren을 권장한다.
firstChild(첫 번째 자식 요소 선택자)
childNodes나 children과 같이 자식 요소 모두를 배열로 선택하는 것이 아니라, 여러 자식 요소 중 첫 번째만 '근거리 선택자'로 접근할 때에는 firstChild 선택자를 이용한다.
document.getElementById("list").firstChild;
이때에도 역시 표준 방식 브라우저에서는 HTML 태그 내의 줄바꿈을 공백 문자(텍스트)로 인식하여 첫 번째 자식 요소로서 가져온다. 그러나 IE8 이하 버전에서는 줄바꿈을 무시한 채 정상적인 첫 번째 
 요소를 가져오게 된다.
그럼 호환이 되지 않는 firstChild에 대한 해결 방법은 없을까?
결국, children을 이용해 0번 인덱스 요소를 가져와야 한다.
document.getElementById("list").children[0];
lastChild(마지막 자식 요소 선택자)
앞서 firstChild와 반대로 마지막 자식 요소만 선택할 때에는 lastChild 선택자를 사용한다.
document.getElementById("list").lastChild;
하지만, lastChild 역시 표준 방식 브라우저에서의 호환성 문제가 생긴다. 따라서 이때에도 역시 children을 사용해 자식 요소들을 배열로 가져온 후, 그 마지막 인덱스 번호를 통해 마지막 자식 요소를 가져와야 하겠다. 자식 요소가 모두 몇개인지 잘 모를 경우, 먼저 해당 배열 변수의 마지막 인덱스 번호를 구한(length-1 메서드) 후 활용하면 된다.
var lastNum = document.getElementById("list").children.length-1; // 요소갯수-1
document.getElementById("list").children[lastNum];
prevSibling(이전 형제 요소 선택자)
대상 요소와 같은 등금에 해당하는 요소들(형제 요소들) 중, 대상 요소의 바로 앞 요소를 선택할 때 prevSibling 선택자를 사용한다. 여기서는 예제1의 HTML 요소 중 id값이 'title'인 
요소를 기준으로, 바로 앞의 형제 요소를 선택해 보겠다.
var prev = document.getElementById("title").previousSibling;
그런데 이 prevSibling 선택자 역시 브라우저의 종류에 따라 결과가 다르다. 이유는 앞에서와 마찬가지로, 태그 사용 시의 줄바꿈을 '공백'이라는 하나의 '문자(텍스트)'로서 인식하는 표준 방식 브라우저들의 처리 방식 때문이다.
이런 이유로 자식 요소를 구해오는 childNodes를 비롯해 firstChild와 lastChild까지, 모두 호환성 문제의 해결을 위해 children을 활용하여 문제를 해결해봤지만, '형제' 요소에 대해서는 children 조차 해답이 될 수 없다.
따라서, 이제는 보다 _원론적인 해결책_인 '노드 타입'의 활용법에 대해 알아보자.
노드 타입(node Type)
어떤 노드가 '요소(객체)'와 '속성', 혹은 '텍스트' 중 어떤 종류인지 나누는 기준을 '노드 타입'ㅇ라고 한다. 각 노드 타입은 그 종류에 따라 다음과 같이 다른 값을 지닌다.


요소 노드 --- 1
속성 노드 --- 2
텍스트 노드 --- 3
바로 앞 'prevSibling' 선택자에서 예로 든 변수 'prev'를 다음과 같이 출력해 보면, 표준 브라우저에서는 '공백 문자'로 저장되어 노드 타입 값이 '3'으로 출력된다. 반면, 비표준브라우저(IE)에서는 
요소(객체)가 저장되어 그에 맞게 '1'이 출력되겠다.
var prev = document.getElementById("title").previousSibling;
document.write(prev.nodeType);                // 출력값 : 표준 = 3, 비표준 = 1
이 '노드 타입'을 활용하여, 그 값이 '요소(객체)'에 해당하는 '1'이 될 때까지 prevSibling(이전 형제 요소 선택자)이나 다음에 학습할 nextSibling(다음 형제 요소 선택자)을 반복 실행하도록 하면 원하는 요소를 선택할 수 있을 것이다.
var prev = document.getElementById("titlt").prevSibling;        // 1. prevSibling 선택자
while(prev.nodeType != 1){                                        // 2. '요소'가 아니면 반복
  prev = prev.previousSibling;
표준 브라우저에서는 prev 변수에 공백 문자가 저장될 것이므로(노트 타입 3) while문 조건을 만족하여 반복문을 실행하게 된다. 이때 실행문은 다시 prevSibling 선택자를 적용시키고, 그 결과 
요소 노드가 선택되어 prev에 저장된다. 그 후에 다시 while 문으로 조건을 검사하면 노드 타입이 '1'로 인식되어 반복을 마치게 되는 것이다.
nextSiblibng(다음 형제 요소 선택자)
특정 요소를 기준으로 그 형제 요소들 중 바로 다음 요소를 선택하려면 nextSibling 선택자를 사용한다. 기본적인 사용법은 앞에서 학습한 'prevSibling'의 경우와 같다.
var next = document.getElementById("title").nextSibling;
이 또한 호환성 문제를 지니므로, 역시 '노드 타입'을 활용한 반복문으로 해결한다.
var next = document.getElementById("title").nextSiblibng;        // 1. nextSibling 선택자
while(next.nodeType != 1){
  prev = prev.nexSibling;
}
문서 객체 조작
지금까지 문서 내의 요소를 선택하는 방법을 연습했다면, 이제는 문서에 새로운 요소를 직접 생성하여 추가, 삭제, 복제하는 방법에 대해 알아보자.
문서 객체 조작에 관련된 메서드


생성

creatElement("요소명") - 새 요소의 생성
appendTextNode / createTextNode("텍스트") - 새 텍스트의 생성


추가

선택 요소1.appendChild(새 요소, 선택 요소2) - '선택 요소1'에 새로운 자식 요소를 추가
선택 요소1.insertBefore(새 요소, 선택 요소2) - '선택 요소1'의 자식인 '선택 요소2' 앞에 새로운 자식 요소를 추가


교체

선택 요소1.replaceChild(새 요소, 선택 요소2) - '선택 요소1'의 자식인 '선택 요소2'를 새 요소로 덮어씌움


삭제

선택 요소1.removeChild(선택 요소2) - '선택 요소1'의 자식인 '선택 요소2'를 삭제


복제

선택 요소.cloneNode(true or false) - '선택 요소'를 복제하여 true인 경우에는 하위 요소까지 모두 복제


속성부여

선택 요소.setAttribute("속성", "값") - '선택 요소'에 해당 속성값 부여

문서 요소의 생성 순서



문서에 필요한 요소들에 대해 알아본다.
요소 1개와 그 하위의 요소 2개, 텍스트 2개가 필요하다고 가정하자.
리스트1
리스트2


필요한 객체들을 생성한다.
creatElement 메서드를 사용하여 새 요소를 생성한다. 그리고 creatTextNode 혹은 appendTextNode 메서드를 사용하여 텍스트 객체를 생성한다.
생성된 객체를 구조화한다.
요소에 텍스트를 자식 요소로 추가하고, 
요소들을 요소에 자식 요소로 편입시킨다.
문서의 요소 내에 완성된 요소를 추가한다.

그럼, 다음의 두 코드를 보며 생략되었던 버튼을 생성해보자.

  
    요소 생성 연습.
  


  
  

다음 실습을 통해 문서 객체를 생성하고 구조화하여 HTML에 추가하여 보겠다.

그럼 이번에는, 실습을 통해 insertBefore, removeChild, cloneNode에 대해 알아보자.

  문서 객체 조작
  
    리스트2
    리스트3
    리스트4
    리스트1
  

우선 위 HTML 중 
리스트
을 복제 후 삭제한다. 그리고 복제한 요소를 리스트2 이전으로 추가해야 보기 좋겠다.

    // 2. 기존의 리스트1을 삭제한다.
    theList.removeChild(listAll[3]);



Javascript_브라우저 객체(Browser Object Model)
Mon, 07 Feb 2022 08:28:01 GMT
※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 바탕으로 작성되었음
브라우저 객체(Browser Object Model)
BOM(브라우저 객체 모델)이란 **브라우저 창에 포함된 모든 객체 요소들을 의미한다. 브라우저에는 URL 주소에 대한 정보를 제공하는 'location' 객체, 현재 실행 둥인 브라우저에 대한 정보(브라우저명, 코드명 등)를 제공하는 'navigator' 객체, 브라우저의 방문 기록에 대한 정보를 제공하는 'history' 객체 등이 있따.
단, 브라우저라는 것도 결국 창(윈도우) 안에서 실행되는 프로그램이므로, 위의 모든 개별 객체들은 최상위 객체인 window(창) 아래에 존재한다. 그럼 이번 과에서는 각 브라우저 객체 별 역할과 기능(메서드), 속성에 대해 살펴보자.
브라우저 객체의 종류


window

document --- 문서 객체이며, 하위에 form, cookie, images 등이 존재
navigator --- 브라우저에 대한 정보를 제공하는 객체
location --- 위치(url)관련 정보를 제공하는 객체
scrreen --- 스크린(모니터)에 대한 정보를 제공하는 객체
history --- 인터넷 방문 기록에 대한 정보를 제공하는 객체

window
모든 객체의 최상위 객체이며, 새 창을 생성하는 역할 등을 한다. 다음은 window 객체의 메서드들이다.


open("경로", "창이름", _"※옵션"_) --- 새 창으로 문서를 열 때 사용
alert("문자") --- 경고창을 열 때 사용
prompt("질문", "기본응답") --- 질문/응답창을 열 때 사용
confirm("질문") --- 확인/취소창을 열 때 사용
setTimeout(실행문, 간격시간) --- 해당 간격시간 뒤에 실행문을 한 번만 수행
setinterval(실행문, 간격시간) --- 해당 간격으로 실행문을 반복적으로 수행
=> window 객체 생략 가능


※ open 메서드의 옵션종류
width --- 새 창의 너비 (px, 픽셀 단위)
height --- 새 창의 높이 (px, 픽셀 단위)
left --- 새 창을 열 때 스크린 기준 좌측 위치 (px, 픽셀 단위)
top --- 새 창을 열 때 스크린 기준 상단 위치 (px, 픽셀 단위)
scrollbars --- 스크롤바의 생성 여부 (값은 yes or no)
menubar --- 메뉴 바의 노출 여부 (값은 yes or no)
toolbar --- 도구상자의 노출 여부 (값은 yes or no)
location --- 주소표시줄의 노출 여부 (값은 yes or no)
status --- 상태표시줄의 노출 여부 (값은 yes or no)
resizeable --- 창의 사이즈 조정 가능 여부 (값은 yes or no)
다음은 window객체의 open 메서드를 활용한 팝업창 띄우기이다.

  
  
    
  




  opener페잊지

위 실습 예제는 본 페이지(오프너)와 팝업으로 열릴 'popup1.html' 페이지의 내용이다.
navigator
navigator는 브라우저에 대한 정보를 제공하는 객체이며, 다음과 같은 속성들이 존재한다.


appCodeName --- 브라우저의 코드명을 제공
appName --- 브라우저의 이름을 제공
appVersion --- 브라우저의 기본 버전과 실행 중인 플랫폼 정보를 제공
userAgent --- 브라우저의 전체적인 정보를 제공
다음은 navigator 객체의 각 속성들을 출력해 본 것이다.

이처럼 navigator 객체의 'userAgent' 속성을 이용하면 현 운영체제에 대한 정보를 얻을 수 있으므로, 현재 사용자의 기기가 데스크탑 PC인지 모바일 기기인지를 파악할 수 있다.



  PC버전 페이지

location
location 객체는 브라우저의 현재 URL 주소값에 대한 정보를 제공한다. location 객체의 속성들은 다음과 같다.


location.hash --- 주소창에 URL에서 #뒤에 오는 문자열을 반환
location.host --- 주소창에 URL에서 도메인명을 반환
location.hostname --- 주소창에 URL에서 도메인명을 반환
location.href --- 주소창에 URL에서 전체 정보를 반환
location.pathname --- 주소창에 URL에서 메인명 다음에 오는 겨오를 반환
location.port --- 주소창에 URL에서 포트번호를 반환
location.portcol --- 주소탕에 URL에서 프로토콜을 반환
screen
screen 객체는 스크린(모니터)에 대한 속성을 제공하는 객체이다.


availWidth --- 사용 가능한 스크린 가로 너비값을 반환
availHeight --- 사용 가능한 스크린 세로 높이값을 반환
availTop --- 창이 위치할 수 있는 최상위의 위치값을 반환
availLeft --- 창이 위치할 수 있는 가장 좌측의 위치값을 반환
각각의 속성에 해당하는 값을 다음의 실습을 통해 알아보도록 하자.



출력값 예시
스크린 너비값 1920
스크린 높이값 1048
스크린 가장 좌측 위치값 0
스크린 가장 상단 위치값 0
availHeight(사용 가능한 스크린 높이값)는 작업표시줄 제외한 높이를 반환한 것이다.


비 IE 계열 브라우저들만의 전용 속성 availLeft, availTop
screen 객체의 속성 중 'availLeft'와 'availTop'은 비 IE 계열 브라우저(파이어폭스, 크롬 등)들만의 전용 속성으로, 만약 위의 코드를 IE에서 실행하면 availLeft와 availTop의 값은 'undefined(확인되지 않음)'로만 출력된다.
history
브라우저로 방문한 페이지들의 정보를 제공하며, 메서드를 사용하여 '이전' 및 '다음'과 같은 페이지 이동을 위한 버튼을 만들 수도 있다.


go(값) --- 값만큼 다음 또는 이전 페이지로 이동한다.
back() --- 이전 페이지로 이동한다.
forward() --- 다음 페이지로 이동한다.



  첫 페이지
  두번째 페이지로 이동



  두번째 페이지
  마지막 페이지로 이동
  
  
  


```html

  마지막페이지
  
  



Javascript_이벤트(Event)
Fri, 04 Feb 2022 09:26:42 GMT
※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 토대로 작성됨
이벤트(Event)
우리가 사용하는 브라우저들은 사용자가 띄운 웹 문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(버튼, 이미지 등)로 구조화한다. 각 요소들은 상, 하위 구조나 병렬구조 등으로 체계화되는데 이렇게 정리된 체계를 소위 DOM(Document Object Model, 문서 객체 구조) 이라고 부른다. 자바스크립트는 브라우저가 생성한 이 DOM 구조를 통해 각 요소와의 상호작용을 가능하게 함으로써 웹 페이지가 보다 인터렉티브하게 작동하도록 돕는 것이다.
이런 DOM 구조와의 상호작용에서 가장 빈번하게 사용되는 방법이 바로 '이벤트'이다. 웹 브라우저에서 일어나는 모든 행동들을 '이벤트(Event)'라고 하는데, 우리는 실제 앞에서 '클릭(Onclick)'이라는 이벤트를 사용해 보기도 했다. 이렇게, 특정 이벤트가 발생하는 시점에서 함수를 호출하거나 스크립트를 실행하게 하는 요소를 '이벤트 핸들러'라고 부른다.
그럼 다양한 이벤트 종류에 대해 표로 정리해 보자.


onload --- 문서를 모두 불러오고 나서 발생
onunload --- 문서를 종료할 때 발생
onclick --- 대상을 클릭했을때 발생
ondblclick --- 대상을 더블 클릭했을 때 발생
onkeypress --- 키보드를 눌렀을 때 발생
onkeydown --- 키보드를 눌렀을 때 발생
onkeyup --- 키보드를 누르고 떼었을 때 발생
onmouseover --- 대상에 마우스를 올렸을 때 발생
onmouseout --- 대상에서 마우스가 벗어났을 때 발생
onfocus --- 대상에 포커스가 생겼을 때 발생
onblur --- 대상에서 포커스를 잃었을 때 발생
onsubmit --- 전송(sibmit)버튼을 눌렀을 때 발생
onreset --- 취소(reset)버튼을 눌렀을 때 발생
onchange --- 입력요소의 값이 바뀌고, 포커스가 옮겨졌을 때 발생
onmousemove --- 마우스를 움직일 때마다 발생
onresize --- 브라우저의 창을 조절할 때마다 발생
onerror --- 문서나 이미지를 불러올 때 에러가 나면 발생
onabort --- 문서를 불러오다가 중단되면 발생
이벤트 핸들러 사용법
이벤트 행들러를 사용하는 방법에는 태그에 직접 입력해서 사용하는 '행 입력형' 방식과 태그와 완전히 분리를 해서 사용하는 '외부 분리형' 방식이 있다. 2가지 중 어떤 것을 사용해도 크게 상관은 없지만 혹시 스크립트를 모르는 개발자가 잘못 건드리면 작동하지 않을 수도 있으므로 관리 차원에서 아예 분리하여  영역 밖으로 빼는 것이 좋다.
이벤트 행 입력형 방식

  

이벤트 분리형 방식
수정 전(잘못된 사용)



  


var myBtn = document.getElementById("btn1");
현재 html문서에 자바스크립트 선언문이 보다 위에 있으므로 getElementById 선택자를 이용해서 요소를 가지고 올 수 없다. 그럼 어떻게 해야 할까? 현재 문서의 요소들을 모두 로딩된 후에 선택자를 실행하면 해결되겠다.

myBtn.onclick = theFnc;
선택한 버튼 요소를 클릭했을 때 theFnc함수를 호출한다.


수정 후(올바른 사용)


window.onload = function(){ 실행문; }
현재 브라우저의 모든 요소들을 로딩한 후에 함수문을 실행하라는 의미이다. 말 그대로, 함수의 실행을 에 담긴 문서 내용 모두가 로드된 후로 미워두라는 것인데, 이렇게 수정하면 앞서 진행한 '행 입력형 방식'과 동일한 결과화면을 얻을 수 있다.

기존 방식(DOM Level 0) 이벤트의 문제점
위의 예와 같이, 객체에 이벤트를 직접 연결하여 작동하게 하는 고전적인 방식을 'DOM Level 0'이라고 한다. 객체 하나와 이벤트 하나를 연결하여 작동하는 이 방식은 한 객체에 동시에 같은 이벤트를 두 번 이상 적용할 수 없다는 문제를 안고 있다. 한 객체에 같은 이벤트를 두 번 이상 적용하게 되면 제일 마지막에 적용된 이벤트만 실행되는 것이다.



  
  

위 예제에서는 'window' 객체에 'onload' 이벤트 핸들러가 2번 적용되었다. 그러므로 마지막에 적용된 이벤트만 실행된다. 
DOM Level 2 방식 이벤트
한 객체에 같은 이벤트를 두 번 적용할 수 없는 'DOM Level 0'방식의 불편함을 해결하기 위해 개발된 방식이 바로 'Level 2'이다. 하지만 W3C(국제 웹 컨소시업)의 '웹 표준안'과 다른 독자정 구현 방식을 가진 마이크로소프트(Microsoft)社의 '익스플로러(MS Explorer, 이하 IE)'가 가장 많은 사용자를 지닌 사실상의 '표준 브라우저'로 지위를 갖게 되면서, 정확한 이벤트 구현을 위한 이벤트 등록 메서드가 서로 달라진다는 불편함이 생겼다.
결국, DOM Level 2 방식으로 구현한 이벤트를 모든 웹 사용자에게 정확하게 보이려면 표준(W3C)을 따르는 크롬, 파이어폭스, 사파리 등이나 비표준 방식으로 작동하는 IE8 이하 버전의 브라우저 등에서 모두 정상 작동하도록 구분자(if/else if)를 나눠 작성해야 한다.
표준(크롬, 파이어폭스 등)과 비표준(IE8 이하)을 구분하는 이벤트 등록은 다음과 같다.


if(window.addEventListener){ --- 표준 방식 브라우저(크롬, 파이어폭스 등)일 경우
  표준 이벤트 등록 메서드;
}else if(window.attachEvent){ --- 비표준 방식 브라우저(IE8 이하)일 경우
  비표준 이벤트 등록 메서드;
}

표준 방식의 브라우저인 경우 window.addEventListener에 이벤트 등록 메서드가 존재하며, IE8 이하 버전의 경우에는 window.attachEvent에 이벤트 등록 메서드가 존재한다. 다시 말해, 사용자의 브라우저가 표준 방식이라면 if문, 비표준 방식 브라우저라면 else if문을 만족하도록 작성하는 것이다.
표준 방식 브라우저(파이어폭스/크롬/사파리)에 대한 이벤트 등록방법



  이벤트대상.addEventListener("이벤트명", 함수명, false)


가령, 특정 '버튼'을 '클릭'했을 때 'theFnc라는 함수를 호출'하고 싶다면, 이벤트대상은 그 '버튼'이고, 이벤트명은 'click'이며, 호출할 함수명은 'theFnc'가 되는 것이다.
마지막 인자값 false는 이벤트 요소가 위, 아래로 나열될 때 해당 이벤트를 끝내고 다음 이벤트로 넘기는 역할을 한다. 인자값 false가 포함되면 해당 이벤트가 발생한 위치에서 멈추고 아래로 진행되는데, 이를 '버블업' 방식이라고 부른다.
비표준 방식 브라우저(IE8 이하)에 대한 이벤트 등록방법



  이벤트대상.attachEvent("on" + "이벤트명", 함수명)


여기서 주의할 점은 인자값에 이벤트명을 입력할 떄 'on'을 붙여야 한다는 것이다. 그리고 버블방식의 설정(false)은 필요 없다.
다음은 앞에서의 DOM Level0 코드를 DOM Level2 이벤트 방식으로 바꿔 본 것이다.

㉠ window.addEventListener("load", clickBtn1, false);
㉡ window.attachEvent("onload", clickBtn1);
㉠, ㉡의 이벤트 등록 메서드들은 모두 "브라우저에 모든 요소들을 로딩한 후에 clickBtn1 함수를 실행하라"는 뜻이다. ㉠방식은 IE8이하에서는 지원되지 않으므로, 표준/비표준 등에 상관없이 모든 브라우저를 지원하기 위해서는 2가지 방식을 모두 등록해야 한다.
이벤트 객체 생성 및 속성
'이벤트 객체' 란 이벤트 핸들러가 구동될 때 생성되는 객체로서 '클릭'이나 '키보드 입력' 등의 동작 자체를 의미한다. 따라서 이벤트 객체에는 좌표나 특정 버튼입력 등에 관한 다양한 속성들이 존재하는데, 이러한 속성들을 활용하면 마우스를 클릭했을 때의 위치 정보는 물론 키보드의 특정 키 입력에 대한 키 코드값 또한 알 수 있다.
이벤트 객체 생성


선택대상.onclick = function(매개변수) {
매개변수(이벤트 객체).속성
}

특정 이벤트 핸들러를 구동하면, 함수의 매개변수에 이벤트 객체가 자동으로 생성된다. 단, 이는 사용자의 브라우저가 W3C의 표준안을 따르는 브라우저일 경우에 한한다. 즉, 비표준 방식의 브라우저(IE8 이하)를 사용 중이라면, 위와 같은 작성 방법만으로는 이벤트 핸들러를 구동하는 것만으로 매개변수에 객체를 자동 생성할 수 없다.
그러므로 보통의 경우, 앞에서 학습한 '조건 연산자'를 사용하여 이벤트 객체의 자동 생성 유·무를 먼저 매개변수에 확인한 후 생성되지 않은(IE8 이하) 경우라면 IE8 전용 이벤트 객체인 'window.event'를 강제 생성하도록 작성한다.
그럼, '조건 연산자'의 사용법을 다시 한 번 간단히 살펴본 후 모든 브라우저에서 이벤트 객체가 자동적으로 생성되도록 작성해 보겠다.('이벤트 객체 생성'의 호환성 유지)


조건 연산자(삼항 조건문)
조건식을 만족(true)하면 실행문1, 그렇지 않으면(false) 실행문2를 수행시키는 조건문
 ━
| 기본형식 |

  조건식 ? 실행문1 : 실행문2


<예>
var obj = "자바스크립트";
var theText = obj ? obj : "제이쿼리";
document.write(theText);
위와 같은 조건문을 작성한다고 가정하면, 현재 obj 변수에 '자바스크립트'라는 특정 값을 넣었으므로 'var theText = obj?'라는 조건식의 결과값은 true이다. 따라서, theText 변수에는 obj 변수의 값 '자바스크립트'가 저장되는 것이다.
이제, <예> 의 방식을 '이벤트 객체 생성(선택대상, 핸들러 = function(매개변수))'에 적용하는 원리는 다음과 같다.
조건 연산자를 활용하여 매개변수의 값 유·무를 확인한다. 즉, 표준 브라우저라면 생성식의 이벤트 핸들러만으로 이벤트 객체가 생성되었을 것이므로 그 변수값 그대로를 유지시키고, 비표준 방식의 브라우저(IE8 이하), 즉 이벤트 객체가 생성되지 않아 매개변수의 값이 없는 경우라면 그 변수값으로 'window.event'라는 이벤트 객체를 강제로 생성시킨다.


| 기본형식 |
선택대상.onclick = function(e) {
  theEvent = e ? e : window.event;
  console.log(theEvent.속성);
}


<예>
document.onclick = function(e) {
  theEvent = e ? e : window.event;
  console.log(theEvent.clientX);
}
앞의 <예> 는 다음과 같은 과정을 의미한다. 만약 표준 방식의 브라우저라면 웹 문서 내에서 '클릭'이벤트가 발생할 때에 이벤트 객체가 생성되어 매개변수에 담기고, 생성된 이벤트 객체는 조건 연산자의 조건식을 만족시켜 theEvent 변수로 저장된다. 물론, IE8 이하의 브라우저라면 강제 생성된 window.event 객체가 theEvent 변수에 저장되겠다. 이렇게 저장된 변수에 'clientX'라는 속성을 적용하여 현재 클릭한 마우스의 X값을 출력한 예이다.
이벤트 객체 속성


keydown, keypress

alrKey --- 키보드의 [alt]키가 눌렸을 때 true값 반환
shiftKey --- 키보드의 [shift]키가 눌렸을 때 true값 반환
ctrlKey --- 키보드의 [ctrl]키가 눌렸을 때 true값 반환
keyCode --- 입력된 문자키의 고유한 유니코드값을 반환한다.


click, mousemove, mouseover, mouseup, mousedown

clientX --- 현재 문서 기준, 이벤트가 발생한 X좌표(스크롤바 너비 계산 X)
clientY --- 현재 문서 기준, 이벤트가 발생한 Y좌표(스크롤바 높이 계산 X)
screenX --- 모니터 기준, 이벤트가 발생한 X좌표
screenY --- 모니터 기준, 이벤트가 발생한 Y좌표
pageX --- 현재 문서 기준, 이벤트가 발생한 X좌표(스크롤바 너비 계산 O)
pageY --- 현재 문서 기준, 이벤트가 발생한 Y좌표(스크롤바 높이 계산 O)
layerX --- position 속성값이 'absolute'인 레이어 안에서의 상대 X좌표
layerY --- position 속성값이 'absolute'인 레이어 안에서의 상대 Y좌표
target --- 이벤트가 발생한 대상 요소
button --- 마우스 버튼(왼쪽/오른쪽/휠)의 클릭된 상태 체크


all

type --- 이베트의 종류


  


  
    
    
    
    
    
    
  


theEvent.clientY 와 theEvent.pageY  차이점
페이지에서 가로/세로 스크롤바가 발생했을 경우, client는 그 스크롤바 높이를 계산하지 않고, page는 스크롤바 높이까지 계산하여 각각 위치값을 구한다.

theEvent.screenX
모니터 좌측 상단을 기준으로 좌표값을 구한다.


앞의 예제는 자바스크립트를 통해 사용자의 마우스 움직임에 따라 상호작용하는 예를 보인 간단한 예이다. 이렇게, 자바스크립트를 활용하면 사용자의 입력(키보드/마우스)에 따라 반응하는 재미있는 페이지를 구성해낼 수 있다.


비 IE 계열 브라우저들만의 전용 속성 pageX, pageY
이벤트 객체의 속성 중 'pageX'와 'pageY'는 비 IE 계열 브라우저(파이어폭스, 크롬 등)들만의 전용 속성으로, 만약 위의 코드를 IE에서 실행하면 pageX와 pageY의 값은 모두 'underfined(확인되지 않음)'로만 출력된다.
그럼, 이번에는 사용자의 키보드 입력에 반응하는 예를 작성해 보겠다. 다음은 특정 키코드값을 추적하여 이를 활용한 단축키(조합)의 작동을 구현한 예제이다.




Javascript_함수
Thu, 03 Feb 2022 00:32:55 GMT
※ 본 포스팅은  책『실전 프로젝트 반응형 웹 퍼블리싱』의 내용을 기반으로 작성하였음
함수(Function)
함수를 사용하게 되면 일련의 실행문들을 메모리에 저장했다가 필요할 때 해당 함수의 이름으로 다시 호출하여 사용할 수 있다.
가령 화장품 매장에 점원이 혼자 있는데, 손님이 올 때마다 "어서오십시오, 고객님!", 나갈 때는 "안녕히가십시오, 고객님!"이라고 매번 외치기 귀찮아졌다고 가정하자. 이때, 만약 특정 인사말이 출력되도록 버튼을 만들어 두어 손님이 들어올 때와 나갈 때마다 멘트를 녹음해서 틀어줄 수 있다면 이 점원의 입장에서는 편한 일일 것이다.
위 경우에서, 버튼을 누른 것은 자바스크립트로 치자면 함수의 호출에 해당하고, 그 버튼에 응하여 출력되는 음성은 호출에 응하여 불려오는 함수문이 될 것이다. 즉, 함수를 호출하면  함수에 저장되어 있던 특정 함수문이 불려와 실행되는데, 이렇게 함수를 이용하면 필요할 때마다 반복적으로 실행해야 할 작업들을 한 번에 처리할 수 있게 되는 것이다.
함수도 앞에서 본 '메서드'와 같이 '내장형'과 '사용자 정의' 함수가 있따. 내장형 함수는 이미 자바스크립트에 내장되어 있는 함수문이고, 사용자 정의 함수는 말 그대로 사용자가 직접 실행문들을 함수문에 작성해서 필요할 때마다 호출하여 사용한느 것을 의미한다.
함수에서 변수는 '지역변수'와 '전역변수'로 구분되는데, 먼저 기본적인 함수의 정의와 호출방법에 대해서 알아본 후 두 가지 변수의 차이에 대해서도 알아보자.
기본적인 함수의 정의와 호출


기본형식

function 함수명(){
  실행문;
}
함수명();

function은 함수의 정의문으로서, "다음 중괄호({})에 입력하는 실행문들은 지금 당장 실행하지 말고, 함수명으로 저장하라"는 의미이다. 따라서 저장된 실행문들은 '함수명'으로 메모리에 저장되어 언제든 그 '함수명'으로 호출할 수 있겠다.
웹 페이지 상에 앞에서 예로 들었던 버튼을 만들고 그것을 누를 때마다 "안녕히 가세요"라고 경고창이 뜨게 하는 방법을 다음 실습으로 직접 알아보자.

 new document 


          

위 예제는 페이지 상의 버튼에 마우스로 클릭했을('onclick' 이벤트 발생) 때 미리 지정한 'greet' 함수를 호출하게 되어 있습니다. 버튼을 클릭하면 "안녕히 가세요"라는 경고창이 뜨는 것이다.


응용문제
파일명이 각각 'img1.jpg', 'img2.jpg', 'img3.jpg' ... 'img7.jpg'인 7가지 이미지 파일을 버튼을 통해 이전과 이후로 넘길 수 있는 롤링 갤러리를 만드세요.
위 예제에서는 img1부터 7까지 이미지 파일명 뒤에 붙은 숫자를 유념하여 이 7개의 이미지들이 순환되려면, '다음' 버튼을 클릭할 때 이전 파일명에서 숫자만 1만큼 증가하고, '이전' 버튼을 클릭할 때 그 반대로 작동하면 될 것이다. 단, 순환(Rolling)을 위해서는 가장 높은 수 7보다 커져야 할 때는 1로, 반대의 경우 1보다 작아져야 할 때면 7로 치환해야 할 것이다.
그렇게 바뀐 파일명을 갤러리용인 이미지의 src(소스) 속성값에 적용하면 이미지가 바뀔 것이다.

 new document 


  
    이미지 넘기기
    
      
      
      
    
  


onclick="return prevGallery();" / onclick="return nextGallery();"
  '이전'과  '다음'버튼을 클릭하면 각각 'prevGallery()'나 'nextGallery()' 함수를 호출한다.
if(num>7) num=1;
  이미지 파일명 끝의 숫자가 1~7까지이므로 num이 7보다 커져야 하면 1로 치환(순환)
document.getElementById("gallery").src="images/img" + num + ".jpg";
  getElementById("id명") 메서드는 문서 내에서 특정 id값으로 지정된 요소를 불러와 그 속성에 대한 설정을 가하려 할 때 사용한다. 여기서는 'gallery'라는 id로 지정된 이미지의 src(소스)값을 'num 변수가 포함된 값'으로 변경하여, 미리 이미지 순환용 함수로서 지정된 'prevGalley'와 'nextGallery' 등이 작동할 수 있도록 돕고 있다.
retuen false
이 구문은 쉽게 말해 '여기까지!'라는 의미이다. 하이퍼링크에 쓰이는  태그의 기본 속성 href는 지정된 주소로의 '이동'을 원칙으로 하는데, onclick 이벤트 함수를 걸어주면 우선 이벤트부터 처리한 뒤에 href 속성으로 가게 된다. 즉, 'return false'란 그 href(이동) 속성의 실행을 막아 최초 함수를 불러낸 '클릭' 시점에서 동작을 멈추도록 하기 위함이다.


전달(인자)값이 있는 함수
앞에서는 함수의 호출문에 따로 전달(인자)값이 없었다. 이번에는 해당 함수의 매개변수 자리에 특정 인자값을 전달하고, 그 값이 적용된 상태의 함수가 수행되도록 하겠다.


기본형식

function 함수명(매개변수1, 매개변수2){
  실행문;
}
함수명(인자값1, 인자값2);

기본형식을 보면 호출문에는 함수를 호출 시 전달해야 할 인자값이 2개이다. 그 위 함수문에도 특정값을 전달 받기 위한 매개변수 역시 2개가 존재하고 있다. 매개변수와 인자값이 동일하게 나열되어야 정확한 전달이 가능하다는 의미이다.
아래 실습을 통해 인자값이 있는 함수의 사용법을 알아보도록 하겠다.



  
  


onclick="greet('반갑습니다!')"
버튼을 클릭했을 때 greet()함수를 호출한다. 그리고 '반갑습니다!'라는 문자 데이터를 함수에 전달한다. 이때, 혹시 궁금할 수 있는 부분이 바로 호출문 안에서의 따옴표들인데, 호출문에서는 보통 해당 함수명을 큰따옴표(" ")를 사용해 불러오는데, 맨 뒤 인자값을 큰따옴표로 묶어주면 정상적인 코드로 인식이 되지 않는다.
  예를 들어, 호출문을 onclick="greet("반갑습니다")" 형식으로 코딩했다면 onclick 이벤트로 불려올 부분은 큰따옴표로 묶인 "greet(" 까지이고, 이는 정상적인 함수 형식이 아니므로 오류가 발생하게 된다. 따라서 함수 뒤에 인자값을 넣을 때에는 작은 따옴표를 사용한다.
function greet(the Text){
  호출 시 전달받은 값을 theText라는 매개변수에 저장하게 된다. 여기서는 '버튼1'을 눌렀을 때 theText에 '반값습니다'라는 문자 데이터가 저장되어 경고창(alert)을 띄울 것이다.

return
함수의 실행문에서 return 문을 실행하면 다음 실행문들은 수행하지 않고, 함수문을 마친다. 즉, 반복문에서 'break'와 같다. 또 하나의 기능은 함수 호출문에게 값을 반환한다. 다음 실습을 통해 자세히 알아보자.

재귀함수 호출
어떤 함수의 실행문에서 자기 자신을 스스로 호출하는 것을 '재귀함수 호출'이라고 한다. 이 경우, 함수문을 마치 반복문 처럼 특정 조건을 걸어 여러 차례 실행시킬 수 있다.



출력값
안녕하세요1
안녕하세요2
안녕하세요3
안녕하세요4
안녕하세요5
안녕하세요6
안녕하세요7
안녕하세요8
안녕하세요9
안녕하세요10
함수문의 실행문 상에 자기 함수를 호출하는 실행문이 포함되었다. 이것을 '재귀함수 호출'이라고 한다.
지역변수(Local Variable)와 전역변수(Global Variable)
함수 내에서의 변수는 '지역변수(Local Variable)'와 전역변수(Global Variable)'로 구분된다. '지역변수'란 변수가 정의된 함수 내에서만 사용이 가능한 변수이며, '전역변수'는 현재 페이지 내 자바스크립트 어디서든 사용이 가능한 변수이다.


'지역변수'와 '전역변수'를 구분하는 이유는 무엇일까?
변수의 중복 사용을 막기 위해서이다. 전역변수와 지역변수의 이름이 같다는 것만으로 오류가 발생하지는 않으며, 해당 함수 내에서는 지역변수가 우선 호출된다. 하지만, 프로그램이 복잡해질수록 깔끔한 실행을 위해서는 될수록 구분해주는 것이 좋다.
지역변수의 정의
함수(function)내에서 선언하며, 반드시 앞에 var 키워드를 붙여 선언한다.
function theFnc(){                // 지역변수 선언(함수 내 변수의 선언)
  var num;
  num = 30;
}
theFnc();
console.log(num);                // 지역변수의 값을 함수 밖에서 불러올 수 있을까?
지역변수로 선언된 변수는 함수 밖에서 사용할 수 없다. 위 코드를 실행했을 때 콘솔창에 오류가 생기는데 "정의되지 않은(not defined) 변수"라는 의미의 오류가 생긴다. 지역변수는 어디까지나 자신이 선언된 함수 내에서만 사용이 가능한 것이다.
전역변수의 정의
변수를 함수(function) 바깥에 선언하거나 함수 내에서 var 연산자를 붙이지 않고 선언한다. 외부에서 선언할 경우 var를 붙이지 않아도 실행에는 문제가 없으나, 좋지 않은 습관이므로 항상 var 연산자를 붙여 선언하는 것이 좋다.
var num;                // 전역변수 num 선언
function theFnc(){
  num = 30;
}
theFnc();
console.log(num);        // 이번엔 num에 값을 불러 올 수 있을까?
전역변수로 선언된 변수는 함수 바깥에서도 사용할 수 있다. 콘솔창에는 30이라는 숫자가 출력된다.

위에서 보듯 theTest 함수는 그 내부에 지역변수 num을 포함하므로, theTest 함수를 호출하면 전역변수가 아닌 지역변수 num(i+200)이 우선 적용되어 '210'이 적힌 경고창이 뜬다. 또한 내부의 지역변수 없이 num이라는 변수를 쓴 theFnc 함수가 호출되면, theTest 함수의 지역변수가 아닌 전역변수 num(20)이 적용되어 '20'이 출력된다.
내장 함수
자바스크립트는 사용자의 편의를 우해 다양한 내장 함수를 제공한다. 자바스크립트에 내장되어 있느 함수에는 어떤 것들이 있는지 알아보자.


eval() --- 문자열을 자바스크립트 문장으로 변환(수식은 계산, 문자는 변수로)
parseInt() --- 숫자를 정수로 반환
parseFloat() --- 숫자를 실수로 반환
isNaN() --- "Not a Number"의 약자로, 숫자가 아닌 문자가 포함되면 true를 반환
isFinite() --- 주어진 값이 유리수인지 아닌지 판단
Number() --- 문자를 숫자형으로 변환
String() --- 숫자를 문자형으로 변환
escape() --- 문자를 16진수 아스키코드 값으로 반환
unescape() --- escape()로 변환된 값을 다시 되돌려 반환

생성자 함수
생성자 함수를 이용하면 특정 속성과 메서드를 가진 객체를 쉽게 생성할 수 있다. 즉, 맨 처음 객체에 대하여 다룰 때 언급했던 '사용자 정의 객체'를 의미하는데, 그 속성과 관련 메서드를 직접 사용자가 정의하여 함수화하고 이휴 new 연산자를 사용하여 해당 함수명을 호출하면 미리 정의된 속성과 메서드를 지닌 새로운 객체가 만들어지도록 하는 것이다.
가령 컴퓨터를 생산한다고 가정하면, 컴퓨터를 생산하는 공장이 있어야겠다. 바로 그 공장과 같은 역할을 하는 것이 '생성자 함수'라고 보면 되겠다. 또한 생산된 컴퓨터에는 각각의 모델명이 있을 테고, 색상과 크기 등(속성)이 있겠다. 그리고 경우에 따라 사양에 대한 정보를 제공해 줄 수도 있을 것이다.(메서드)
이렇게 정의된 생성자 함수가 완성되면, 어디서든 new 연산자를 활용하여 그 속성과 메서드를 지닌 객체를 생성할 수 있다.


기본형식

function 함수명(매개변수1, 매개변수2, ... 매개변수n){
  this.속성1 = 매개변수1;
  this.속성2 = 매개변수2;
  ...
  this.속성n= 매개변수n;
  this.메서드1 = function(){
    실행문;
  }
}
var 인스턴스 네임(객체명) = new 함수명(값1, 값2, ... 값n)



function comFactory(cpuInfo, raminfo, hddInfo)
매개변수가 3개인 생성자 함수이다. 여기서 'this'란 생성될 객체를 의미한다.

var speedCom = new comFactory("2.8GHZ", "2.0GB", "1TB");
new 연산자를 사용하여 새 객체를 생성하고, 객체명으로 'speedCom'을 부여했다. 만일 새로운 객체를 하나 더 생성하려면 new 연산자를 통해 한 번 더 함수를 호출하고, 생성 객체명을 부여하면 된다.

speedCom.totInfo();
생성자 함수에서 지정한 totInfo 메서드를 실행한다. 이때 각 매개변수는 새로운 객체인 'speedCom'을 생성할 때 넣은 인자값("2.8GHZ", "2.0GB", "1TB")에 맞게 출력된다.


자바스크립트는 객체 기반의 언어이므로 될수록 객체에 대한 개념을 반복하여 정확히 이해하고 넘어가는 것이 좋다.



Javascript_객체
Wed, 26 Jan 2022 09:11:53 GMT
※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음
객체(Object)
자바스크립트는 객체기반(Object Based)의 스크립트 언어이다. '객체'란 '특정 기능'을 수행하는 단위체를 말하는데 우리의 평소 생활에서 예를 찾는다면, 평소 전화를 걸거나 받을 때 사용하는 '휴대폰'이나 혹은 어떤 물건을 멀리 보내야 할 때 이를 대행하는 '택배기사'와 '집배원'등을 모두  '객체'라고 할 수 있다. 이때, 해당 객체가 지닌 각각의 기능을 자바스크립트에서는 '메서드'라는 용어로 정의한다.
휴대폰.통화하기(); // 메소드
휴대폰.색상;    // 속성
이와 같이, 자바스크립트는 항상 객체를 중심으로 기술한다. 또한 객체명 뒤의 점(.)을 경계로 하여 그 객체에 해당하는 메서드(기능) 또는 속성을 기술하게 된다.
자바스크립트에는 저마다 고유한 기능을 가진 다양한 종류의 객체들이 존재하는데, 크게 '내장 객체'와 '브라우저 객체' 그리고 '사용자 정의 객체' 등이 있다. '내장 객체'는 자바스크립트 내에 내장된 객체로서 Date, Array, Math 등이 있으며, '브라우저 객체(BOM)'는 각 웹 브라우저에서 지원되는 객체로서 window, document(DOM), location 등이 있다.
※ 객체의 생성 - new 연산자
new 연산자는 새로운 객체를 생성할 때 사용하며, 앞에 new를 붙이고 내장 객체의 함수명을 써서 작성한다. 다음은 날짜와 관련된 Date 객체의 생성 예이다.


기본형식
var todayObj = new Date();
우리에게 필요한 제품을 새로 생산하듯 날짜 정보를 제공해주는 Date 객체를 new 연산자를 이용하여 생성하였다. 그리고 제품들 간의 구분을 짓기 위해 모델명을 붙이듯 날짜 객체에도 앞으로 사용할 todayObj라는 인스턴스 네임(객체의 이름표)을 부여하였다. 앞으로 날짜와 관련된 정보가 궁금할 때에는 todayObj에게 물어보면 될 것이다.
그렇다면 어떻게 물어보면 될까? 먼저 todayObj한테 현대 연도를 한번 물어보자.
todayObj야, 현재 연도에 대한 정보를 보여줘!
물론 이렇게 물어보지는 않는다.
자바스크립트에서는 '객체'를 먼저 기술하고, 점(.)을 경계로 사용하고자 하는 메서드를 기술한다.
todayObj.getFullYear();
위와 같이 작성하면 Date 객체는 현재 연도에 대한 정보를 제공하게 되는 것이다.


그런데 getFullYear() 메서드를 쓸 경우, 대문자와 소문자를 어떻게 구분하는 것일까?


자바스크립트는 낙타(camel)표기법을 따른다. getFullYear 메서드는 get + Full + Year 3개 단어의 조합이다. 첫 단어는 항상 소문자로 시작하고, 다음에 오는 단어 중 첫 글자는 항상 대문자로 표기하는 방법이다. 마치 낙타의 등이 연상되지 않는가?
위에서도 보다시피 객체를 생성할 때에는 보통 new를 사용한다. 하지만 new를 사용하지 않아도 되는 객체가 있는데, 바로 그 대표적인 예가 Math 객체이다. Math 객체의 경우에는 이미 정해져 있는 수학 공식을 가져다 써야하므로 '정적 객체'라고도 부른다.
그 외에도 꼭 new를 사용하지 않아도 간편하게 생성할 수 있는 String, Array 등의 객체들이 있다.
그럼 각 내장 객체의 종류와 메소드 및 속성의 사용법에 대해서도 알아보자
Date 객체
현재 또는 특정 날짜와 시간에 대한 정보를 제공한다. 만일 객체 생성 시 특정 날짜를 지정하지 않았다면 현재 컴퓨터 시스템에 입력된 날짜에 대한 정보를 제공한다.
다음은 날짜 객체를 생성하는 기본적인 방법이며, 인자값으로 연/월/일/시/분/초를 입력하면 날짜 객체는 지정된 특정 날짜와 시간에 대한 정보를 제공한다.


기본형식
var 변수 = new Date();
또는
var 변수 = new Date(연, 월, 일, 시, 분, 초);
날짜 정보 제공 메서드


getFullYear() --- 날짜에서 연도에 대한 정보를 제공
getMonth() --- 날짜에서 월에 대한 정보를 제공, 011 반환(0 → 1월, 11 → 12월)
getDate() --- 날짜에서 일에 대한 정보를 제공
getDay() --- 날짜에서 요일에 대한 정보를 제공(0 → 일요일, 6 → 토요일)
getHours() --- 시간에서 시(023)에 대한 정보를 제공
getMinutes() --- 시간에서 분(059)에 대한 정보를 제공
getSeconds() --- 시간에서 초(059)에 대한 정보를 제공
getMilliseconds() --- 시간에서 밀리(1/1000)초에 대한 정보를 제공
getTime() --- 1970년 1월 1일 이후 경과 시간을 밀리초로 제공
날짜 지정 메서드


setFullYear() --- 날짜에서 '연도'만 새로 지정할 때
setMonth() --- 날짜에서 '월'만 새로 지정할 때(1월 → 0, 12월 → 11)
setDate() --- 날짜에서 '일'만 새로 지정할 때
setHours() --- '시간'만 새로 지정할 때
setMinutes() --- '분'만 새로 지정할 때
setSeconds() --- '초'만 새로 지정할 때
setMilliseconds() --- '밀리초'만 새로 지정할 때
setTime() --- 현재까지 경과된 밀리초를 새로 지정할 때
toGMTString() --- 날짜를 그리니치 천문대 표준시로 표시
toString() --- 날짜를 문자 형식으로 표시

Math 객체
단순하게 수를 더하거나 뺄 경우에는 앞에서 공부한 '산술 연산자'들을 사용한다. 하지만 소수점을 반올림하거나 최대/최소값 등 특정 공식을 사용해야 할 경우라면, 수학 객체의 메서드를 사용하는 것이 훨씬 편리하다. 수학 객체는 다른 내장 객체와 다르게 new(생성자 키워드)를 사용하지 않는 정적인 객체이다.


max(숫자1, 숫자2, 숫자3) --- 숫자 중 최대값을 반환
min(숫자1, 숫자2, 숫자3) --- 숫자 중 최소값을 반환
round(숫자) --- 소수점 첫째 자리를 반올림
ceil(숫자) --- 소수점 자리를 무조건 올림
floor(숫자) --- 소수점 자리를 무조건 절삭
abs(숫자) --- 수의 절대값을 반환
random() --- 0과 1 사이의 난수를 발생
기본 메서드 사용법을 익히기 위해 다음 예제를 실습해 보자



응용문제
파일명이 각각 "img1.jpg" / "img2.jpg" / "img3.jpg" 인 이미지들이 접속할 때마다 랜덤으로 출력되도록 만드세요.
응용 문제의 그림 파일명들은, 'img'는 공통적이고 뒤에 붙은 숫자만 1~3으로 구분되어 있다. 그러므로 1에서 3까지의 난수를 활용하면 무작위(random) 이미지를 출력할 수 있겠다. 다음의 공식을 이용하면 원하는 숫자 사이에서 난수를 발생시킬 수 있다.


random 메서드를 이용해서 원하는 숫자(작은수 ~ 큰수) 사이의 난수값을 도출하는 공식
Math.floor( Msth.random() * (큰수 - 작은수 + 1) ) + 작은수

위 예제는 난수값 공식을 이용하여 1부터 3까지의 정수가 무작위로 추출되도록 하였다. 랜덤으로 구한 숫자를 이용해 src 경로의 파일명에 숫자 대신 난수가 오도록 변수로 처리한 것이다.
String 객체
아마도 이번 String(문자열) 객체가 내장 객체 중에서는 활용 빈도가 가장 높을 것이다. 앞에서 우리는 이미 문자형 데이터를 변수에 저장하여 사용했다. 그 문자형 변수도 또한 String 객체인 것이다. 그러므로 이런 문자형 변수에는 String 객체가 사용할 수 있는 메서드나 속성들을 동일하게 사용할 수 있다. 만약 변수에 숫자를 저장한 후 String 객체에 해당하는 메서드를 사용하면 에러가 발생한다.
그럼 String 객체를 생성하는 방법에 대해 먼저 배운 후, 메서드와 속성의 사용법에 대해 공부해 보자. String 객체도 역시 보편적인 new 연산자를 사용해 생성할 수 있지만, 보다 간편하게 생성할 수도 있다.
보편적인 생성법


기본형식
var 변수(인스턴스 네임) = new String("자바스크립트");
간편한 생성법


기본형식
var 변수(인스턴스 네임) = "자바스크립트";
당연히 간편하게 생성하는 두 번째 방식을 더 많이 쓸 것이다. 그럼 다음 문자 객체를 사용하여 메서드에 대해 공부해보자.
var theText = "web js hi ciy";
위 데이터는 theText라는 변수에 13개의 인덱스로 구분되어 저장된다고 보면 된다. 문자의 공백도 각각 하나의 문자로 인식되므로 데이터의 총 문자수는 13개이며, 각 낱글자별 인덱스 번호는 0부터 부여되므로 '총 문자개수'에서 1을빼면 마지막 인덱스 번호를 구할 수 있다.



















  theText(변수) // 인덱스번호 : 12
  
    0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
  
  
    w
    e
    b
     
    j
    s
     
    h
    i
     
    c
    i
    y
  




theText.bold() --- 텍스트를 진하게 표현하여 반환 // web js hi ciy
theText.link("URL") --- 텍스트에 링크를 걸어 반환 // web js hi ciy
theText.length --- 텍스트의 개수를 반환 // 13
theText.toLowerCase() --- 영문자를 소문자로 바꿔 반환 // web js hi ciy
theText.toUpperCase() --- 영문자를 대문자로 바꿔 반환 // WEB JS HI CIY
theText.indexOf("i") --- 처음에서부터 "i"를 찾아 최초로 일치하는 인덱스 번호를 반환, 없을 경우 -1을 반환 // 8
theText.lastIndexOf("i") --- 끝에서부터 "i"를 찾아 최초로 일치하는 인덱스 번호를 반환, 없을 경우 -1을 반환 // 11
theText.charAt(5) --- 5번 인덱스에 저장된 문자 데이터를 반환 // s
theText.substring(4,6) --- 4번부터 6번 인덱스까지의 문자 데이터를 반환 // js
theText.substr(10, 3) --- 10번 인덱스부터 3글자를 반환 // ciy
theText.replace("web", "bye") --- 텍스트 중 "web"을 "bye"로 치환(교체)해서 반환 // bye js hi ciy
theText.slice(7, 9) --- 7번부터 9번 인덱스까지의 일부만 잘라서 반환 // hi
theText.concat("good") --- 끝에 "good"이라는 문자를 결합하여 반환 // web js hi ciy good
theText.split(" ") --- " "(공백)을 기준으로 데이터를 분리(콤마) // web, js, hi, ciy



출력화면
문자치환
img2_over.jpg
문자추출
10
마지막 문자 추출
t
특정 문자 포함여부
텍스트에 찾는 문자가 없습니다.

replace 메서드를 이용하여 문자열 중 'out'을 'over'로 치환하였다.
split 메서드를 사용하여 문자열을 나누면, 데이터들이 [0,1,2...]의 순서로 인덱스된 공간에 각각 저장된다. 바로 뒤에서 공부할 '배열'이라는 개념으로, 변수 하나에 여러 데이터를 순서대로 나눠 저장하는 것이다. 즉 여기서는 'images/img01.jpg'이라는 문자열이 슬래쉬(/)를 기준으로 나뉘면서 배열[0]에는 'images'가, 배열[1]에는 'img10.jpg'가 각각 저장된 것이다. 결국, 예제의 split 실행문(theText2 = theText.split("/")[1];)의 마지막 [1]이란 이렇게 둘로 나뉜 배열공간 0번과 1번 중에서 두 번째 [1] 공간을 의미한다.
  정리하면, 원래 'images/img10.jpg'이던 theText2 변수내용 중 'img10.jpg' 부분만 남긴 것이다. 그 후 substring 메서드를 이용하여 'img10.jpg'이라는 문자열의 3번 인덱스부터 끝까지의 문자만(10.jpg) 남기고, 마지막으로 뒤에서 다룰 parseInt 메서드를 사용하며 정수만(10) 남았다.
문자열에서 마지막 문자를 추출하기 위해 마지막 인덱스 번호를 '문자개수-1'을 이용하여 구하고, charAt 메서드를 이용해 해당 인덱스 번호의 문자를 구했다.
indexOf 메서드를 이용하면 찾는 문자가 있을 경우에는 해당 인덱스 번호를, 찾는 문자가 없을 때에는 '-1'을 반환하므로 if 조건문을 활용해 문자로 출력되도록 했다.

위 예제 중 '문자치환' 예제는 보통 웹 페이지 내의 '버튼 이미지'를 바꿀 때에 많이 사용되며, '문자추출' 예제는 요소의 속성값을 가져와 그 숫자를 활용할 경우에 많이 사용된다.
그리고 마지막에 쓰인 indexOf 메서드의 경우에는 찾는 문자의 인덱스 번호를 반환하기도 하지만 찾는 문자가 포함되어 있는지 여부를 알아볼 때에도 많이 사용된다. 찾는 문자가 있을 때는 좌측에서부터 검색된 문자의 인덱스 번호를 반환하지만 찾는 문자가 없을 때는 '-1'이란 값을 반환한다. 그러므로 indexOf로 찾은 문자의 인덱스 번호가 0보다 작다는 것은 찾는 문자가 없다는 것이다.
Array 객체
우리는 지금까지 여러 차례 변수 선언을 통해 데이터를 저장해 보았다. 지금까지의 방법을는 반드시 한 번에 한 개의 데이터만 저장되었다. 가령 '10'은 지워지고 새로운 '100'이 저장되듯이 말이다.
하지만 '배열(Array)' 을 이용하면 하나의 변수에 여러 개의 데이터를 저장할 수 있다. 하나의 변수에 여러 개의 공간으로 이뤄진 '배열 객체'를 대입하여 저장하므로, 각 공간마다의 인덱스(Index) 번호가 존재하며 우리는 그 인덱스 번호를 사용해 각각의 공간에 저장된 여러 데이터들을 불러올 수 있는 것이다. '배열 객체'를 쉽게 '서랍장'이라고 생각해보자.
그럼 변수에 여러 개의 데이터를 저장하는 '배열 객체'를 어떻게 생성하는지 보자.
new 연산자를 사용한 배열 객체 생성법


기본형식
var 변수(인스턴스 네임) = new Array();
위 기본형식은 "변수야, 이제 여러 개의 값을 저장해도 돼!"라는 뜻으로 이해하면 된다.
이제, 변수에 인덱스 번호를 지정하여 직접 나눠서 저장할 수 있다.


기본형식
변수[0] = "값1"
변수[1] = "값2"
변수[2] = "값3"
변수[3] = "값4"
변수[4] = "값5"
저장 공간을 지정한 배열 객체 생성법


기본형식
var 변수(인스턴스 네임) = new Array(5);
새 배열 객체를 생성하며 '5'라는 숫자를 넣었다. 이는 데이터를 5개만 저장할 수 있도록 총 5개의 저장 공간을 두겠다는 뜻이다. 즉, "전체 공간을 5개로 나눠서 총 5개의 데이터만 저장하라"는 말로 이해하면 된다.
편리한 배열 객체 생성법


기본형식
var 변수(인스턴스 네임) = [값1, 값2, 값3, 값4, 값5]
이와 같이 new 연산자를 사용하징 않고 변수에 여러 개의 값을 저장하는 방법들이 있다. 많은 사람들이 이 방식을 선호한다.
그럼 다음 예제를 통하여 배열 객체에 데이터를 저장하는 방법과 출력하느 방법을 실습해보자.

예제와 같이 오늘의 요일을 출력하고 싶을 때에는 먼저 요일에 대한 문자 데이터를 '일요일 ~ 토요일'의 순서로 배열하고, 날짜 객체로 오늘의 요일에 해당하는 인덱스 값을 구한다. 이후 그에 맞는 문자 데이터를 배열 인덱스에서 받으면 요일을 문자로 출력할 수 있다.
전체 재산의 합 구하기의 경우는, 저장된 배열개수가 4개이므로 최초 '0'으로 설정도니 total 변수를 지정하여 하나씩 차례대로 더하되 for 문을 사용하여 0부터 총 배열개수(theLen)보다 작은 인덱스 번호의 데이터들만 더하도록 한 것이다. 결국 실행문은 인덱스 0번부터 3번까지의 데이터를 total 변수에 누적하여 합산하게 된다. 그 최종 저장값을 출력했다.
배열 메서드


reverse() --- 배열 데이터를 역순으로 반환
slice(번호1, 번호2) --- 인덱스 번호 1부터 시작하여 직전의 데이터까지 잘라서 저장
sort() --- 배열 데이터를 알파벳 혹은 0/1/2..의 오름차순을 정렬
join("구분자") --- 배열 데이터를 구분자로 연결하여 결합
concat() --- 여러 개의 배열 데이터들을 하나로 결합
배열 데이터 추가/삭제 메서드


shift(); --- 배열에서 첫 인덱스(0)에 저장된 데이터를 삭제
pop(); --- 배열에서 마지막 인덱스에 저장된 데이터를 삭제
unshift(값); --- 배열에서 첫 인덱스(0)에 새 데이터를 중첩하여 추가
push(값); --- 배열에서 마지막 인덱스에 새 데이터를 중첩하여 추가
concat() --- 여러 개의 배열 데이터들을 하나로 결합


reverse()를 이용하여 배열에 저장된 데이터를 역순으로 바꾼다.
sort()를 이용하여 배열에 저장된 데이터를 오름차순으로 정렬한다.
concat()를 이용하여 Mountain1과 Mountain2 배열을 하나로 합쳐 새로운 배열로 생성한 후 joinResult에 저장한다.
slice()를 이용하여 배열에 저장된 데이터 중 2번 인덱스(기오정)부터 4번 인덱스 직전, 즉 3번 인덱스(김민경)까지 잘라서 새로운 배열로 생성한 후 result에 저장한다.
join()을 이용하여 배열에 저장된 데이터를 구분자(-)로 연결하여 하나의 데이터로 새로 생성 후 joinResult에 저장한다.


'데이터 추가'의 역할을 하는 unshift와 push을 혼동하기 쉬운데, 이들의 '추가'란 결국 '중첩/변경' 과도 같아서 다음과 같이 작동한다.
현재 theSubway라는 변수에는 ["2호선", "9호선", "7호선", "4호선', "3호선"]의 순서대로 인덱스 번호 0에서 4까지 구성된 배열 객체가 생성되었는데, 이때 unshift 메서드를 이용해 새로 지정된 newLine1 변수의 값 "1호선"'을 '추가'해주면, 원래 theSubway 변수의 배열 데이터 0번인 "2호선"을 뒤로 밀고 앞으로 추가되어 ["1호선", "2호선", ...] 순으로 재정렬 되는 것이 아니라 "2호선"이란 데이터를 "1호선"으로 씌우게 되는 것이다. 결국, ["1호선", "9호선", "7호선", "4호선", "3호선"]의 순서로 다시 정렬되는 것이다. push의 역할도 마찬가지로서, '추가'라는 개념의 의미를 정확히 알아야 한다.

theText(변수) // 인덱스번호 : 12
0	1	2	3	4	5	6	7	8	9	10	11	12
w	e	b		j	s		h	i		c	i	y



Javascript_제어문(조건문, switch~case문, 반복문)
Tue, 25 Jan 2022 09:30:44 GMT
※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음
제어문
조건문
조건문은 조건식을 만족(true)했을 때에만 실행문을 수행하는 제어문이다.
if 문
조건식을 만족할 경우 중괄호({}) 내의 실행문을 수행한다.


기본형식
if(조건식) {
  실행문;
}
다음 예제는 나이가 20세 이상일 경우에만 "당신은 성인입니다"라고 출력한다.



응용문제
prompt를 이용해서 임의로 정한 변수에 시험 점수를 입력 받아 저장한 후, 만일 70점보다 크거나 같으면 '합격'이라는 메시지를 출력한다.

if~else 문
조건식을 만족(true)했을 때에는 if 문의 중괄호에 든 실행문1을 수행하며, 그렇지 않은(false) 경우라면 else 문의 중괄호 안에 든 실행문2를 수행합니다. 그러므로 출력 결과가 2가지일 경우에 사용한다. 가령 "합격" 또는 "불합격"을 출력하거나 "성인" 또는 "미성년자"와 같이 2가지 경우에 따른 결과를 각각 출력하고자 할 때에 사용한다.


기본형식
if(조건식) {
  실행문1;
}else{
  실행문2;
}
다음 예제는 나이가 20세 이상이고, 30세 미만일 경우에는 "통과"라고 출력한다. 그밖에 만족하지 않는 경우라면 "비통과"라고 출력하는 if~else 문의 예제이다.
이 경우에 생각해 볼 수 있는 조건문 구조는 다음과 같다.



myAge >= 20 --- 20세 이상


&&


myAge < 30 --- 30세 미만


→ true → "통과" // → false → "비통과" 


앞에서의 예제는 나이(myAge)의 값에 따라 "통과" 또는 "비통과"라는 2가지 결과가 출력되는데, 나이(myAge)변수에 33이 저장되어 있으므로 조건을 만족하지 못하여 else문이 실행되어 "비통과"가 출력된다.
if ~ else if 문
맨 위에서 지정한 조건식 1부터 아래로 내려가면서 순서대로 조건식 검사를 수행한다. 만일 조건식 검사를 하다가 조건식 2에서 만족하게 되면 그 중괄호({})에 든 실행문2를 수행하며 조건문 검사를 마친다.
하지만 만약 조건식을 모두 만족하지 못하면 마지막 else 문 중괄호 내에 기술된 실행문4를 수행한다. 그러므로 이 형식의 조건문은 출력 결과가 3가지 이상일 경우에 사용한다


기본형식
if(조건식1) {
  실행문1;
}else if(조건식2){
  실행문2;
}else if(조건식3){
  실행문3;
}else{
  실행문4;
}
이제, 학점(num)이 90점 이상이면 "A학점", 80점 이상이면 "B학점", 70점 이상이면 "C학점", 60점 이상이면 "D학점", 그밖에 60점 미만이면 "F학점"이 출력되는 성적 프로그램을 만들어 보자.(단, 학점(num)이 75점이라 가정하여 작성하자.)
switch ~ case 문
switch ~ case 문은 지정한 변수에 저장된 데이터(data)와 정확히 일치되는 경우(case)가 있는지 검사하여 일치하는 데이터가 있을 때에는 해당 실행문을 수행한 뒤 마지막의 break 문으로 반복을 끝낸다. 하지만 일치되는 값이 없을 때에는 default에 해당하는 실행문을 수행한 뒤 문장을 마치게 된다.


기본형식
num = 3;
switch(num){
  case 1 :
    실행문1;
    break;
  case 2 :
    실행문2;
    break;
  case 3 :
    실행문3;
    break;
  default :
    실행문4;
}
위의 기본형식에서 변수 num의 값은 3이므로, switch 문에서 num에 저장된 데이터(3)와 일치하는 case문이 있는지 검사한다. case 3의 경우 num에 저장된 데이터와 일치하므로 실행문3을 수행할 것이다. 이후 break 문을 만나서 switch 문을 마치게 되는 것이다.
그렇다면 조건문과 switch ~ case 문은 무엇이 다른 것일까?
조건문은 말 그대로 '데이터 중복'의 경우라 하더라도 특정 '조건'을 허용할 때 사용하는 반면, switch ~ case 문은 '정확히 일치하는' 경우(case)만 허용할 때 사용한다.
예를 들면 'A>=90'인 경우, 즉 'A가 90 이상'이라는 조건 하에서는 A가 91이나 95일 경우 언제든 만족하겠다. 하지만 switch ~ case 문은 데이터의 중복이 허용되지 않는다. 즉, 정확히 일치하는 데이터가 있을 경우(case)에만 만족하게 되는 것이다.
다음은 응답창(prompt) 기능을 이용하여 지역(서울, 경기, 부산)을 입력한 후에 해당 지역번호를 출력하는 예제이다.

반복문
반복문은 해당 조건식을 만족하는 동안 중괄호({}) 안의 실행문을 반복적으로 수행한다. 만약 1붜 10까지 그냥 출력한다면 출력문(document.write())을 이용해서 1에서 10까지 총 10번이나 작성을 해야겠지만, 반복문을 이용하면 이런 번거로움을 줄일 수 있다.
반복문에는 'while 문'과 'for 문'으로 2가지 종류가 있다. 이 2가지의 문법은 비슷하지만 실무에서는 보통 'while'문 보다 'for'문을 더 많이 사용하는 편이다.
while문
while은 '~하는 동안'이라는 뜻의 접속사다. 즉, 특정 조건식을 만족하는 동안에 지정된 실행문을 반복적으로 수행하게 된다. 그 기본형식은 다음과 같다.


기본형식
num = 3;
var i = 초기값;
while(조건식){
 실행문;
 증감식;
}
[예]
var i = 1;
while(i<=10){
  document.write(i+"
");
  i++;
}

[예]에서 변수 i에 지정된 초기값은 1이며 while에서 조건식을 검사한다.
'i=1'이라는 초기 변수값 지정은 조건식을 만족하므로 중괄호({})의 실행문을 수행하여 1을 출력하고, 
로 개행(줄바꿈)이 작동하겠다.
그 다음에 기술된 증감식(i++)에 의하여 i값은 1만큼 증가하여 2가 된다.
중괄호 ({})의 마지막 실행문을 마친 후에는 다시 while문 조건식 검사를 반복한다. 역시 'i=2'가 된 상태로 조건을 만족하므로 실행문을 수행하면 2가 출력되고, 개행이 된다.
그리고 역시 마지막 증감식을 만나면서 i값은 1만큼 증가하여 3이 된다.

이렇게 반복하다 보면 i값이 11이 되어 while 문의 조건식(i <= 10, i가 10 이하)을 만족하지 못하게 되고, while 문은 반복을 멈추게 된다. 다음은 위 <예>의 출력 결과이다.


1
2
3
4
5
6
7
8
9
10


응용문제
10부터 1까지 내림차순으로 2의 배수(짝수)만 출력해 보세요.
10, 8, 6, 4, 2
여기서 반복문의 조건은 '10과 1 사이에 있는 2의 배수들'이므로 초기값은 10이 되겠다. 또한 1까지의 '내림차순'이 필요하므로 조건식은 '1보다 크거나 같다(i>=1)'가 되고 마지막 증감식으로는 1씩 줄어드는 감소 연산자(i--)가 적당하겠다.
한 가지 주의할 점은, '2의 배수만 출력하라'는 조건의 구현인데, 여기서는 출력 시 '2로 나누었을 때 나머지가 0일 경우(i%2==0)'를 if조건문으로 덧붙여주면 되겠다.
//=1){                    // 조건식
    if(i%2 == 0) document.write(i+"
");    //2의 배수일 경우에만 출력
    i--;
  }
//]]>

for 문
for 문 역시 while 문과 비슷하지만 간단한 기술 방식으로 사용 빈도가 더 높은 편이다.


기본형식

for(var k=초기값; 조건식; 증감식){
  실행문;
}
[예]
for(var k=1; k<=10; k++){
  document.write(k+"
");
}
위 [예]의 결과는 다음 순서대로 진행되어 1에서 10까지 순서대로 출력하게 된다.

k의 초기값 1은 10보다 작으므로 조건식 만족
실행문을 수행하여 초기값인 1을 출력
증감식으로 1이 증가한 2를 변수 k에 새로 저장
k값이 여전히 10보다 작으므로 역시 조건식 만족
실행문을 수행하여 현재 저장값인 2를 출력
증감ㅁ식으로 다시 1이 증가된 3이 k값으로 저장
  이렇게 k값이 증가하다가 11이 되면 조건을 만족하지 않으므로 반복문을 종료하게 됨



응용문제

태그를 사용하여 다음과 같이 출력하시오.
h6 재미있는 자바스크립트
h5 재미있는 자바스크립트
h4 재미있는 자바스크립트
h3 재미있는 자바스크립트
h2 재미있는 자바스크립트
h1 재미있는 자바스크립트

우선 생각해 볼 수 있는 것은 라는 태그가 작동하게 한 뒤, *에 해당하는 값을 변수로 하여 6에서 1까지 줄어가는 방법일 것이다. 다음 코드를 살펴보자.

h6에서 h1까지이므로 변수 k의 초기값은 6이며, k값이 1까지 구현된어야 하므로 조건식은 'k가 1보다 크거나 같다(k >= 1)'가 된다. 또한 감소 연산자를 사용한 증감식이 필요하다.


태그가 들어간 실행문 작성법

위 반복문의 실행문이 복잡할 경우, 먼저 다음과 같이 출력해야 할 문장의 원형을 먼저 작성해보자
document.write("h6 재미있는 자바스크립트");
그런데 출력 대상인 따옴표("") 안의 내용 중 숫자 6은 반복적으로 감소하는 임의의 변수가 될 부분이므로 '변수와 나머지'로 분리하면 다음과 같다.
h || k || 재미있는 자바스크립트
이제, 따옴표 없이 '변수'로 인식될 k를 제외한 나머지 영역을 각각 문자열("")로 묶어 +(문자 결합) 시켜주면 괄호() 안의 내용은 다음과 같이 정리된다.
document.write("h" + k + " 재미있는 자바스크립트");



응용문제
다음과 같이 구구단 중 2단을 출력하시오
2단
2X1=2
2X2=4
...
2X9=18


바깥 for 문이 한번 실행할 때 안쪽 for 문은 1부터 9까지 9번 실행한다. 즉, k가 한단을 출력할 때마다 안쪽 for문은 1부터 9까지 곱해주는 역할을 하는 것이다.
바깥 for 문에서는 제목(*단)이 출력되고, 안쪽 for문에서는 구구단이 출력된다. 한 단 출력이 모두 끝나면(m이 1에서 9까지 순환하고 나면) 다시 바깥 for 문 증감식으로 가서 k값이 1만큼 증가되고, 그 증가된 k값에 맞는 구구단이 다시 이어질 것이다. 이렇게  반복문이 조건을 만족할 때 까지 계속 실행되면 9단까지 모두 출력된다.

break문
반복문의 실행문들은 수행과정에서 break문을 만나면 해당 반복문을 종료한다. 즉, break문은 반복문을 정지시킬 때에 사용한다.
그럼 다음의 기본예문을 보면서 자세히 알아가보자.


기본예문

위 기본 예문은 1부터 10까지 출력하는 반복문이다. 하지만 실행문 마지막을 보면 i값이 5일 때에 break문을 수행하도록 되어 있으므로, 5를 출력한 후 반복문을 마치게 된다.


출력값
1
2
3
4
5
continue문
반복문이 continue문을 만나면, 더 이상의 실행문을 수행하지 않고 바로 증감식으로 돌아가 실행을 반복하게 된다.


기본예문

if 조건문은 i값을 2로 나눈 나머지가 1인 경우, 즉, i값이 '홀수'일 때에만 continue문을 실행하게 한다.
결국, i값이 홀수라면 continue문에 의해 바로 증감식으로 돌아가게 된다.
실행결과 다음과 같이 짝수만 나오는 결과화면을 볼 수 있다.


출력값
2
4
6
8
10



Javascript_선언문, 변수 및 데이터 형, 연산자
Fri, 21 Jan 2022 05:05:37 GMT
※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 하여 작성됨
선언문(Declaration)
선언문이란 Html 페이지 내에 자바스크립트를 작성하기 위해 "여기서부터는 자바스크립트를 작성할 것이다"라고 '스크립트 개시'를 선언하는 것이다.
만일 선언문을 작성하지 않고 스크립트를 작성하면 브라우저는 자바스크립트 실행문들을 단순히 HTML 태그로 인식하게 되어 문법 오류가 발생할 것이다.
선언문의 문법은 아래와 같이 실행문을 기준으로  태그로 작성한다.

선언문은 HTML 페이지의 head 및 body 요소 내에 작성할 수 있다.

  

위 예제의 코드 내용 중, 실행문 "document.write();" 부분의 'document'를 객체(Object)라 부르고, 'write()'는 메서드(Method)라고 부른다.
객체(Objrct)와 메서드(Method)의 의미와 역할은 무엇일까?
만일 일하는 곳에 복합기가 없다면 복사를 할 수 없듯이 여기서 '복합기'는 객체가 되고, 복사를 하는 '기능'은 메서드가 된다. 그럼 이 내용을 자바스크립트로 표현하자면 아래와 같이 표현할 수 있다.
복합기.복사해라();
또한 복합기는 복사하는 기능 외에 스캔하는 기능도 있는 것 처럼 한 개의 객체에는 여러 가지 메서드가 모두 포함될 수 있다.
이렇듯 자바스크립트는 다양한 객체들로 구성되며, 각 객체마다 다양한 메서드들을 가지고 있다. 그래서 자바스크립트를 가리켜 '객체 기반 언어'라고 부른다.
한 줄의 실행문을 작성했다면, 문장의 마침표에 해당하는 세미콜론(;)으로 마무리를 해 준다. 물론 실제로는 이  세미콜론을 생략하더라도 한 줄에 하나의 실행만 내려진다면 오류는 발생하지 않을 수 있다.
하지만, 차후 다양한 기능의 스크립트를 기술하게 되는 경우에는 한 줄에 2개 이상의 실행문을 수행시키는 등 매우 복잡한 구조를 가진 스크립트 문장을 만들어야 하는 경우가 생기는데 이 때 만약 실행문 뒤에 세미콜론으로 마감하는 습관이 제대로 베어있지 않다면 그렇게 열심히 작성한 스크립트가 세미콜론 때문에 오류를 발생시킬 수도 있다. 그러므로 제대로 된 프로그래밍 연습을 하려면 초기부터 세미콜론으로 마무리 하는 습관을 길러두자.
자바스크립트는 위와 같이 html 문서 내에 모두 기술할 수도 있지만(내부형), 그 실행문의 내용만 별도의 파일(OOO.js)로 작성한 뒤 이를 불러오는 방식의 선언도 가능하다.
이를 가리켜 '외부형 선언'이라고 하는데, 그럼 이렇게 자바스크립트 선언문을 외부형으로 기술하는 방법과 그 장점에 대하여 알아보자.


외부형 선언문의 장점

관리가 편하다.
  간혹 퍼블리셔가 내부 스크립트 실행문을 잘못 건드려서 프로그램이 제대로 구현되지 않는 경우가 발생한다. 하지만 js 파일을 외부로 분리해 두면 그럴 걸정이 없다.
소스를 숨길 수 있다.
  100% 소스를 감춘다는 것은 불가능하지만 브라우저에서의 '소스 보기'에서는 보이지 않는다.
라이브러리(library) 언어를 사용할 수 있다.
  대표적 라이브러리 언어인 jQuery(제이쿼리)를 연동하여 사용할 수 있다. 그밖에 제이쿼리 모바일이나 센차터치 등 다양한 라이브러리 언어를 연동할 수 있다.

변수 및 데이터 형(Variables & Data Type)
변수란 '변화하는 값(Data)'을 저장하는 공간이라고 보면 된다. 단, 변수에는 한 번에 1개의 데이터(Data)만 저장할 수 있다. 즉, 새로운 데이터가 입력되면 기존의 값은 삭제된다.
변수 선언은 다음과 같이 작성한다.


var 변수명; 또는 var 변수명1, 변수명2, 변수명3; 또는 var 변수명 = 데이터값;


예시
    var num = 10; --- 'num'이라는 변수에 숫자형 데이터 값이 10이 저장되었다.
    var numm = num/2; --- dlwp, 'num' 변수에는 "num/2"의 결과인 5가 새롭게 저장된다.
    document.write(num); --- 그대로 출력하면 '5'라고 출력된다.


변수명 작성 시 주의사항


** + 대-소문자의 구분 + **
변수명을 소문자로 만들고 출력할 때 대문자로 입력하면 '정의되지 않은 변수'로서 오류가 발생한다.
var num = 50;
document.write(Num); --- X


** + 변수명 맨 앞에는 영문, '_', '$' 등만 가능 + **
var $num = 10 --- O
var 3num = 0; --- X // 숫자가 맨 앞에 올 수 없다.


** + 변수명에는 영문, '$', '_', 숫자만 포함 가능 + **
var the% = 100 --- X // %(특수문자)는 포함할 수 없다.
변수에 저장 가능한 데이터의 종류


** + 문자(String)형 데이터 + **
다음과 같이 큰따옴표 또는 작은따옴표로 둘러싸인 데이터로서, '문자'로 인식된다.
var txt1 = "자바스크립트";
var txt2 = '10';


** + 숫자(Number)형 데이터 + **
다음과 같이 데이터에 숫자로 정의되는 데이터이다.
var num = 10;


** + 논리(Boolean)형 데이터 + **
다음과 같이 데이터에 true(참) 또는 false(거짓)로 정의되는 데이터이다.
var rewult = true;


** + 널(Null)형 데이터 + **
다음과 같이 데이터 null(비어 있음)로 정의되는 데이터이다.
var result = null;
연산자(Operator)
산술 연산자
피연산자(연산의 대상인 데이터)가 2개 필요하며 '이항 연산자' 라고도 부른다. 초등학교 때 배운 사칙 연산에 해당한다.


** [ + ] ** --- 더하기
** [ - ] ** --- 빼기
** [ * ] ** --- 곱하기
** [ / ] ** --- 나누기
** [ % ] ** --- 나머지

 
  
   new document 
   
 

 

 

이 코드를 실행시키면


13
7
30
3.33333333333333
1
과 같은 결과가 나오는데 하단 바에 ❌ 표시와 함께 '5 오류'라는 문구가 뜬다. 왜 Validator(유효성 검사기)가 5개의 오류를 지적했을까?
유효성 검사 오류를 막는 CDATA 선언
오류의 원인은, 바로 자바스크립트 내에 들어간
태그이다.  예제와 같이 내부형으로 작성된 스크립트에서 html 태그를 포함하게 되면 비록 기능은 정상적으로 작동할지라도 브라우저의 유효성 검사기들은 오류를 지적한다.
결국, 내부형 스크립트에서 html 코드를 포함해야 할 때에는 유효성 검사 오류를 막기 위해 다음과 같이 'CDATA 선언' 을 함께 작성해야 한다.
CDATA 선언문은 내부형 자바스크립트 내에 HTML 태그가 포함되었을 경우, 이들을 모두 문자형 데이터로 인식시켜 이후 문서의 body 부분에 잘 출력되도록 돕는 역할을 한다. 즉, 스크립트가 실행되는 사이에 HTMl 태그가 갑자기 끼어드는 현상을 막아주는 것이다. 그러니 앞으로 HTML 내에서 자바스크립트를 작성할 때 태그를 포함해야 한다면 그 실행문 전체를 CDATA 선언문으로 감싸주는 습관을 들여야 할 것이다.

물론, 이 경우에도 스크립트 코드를 외부형 파일로 따로 만들어 불러들이는 경우라면 문제가 없다.
비교 연산자
역시 피연산자가 2개 필요하며, 그 2개의 데이터를 비교할 때 사용한다. 비교하여 잘못됐으면 flase(거짓)를, 올바르면 true(참)라는 값을 반환한다.


** [ A > B ] ** --- A가 B보다 크다
** [ A >= B ] ** --- A가 B보다 크거나 같다
** [ A < B ] ** --- A가 B보다 작다
** [ A <= B ] ** --- A가 B보다 작거나 같다
** [ A == B ] ** --- A와 B가 같다 // 데이터의 형(ype) 상관 없음
** [ A != B ] ** --- A와 B가 다르다 // 데이터의 형(ype) 상관 없음
** [ A === B ] ** --- A와 B가 같다 // 데이터 및 형(ype)이 일치할 때 true
** [ A !== B ] ** --- A와 B가 다르다 // 데이터 및 형(ype)이 불일치할 때 true
대입(할당) 연산자
대입 연산자는 연산된 데이터를 지정된 변수에 대입할 때 사용한다.


** [ = ] ** --- A = 10 → A = 10
** [ += ] ** --- A += B → A = A+B
** [ -= ] ** --- A -= B → A = A-B
** [ = ] * --- A = B → A = AB
** [ /= ] ** --- A /= B → A = A/B
** [ %= ] ** --- A %= B → A = A%B


 
  
   new document 
   
 

 

 

증감 연산자
증가 연산자는 변수에 저장된 값을 1씩 증가시킨다. 반대로 감소 연산자는 변수에 저장된 값을 1씩 감소시킨다.


** [ ++ ] ** --- 1씩 증가
** [ -- ] ** --- 1씩 감소


 
  
    

 

 

 

논리 연산자
피연산자로는 논리데이터인 true 또는 false가 올 수 있다. 연산자로는 이항 연산자인 논리합(||), 논리곱(&&)이 있으며, 단항 연산자인 논리부정(!)이 있다.


** [ || (논리합) ] ** --- OR (또는)
** [ && (논리곱) ] ** --- AND (그리고)
** [ ! (논리부정) ] ** --- NOT (부정)
논리합 연산자는 피연산자에 true가 한 개라도 있으면 true값을 반환하면 반면, 논리곱 연산자는 피연산자 중 false가 한 개라도 있으면 false값을 반환한다. 한편, 논리 부정은 변수에 true가 저장되어 있으면 false를, false가 저장되어 있으면 true를 결과로 내어놓는다.
실생활을 예로 들어, 엄마가 철수에게 김밥 또는(||) 순대를 사오라고 시켰는데 철수가 순대와 떡볶이를 사왔다면 심부름을 맞게 한 것일까?
떡볶이는 틀렸지만(false) 김밥은 참(true)이므로 철수는 제대로 심부름을 해온 것이다.
이제 논리연산자 표를 보면서 결과를 확인해 보도록 하자.
var A = 10, B = 20;
var C = 30, D = 40;

  
    num1
    num2
    num1 || num2
    num1 && num2
    !num1
  
  
    A > B
    C >= D
    ㉠
    ㉡
    ㉢
  
  
    A >= B
    C <= D
    ㉣
    ㉤
    ㉥
  
  
    A <= B
    C < D
    ㉦
    ㉧
    ㉨
  



㉠ --- num1은 false이고, num2도 false이므로 논리합( || ) 결과는 false이다.

㉡ --- num1은 false이고, num2도 false이므로 논리곱( && ) 결과는 false이다.

㉢ --- num1은 false이므로, num1의 논리부정(!) 결과는 true이다..

㉣ --- num1은 false이고, num2는 true이므로 논리합( || ) 결과는 true이다.

㉤ --- num1은 false이고, num2는 true이므로 논리곱( && ) 결과는 false이다.

㉥ --- num1은 false이므로, num1의 논리부정(!) 결과는 true이다.

㉦ --- num1은 true이고, num2도 true이므로 논리합( || ) 결과는 true이다.

㉧ --- num1은 true이고, num2도 true이므로 논리곱( && ) 결과는 true이다.

㉨ --- num1은 true이므로, num1의 논리부정(!) 결과는 false입니다.


응용문제1


20대 대상의 소개팅을 준비 중입니다. 그런데 남성은 다 모집이 되었지만 여성은 아직 모집이 다 되지 않았네요. prompt 메서드를 활용하여 성별과 나이를 물어봅니다. 20대 여성이라면 결과값이 true로, 아니라면 결과값으로 falsee가 나오게 만드세요
우선, 문제에서 언급된 'prompt 메서드' 를 알아보자. 자바스크립트를 활용한 재미있는 이벤트 메서드 중 하나인데, 단어 뜻(prompt : 띄우다) 그대로 사용자에게 간단한 창을 띄워 질문에 대한 답 을 받아 저장하는 기능이다.사용법은 다음과 같다.


기본형식
prompt("질문내용") 처럼 기술하거나 만약 기본적인 답변이 있을 경우라면, prompt("질문내용", "기본답변")
<예> prompt("이름은?", "홍길동")과 같이 기술합니다.
일단, 문제에서 설명한 대로 '성별'을 먼저 물어본 후 입력된 값을 gender라는 변수에 저장해 보겠다.(여성을 찾고 있으므로, 기본답변은 '여성'으로 해두겠다.)
var gender = prompt("당신의 성별은?", "여성");
다음 조건으로, '나이'에 관한 질문을 입력된 값을 age라는 변수에 저장한다.
var age = prompt("당신의 나이는?", "20");
질문이 다 끝났으면 입력된 뎅이터로 조건을 체크할 차례이다. 응답자가 20대라면, 그 나이(age)값은 20보다 크거나 같고 30보다는 작은 숫자겠다. 만약 응답자가 '여성'과 '25'라는 수를 응답한 경우라면 연산자를 통한 체크 과정은 다음과 같다.


gendeer == "여성" --- 성별이 여성과 같다
&&(논리곱, 그리고)


age >= 20 --- 20보다 크거나 같다


&&(그리고)


age  < 30 --- 30보다 작다
= true
그럼 지금까지의 과정을 코드로 작성해보자

위와 같이 코딩된 페이지를 연 사람이 응답창에
당신의 성별은? --- 여성
당신의 나이는? --- 25
와 같이 입력했다면 웹 브라우저에sms true값이 출력될 것이다.
응용문제2


국어, 영어, 수학 3과목 평균 및 통과여부 문제
prompt 메서드를 활용하여 국어, 영어, 수학 점수를 입력받으세요. 평균이 70점 이상이고 각 과목별 점수가 60점 이상이라면 true를, 아니라면 false를 출력한다.
먼저 질문 코드를 입력하도록 하자. 한 가지 알아둘 것은, prompt 메서드는 입력 받은 데이터를 문자형 데이터로 반환한다는 것이다. 만일 문자형 데이터에 더하기 연산자를 사용하게 된다면 우리가 아는 '사칙연산'이 아닌, 문자들의 연결로 인식하게 되는 것이다. 즉, '1+1'이라는 수식을 연산의 결과 2가 아니라 그냥 11로 출력할 수 있다는 이야기다.
var korNum = prompt("국어 점수는?", "0");
var engNum = prompt("영어 점수는?", "0");
var mathNum = prompt("수학 점수는?", "0");
결국, 이와 같이 코딩한 수 사용자가 국어 점수를 70, 영어 점수를 80, 그리고 수학 점수를 70으로 입력해도 평균을 위해 '+' 연산자를 쓰면 '문자 결합'이 되어 결과는 "708070"이 되어 버린다. 이런 오류를 막으려면, 다음과 같이 prompt로 입력 받을 내용을 Number() 메서드로 감싸주어 그 데이터를 숫자형식(Number)으로 저장해야 한다.
var korNum = Number(prompt("국어 점수는?", "0"));
var engNum = Number(prompt("영어 점수는?", "0"));
var mathNum = Number(prompt("수학 점수는?", "0"));
이제, 평균 점수는 그렇게 입력 받은 세 과목의 점수를 합산하여 과목수로 나눠주면 된다. '(국어점수 + 영어점수 + 수학점수) / 과목수 = var avg = (korNum + engNum + mathNum) / 3
검토 과정은 다음과 같다.



avg >= 70 --- 평균이 70점 이상

&&



korNum >= 60 --- 국어점수 60 이상



&& --- 그리고

engNum >= 60 --- 영어점수 60 이상



&& --- 그리고

mathNum >= 60 --- 수학점수 60 이상

→ true
이번에도, 이런 모든 과정을 실제로 코딩해보자.

문자 결합 연산자
피연산자로는 2개의 데이터가 필요하며, 피연산자(연산대상)에 데이터가 1개 이상 문자형 데이터일 경우에 문자 결합 연산자로 실행한다. 만일 피연산자 데이터가 모두 숫자형 데이터라면 산술 연산자로 실행을 하게 된다.

조건 연산자
조건 연산자는 조건식의 결과가 true(참) 혹은 false(거짓)일 때 각각 다른 실행문을 수행시킨다. 우선 기본형식을 익힌 후 예제를 통해 정확한 사용법을 익혀보도록 하자.


기본 형식
조건식 ? 실행문1 :  실행문2

조건식의 결과값이 참(true)이면 실행문1을, 거짓(false)이면 실행문2를 수행한다.


또한 우리는 confirm() 메서드를 활용해 확인, 취소창을 띄울 수 있다.. 여기서 '확인'버튼을 누를 경우, true값을 반환하며 '취소' 버튼을 누를 경우 false값을 반환한다. 















































































































CSS3 - 경계선, 배경, 문자 효과, 2차원 변형, 속성 전환, 애니메이션, 다단 편집, 사용자 환경
Wed, 19 Jan 2022 05:14:59 GMT
※ 본 포스팅은 책 『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성하였음.
이번에는 CSS3에서 추가된 내용을 정리해 보자. CSS3 속성들은 대체로 브라우저마다 부분적으로만 구현할 수 있기 때문에 대부분의 CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤더 프리픽스(CSS3 Vendor Prefix) 를 붙여서 사용한다. 다음과 같이 4가지 종류가 있으며 CSS3의 속성들은 대부분 IE8 이하에서는 표현되지 않는다. http://www.w3schools.com 에 가면 어느 브라우저가 그 속성을 지원하는지 나타나 있다.



webkit --- 웹킷 방식 브라우저용. 사파리, 크롬
moz --- 게코 방식 브라우저용. 모질라사 파이어폭스
o --- 오페라
ms --- 마이크로소프트사 익스플로러(버젼 9, 10 이상)

예를 들어 파이어폭스에서 배경에 그라디언트를 주고자 할 때 background:-moz-linear-gradient(top,#06f,#fff);와 같이 사용해야 한다는 것이다.
경계선(Borders)
Borders 속성을 할 수 있는 일은 모서리를 둥글게 하는 것 외에 네 모서리 중 원하는 부분만 둥글게 표현하여 원, 반원, 4분의 1조각짜리 원 등을 표현해 낼 수도 있다. 그리고 거기에 곁들여 박스에 그림자를 드리우는 box-shadow 속성과 테주리에 무늬를 부여하는 border-immages 속성까지 함께 알아보도록 하자.
border-radius : 20px;
네 모서리가 20px 만큼 둥근 박스를 만들어준다. 아래 그림과 같이 둥근 모서리를 동그란 원의 테두리로 생각했을 때 그 원의 반지름을 radius값으로 표현한다.



border-radius : 20px 40px 60px 80px;
좌측 상단 모서리 반지름이 10px, 우측 상단 모서리 반지름이 20px, 우측 하단 모서리 반지름이 30px, 좌측 하단 모서리 반지름이 40px인 박스를 만들어준다. 즉, 네 개의 수치가 좌측 상단부터 시계방향이다. 값은 박스의 크기보다 적게 설정해야 테스트가 가능하다.



width : 200px; height : 200px; border-radius : 100px;
이렇게 border-radius값을 width, height값의 1/2로 지정하면 동그란 원을 표현할 수 있다.



width : 200px; height : 100px; border-radius : 100px 100px 0 0;
가로가 긴 박스이므로 네 모서리 중 마주하는 두 곳의 반지름만 width, height값의 1/2로 지정하여 반원 모양의 박스를 표현할 수 있다.



width : 100px; height : 200px; border-radius : 200px 0 0 0;
네 모서리 중 한쪽의 반지름만 width, height값의 2배로 지정하여 1/4 원 모양의 박스를 표현할 수 있다.



box-shadow : inset 0px 0px 20px 15px rgba(18, 52, 86, 0.8);

inset --- inset을 써주면 박스의 그림자가 안쪽으로 퍼지게 된다.
0px --- 그 다음 수치는 가로로 밀리는 폭인데 inset일 때 값을 주면 예쁘지 않으니 주지 않겠다.
0px --- 그 다음 수치는 세로로 밀리는 폭이다.
20px --- 그 다음 수치는 그림자가 퍼지는 정도이다.
15px --- 그 다음 수치는 그림자와 박스의 거리이다.
rgba(18, 52, 86, 0.8); --- 마지막은 그림자의 색상이다. 괄호 안은 red, green, blue 투명도 순으로 입력한다.




border-image : url(images/border.png) 27 27 round;
지정한 이미지를 테두리에 무늬로 칠해준다. 단, 이 속성은 아쉽게도 크롬 브라우저에서만 정상 실행된다. 원래 이미지의 입자가 27px이면 수치를 27로 기입하듯이 이미지 길이와 같은 수치를 쓸 때 가장 정확하게 나타나고 줄일 수도 있다.
배경(Backgrounds)
Backgrounds 속성에는 한 가지 색이 아닌 여러 색 단계를 원형과 선형으로 점진적으로 칠해주는 그라디언트 칠 기능이 있으며 배경 이미지의 위치나 크기를 조절할 수도 있다. CSS3 속성 중 가장 많이 변경, 발전된 부분이라고 볼 수 있는 배경 관련 속성을 시작해 보자.
gradient 속성
이 속성은 반드시 밴딩 프리픽스를 붙여서 실행한다.


background:-webkit-gradient(linear, left bottom, left top, color-stop(0,#60),color-stop(2,#00));

유형 : 선형 그라디언트(linear)
위치 : 좌측 아래부터 좌측 위 방향
색상 : 시작(0)색상 - #f60, 끝(1)색상 - #f00



background:-moz-linear-gradient(top,#60,#f00);

시작 위치 : 위
시작 색 : #60, 끝 색 : #f00



background-image:-webkit-gradient(radial,center center,10,center center,90,from(#60),to(#f00) );

유형 : 원형 그라디언트(radial)
시작 위치 : center, 반지름 : 10
끝 위치 : center, 반지름 : 90
시작 색 : #f60, 끝 색 : #f00



background-image:-moz-radial-gradient(center 45deg, circle closet-corner, #f60 10%, #f00 70% );

시작 위치 : 기본값 center
각도 : 45도
모양 : circle-원형( ecllipse는 타원 ) webkit은 타원 안 됨
크기 : 네 가지. (webkit은 크기 조절 안 됨)
  closet-side, contain --- 그라데이션이 가장 가까운 면과 만난다.
  closet-corner --- 가장 가까운 상자에 꽉 찬다.
  farthest-side --- 상자의 가장 멀리 있는 면과 만난다.
  farthest-corner,cover --- 가장 멀리 있는 상자에 꽉 찬다.

background-size
이제는 배경 이미지의 크기까지 조절할 수 있게 되었다. 형식은 다음과 같다.


background-sizee : 80px 60px;
배경 이미지의 가로 크기 80px, 세로 크기 60px


background-size : 150px;
배경 이미지의 가로 크기 150px, 세로 크기 150px


background-size : container;
배경 이미지의 크기를 박스의 세로 크기에 맞춤


background-size : cover;
배경 이미지의 크기를 박스의 가로 크기에 맞춤
background-origin
이 속성으로 배경 이미지의 한계를 어디로 할지 정할 수 있게 되었다.


background-origin : border-box;


background-orrigin : padding-box;
박스의 안 여백을 포함한 부분까지를 경계로 잡는다.


background-origin : content-box;
박스의 안 여백을 제외한 부분까지만 경계로 잡는다.
multi-background
CSS3에서는 배경 이미지로 여럿을 지정할 수 있고 위치와 기타 속성도 각각 설정할 수 있다.


background-image : url("images/bg.png"), url("images/bg_line.gif"), url("images/blueheart.png");
배경으로 세개의 이미지를 지정함.


background-repeat : repeat-x, repeat-x, no-repeaat;
세 개의 배경 이미지 중 1, 2번은 가로 반복, 3번은 반복 없음으로 설정함.


background-position : top, bottom, center;
세개의 배경 이미지 중  1번은 위, 2번은 아래, 3번은 정중앙으로 위치를 정함.


background-attachment : fixed, fixed, fixed;
세 개의 배경 이미지 모두 화면에 고정 시킴.
background-clip
배경색을 어디까지 칠해 줄 것인지 결정하는 속성이다. background-origin과 의미가 비슷하다.


background-clip : content-box;
배경색이 콘텐츠 부분까지만 칠 됨


background-clip : padding-box;
배경색이 안 여백 영역까지 칠 됨


background-clip : border-box;
배경색이 테두리 영역까지 칠 됨
문자 효과(Text Effects)
글자에 주는 효과들은 그림자, 줄  바꿈, 글꼴 설정 등이 있다.
text-shadow
그래픽 프로그램의 도움 없이도 글자에 그림자를 줄 수 있게 되었다.


text-shadow : 1px -2px #ccc;
글자에  우측으로 1px, 위쪽으로 2px 위치에 연회색으로 그림자를 드리워준다.
word-wrap
영문을 띄어쓰기 없이 길게 입력하면 width값을 주어도 박스 밖으로 튀어 나오게 되는데 이것을 가로 폭에 맞추어 적당히 잘라 다음 줄로 내려오도록 해준다.
font-face
기본 글꼴이 아닌 경우, 글꼴 파일 없이는 인터넷 화면에 뜨게 할 수 없으므로 사용자들도 같은 글꼴로 볼 수 있도록 웹 폰트를 설정하는 법을 알아보자.
웹 폰트는 유료가 많으니, 무료 폰트인 나눔고딕을 예로 들고, IE8 이하를 제외한 모든 브라우저에서 지원 가능한 woff(Web Open Format Font)포맷으로 실행해 보도록 하자. 절차는 다음과 같다.
글꼴을 다운 받거나 구매한 뒤 내 업로드할 폴더를 정해 올린다. 


NanumGothic.woff
NanumGothicBold.woff
NanumGothicExtraBold.woff
CSS에서 다음과 같이 글꼴 이름, 글꼴 파일 경로, 파일 유형을 설정한다.


@font-face {font-family:"NGothic";src:url("../font/NanumGhothic.wooff") format("woff");}
@font-face  {font-family:"NGothicB", src:url("../font/NanumGothicBold.woff") format("woff");}
2font-face {font-family:"NGothicEB", src:url("../font/nanumGothicExtraBold.woff") format("woff");]
선택자에 지정한다.


h1 { font:bold 2em "NGothicEB";}
2차원 변형(2D Transform)
박스를 회전(rotate), 확대 축소(scale), 이동(translate), 찌그러뜨리기(skew)할 수 있게 되었다.


transform : translate(20px, -30px);
박스를 우측으로 20px, 위로 30px 이동시킴


transform : rotate(30deg);
박스를 시계 방향으로 30도 회전시킴


transform : scale(1.3, 0.7);
박스를 가로 130%로 확대, 세로 70%로 축소시킴


transform : skew(30deg, 20deg);
박스를 가로 30도, 세로 20도로 찌그러뜨림.
속성 전환(Transitions)
Transition은 background, color, height, width, transformation 등의 속성들에 애니메이션을 적용하는 것이다. 형식은 다음과 같다.


transition : property duration timingfunction;

property --- 애니메이션 시킬 속성을 사용함
duration --- 시작해서 끝날 때까지 시간을 초 단위로 지정함
timigfunction --- 속도 변화를 기술하는데 큰 차이를 느끼기 어렵지만 다음 항목들이 있다.




linear* --- 등속 cubic-bezier(0, 0, 1, 1)와 같음.
ease* --- 느리게 시작했다가 빨라졌다 다시 느려짐. cubic-bezier(0.25, 0.1, 0.25, 1)와 같음.
ease-in* : 점점 빨라짐. cubic-bezier(0.42, 0, 1, 1)와 같음.
ease-out* : 점점 느려짐. cubic-bezier(0, 0, 0.58, 1)와 같음.
ease-in-out* : 처음과 끝이 느림. cubic-bezier(0.42, 0, 0.58, 1)와 같음.
cubic-bezier(N,N,N,N)* : 값을 입력하여 가속/감속을 조작.



transition-delay : 0.5s;
0.5초 지난 후 작동함.


transition : background 0..5s ease, color 0.3s linear;
다중으로 여러 속성을 적용 시킬 수 있음.
애니메이션(Animation)
박스의 크긴나 위치 또는 색상 등의 속성을 시간에 따라 변화를 줄 수 있도록 키프레임을 설정하여 여러 단계를 연속적으로 실행할 수 있다.
애니메이션 명령을 내리는 것과 별도로 변경 시점을 지정하기 위해 키프레임을 설정해야 하는데 이때에도 벤더 프리픽스를 붙여준다.


animation:myfirst 5s infinite;

myfirst로 지정된 키프레임에 설정된 대로 5초 동안 애니메이션 할 것을 명령함.
infinite : 계속 반복함.
(animation-direction을 alternate로 설정하면 처음에서 끝을 지그재그로 반복함)



@keyframes myfirst
{
0% {background:#c00; width:140px; height:120px;}
25% {background:#00c; width:450px; height:120px;}
50% {background:#808; width:450px; height:180px;}
75% {background:#080; width:140px; height:180px;}
100% {background:#c00; width:140px; height:120px;}

시작할 때 박스 크기는 140px * 120px 이고 색상은 자주색
설정 시간의 1/4이 지날 때에 박스 크기는 450px * 120px 이고 색상은 파란색
설정 시간의 2/4이 지날 때에 박스 크기는 450px * 180px 이고 색상은 초록색
설정 시간의 3/4이 지날 때에 박스 크기는 140px * 180px 이고 색상은 보라색
설정 시간의 마지막에 다다랐을 때에 박스 크기와 색상은 다시 원래대로 되돌아옴

다단 편집(Multiple Colume)
CSS3에서는 float이나 position을 이용하지 않고도 다단을 편집할 수 있도록 멀티 칼럼을 지원하고 있다.


column-count : 3;
박스의 내용을 3단으로 하기로 한다.


column-gap : 20px;
각 단 사이의 간격을 20px로 하기로 한다.


column-rule : 2px dotted brown;
단과 단 사이에 구분선을 줄 수 있고 그 선의 모양을 2px 두꼐의 점선으로 한다.
사용자 환경(User Interface)
User Interface에서는 박스의 크기를 조절하거나 박스의 크기 설정 방법을 설정하거나 border 밖에 테두리를 줄 수 있다.
box-sizing


box-sizing : content-box;
border가 박스 크기에 포함되지 않는다.


box-sizing : border-box;
border가 박스 크기에 포함된다.
박스의 크기에 border의 두께가 포함되지 않는다. 그런데 width값을 픽셀로 줄 수 없는 경우가 간혹 발생하는데 그 때에는 border의 두께를 width에 포함시켜 줄 수 있으면 좋다.
resize
박스의 모서리를 잡아당겨 크기를 조절할 수 있다. (가로 : horizontal, 세로 : vertical, 양쪽 : both)
outline
border를 깜싸는 테두리를 또 줄 수 있다.


outline-offset --- border와 outline 사이의 거리
outline-width --- outline의 두께
outline-color --- outline의 색상
































































































































































































CSS - IE 조건 주석문
Tue, 18 Jan 2022 09:04:21 GMT
※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.
IE 조건 주석문
조건 주석문이란 일반적인 주석문을 말하는 게 아니라 IE 브라우저에서만 다른 CSS 파일을 적용하고자 할 때 쓰는 일종의 문법적인 구문이다.
IE6, 7, 8 브라우저는 다른 표준 브라우저들에 비해 CSS 실행 결과가 다르게 나타나는  경우가 빈번히 있어, 그런 경우 CSS를 다르게 적용해 주어 비슷하게라도 보여지도록 해주어야 하기 때문이다. 사용법은 다음과 같다.


위의 구문에서 main.css 파일을 주 CSS 파일로 사용하지만 브라우저가 인터넷 익스플로어 9버전보다 낮을 경우 즉, IE6, IE7, IE8에서는 main_ie.css 파일을 사용하게 된다.


위의 구문은 main.css 파일을 CSS 파일로 사용하지만 브라우저가 인터넷 익스플로어 6일 경우에서만 main_ie6.css 파일을 사용하게 된다는 뜻이다.
그렇다면 이래야 할 일이 뭐가 있을까? 한 예로 입력 양식 중 체크 박스의 여백이 IE6,7에서 다르게 나타나며, 다른 예로는 이미지 중 svg포맷이 IE에서 나타나지 않는다. 크롭 브라우저에서는 화면이 확대되어도 svg 포맷의 이미지는 꺠끗하게 나타나지만, IE에서는 svg는 보이지도 않는다. 따라서 IE에서는 이미지를 gif나 jpg로 바꿔 주어야 한다.



CSS - 상자, 레이아웃
Mon, 10 Jan 2022 05:44:12 GMT
*본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.
※코드 출력화면이 보이지 않을 시 글 수정 페이지로 들어와 확인 할 것
상자(Box)
width
박스의 가로 사이즈를 말하는데 여백을 포함하지 않는 크기로 px, %, em 등의 단위로 된 수치를 쓸 수 있고, 많은 브라우저 오류가 가로 사이즈를 기재함으로써 치유되므로 가장 중요한 속성 중 하나라고 볼 수 있다.
height
박스의 세로 사이즈를 말하는데 역시 여백을 포함하지 않는 크리고 px, %, em등의 단위로 된 수치를 쓸 수 있다. 높이값 속성은 레이아웃 작업에서 float을 해제할 때 쓰는 겨우가 있지만 장문의 텍스트 상자에서는 레이아웃을 설계하는데 오히려 방해가 되므로 높이값은 가능한 한 사용하지 않는 것이 좋다.
padding
박스의 안쪽 여백을 발한다. 즉, 내용과 테두리 사이의 간격을 말하는 것이며, 간격과 방향에 관련해서는 다음의 형식으로 사용하게 된다.


padding : 10px; --- 값을 한 번만 지정하면 위, 아래, 왼쪽, 오른쪽 안 여백 모두 각 10px
padding : 10px 20px; --- 값을 두 번 지정하면 위, 아래 10px / 왼쪽, 오른쪽 20px
padding : 10px 20px 30px; --- 값을 세 번만 지정하면 위 10px / 왼쪽, 오른쪽 20px / 아래 30px
padding : 10px 20px 30px 40px; --- 값을 네 번 지정하면 위 10px / 오른쪽 20px / 아래 30px / 왼쪽 40px
padding-top : 10px; --- 위쪽 안 여백만 10px로 지정함
padding-right : 10px; --- 오른쪽 안 여백만 10px로 지정함
padding-bottom : 10px; --- 아래쪽 안 여백만 10px로 지정함
padding-left : 10px; --- 왼쪽 안 여백만 10px로 지정함
margin
박스의 바깥쪽 여백을 말한다. 즉, 테두리와 다음 박스 영역 사이의 간격을 말하는 것이며, 특정 브라우저에서 오류를 많이 일으키므로 가능한 한 사용하지 않는 것이 좋겠다.


margin : 10px; --- 값을 한 번만 지정하면 위, 아래, 왼쪽, 오른쪽 바깥 여백 모두 각 10px
margin : 10px 20px; --- 값을 두 번 지정하면 위, 아래 10px / 왼쪽, 오른쪽 20px
margin : 10px 20px 30px; --- 값을 세 번만 지정하면 위 10px / 왼쪽, 오른쪽 20px / 아래 30px
margin : 10px 20px 30px 40px; --- 값을 네 번 지정하면 위 10px / 오른쪽 20px / 아래 30px / 왼쪽 40px
margin-top : 10px; --- 위쪽 밖 여백만 10px로 지정함
margin-right : 10px; --- 오른쪽 밖 여백만 10px로 지정함
margin-bottom : 10px; --- 아래쪽 밖 여백만 10px로 지정함
margin-left : 10px; --- 왼쪽 밖 여백만 10px로 지정함
두 개의 값을 써서 세로 가로 여백을 설정하는 형식으로 박스를 가운데에 정렬할 수 있다.
박스에 가로 사이즈를 주고 [margin : 세로값 auto;] 하게 되면 전체 폭의 중앙에 설정한 크기의 박스가 배치된다.


 CSS 




   오늘은 비가 옵니다.
   오늘은 눈이 옵니다.
   오늘은 해가 납니다.
   오늘은 흐립니다.


이를 출력하면 다음과 같다.



   오늘은 비가 옵니다.
   오늘은 눈이 옵니다.
   오늘은 해가 납니다.
   오늘은 흐립니다.


각 요소 간의 마진은 합해서 40px이어야 할 텐데 20px이다. - 세로 마진 겹침 오류!
마지막 박스는 중앙에 배치되었다. - margin : 0 auto;
border
박스의 테두리를 말한다. 테두리의 색상, 모양, 굵기를 정할 줄 알아야 하며 한꺼번에 지정할 줄도 알아야 한다.


border-color : #00f; --- 테두리의 색상을 파란색으로 지정한다
border-width : 2px; --- 테두리의 굵기를 2px로 지정한다
border-style : solid; --- 테두리의 모양을 실선으로 지정한다
border-top : 1px solid red; --- 위쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-bottom : 1px solid red; --- 아래쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-left : 1px solid red; --- 왼쪽 테두리만 1px짜리 빨간 실선으로 지정한다
border-right : 1px solid red; --- 오른쪽 테두리만 1px짜리 빨간 실선으로 지정한다
테두리 선의 모양은 다음과 같다.


solid --- 실선 모양의 테두리를 칠함
dashed --- 긴 점선 모양의 테두리를 칠함
dotted --- 점선 모양의 테두리를 칠함 (IE6에서는 1px dotted line은 dashed line으로 표현된다)
double --- 테두리 모양이 이중선으로 나타남
none --- 테두리를 치지 않음
groove, ridge, inset, outset --- 액자 형태의 테두리를 칠함


border:5px solid #123456;
border:5px dotted #123456;
border:5px dashed #123456;
border:10px groove #06c;
border:10px ridge #f06;
border:10px inset #0c3;
border:10px outset #c63;
border:none;



레이아웃
이번에 나오는 속성들은 블록들의 위치를 가로로 나열하는 데 필요한 요소와 요소들을 겹치게 배열하는 데 필요한 요소들이며 웹 표준 전반에서 가장 중요한 부분이다.
float
박스를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 반드시 필요한 것이다. float한 박스에 가로 사이즈를 함께 주어야 모든 구형 브라우저에서까지도 크로스 브라우징 된다.
*크로스 브라우징이란? --- 각 브라우저들에서 한 웹페이지가 동일한 결과로 표현되는 것


left --- 박스를 왼쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함
right --- 박스를 오른쪽에 배치하고 나머지 컨텐츠는 그 주변을 흐르도록 함
[float : left;] 를 계속 쓴다는 것은 float된 박스의 옆 공간 중에서 왼쪽에 붙인다는 뜻이다.
따라서 계속 가로로 나열해야 하는 박스들은 맨 마지막 것을 제외하고는 모두 [float : left;]여야 하고 모두 다 [float : left;]여도 된다는 것이다.
clear
float된 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치되도록 하는 속성이다.
즉, float을 해제시켜주는 중요한 역할을 하는데, 이 요소는 블록이어야 한다.


left --- float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
right --- float된 박스 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴
both --- float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치해줌(가장 중요)
float을 해제하지 않으면 얼핏 보기에 정상적인 것 같아도 float된 박스를 감싸는 박스에 부여된 배경이나 테두리 속성이 실행되지 않는다. 특히 float된 박스 다음에 [clear : both;]를 부여할 박스가 없어서 방치한 경우가 그런 경우이다.
이런 경우에는 [clear : both;]를 부여할 가짜 요소를 만들어 주어야 한다. :after 선택자를 이용하여 container 안에 실제로는 없는 마지막 박스를 만들고 내용은 비웓둔다. 거기에 [clear : both;]을 해준다.
#container:after {
  content : "";
  display : block;
  clear : both;
}
이렇게 세 문장이다.
이러한 float 해제 처리를 해주지 않으면 container에 디자인이 들어가지 않는다는 것을 다음 예제를 통해 확인해보자.



CSS






녹차와 커피

녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.


커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우  태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.







이를 출력하면 다음과 같다.






CSS






녹차와 커피

녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.


커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우  태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.








위의 코드에서
#container:after{content:"";display:block;clear:both;}
이 구문이 사라지면 #container 의 디자인이 제대로 실행되지 않아 결과가 다음처럼 나오게 된다.






CSS






녹차와 커피

녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.


커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우  태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.








※ 만약 제대로 출력이 되지 않을 시 수정 페이지에서 모습을 확인할 수 있다.
display
요소의 성격을 바꾸어주는 속성이다. display가 어떻게 설정되어 있는지에 따라 그 후 사용할 수 있는 속성이 달라지므로 주의하자.


block --- 박스를 블록  요소로 만들어 줌 (줄 바꿈이 일어남)
inline --- 박스를 인라인 요소로 만들어 줌 (줄 바꿈이 일어나지 않음)
inline-block --- 박스를 인라인 요소로 두어 줄 바꿈은 일어나지 않게 하면서 블록에 쓸 수 있는 속성을 쓸 수 있음
none --- 박스를 보이지 않ㅎ게 숨겨 줌
*블록에 쓸 수 있는 속성이란? - width, height, padding, text-align... 등이다.
[display : inline-block;]을 사용하면 요소들 사이에 5px의 margin이 발생한다.
따라서 만약 각 메뉴들 사이가 붙어 있어야 한다면 [display : inline-block;]  대신 [float : left;] 를 넣어야 한다.
이때 float 해제는 gnb 요소에 높이값을 주는 것으로 처리한다. (뒤에 가서 정리할 float 해제 방법에 다시 나온다.)
overflow
박스 안의 내용이 박스보다 클 경우 넘치는 부분을 처리하는 속성이다.


hidden --- 넘치는 컨텐츠를 숨김
auto --- 넘치는 컨텐츠가 존재할 경우에만 스크롤바를 생성해 줌
scroll --- 넘치는 컨텐츠가 없어도 스크롤바를 생성해 줌
scroll-y, scroll-x --- 각 방향으로 스크롤바를 따로 처리하게 해줌


CSS



    
        우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
         - 김연수(소설가) 
        이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 
    





이를 출력하면 다음과 같다.





CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







overflow에 무엇을 주느냐에 따라 다음과 같은 결과가 나타난다.



overflow : hidden;


CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







overflow : scroll;


CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







overflow-y : scroll;


CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







overflow-x : scroll;


CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







overflow : auto;


CSS





우리가 확실하다고 여기는 것이 아니라 불명확하다며 지나치는 사소한 것에 내가 누구인지 말해주는 본질적인 요소가 담겨 있다
 - 김연수(소설가) 
이 글을 처음 읽게 되었을 때 공감하여 입을 다물지 못했다. 무릎 대신 머리를 치는 것 같은 느낌을 받았다. 그 뒤로 나는 사람들이 발표하는 말이 아닌 일상에서의 사소한 말들에 집중하기 시작했던 것 같다. 







float을 해제하는 몇 가지 방법
앞서 언급했듯 float을 해제하지 않으면 다음 박스들에 속성이 제대로 지정되지 않으며 무엇보다 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 하나도 나오지 않는다. 따라서 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요하다.


1. float된 박스들의 바로 다음 박스에게 [clear : both;] 한다.
바로 다음에 박스가 없으면 사용할 수 없다.
2. float된 박스들을 감싸는 박스를 다시 [float : left;] 한다.
그 float까지 연쇄적으로 해제해야 하며 width값 주어야 크로스 브라우징 됨.
3. float된 박스들을 감싸는 박스에 [overflow : auto;] 한다.
세로 스크롤바가 생길 경우 사용할 수 없으며 width값 주어야 크로스 브라우징 됨.
4. float된 박스들을 감싸는 박스에 height값을 준다.
본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능.
5. float된 박스들을 감싸는 박스에 가상요소 : after를 주어 해제한다.
아무 부작용 없으며 width값 주어야 크로스 브라우징 됨.
1번이 안되면 이 방법이 가장 좋음.
※ 부모 요소에 heignt를 주면 float 해제 효과가 있으나 본문 내용에 height를 주면 유지보수가 힘들어지니 container 본문 부분에서는 꼭 필요한 경우가 아니면 height를 주지 않는다.
position
블록을 박스의 위치기준으로 배치하는 기술로서, 주로 컨텐츠를 서로 겹치게 배열하거나 마크업 순서와 디자인상의 순서가 다른 경우의 표현에 매우 유용하다.


static --- 요소를 이동하거나 겹칠 수 없는 원래 그대로의 상태를 말하며 postion을 생략하면 그게 바로 static.
relative --- relative로 지정된 요소는 left와 top 속성으로 이동을 할 수 있으며, absolute로 지정된 요소의 부모 요소 역할을 할 수도 있다.
absolute --- absolute로 지정된 요소는 다른 요소와 겹칠 수 있고 left와 top 속성을 이용하여 부모 박스를 기준으로 위치를 정해주어야 한다.
fixed --- 요소의 위치를 화면 기준으로 지정해주며, 구형 브라우저에서는 표현되지 않는다.
position은 absolute와 relative가 중요하다. 다른 요소와 겹쳐져야 하거나 또는 제이쿼리로 애니메이션 해야 한다면 absolute여야 한다. 또한, absolute 요소의 부모 박스 역할을 하거나 그냥 살짝 이동만 할 거라면 relative를 사용한다.
position : relative;와 float : left;는 함께 쓸 수 있으며 둘 다 주변과 어울리게 해준다. 그러나 position : absolute;와 float : left;는 함께 쓸 수 없다. absolute는 어울림의 반대 즉, 따로 떨어져 나온 독립된 요소이기 때문에 부모 박스가 자동으로 감싸주지 않는다. 또한, float : left;와 clear : both;도 함께 쓰면 안된다. float하는 명령과 해제하는 명령을 둘 다 쓰면 float 명령이 오류를 일으키게 돌 테니 쓰지 않는 것이 맞다.
left
relative나 absolute, 또는 fixed된 박스의 가로 위치를 정할 때 쓰는 속성이다.
※ 마크업한 요소가 접근성 측면에서 반드시 읽어주어야 하지만 보이지 않는 것이 레이아웃 상으로 좋을 경우 요소를 화면 바깥으로 숨기기 위해 position : absolute; left : -9999px; }처럼 사용하기도 한다.
displat : none;을 하면 아예 읽을 수 없어지기 때문에 위와 같은 방법으로 숨기는 것이 좋다.
한 가지 더, table의 caption은 위처럼 숨기면 브라우저에 따라 오류가 생길 수 있으니 visibility : hidden;도 넣어 준다.
top
relative나 absolute, 또는 fixed된 박스의 세로 위치를 정할 때 쓰는 속성이다.
2단 레이아웃을 완성하는 몇 가지 방법
2단은 container 안의 가로로 나열된 두 박스, sidemenu와 content를 말한다.
1. float 방식
sidemenu는 float ; left;하고 content는 float : right;
※loat의 해제가 필요함.

  sidemenu
  content

clear:both;


  sidemenu
  content

clear:both;



2. position - 절대, 상대위치
sidemenu는 position : absolute하고 content는 position : relative; 함.
긴 쪽을 relative해야 container가 포함할 수 있다.
※부모 박스를 지정해 주어야 함.

  sidemenu
  content



  sidemenu
  content




3. postition - 절대, 마진
sidemenu는 position : absolute하고 content는 margin-left를 줌.
※부모 박스를 지정해 주어야 함.

  sidemenu
  content



  sidemenu
  content




4. float + position
sidemenu는 position : absolute하고 content는 float : right;
※float의 해제가 필요하고 부모 박스를 지정해 주어야 함.

  sidemenu
  content

clear:both;


  sidemenu
  content

clear:both;



3단 레이아웃을 완성하는 몇 가지 방법
이번엔 3단 레이아웃을 완성하는 방법을 정리해보자. sidemenu보다 content를 먼저 마크업 할 경우는 sidemenu와 content를 감싸는 박스가 필요하므로 다섯 가지 방법으로 정리해보자. 
1. float 방식
sidemenu와 content는 float:left; banner만 float:right;
float의 해제가 필요함

  sidemenu
  content
  banner

clear:both;


  sidemenu
  content
  banner

clear:both;



2. content를 sidemenu보다 먼저 마크업
content는 float:right;하고 sidemenu는 flaot:left;
sidemenu와 content는 float:left; banner는 float:right;
float의 해제가 필요함

  
    sidemenu
    content
  
  banner

clear:both;


  
    sidemenu
    content
  
  banner

clear:both;



3. position - 절대, 상대위치
siidemenu와 content는 position:absolute하고 content는 position:relative
부모 박스를 지정해 주어야 함

  sidemenu
  banner
  content




  sidemenu
  content
  banner




4. position - 절대, 마진
sidemenu와 content는 position:absolute하고 content는 margin-left;
부모 박스를 지정해주어야 함

  sidemenu
  banner
  content



  sidemenu
  banner
  content




5. float + position
sidemenu는 float:left;하고 banner는 float;right;하고 content는 position:absolute;
내용이 길면 부모 박스에 height 지정
float의 해제가 필요하고 부모 박스를 지정해 주어야 함
float이 있으니 해제도 해주어야 하고 absolute 박스가 있으니 부모도 설정해주어야 하며 가운데 상자가 absolute 박스이니 양쪽 박스보다 가운데 길이가 긴 레이아웃에 이 방식을 적용하면 안 될 것이다. 제일 번거로운 방식이라서 잘 쓰지 않지만 가능한 조합의 경우를 모두 표현해보기 위해 정리해보자.

  sidemenu
  content
  banner

clear:both;


  sidemenu
  content
  banner

clear:both;










CSS - 선택자, 서체, 문단, 배경
Fri, 07 Jan 2022 05:28:50 GMT

본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.

CSS 기본 문법(Basic CSS Grammar)
CSS는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등의 세 가지 종류가 있다. 실제로 외부 css를 사용하는 편이지만, 간단한 스타일은 내부 스타일시트로도 많이 사용하고 있으며 인라인 스타일시트는 가장 우선순위가 높아 꼭 필요할 때 편리하게 사용할 수 있다.

내부 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 HTML 문서 안에 스타일 태그로 기재하여 스타일이 HTML 안에 함께 저장되는 형대이다.


  
                
  
  
    우리를 기쁘게 하는 것들.
  

-외부 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 따로 CSS파일로 저장하여 HTML문서에 파일명으로 연결해주는 형태이다.
html

  
        /* 스타일 파일을 연결 */
  
  
    우리를 기쁘게 하는 것들.
  

style.css
p { color : red; }

외부 스타일시트 형식이 또 하나 있는데 @import이다. 이것은 스타일 태그나 스타일 파일 안에 써주어야 한다. 주로 기본 CSS를 따로 작성하여 각각의 프로젝트마다 꽂아주는 데 사용한다. CSS 가장 윗줄에 넣어야 한다.

html

  
    
  
  
    우리를 기쁘게 하는 것들.
  

reset.css
body, p, h1 { margin:0; padding:0; }

인라인 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 HTML 마크업의 속성으로 직접 입력해주는 형태이다.
우리를 기쁘게 하는 것들.

이후에 선택자의 속성에 대해 좀 더 배우고 나서 스타일시트를 본격적으로 만드는 예제들을 만나 보자.




선택자(Selector)
CSS에 대한 아무런 지식 없이 선택자를 이야기한다는 것은 어렵다. 그런데 선택자를 모르고는 css속성을 알아볼 수 없기 때문에 선택자의 의미를 먼저 알아야만 좀 더 쉽게 다가갈 수 있따. 선택자란 CSS로 UI 디자인을 할 때 '어디를 꾸며 줄까?'하는 고민의 대상이 되는 부분을 말한다. 선택자에는 여러 종류가 있는데 그중에서 타입 선택자, id 선택자, class 선택자가 가장 중요하다. 그럼 하나씩 좀 더 자세히 살펴보자.

타입 선택자
태그 이름을 그대로 가져다 쓰는 선택자이다.
p { color : blue; } /* p태그 안의 글자들을 파란색으로 처리함 */
id 선택자
id를 붙인 이름을 가져다 쓰는 선택자이다. --- "#"을 붙여 표기함
#ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함 */
class 선택자
class로 붙인 이름을 가져다 쓰는 선택자이다. --- "."을 붙여 표기함
.ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함 */
전체 선택자
페이지의 모든 요소를 가리키는 선택자이다. --- "*"을 붙여 표기함
* { color : blue; } /* 페이지 내의 모든 요소들의 글자들을 파란색으로 처리함 */
자식 선택자
현재 요소 내의 바로 아래 나오는 요소만을 가리키는 선택자이다. IE6에서는 표현되지 않는다.
li > p { color : blue; } /* li 속 바로 아래 p 태그의 글자들을 파란색으로 처리함 */
인접 선택자
현재 요소 밖의 바로 뒤에 나오는 요소만을 가리키는 선택자이다. IE6에서는 표현되지 않는다.
h1 + p { color : blue; } /* h1 속 바로 다음 p 태그의 글자들을 파란색으로 처리함 */
속성 선택자
마크업의 속성을 선택자로 사용할 수 있다. IE6에서는 표현되지 않는다.


h1[class] - class 속성이 있는 모든 h1
img[alt] - alt 속성이 있는 모든 이미지
** *[title]** - title 속성을 갖는 모든 요소
가상 클래스 선택자
링크 걸린 글자에 스타일을 부여하는 것이다.


a:link - 링크된 글자를 보고만 있을 때의 스타일을 주는 선택자.
a:visited - 링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우의 스타일을 주는 선택자.
a:hover - 링크 걸린 글자에 마우스가 닿았을 경우의 스타일을 주는 선택자.
a:active - 링크 걸린 글자가 활성화 되었을 경우의 스타일을 주는 선택자. (클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus - 링크 걸린 글자에 포커스가 생길 경우의 스타일을 주는 선택자. (탭키 등으로 포커스가 나타날 경우)
모두 사용할 경우 위 표의 순서대로 기재해야 하며 무졸 다음 예처럼 사용한다.

수도 클래스 선택자
요소의 세부 조건까지도 나타낼 수 있는 선택자이다. IE6에서는 표현되지 않는다.


:first-letter - 요소의 첫글자
:first-line - 요소의 첫 줄
:first-child - 같은 요소 중 첫 번째 요소
:last-child - 같은 요소 중 첫 번째 요소
:before - 요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소
:after - 요소의 맨 뒤에 배치하는 마크업에는 없는 가상 요소

※ 결합 형태에 따라서 종속 선택자, 하위 선택자, 그룹 선택자가 있는데 간단히 알아보도록 하자
종속 선택자
타입 선택자와 아이디(#)/틀래스(.) 선택자가 결합된 형태이다.
p.more a { color : red; }        /* 클래스명이 more인 p태그의 링크 (a)샋상을 변경함 */
하위 선택자
한 선택자 내부에 존재하는 또 다른 선택자이다.
.box li { padding :  5px 0; }        /* 클래스명이 box인 요소 내부의 li에 세로 여백을 준다 */
그룹 선택자
선택자들을 쉼표로 구분하여 여럿을 함께 기술하는 것이다.

h1, p { border : 1px solid #000; }        /* h1과 p요소에 1px짜리 검은 테두리를 준다 */



서체(Font)
글자에 관련된 속성은 글꼴, 글자 크기, 글자 굵기, 기울임 여부, 줄 간격, 대소문자 여부, 글자 색상 등 일곱 가지로 정리해 보겠다. 그것들을 CSS로 따로 표현하는 법을 알아보고, 특히 그 중 색상을 제외한 여섯 가지 속성은 한꺼번에 표현하는 경우가 더 많으므로 그 방법도 알아보도록 하자. 그럼 좀 더 자세히 들어가보자.


font-family - 글꼴을 인용 부호로 감싸 지정한다.
font-size - 수치에 px 등의 단위를 붙여 지정한다.(px, %, em)
font-weight - 두께를 bold 또는 수치로 지정한다.(bold, normal0
font-style - 기울이거나, 바로 세운다.(italic, normal)
font-variant - small-caps로 작은 대문자를 표현할 수 있다.(small-caps, normal)
line-height - 줄 간격을 수치로 지정한다.(%, em, px)
font - 위의 속성들을 한 줄로 기술하는 선택자.
*1em은 100%와 같은 뜻으로 부모 박스에서 설정한 크기와 같은 크기를 의미한다.
이렇게 여섯가지 속성을 많은 사람들은 모두 한꺼번에 쓰기를 즐겨하는데 그럴 경우 반드시 다음 세가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없다.
sont:[font-weighyt, font-style, font-variamt] → [font-size/line-height] → [font-famliy]



font : 12px Times ; --- O
font : bold 12px/1.5 ; --- X (글꼴을 쓰지 않았음)
font : 12px/1.5 bold Times ; --- X (bold를 맨 앞에 써야 함)

그리고 전체나 기타의 레이아웃을 정할 때 크기를 편하게 가늠하기 위해 전체 문서에서 가장 많은 양을 차지하는 본문의 서식대로 다음과 같이 기본 폰트를 body 태그에 넣어주는 것도 좋다.
body {font:12px "굴림",Gilim;}
다음은 색상 속성으로 넘어가도록 하자. 색상은 주로 16진수 6자리로 표기하며 맨 앞 두 자리는 빨간색(R), 다음 두 자리는 초록색(G), 맨 뒤 두 자리는 파란색(B)이다. 혹은, 브라우저에 등록되어 있는 색상 고유명사로 지정할 수 도 있다. 값이 높아질수록 밝아지는 결과가 나오며, 참고로 그 두 자릿값이 셋다 같으면 한자리로 줄여  쓸 수 있다.


color

color : #ff0000;        --- 글자 색을 빨간색으로
color : orange;        --- 글자 색을 주황색으로대표 색상값

color : #000000;        --- 검은색 (= #000)
color : #ffffff;        --- 흰색 (= #fff)
color : #ff0000;        --- 빨간색 (= #f00)
color : #00ff00;        --- 형광 밝은 초록색 (= #0f0)
color : #0000ff;        --- 파란색 (= #00f)
color : #ffff00;        --- 노란색 (= #ff0)
color : #00ffff;        --- 형광 밝은 파란색 (= #0ff)
color : #ff00ff;        --- 형광 밝은 보라색(= #f0f)예시

color : pink;            --- O
color : #orange;        --- X (고유명사에 #을 붙이지 않음)
color : #abcdef;        --- O
color : #qwerty;        --- X (16진수는 f까지만 사용)
color : #123456;        --- O
color : #1234567;        --- X (자릿수는 6자리만)




문단(Paragraph)
문단 관련 속성은 주로 글자나 단어보다는 문장들에 적용하면 좋은 속성들로 분류했는데, 대표적으로 가로 정렬, 세로 정렬, 들여쓰기, 대소문자, 줄치기, 자간 조절 등이 있다. 어떻게 사용하는지 알아보자.
text-align

문단을 블록의 왼쪽, 가운데, 오른쪽, 양쪽 등으로 정렬시켜 준다.
쓸 수 있는 값들 : left(왼쪽 정렬), center(중앙 정렬), right(오른쪽 정렬), justify(양쪽 정렬)
블록 요소에만 사용할 수 있다.

vertical-align

이미지나 폼 요소를 위, 가운데, 아래 등으로 세로 정렬시켜 준다.
쓸 수 있는 값들 : top(위쪽 정렬), middle(중앙 정렬), bottom(아래쪽 정렬)
img, input, select, 테이블의 th, td 등에 사용한다.

text-indent

문단의 첫머리를 들여쓰기한다.
쓸 수 있는 값들 : px, % 등의 단위로 수치를 적용한다.
블록 요소에만 사용할 수 있다.

text-transform

대소문자 변경을 실행한다.
쓸 수 있는 값 : uppercase(대문자), lowercase(소문자), capitalize(첫 글자만 대문자)

text-decoration

글자에 및줄, 윗줄, 가운데 줄을 치거나, 원래 있던 밑줄을 없애 준다.
쓸 수 있는 값 : underline(밑줄), overline(윗줄), line-through(가운데 줄), none(밑줄 제거)

letter-spacing

글자와 글자간의 간격을 부여한다.
쓸 수 있는 값 : px, % 등의 단위로 수치를 적용한다.




배경(Background)
배경에 관한 속성은 배경색, 배경 이미지, 배경 반복 여부, 배경 위치, 배경 고정 여부 등이 있으며 이 모든 속성을 한 줄로 표기할 수도 있어야 하겠다. 그럼 들어가 보자.


background-color
배경의 색상을 지정한다.

transparent        --- 투명 (생략하면 기본값으로 취급됨)
#ff0000            --- 배경을 빨간색으로background-image
배경으로 쓸 이미지를 지정한다.
ex) url("image/bg.png")background-repeat
배경 이미지를 어떻게 반복시킬지 정한다.
repeat            --- 가로 세로로 반복(생략하면 기본값으로 취급됨)
no-repeat            --- 한번만 나옴
repeat-x            --- 가로로 반복함
repeat-y            --- 세로로 반복함background-position
배경 이미지의 위치를 정한다.
가로위치            --- left, right, center, px값, %값, em값
세로위치            --- top, bottom, center, px값, %값, em값
생략하면            --- 각각 left, top이 기본값으로 취급됨background-attachment
베경 이미지를 고정시킬지 스크롤되게 할지 정한다.
scroll            --- 화면이 스크롤되면 따라감(생략하면 기본값으로 취급됨)
fixed            --- 배경의 위치가 화면 기준으로 고정됨background
위의 다섯 가지 속성을 한 줄로 표기한다.

배경 관련 속성을 한 줄로 표기할 때의 주의점은 다음과 같다.

각 속성들 간의 순서는 상관없이 기술함.
단, 반드시 속성 간에 띄어쓰기를 해주어야 함.(url과 괄호는 붙임)
no-repeat 앞을 띄어 쓰지 않으면 브라우저 IE에서 배경 이미지가 나오지 않는다.
배경 이미지의 위치를 수치값으로 기술할 때에는 가로 위치 → 세로 위치 순서로 반드시 두 개의 값을 넣어주어야 한다.

background : #fdd yrl("images/bg.png") no-repeat 50px 100px scroll;
또한 background 속성을 쓰면서 속성을 생략할 경우 위의 표에서 기술한 대로 각 속성은 기본값을 가지므로 다음 두 문장은 같은 결과를 갖게 된다.
background : url("images/bg.png");
background : transparent url("images/bg.png") repeat left top scroll;


예시
맞는 예와 풀이
background : pink url("images/bg.png") no-repeat 10px 30px;

배경 이미지는 bg.png 하나만 찍음
그 나머지 영역 핑크색 칠
배경 이미지 위치는 좌측에서 10px, 위에서 30px 떨어진 곳
background : url("imged/bg.png") repeat-x bottom;*
배경 이미지로 bg.png를 영역 아래쪽에 가로로 반복하여 쭉 찍음
그 나머지 영역 투명틀린 예와 풀이

background : #ffdddd url ("images/bg.png")no-repeat 50px;*
url 뒤에 띄어쓰기 하지 말 것
no-repeat 앞에 붙여 쓰지 말 것
위치값을 하나만 써서 가로 위치인지 세로 위치인지 알 수 없음




HTML5_새로운 태그(New Tag)
Fri, 17 Dec 2021 12:59:13 GMT
※ 본 포스팅은 책 <실전프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성하였음.
figure 요소와 figcaption 요소
HTML5에서는 삽화, 다이어그램, 사진, 코드 목록 컨텐츠 등에 설명을 달 수 있는데 그 요소가 바로 요소이다. 
 요소는 요소 안의 컨텐츠에 대한 제목을 나타낸다.

  
  
  아이콕스에서 새로 나온 책들



    
    
    아이콕스에서 새로 나온 책들
  

mark 요소
요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다. 특히, 검색 사이트에서 특정 키워드를 검색하면 찾고 있던 키워드만 강조되어 나타내는 것이 요소의 좋은 얘이다.
<mark>요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다.
요소는 글 내용에서 주의 깊게 볼 텍스트 부분을 강조 처리하기 위한 요소이다.
time 요소
 요소는 날짜와 시간을 기계가 이해할 수 있는 형태로 만들어 주는 요소이다.
목요일 오후 2시회의 일정
발행일2012년 11월 15일
작성일자12.11.15
'목요일 오후 2시'에 대한 날짜와 시간을 기계에게 명확하게 전달한다. 날짜 다음에 나오는 'T'는 시간을 의미하며 시 : 분 : 초 로 나타내고 pubdate 속성은 datetime에 있는 날짜에 작성되었음을 의미한다.
pubdate 속성의 경우 요소가 
요소에 포함되어 있거나 인접한 요소가 있다면 이것은 해당 요소(기사내용 등) 내용의 발행일을 의미하며 요소가 없다면 문서 전체의 발행일을 의미한다.
details 요소와 summary 요소
HTML5에서는 세부 항복이나 추가 정보를 숨겨 놓았다가 펼쳐 보여줄 수 있는 기능이 있다. 이 요소가 바로 
 요소이며  요소는 세부 항목의 제목이나 요약 내용이라고 보면 된다.

  아이폰으로 용돈벌기
  
    출판사 : 아이콕스
    저자 : 정창훈
    가격 : 25,000원
    출간일 : 2012년 5월 25일
  


  아이폰으로 용돈벌기


HTML5_새로운 구조(New Structure)
Mon, 13 Dec 2021 10:36:17 GMT
*본 포스팅은 책<실전프로젝트 반응형 웹퍼블리싱>의 내용을 기반으로 작성됨.
새로운 구조(New Structure)
HTML5에서는 기존의 XHTML보다 더 의미론적인 구조를 가진 웹 문서를 만들 수 있도록 새로운 요소들이 추가되었다.
예를 들어 웹 문서의 일반적인 구조가 header(머리말), content(내용), footer(꼬리말)의 형식으로 되어 있지만 XHTML에서는 이러한 의미를 가진 요소들이 없었기 때문에 문서의 header 역역인 경우 그룹화 요소인 
에 id 속성을 이용해서 와 같이 그 의미를 대신 하였다. 하지만 이러한 방법으로 처리한따고 해서 요소가 문서에서 header의 의미를 가질 수는 없었다.
HTML5에서는 이러한 부분을 해결할 수 있는 
요소, 요소, 요소, 요소, 요소 등의 문서 구조에 대한 요소들이 새롭게 추가되어 더욱 의미 있는 마크업이 가능해졌다. 다만, 문법 규칙에 있어서는 XHTML에 비해 많이 유연해졌다.
예를 들어 XHTML에서는 소문자만 써야 했지만, HTML5에소는 예전의 HTML 4.0 방식처럼 대소문자를 구분하지 않는다든지 
, , , 
등 빈 요소를 
, , , 로 처리하여도 문법적으로 문제가 발생하지 않는다.
여기에서는 앞에서 배웠던 XHTML 문법 규칙을 따르도록 하겠다.
HTML 기본 문서 구조


  
    
    HTML5
  
  

    내용

  

기존의 XHTML 기본 문서 구조와 비교해 보면 매우 간단해진 것을 알 수 있다. 그런데 현재까지는 모든 부라우저에서 HTML5를 지원하고 있지는 않다. 특히 IE9.0 이하 버전에서는 HTML5가 지원되지 않는다.
본인이 사용하고 있는 브라우저가 HTML5를 얼마나 지원해 주는지 알고 싶다면 http://html5test.com사이트에서 확인할 수 있다. 또, 현재 브라우저가 HTML5를 가장 잘 지원해 주는지도 알 수 있다.
여기에서는 크롬 브라우저로 마크업에 대한 실행 화면을 보도록 하겠다.
header 요소, footer 요소, nav 요소
요소는 문서의 머리말을 나타내는 요소로써 기존  영역 안에 있던 문서의 큰 제목이나 내비게이션, 검색폼 등의 내용들을 포함할 수 있다.
요소 또한 문서의 꼬리말을 나타내는 요소로 기존  영역 안에 있던 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 있다.
요소나 요소는 일반적으로 문서 전체의 머리말, 꼬리말로 사용되지만 경우에 따라 앞으로 배울 섹셔닝 컨텐츠 요소의 머리말이나 꼬리말로도 사용이 가능하다. 이 부분에 대한 것은 요소에서 더 자세히 설명하도록 하겠다.
요소는 주로 메인 네비게이션의 의미를 줄 때 사용하며 모든 링크 그룹에 요소로 마크업할 필요는 없다.
다음 예제를 통하여 좀 더 자세히 알아보도록 하자.
예제1


  
    
    header 요소, footer 요소, nav 요소
  
  
    
      
      
        Home
        About me
        News
        Contact
      
      
        메인메뉴
        
          아이콕스

          
신간도서

          
iCox커뮤니티

          
iCox자료실

        
      
      
        
          
          도서 검색어 입력
          
        
      
    
    
      메인컨텐츠
      메인 컨텐츠 내용
    
    
      COPYRIGHT © iCox. All Rights Reserved
    
  


요소, 요소 안에 일반적으로 들어갈 수 있는 내용들을 마크업해 보았다. 나  두 요소 모두 대부분의 요소를 포함 할 수 있지만 같은 요소와 요소는 포함할 수 없다.
예제1에 보면 요소가 두 개 있다. 하나는 '상단메뉴 링크 그룹'(Home, About us, News, Contact)이고 하나는 '메인메뉴 링크 그룹'(아이콕스, 신간 도서, iCox 커뮤니티, iCox 자료실)이다.

'메인메뉴 링크 그룹'에만 
요소로 감싸줬는데 이렇게 하면 '메인메뉴 링크 그룹'을 주 내비게이션으로 하겠다는 의미가 된다. '상단메뉴 링크 그룹'에도 요소를 줄 수 있지만 사이트의 모든 페이지를 연결할 수 있는 '메인메뉴 링크 그룹'이 좀 더 주된 내비게이션의 의미를 가지고 있기 떄문에 '메인메뉴 링크 그룹'에만 요소를 감싼 것이다.
section 요소
요소는 문서 내에서 의미가 같은 내용들을 묶어주는 의미적 그룹 요소이며 보통 제목 요소로 시작한다. 묶어 주는 요소라고 하여 기존의 요소처럼 생각하면 안 된다. 레이아웃을 잡거나 스타일을 적용 또는 자바스크립트의 편의성이 목적이라면 요소를 사용해야 한다.
예제2


  
    
    section 요소
  
  
    아이콕스
    
      아이콕스 소개
      아이콕스 스토리
      아이콕스 인포
    
    
      신간소개
      안드로이드로 용돈벌기
      아이폰으로 용돈벌기
    
    
      아이콕스 이벤트
      아이콕스 도서구매 시 커피증정
      제2회 앱 아이디어 공모
    
  


의미가 같은 내용들을 요소로 그룹화하였다. 전체적으로 볼 때 '아이콕스'에 대해 주제별 3개의 섹션으로 나누어져 있다. 다시 말해서 의미가 같은 컨텐츠들로 그룹화하여 영역을 나눈 것이지 레이아웃 구조를 위해 그룹화한 것이 아님을 알아야 한다.
요소에 제목요소를 포함하지 않거나 의미가 다른 내용들을 그룹화하였다고 문법적으로 틀린 것은 아니다.

중요한 것은 하나의 
요소를 만들 때 의미상 내용들을 그룹으로 묶는 것이 가능하고 그 그룹에 제목을 명료하게 명시할 수만 있다면 요소를 사용하는데 큰 문제가 없을 것이다.
article 요소
신문 기사나 블로그의 글은 보면 문서 내에서 하나의 자립적인 컨텐츠라는 것을 알 수 있다. 또 이러한 컨텐츠들은 수정이나 가공 없이 다른 사이트로 배포 또는 재사용할 수 있다는 특징을 가지고 있다. 이처럼 독립적으로 배포 또는 재사용이 가능한 모든 내용들을 
요소에 포함할 수 있다.
예제3


  
    
    article 요소
  
  
    신간소개
    
      
        안드로이드로 용돈벌기
      
      
        
        
          가히 아이폰, 안드로이드 앱이 "문화를 바꾸었다"고 할 수 있을 정도로, 이제 휴대폰과 앱은 따로 분리해서 생각하기 어려워졌으며...
        
      
      작성자 : 아이콕스
    
  


예제3은 
요소의 일반적인 형식이다. 그렇다고 요소나 요소를 항상 마크업할 필요는 없다. 보통 제목 요소와 내용만 마크업하는 경우가 많다. 요소는 자립적이고 독립적인 배포나 재사용 가능한 컨텐츠라는 의미에서 제목 요소를 포함하는 것이 바람직하다.

요소와 요소에 대한 혼동이 종종 있다. 쉽게 생각해서 요소는 의미가 같은 내용을 묶는 의미적 그룹 요소이고 요소는 하나의 자립적인 요소라고 보면 된다.

요소는 요소나 요소를 포함할 수 있고 요소 또한 요소나 요소를 포함할 수 있다.
예를 들어 자립적이고 배포나 재사용이 가능한 내용들이 모두 같은 의미를 가졌다면 이것은 
요소로 요소들을 그룹화할 수 있는 것이며 요소 안에서 의미가 같은 내용들을 그룹화해야 한다면 이것은 요소 안에 요소가 포함될 수 있는 것이다.


aside 요소
요소는 주위의 내용들과 관련이 없고 메인 컨텐츠와 분리할 수 있는 독립적인 요소이다. 블로그나 문서에서 메인 컨텐츠의 왼쪽이나 오른쪽에 위치한 '사이드 바'영역이라고 보면 된다.
예제4


  
    
    aside 요소
  
  
    아이콕스
    
      메인 컨텐츠
      신간소개
      아이콕스 이벤트
      저자칼럼
    
    
      IT 동향
      
        이제 반응형 웹...

        
HTML5의 새로운...

      
    
  




html5 _  태그 정리
Mon, 15 Nov 2021 07:24:31 GMT
※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성함
폼(Form) : _b
웹 사이트에서 특정 콘텐츠에 대한 정보를 제공받기 위해서는 회원가입을 해야 하는 경우가 많다.
회원가입 양식을 보면 약관 동의에서부터 이름, 아이디, 패스워드, 주소 등을 입력해야 하며 성별 체크 등 다양한 항목을 선택하기도 해야 한다.
회원가입뿐만 아니라 온라인 쇼핑몰에서 상품을 구입하거나 게시판에 글을 쓸 때에도 이러한 정보입력 양식을 많이 접하게 되는데 웹에서의 이러한 정보입력 양식을 '온라인 서식'이라고 한다.
_b
 요소는 스크린에 보이지는 않지만 input 태그들을 담는 일종의 컨테이너 역할을 수행하며 온라인 서식에서 작성한 값들을 서버 프로그램(서식값 처리)으로 전송하는 역할을 담당함.

  서식 내용


'action'은 서식에서 작성한 값들을 처리하는 서버 프로그램의 주소이다.
여기에서 서버 프로그램이 하는 역할은 전송되어 넘어온 값들(아이디, 패스워드, 주소 등)을 DB(DataBase)에 저장하거나 로그인할 때처럼 입력받은 아이디값이 DB에 등록되어 있는지, 패스워드가 일치하는지에 대한 여부 처리 및 데이터 검색 등의 역할을 수행한다.
'method'는 서식의 값들을 서버 프로그램에 어떤 방법으로 전달할 것이지 처리하는 부분이다.
전달 방식에는 'get'방식과 'post'방식이 있다.
예를 들어 서식에서 id를 'kim', pw를 '1234'라고 입력하였다면 'get' 방식의 경우 '서버 프로그램 URL?id=kim&pw=1234'식으로 전달한다. 이런 방식은 포털사이트에서 검색한 후 주소창을 보면 확인할 수 있다. 이와 같이 'get'방식은 주소창에 중요한 정보값들이 노출된다는 점과 전송할 수 있는 데이터가 적다는 특징을 가지고 있다. 이와 반대로 'post'방식의 경우 전송되는 데이터값들이 노출되지 않으며 많은 양의 데이터을 전송할 수 있는 특징이 있다.
온라인 서식의 경우 중요한 정보들이 많고 많은 양의 정보들을 전송해야 하기 때문에 일반적으로 'post'방식을 많이 이용한다.

_b
요소는 요소 안에 있는 여러 요소를 그룹화할 때 사용하며, 그룹 제목 요소를 포함한다.

  
    그룹 제목
    서식내용
  

_i
은 inline요소이며 type속성 변경으로 다양한 폼 컨트롤을 생성할 수 있다.

  
    회원가입
    아이디 : 
    비밀번호 : 
    메일 수신여부 : 
      예
      아니오
    
    관심분야 : 
      HTML
      CSS
      Javascript
    
    
      
      
      
      
    
    파일 올리기 : 
    
  

이를 출력하면 다음과 같다.

  
    회원가입
    아이디 : 
    비밀번호 : 
    메일 수신여부 : 
      예
      아니오
    
    관심분야 : 
      HTML
      CSS
      Javascript
    
    
      
      
      
      
    
    파일 올리기 : 
    
    

  





요소는 사각형 border로 나오게 되며 요소는 사각형 border 상단에 제목으로 출력된다.
의 type의 종류를 정리하면 다음과 같다.


  
    
    
  
  
    
      type
      설명
    
  
  
    
      text
      
        
          한 줄 글 입력 상자
          size 속성은 글상자의 가로길이
          maxlength 속성은 최대 글자 수
        
      
    
    
      password
      
        
          비밀번호 입력 상자, 입력된 내용은 '*'로 표시
        
      
    
    
      radio
      
        
          라디오 버튼
          여러 중 하나만 선택 가능
          name값이 같아야함
          value는 체크 시 실제 전송되는 값
        
      
    
    
      checkbox
      
        
          체크박스
          다중 선택 가능
          name값이 서로 다름
        
      
    
    
      submit
      
        
          전송 버튼
          value 속성은 버튼에 표시할 글자
        
      
    
    
      reset
      
        
          초기화 버튼
        
      
    
    
      button
      
        
          범용 버튼
        
      
    
    
      image
      
        
          이미지 버튼
          alt 속성은 반드시 명시
        
      
    
    
      file
      
        
          첨부 파일
        
      
    
    
      hidden
      
        
          화면에 표시되지 않음
          사용자에게 노출할 필요가 없는 데이터 지정
        
      
    
  



 

새로 추가된 input type

  
    새로 추가된 input type
    
      아직 모든 브라우저에서 새로 추가된 input type들을 지원하고 있지는 않다.
      

      http://miketaylr.com/code/input-type-attr.html 사이트에서 현재 브라우저들에서 HTML5 input type과 속성을 어느 정도 지원해 주는 지 알 수 있다.
    
    search :  
      
검색 박스로 텍스트 입력시 지우기(X) 버튼이 나타남.
    email :  
      
email입력 양식에 맞지 않을 경우 오류 메시지를 제공하며 아이폰에선느 입력하기 편리한 키패드로 변함.
    url :  
      
url입력 양식에 맞지 않을 경우 오류 메시지를 제공하며 아이폰에서는 입력하기 편리한 키패드로 변함.
    tel :  
      
전화번호 입력 박스
    number :  
      
숫자 입력 박스에 직접 입력하거나 상하 화살표를 눌러 선택할 수 있다.
      
min과 max 속성은 선택할 수 있는 숫자의 최소값과 최대값을 나타내며 step속성은 숫자의 단계를 의미한다.
      
value 속성은 숫자의 기본 값이다. 예를 들어 value="1"을 놓고 step="2"로 하면 위 화살표를 한 번 누를 때마다 2씩 증가되어 1,3,5,7...과 같이 나오게 된다.
    
    rage :  
      
숫자 범위가 '슬라이드 바'로 나타난다.
    date :  
      
연, 월, 일을 선택할 수 있는 박스가 나온다.
    datetime :  
      
연, 월, 일과 시, 분을 선택할 수 있는 박스가 나온다.(UTC, 국제표준시간)
    datetime-local :  
      
연, 월, 일, 시, 분을 선택할 수 있는 박스가 나온다.
    month :  
      
연과 월만 선택할 수 있는 박스가 나온다.
    week :  
      
연과 주를 선택할 수 있는 박스가 나온다.
    time :  
      
시, 분을 선택할 수 있는 박스가 나온다.
    color :  
      
색상 선택 박스로 나타난다.
  





추가된 폼 속성

required 속성
required 속성은 입력 필드에 값이 채워졌는지에 대한 부분과 유효성을 판단해주는 속성이다. required 속성을 적용한 요소에 값을 입력하지 않거나 유효하지 않은 상태로 [전송] 버튼을 누르면 오류 메시지가 나타납니다.

* 표시는 필수입력 항목입니다.

  
    필드 유효성 검사
    
      
        *이름
        
      

      
        *아이디
        
      

      
        *비밀번호
        
      

      
        *전화번호
        
      

      
        *이메일
        
      

    

    
  


*표시는 필수입력 항목입니다.

  
    필드 유효성 검사
    
      
        *이름
        
      
      
        *아이디
        
      
      
        *비밀번호
        
      
      
        *전화번호
        
      
      
        이메일
        
      
    
        
  






placeholder 속성
placeholder 속성은 각 필드에 대한 입력형식 힌트를 제공해준다.


  
    필드에 입력형식 힌트주기
    
      
        핸드폰 번호
        
     
      
        이메일
        
     
    
  

이를 출력하면 다음과 같다.

  
    필드에 입력형식 힌트주기
    
      
        핸드폰 번호
        
     
      
        이메일
        
     
    
  



autocomplete 속성
autocomplete 속성은 자동완성 기능에 대한 사용 여부를 판단해준다. 자동완성 기능을 사용하고 싶으면 속성값을 'on'으로, 아니면 'off'를 주면 된다.


  
    자동완성 기능
    
      
        전화번호
        
      
      
        이메일
        
      
    
  

이를 출력하면 다음과 같다.

  
    자동완성 기능
    
      
        전화번호
        
      
      
        이메일
        
      
    
  



list 속성
list 속성은 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이 마치 자동완성 기능처럼 나타나도록하는 속성이다. 리스트 항목들은 요소로 만들어 준다.


  
    datalist
    
      수강과목 : 
      
        
    
  

이를 출력하면 다음과 같다.

  
    datalist
    
      수강과목 : 
      
        
    
  



outofocus 속성
페이지가 로드되었을 때 입력 필드에 포커스(커서)가 자동으로 이동하게 해주는 속성이다.
outofocus 속성은 하나의 요소에만 적용할 수 있다.


  
    포커스 자동이동
    
      
        이름
        
      
      
        아이디
        
      
      
        비밀번호
        
      
      
        전화번호
        
      
      
        이메일
        
      
    
    
  

이를 출력하면 다음과 같다.

  
    포커스 자동이동
    
      
        이름
        
      
      
        아이디
        
      
      
        비밀번호
        
      
      
        전화번호
        
      
      
        이메일
        
      
    
    
  




disabled 속성과 readonly 속성
disabled 속성과 readonly 속성은 적용된 input 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만든다.
예를 들어 프로그램을 설치 시 시링얼 번호를 입력하지 않으면 '다음'으로 넘어가는 버튼이 비활성화되어 있는 것을 볼 수 있다. 이렇게 disabled 속성은 어떤 조건에 만족하지 않았을 때 input 요소를 비활성화시키는데 주로 사용되며 readonly 속input 요소의 값이 변경되지 않은 채 폼 전송이 되어야 하는 곳에 사용된다.



  
    disabled속성과 readonly속성
    
      
        시리얼 번호 입력 : 
        
        
        
      
      
        선택한 책 : 
         
        수량 : 
      
    
  

이를 출력하면 다음과 같다.
  코드를 넣으면 게시물 전체가 보이지 않는 알 수 없는 오류로 인해 해당 코드는 예시를 보이지 않겠다.

pattern 속성
pattern 속성은 required 속성처럼 필드의 값을 체크해 주는 폼 유효성 검사 속성이라고 보면 된다. 다만, required 속성은 일반적인 input type 형식에 대한 유효성을 체크하지만 pattern 속성은 '정규 표현식' 방법으로 입력값과 정규식이 일치해야만 유효성에 통과할 수 있다.



  
    pattern 속성
    휴대폰 번호 : 
    
  

이를 출력하면 다음과 같다.

  
    pattern 속성
    휴대폰 번호 : 
    
  


pattern="￦d{3}-￦d{3,4}-￦d{4}"의 의미를 살펴보면 '￦d'는 숫자, '{3}'은 3자리를 의미합니다. 조금 더 쉽게 풀이하자면, "입력되는 값은 '숫자 3자리-숫자 3~4자리-숫자 4자리' 와 일치해야 합니다."라는 뜻이 된다. pattern 속성을 사용할 때는 해당 input 요소에 정해놓은 정규 표현식과 일치하게 입력할 수 있도록 title 속성을 이용하여 입력 형식에 대한 툴티을 제공해 주어야 한다.

multiple 속성
multiple 속성은 여러 개의 이메일을 ','로 입력하거나 다중의 파일을 선택할 수 있도록 해주는 속성이다.

  이메일 : 
  파일 찾기:



</code>_i & <code><select></code>_i</h3>
<p><code><textarea></code> : 게시판의 내용 입력이나 약관 등 여러 줄로 된 텍스트 상자를 생성하는 요소
<code><select></code> : 선택 목록 상자를 생성하는 요소</p>
<pre><code class="language-html"><form action="board.php" method="post">
<fieldset>
  <legend>여러 줄 글상자와 목록상자</legend>
  <p>답글<br /> <textarea cols="30" rows="3" name="reply">
  과목 선택
    
  
  스터디 지역
    
  


이를 출력하면 다음과 같다.


  여러 줄 글상자와 목록상자
  답글
 
  과목 선택
    
  
  스터디 지역
    
  




</code>요소의 cols와 rows 속성은 텍스트 상자의 열과 행의 수를 지정한다.</li>
<li><code><select></code>요소는 <code><option></code>요소와 함께 쓰며 특히 목록이 많은 경우에는 관련 있는 것끼리 묶어주는 <code><optgroup></code>요소를 사용한다. <code><option></code>요소의 value는 실제 전송값을 의미하며 <code><optgroup></code>요소의 label 속성은 그룹 지어진 <code><option></code>요소들의 제목이다.</li>
</ul>
<p><br /><br /></p>
<h3 id="label_i"><code><label></code>_i</h3>
<p>테이블과 마찬가지로 폼 요소들도 환경적인 요인에 따라 접근하기 어려운 경우들이 있다.</p>
<p>예를 들어 마우스에 익숙하지 않은 사용자의 경우 라디오 버튼이나, 체크박스에 정확히 클릭하기란 쉽지 않을 것이다. 또한, 웹 문서가 음성만 출력되는 환경에서는 각 폼 요소들 앞에 정확한 레이블을 주지 않으면 어떤 내용을 입력하고 체크해야 하는지 알 수가 없는 상황이 발생할 수 있다.</p>
<p><code><label></code>요소를 이용하여 접근성 높은 온라인 서식을 만드는 방법에 대해 알아보자.</p>
<pre><code class="language-html5"><form action="join.php" method="post">
  <fieldset>
    <legend>회원가입</legend>
    <table>
      <colgroup>
        <col width="30%" />
        <col width="70%" />
      </colgroup>
      <tbody>
        <tr>
          <th scope="row"><label for="name">이름</label></th>
          <td><input type="text" id="name" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="id">아이디</label></th>
          <td><input type="text" id="id" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="pw">비밀번호</label></th>
          <td><input type="text" id="pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="r_pw">비밀번호 확인</label></th>
          <td><input type="text" id="r_pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="jumin_num">주민번호</label></th>
          <td>
            <input type="text" id="jumin_num" title="주민번호 앞 6자리" />
            -
            <input type="text" id="jumin_num" title="주민번호 뒤 7자리" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="e-mail">이름</label></th>
          <td>
            <input type="text" id="email" tilte="이메일 아이디" />
            @
            <input type="tsxt" title="이메일 주소" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="hp">핸드폰</label><th>
          <td><input type="text" id="hp" /></td>
        </tr>
      </tbody>
    </table>
    <p><input type="submit" value="전송" /><input type="reset" value="취소" /></p>
  </fieldset>
</form></code></pre>
<p>이를 출력하면 다음과 같다.</p>
<form action="join.php" method="post">
  <fieldset>
    <legend>회원가입</legend>
    <table border="1" width="100%">
      <colgroup>
        <col width="30%" />
        <col width="70%" />
      </colgroup>
      <tbody>
        <tr>
          <th scope="row"><label for="name">이름</label></th>
          <td><input type="text" id="name" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="id">아이디</label></th>
          <td><input type="text" id="id" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="pw">비밀번호</label></th>
          <td><input type="text" id="pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="r_pw">비밀번호 확인</label></th>
          <td><input type="text" id="r_pw" /></td>
        </tr>
        <tr>
          <th scope="row"><label for="jumin_num">주민번호</label></th>
          <td>
            <input type="text" id="jumin_num" title="주민번호 앞 6자리" />
            -
            <input type="text" id="jumin_num" title="주민번호 뒤 7자리" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="email">이름</label></th>
          <td>
            <input type="text" id="email" tilte="이메일 아이디" />
            @
            <input type="tsxt" title="이메일 주소" />
          </td>
        </tr>
        <tr>
          <th scope="row"><label for="hp">핸드폰</label></th>
          <td><input type="text" id="hp" /></td>
        </tr>
      </tbody>
    </table>
    <p>
      <input type="submit" value="전송" />
      <input type="reset" value="취소" />
    </p>
  </fieldset>
</form>

<ul>
<li><code><label></code>요소의 for 속성값과 <code><input></code>요소의 id 속성값을 같은 이름으로 연결시켜 주면 레이블 텍스트(이름, 아이디, 비밀번호 등...)에 마우스를 클릭하거나 포커스가 이동되면 우측에 연결되어 있는 input 텍스트 상자로 커서가 자동 이동된다.</li>
<li>주민번호의 경우 하나의 <code><label></code>에 두 개의 <code><input></code>요소가 있다. 이러한 경우 <code><label></code>를 첫 번째 <code><input></code>요소에 title 속성을 이용하여 추가적딩 설명을 넣어주면 음성만 출력되는 환경에서도 폼 요소들에 대한 접근성을 높일 수 있다.</li>
</ul>

</article>
<article>
<h1>html5 _ <table> 태그 정리</h1>
<p>Mon, 15 Nov 2021 07:23:26 GMT</p>
<p>※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성함</p>
<h3 id="테이블table--table_b">테이블(Table) : <code><table></code>_b</h3>
<p><code><table></code>_b : 웹 문서에서 <strong>표</strong>를 만드는 요소
<code><table></code>은 block요소이며 기본적으로 행과 열을 가지고 있다.</p>
<ul>
<li><code><th></code> : 열이나 행의 제목. 이 요소 안의 내용을 볼드 처리 되며 중앙 정렬된느 특징이 있다.</li>
<li><code><tr></code> : <strong>행</strong>을 만드는 요소</li>
<li><code><td></code> : <strong>열</strong>을 만드는 요소. <strong>'셀(cell)'</strong> 이라고도 한다.</li>
<li>rowspan : 행 합치기</li>
<li>colspan : 열 합치기</li>
<li><code><caption></code> : 테이블의 제목</li>
<li><code><thead></code> : 머리말</li>
<li><code><tbody></code> : 본문</li>
<li><code><tfoot></code> : 꼬리말 - 테이블에 대한 수치 결과값 등 데이터에 대한 결과가 있을 때만 마크업해주고 그 외에는 <code><thead></code>요소와 <code><tbody></code>요소만 마크업한다.
※ 본문(tbody)보다 꼬리말(tfoot)을 먼저 마크업해도 결과 화면에서는 본문 다음 꼬리말 순으로 내용 흐름에 맞게 출력된다.
<strong>그렇다면 왜 <code><tbody></code>보다 <code><tfoot></code>을 먼저 마크업해야 할까?</strong>
웹페이지가 화면이 아닌 음성으로만 지원되는 환경(스크린 리더)에서는 테이블에 대한 정보를 마크업한 순서대로 접근하여 읽어 주기 때문에 <code><thead></code>다음 <code><tfoot></code>에 대한 정보를 먼저 제공하여 전체적인 내용을 파악할 수 있게 하고 그다음 본문으로 내려가도록 하는 것이 효율적인 방법이다. (들어 봤을 때 관심이 없는 내용이라면 굳이 긴 본문의 내용을 모두 다 들을 필요 없으니까)</li>
</ul>
<p>예제를 보며 참고해보자.</p>
<pre><code class="language-html5"><table border="1" width="100%">
  <caption>태블릿 PC와 스마트폰 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="40%" />
    <col width="40%" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">태블릿 PC</th>
      <th scope="col">스마트폰</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="row">총판매수</th>
      <td>5만대</td>
      <td>16만대</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="row">상반기 판매수</th>
      <td>2만대</td>
      <td>5만대</td>
    </tr>
    <tr>
      <th scope="row">하반기 판매수</th>
      <td>3만대</td>
      <td>11만대</td>
    </tr>
  </tbody>
</table></code></pre>
<p>이를 출력하면 다음과 같다.</p>
<table border="1" width="100%">
  <caption>태블릿 PC와 스마트폰 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="40%" />
    <col width="40%" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">태블릿 PC</th>
      <th scope="col">스마트폰</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="row">총판매수</th>
      <td>5만대</td>
      <td>16만대</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th scope="row">상반기 판매수</th>
      <td>2만대</td>
      <td>5만대</td>
    </tr>
    <tr>
      <th scope="row">하반기 판매수</th>
      <td>3만대</td>
      <td>11만대</td>
    </tr>
  </tbody>
</table>

<p> <code><th></code>요소에 있는 'scope'속성은 열의 제목(scope="col")과 행의 제목(scope="row")이 어떤 것인지 알려준다. 음성만으로 정보를 전달하는 환경에서는 테이블에 대한 정보를 정확히 이해하기란 쉽지 않기 때문에 필요하다.</p>
<p> 만약 현재의 커서 위치를 '2만대'셀로 이동시 음성으로 그냥 '2만 대'라고 읽어주면 이것이 무엇에 대한 '2만 대'인지 알 수 없다. 그런데 이것을 '태블릿 PC. 2만 대'라고 읽어준다면 정보를 이해하는데 훨씬 더 수월할 것이다.
 스크린 리더마다 조금씩 차이는 있겠지만 보통 scope 속성을 주면 위 표를 예시로 했을 때 다음과 같이 읽어준다.</p>
<p> "구분" → "상반기 판매수" → "태블릿 PC 2만 대" → "스마트폰 5만 대"</p>
<p> 스크린 리더 중에서는 <code><th></code>요소만 잘 써 줘도 위와 같이 ㅇ릭어주는 경우가 있지만, 접근성 높은 데이터 테이블을 제작하기 위해서 <code><th></code>요소에 'scope'속성을 꼭 넣어 주시기 바란다.</p>
<p>다음은 셀 합치기가 된 경우의 테이블 접근성을 높일 수 있는 방법을 알아보자.</p>
<pre><code class="language-html5"><h5>colgroup</h5>
<table border="1" width="100%">
  <caption>상품에 따른 월별 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">구분</th>
      <th colspan="3" scope="colgroup">상품종류</th>
    </tr>
    <tr>
      <th scope="col">스마트폰</th>
      <th scope="col">태블릿PC</th>
      <th scope="col">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1월</th>
      <td>5만대</td>
      <td>3만대</td>
      <td>1만대</td>
    </tr>
  <tbody>
</table>
<br/>
<h5>id, headers</h5>
<table border="1" width="100%">
  <caption>상품에 따른 월별 판매 현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" id="division">구분</th>
      <th colspan="3" id="product">상품종류</th>
    </tr>
    <tr>
      <th header="product" id="smartphone">스마트폰</th>
      <th header="product" id="tabletpc">태블릿PC</th>
      <th header="product" id="pc">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th headers="division">1월</th>
      <td headers="product smartphone">5만대</td>
      <td headers="product tabletpc">3만대</td>
      <td headers="product pc">1만대</td>
    </tr>
  <tbody>
</table></code></pre>
<p>이를 출력하면 다음과 같다.</p>
<h5>colgroup</h5>
<table border="1" width="100%">
  <caption>상품에 따른 월별 판매현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">구분</th>
      <th colspan="3" scope="colgroup">상품종류</th>
    </tr>
    <tr>
      <th scope="col">스마트폰</th>
      <th scope="col">태블릿PC</th>
      <th scope="col">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1월</th>
      <td>5만대</td>
      <td>3만대</td>
      <td>1만대</td>
    </tr>
  <tbody>
</table>
<br/>
<h5>id, headers</h5>
<table border="1" width="100%">
  <caption>상품에 따른 월별 판매 현황</caption>
  <colgroup>
    <col width="20%" />
    <col width="25%" />
    <col width="25%" />
    <col width="30%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" id="division">구분</th>
      <th colspan="3" id="product">상품종류</th>
    </tr>
    <tr>
      <th header="product" id="smartphone">스마트폰</th>
      <th header="product" id="tabletpc">태블릿PC</th>
      <th header="product" id="pc">데스크탑PC</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th headers="division">1월</th>
      <td headers="product smartphone">5만대</td>
      <td headers="product tabletpc">3만대</td>
      <td headers="product pc">1만대</td>
    </tr>
  <tbody>
</table>

<ul>
<li><p>셀을 합친 경우, 접근성을 높일 수 있는 방법에는 두 가지가 있는데 그 첫 번째 방법이 'colgroup'이다.</p>
<p>첫 번째 테이블 마크업을 보면 '상품종류'셀은 '열 합치기'가 되어 있으며 아래 '스마트폰', '태블릿 PC', '데스크탑 PC' 제목 셀들의 큰제목이 된다. 이런 경우 '상품종류' 제못 셀 안에 'scope' 속성값을 col이 아닌 'colgroup'으로 주면 된다.</p>
</li>
<li><p>두 번째 방법은 'id'와 'headers'속성을 이용하는 방법이다.
'id'는 제목 셀에 이름을 부여하는 것이고 'headers'는 제목 셀 'id'의 내용을 참조한다고 보면 된다.</p>
<p>두 번째 테이블 마크업을 보면 '상품종류' 셀에 id 'product'를 부여 하였고 아래 각 제목 셀들('스마트폰', '태블릿 PC', '데스크탑 PC')에 각각 id 'smartphone', 'tabletpc', 'pc'를 부여 하였다. 또, headers 속성을 이용하여 상품종류 셀('product')을 참조하게 하였다.</p>
<p>3행 2열의 '5만 대' 셀의 경우 headers 속성을 이용하여 그 열의 제목 셀인 상품종류('product')와 스마트폰('smartphone')을 참조하게 하였다.</p>
</li>
<li><p>첫 번째 테이블과 두 번째 테이블을 각각 scope 속성값 'colgroup', 'id, headers' 속성과 같이 서로 다른 방식을 이용하여 마크업하였지만 스크린 리더에서는 같은 결과를 얻을 수 있다.</p>
<p>"구분" → "1월" → "상품종류 스마트폰 5만 대" → "상품종류 태블릿PC 3만 대"</p>
</li>
</ul>
<p>※ scope 속성의 colgroup 값은 셀 합치기가 단순한 구조로 되어 있을 때 사용하며 id와 headers는 셀 합치기 구조가 복잡할 때 주로 사용한다.</p>

</article>
<article>
<h1>XHTML 정리_태그</h1>
<p>Wed, 10 Nov 2021 11:12:11 GMT</p>
<p>※ 본 포스팅은 책 <실전 프로젝트 반응형 웹 퍼블리싱>을 참고하여 작성됨</p>
<h4 id="블록-요소block-elememt">블록 요소(Block Elememt)</h4>
<ul>
<li><strong>블록 요소</strong>는 마크업 시 <em><strong>줄바꿈</strong>이 일어나는 성질을 가지고 <span style="color:red;">있다</span>.</em></li>
<li>한 요소가 한 라인의 전체를 차지함, <strong>가로 세로 크기 지정 가능</strong></li>
<li>일반적으로 화면 레이아웃을 그리는 데 사용함</li>
<li>inline 요소보다 상위 요소임 (block 안에 inline 포함 가능 / inline 안에 block 포함 불가능)</li>
</ul>
<h4 id="인라인-요소inline-element">인라인 요소(Inline Element)</h4>
<ul>
<li><strong>인라인 요소</strong>는 블록 요소와 달리 <em><strong>줄바꿈</strong> 성질이 <span style="color:red;">없다</span>.</em> 즉, 행이 바뀌지 않고 한 줄로 출력됨</li>
<li>한 라인에 여러 요소가 존재할 수 있음, 필요한 폭만 유지해서 다른 요소와 같은 라인에 위치함</li>
<li><strong>상 · 하단 margin 속성이 적용되지 않음</strong></li>
<li>inline 태그끼리 연속해서 사용하는 경우 별도 속성이 없으면 <span style="color:#06c;">좌우 margin 5px</span> 생성됨</li>
</ul>
<h1 id="xhtml-태그-정리">XHTML 태그 정리</h1>
<p>※ 이하, block요소는 '<strong>_b</strong>'로, inline요소는 '<strong>_i</strong>'로 구분한다. </p>
<h2 id="제목title--h_b">제목(Title) : <code><h#></code>_b</h2>
<p><code><h#></h#></code> : 일반적인 문서 작업에서 상단에 가장 먼저 쓰이는 큰제목과 소제목처럼 문서 내에서 큰 줄기가 되는 부분들을 제목으로 처리할 때 쓰는 요소.
큰제목 순으로 <code><h1> ~ <h6></code>까지 사용할 수 있다.</p>
<ul>
<li>웹 표준 문서 작업 시 <code><h1></code>은 꼭 마크업해주어야 하는데 웹 문서의 <code><h1></code>은 보통 회사나 단체의 상호명(로고)으로 처리한다.</li>
<li>마크업 시 <code><h1> → <h2> → <h3> → <h4> → <h5> → <h6></code> 순서로 정의해야 하며 <code><h1></code> 다음에는 반드시 <code><h2></code>가 와야 하며 <code><h3></code>가 올 수 없다.</li>
<li>내용의 흐름이나 중요도에 따라 <code><h1> ~ <h6></code>는 여러번 정의 될 수 있다.</li>
<li><code><h#></code>은 블록 요소이며, 텍스트나 인라인 요소를 포함할 수 있지만 블록요소는 포함할 수 없다.<pre><code class="language-html5"><h1>가나다라</h1> (O)
<h1><a href="#">가나다라</a></h1> (O)
<h1><p>가나다라</p></h1> (X)</code></pre>
</li>
<li>사실 <code><h#></code>요소는 기본 개념은 어렵지 않지만, 실제 작업에 있어서는 어느 부분에 어느 번호를 정의해야 할지 애매한 경우가 많다. 웹페이지 기획 단계에서 내용의 중요도와 흐름에 따라 어느 부분을 제목을 처리해야 할지 잘 판단해야 한다.</li>
</ul>
<h2 id="단락paragraph--p_b">단락(Paragraph) : <code><p></code>_b</h2>
<p><code><p></code> : 단락을 정의 하는 태그. 문장과 같은 텍스트들은 인라인 요소의 성질을 가지고 있기 때문에 단독으로 쓰지 않고 보통 블록 요소인<code><p></code>요소 안에 포함 시킨다.</p>
<ul>
<li>마크업할 때 아무리 엔터를 쳐서 행을 만들어도 실제 출력화면에는 한 줄로 나타난다.</li>
<li>문맥상 특정 부분에서 강제적으로 줄 바꿈을 하고 싶을 때 <code><br /></code> 요소를 마크업하면 된다.
'줄 바꿈'을 해주는 요소인<code><br /></code>은 빈 요소이기 때문에 <code><br></br></code>로 마크업하지 않는다.</li>
<li><code><p></code>는 block요소이며 텍스트와 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.<pre><code class="language-html5"><p>가나다라</p> (O)
<p><a href="#">가나다라/a></p> (O)
<p><h1>가나다라</h1></p> (X)</code></pre>
</li>
</ul>
<h2 id="주소address--address_b">주소(Address) : <code><address></code>_b</h2>
<p><code><address></code> : 웹 문서 하단(footer)에 보면 문서와 관련된 연락처나 주소, 전화번호, 저작권 등에 관련된 내용처럼 연락처 정보를 나타내는 요소.</p>
<ul>
<li><code><address></code>요소 안의 텍스트들은 이탤릭체로 출력된다.</li>
<li><code><address></code>는 block요소이며 텍스트와 inline요소는 포함할 수 있지만 block요소는 포함할 수 없다.<pre><code class="language-html5"><address>연락처 02-1111-2222</address> (O)
<address><a href="#">e-mail:abc123@abc.com</a><address> (O)
<address><h3>COPYRIGHT© Jay.</h3></address> (X)</code></pre>
</li>
</ul>
<h2 id="구분선horizontal-line--hr-_b">구분선(Horizontal line) : <code><hr /></code>_b</h2>
<p><code><hr /></code> : 웹 문서 내에서 구분선을 그을 때 사용하는 요소</p>
<ul>
<li><code><hr /></code>은 빈 요소이기 때문에 <code><hr></hr></code>로 마크업하지 않는다.</li>
<li><code><hr /></code>요소는 단순해 보이지만 마크업 시 복잡한 내용들을 헷갈리지 않게 구분해주는 역할을 하여 매우 유용하게 쓰인다.</li>
</ul>
<h2 id="인용문quotation--blockquoteq_i">인용문(Quotation) : <code><blockquote>,<q></code>_i</h2>
<p>다른 사람의 말이나 글을 인용할 때 쓴다.</p>
<pre><code class="language-html5"><blockquote cite="href://..." title="가나다라"><p>...<p></blockquote></code></pre>
<ul>
<li>다른 요소들과 구분되어 보이기 위해 텍스트가 들여쓰기 되어 출력됨. </li>
<li>cite에는 인용한 곳의 URL주소를 넣을 수 있다.</li>
<li>title이란 속성을 이용하여 인용한 곳의 타이틀을 명시할 수 있다.</li>
<li>block요소이며 다른 block요소와 다르게 텍스트나 inline요소를 포함하지 않고 <code><p></code>요소와 같은 block요소를 포함해야 한다.</li>
</ul>
<pre><code class="language-html5"><q cite="http://...">...</q></code></pre>
<ul>
<li><strong>"..."</strong> 로 출력되는 inline요소이며 텍스트와 inline요소를 포함할 수 있다.</li>
<li>보통 짧은 인용문을 쓸 때 사용한다.</li>
</ul>
<h2 id="텍스트text">텍스트(Text)</h2>
<p>텍스트 관련 요소들은 텍스트의 강조, 생략어와 두문자어, 추가글, 취소글, 첨자 등을 출력할 때 쓰는 요소</p>
<ul>
<li><code><em></code>_i : <em>이탤릭체</em>, 일반적인 강조 *css에서 단위로서의 em과 다름</li>
<li><code><strong></code>_i : <strong>볼드체</strong>, <code><em></code>보다 더 강한 강조
※ <code><i></code>_i , <code><b></code>_i : <code><i></code>(이탤릭체), <code><b></code>(볼드체)는 각각 위의 태그들과 모양만 같고 강조의 의미가 없다는 것이 차이점이다. </li>
<li><code><abbr></code>_i : 생략어 ex) <code><abbr title="World Health Organization">WHO</abbr></code></li>
<li><code><del></code>_i/b : 삭제글(취소선) ex) 올 때 <del>메로나</del></li>
<li><code><ins></code>_i/b : 추가글(밑줄) ex) 올 때 <del>메로나</del> <ins>바밤바</ins>
※ <code><ins></code>, <code><del></code>요소는 상황에 따라 block요소도, inline요소도 될 수 있다.</li>
<li><code><sup></code>_i : 윗첨자 ex) m<sup>2</sup></li>
<li><code><sub></code>_i : 아래첨자 ex) CO<sub>2</sub></li>
</ul>
<h2 id="이미지images">이미지(Images)</h2>
<h3 id="이미지--img-_i">이미지 : <code></code>_i</h3>
<p><code></code> : 웹 문서에 <strong>이미지</strong>를 불러오는 요소</p>
<pre><code class="language-html5"></code></pre>
<p>※ 같은 <code></code>태그를 각각<code><h1></code>과 <code><p></code>에 넣었을 때, 정상적으로 작동한다면 두 요소의 차이는 없다. 그러나 만약 통신환경의 문제로 이미지를 불러올 수 없는 상황이 된다면 이미지가 사라지고 alt의 속성값이 각 요소의 사이즈에 따라 다르게 출력된다.</p>
<h3 id="이미지-맵image-map--map_i">이미지 맵(Image map) : <code><map></code>_i</h3>
<p><code><map></code> : <strong>이미지 맵</strong>은 하나의 이미지에 여러 개의 링크를 적용할 수 있다.</p>
<pre><code class="language-html5">
<map id="맵이름" name="맵이름">
  <area shape="rect(사각형),circle(원),poly(다각형)," coords="맵좌표" href="url" alt="대체 텍스트" />
</map></code></pre>
<h3 id="링크link--a_i">링크(Link) : <code><a></code>_i</h3>
<p><code><a></code> : 텍스트나 이미지를 통하여 <strong>다를 곳으로 정보를 연결해 주는 역할</strong></p>
<pre><code class="language-html5"><a href="url">텍스트 또는 이미지</a></code></pre>
<ul>
<li><code><a></code>요소 안의 텍스트나 이미지 또는 연결된 정보에 대한 부연 설명은 title 속성으로 할 수 있다.</li>
<li>target 속성의 "_blank"는 연결된 정보 페이지를 새 창에 띄운다.</li>
</ul>
<h3 id="리스트list--olulli_b">리스트(List) : <code><ol></code>,<code><ul></code>,<code><li></code>_b</h3>
<p>일반적으로 _목록_을 작성할 때 쓰이며 목록의 종류에는 <strong>순차적 목록 ol(Order List), 비순차적 목록 ul(Unorder List), 정의형 목록 dl(Dedinition List)</strong>이 있다.</p>
<h4 id="olorder-list">ol(Order List)</h4>
<p>순차적인 목록을 작성할 때 사용됨</p>
<pre><code class="language-html5"><h5>신입직원 채용절차</h5>
<ol>
  <li>입사지원</li>
  <li>서류전형</li>
  <li>1차면접</li>
  <li>적성검사</li>
  <li>최종면접</li>
</ol></code></pre>
<p>이를 출력하면,</p>
<h5>신입직원 채용절차</h5>
<ol>
  <li>입사지원</li>
  <li>서류전형</li>
  <li>1차면접</li>
  <li>적성검사</li>
  <li>최종면접</li>
</ol>

<p>와 같다.</p>
<ul>
<li>순차적 목록 <code><ol></code>은 항목 앞에 번호가 부여됨.</li>
<li><code><ol></code> 요소는 block요소이며 <code><li></code>요소 이외의 다른 요소는 포함할 수 없다. <code><li></code>요소는 block요소이며 텍스트, inline요소, block요소를 포함할 수 있다.</li>
</ul>
<h4 id="ulunorder-list">ul(Unorder List)</h4>
<p>비순차적 목록은 웹 문서의 주요 메뉴 등을 마크업할 때 가장 많이 쓰는 요소 중의 하나</p>
<pre><code class="language-html5"><h5>주메뉴</h5>
<ul>
  <li><a href="#">기업소개</a></li>
  <li><a href="#">사업영역</a></li>
  <li><a href="#">제품소개</a></li>
  <li><a href="#">고객센터</a></li>
  <li><a href="#">홍보자료실</a></li>
  <li><a href="#">인재채용</a></li>
</ul></code></pre>
<p>이를 출력하면, </p>
<h5>주메뉴</h5>
<ul>
  <li><a href="#">기업소개</a></li>
  <li><a href="#">사업영역</a></li>
  <li><a href="#">제품소개</a></li>
  <li><a href="#">고객센터</a></li>
  <li><a href="#">홍보자료실</a></li>
  <li><a href="#">인재채용</a></li>
</ul>

<p>와 같다.</p>
<ul>
<li>순차적 목록 <code><ol></code>은 항목의 순서가 바뀌기 어려운 반면, 비순차적 목록<code><ul></code>의 항목은 순서에 크게 상관 없다.</li>
<li><code><ul></code>은 block요소이며 <code><li></code>요소 이외의 다른 요소를 포함할 수 없다. <code><li></code>요소는 block요소이며 텍스트, inline요소, block요소를 포함할 수 있다.</li>
</ul>
<h4 id="dldefinition-list">dl(Definition List)</h4>
<p>순차적 목록과 비순차적 목록은 항목들을 나열하는 데 비해 정의형 목록 <code><dl></code>은 '이것은 무엇이다'처럼 정의내리고자 하는 용어에 대한 정의 리스트</p>
<pre><code class="language-html5"><dl><dt>용어</dt><dd>용어 정의</dd><dl></code></pre>
<pre><code class="language-html5"><dl>
  <dt>웹 표준 수업과목</dt>
  <dd>XHTML</dd>
  <dd>HTML5</dd>
  <dd>CSS</dd>
  <dd>CSS3</dd>
  <dd>Javascript</dd>
  <dd>jQuery</dd>
</dl></code></pre>
<p>이를 출력하면,</p>
<dl>
  <dt>웹 표준 수업과목</dt>
  <dd>XHTML</dd>
  <dd>HTML5</dd>
  <dd>CSS</dd>
  <dd>CSS3</dd>
  <dd>Javascript</dd>
  <dd>jQuery</dd>
</dl>

<p>와 같다.</p>
<ul>
<li><code><dd></code>요소 항목들이 들여쓰기 되어 출력되는 것을 확인할 수 있다.</li>
<li><code><dl></code>요소는 block요소이며 <code><dt></code>요소와 <code><dd></code>요소 이외의 다른 요소는 포함할 수 없다.</li>
<li><code><dt></code>요소는 inline요소이며 텍스트와 inline요소를 포함할 수 있다.</li>
<li><code><dd></code>요소는 block요소이며 텍스트와 inline요소, block요소를 포함할 수 있다.</li>
</ul>
<h2 id="그룹핑grouping">그룹핑(Grouping)</h2>
<p><strong>그룹핑</strong> 요소에는 <code><div></code>요소와 <code><span></code>요소가 있다.
<code><div></code>_b : block요소들을 그룹핑하는 데에 사용
<code><span></code>_i : inline요소들을 그룹핑하는 데에 사용</p>
<pre><code class="language-html5"><h5>div 요소</h5>
<div id="footer">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">회사소개</a></li>
  </ul>
  <address>COPYRIGHT © Jay. All Rights Reserved</address>
</div>
<br />
<h5>span 요소</h5>
<ul>
  <li>
    <span>
      <strong>
        <a href="#">
          오늘의 book
        </a>
      </strong>
      <br />
      <em>
        <a href="#">
          HTML5와 CSS3
        </a>
      </em>
    </span>
  </li>
</ul></code></pre>
<p>이를 출력하면 다음과 같다.</p>
<h5>div 요소</h5>
<div id="footer">
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">회사소개</a></li>
  </ul>
  <address>COPYRIGHT © Jay. All Rights Reserved</address>
</div>
<br />
<h5>span 요소</h5>
<ul>
  <li>
    <span>
      <strong>
        <a href="#">
          오늘의 book
        </a>
      </strong>
      <br />
      <em>
        <a href="#">
          HTML5와 CSS3
        </a>
      </em>
    </span>
  </li>
</ul>

<p>위를 보면 <code><di></code>요소 안에 블록 요소인 <code><ul></code>요소와 <code><address></code>요소가 포함되어 있는 것을 알 수 있다.
요소들 중에 문서의 꼬리말의 의미를 가진 요소는 없다. 그래서 <code><div></code>요소 안에 id 속성값 'footer'를 주어 의미를 부여한 것이다. 그렇다고 <code><di></code>요소가 실제 footer의 의미를 갖는 것은 아니다.</p>
<p><code><span></code>요소의 경우 인라인 요소인 <code><strong></code>요소와 <code><em></code>요소를 포함하고 있다.</p>

</article>
<article>
<h1>XHTML 정리 _기초 이론</h1>
<p>Wed, 10 Nov 2021 10:56:37 GMT</p>
<p>※ 본 포스팅은 책 <실전프로젝트 반응형 웹퍼블리싱>의 내용을 토대로 작성하였음</p>
<h1 id="xhtml">XHTML</h1>
<p>만약 잘못된 구조로 마크업을 한다면 CSS(디자인)와 Javascript(동작)를 적용 할 때 어려움이 있을 뿐 아니라, 잘 적용한다 하여도 제 기능과 역할을 수행하지 못하는 부실한 웹페이지가 나올 수 밖에 없다.</p>
<p><code><p>, <span>, <a></code> 등과 같이 명령어의 형태가 '<>(각 괄호)'로 되어있는 것을 <strong>태그(tag)</strong> 라 하며,
<code><p> ~ </p></code> 와 같이 태그의 (<>)과 끝(</>)을 하나의 <strong>요소(element)</strong> 라고 한다.</p>
<p>이러한 요소들을 이용하여 웹 문서의 기본 구조를 작성하는 것을 <strong>마크업(markup)</strong> 이라고 한다.</p>
<hr>
<h2 id="xhtml의-문법-규칙">XHTML의 문법 규칙</h2>
<h3 id="1-요소는-제대로-중첩되어야-한다">1. 요소는 제대로 중첩되어야 한다.</h3>
<pre><code><p>중첩된 요소가 있을 때는 <strong>바르게</strong> 표현해야 한다.</p> (O)
<p>중첩된 요소가 있을 때는 <strong>바르게</p> 표현해야 한다.</strong> (X)</code></pre><p>마지막에 정의한 태그를 가장 먼저 닫아야 함</p>
<h3 id="2-요소-및-속성-이름은-소문자여야-한다">2. 요소 및 속성 이름은 소문자여야 한다.</h3>
<pre><code><p><a href="index.html">첫페이지</a></p> (O)
<P><A href="index.html">첫페이지</A></P> (X)</code></pre><p><code><a></code> 요소에서 'href'와 같은 것을 <strong>속성(attribute)</strong> 이라고 부르며 '=' 다음에 오는 것을 <strong>값(value)</strong> 이라고 부른다.</p>
<h3 id="3-요소는-항상-닫아야-한다">3. 요소는 항상 닫아야 한다.</h3>
<pre><code><p>요소는 <strong>항상 닫아야</strong> 합니다.</p> (O)
<p>요소는 <strong>항상 닫아야 합니다. (X)</code></pre><p>그런데 한 쌍의 태그(<>~</>)요소로 이루어져 있지 않고 하나의 태그로 되어있는 요소도 있다.
이러한 요소를 <strong>빈 요소(empty element)</strong> 라고 한다.
빈 요소의 경우도 다음과 같이 '/'로 닫아 주어야 함.</p>
<pre><code>요소는 항상<br /> 닫아야 합니다. (O)
요소는 항상<br> 닫아야 합니다. (x)
 (O)
 (X)</code></pre><p>자주 쓰는 빈 요소에는 <code><br />, <ht />, , <input />, <area />, <meta />, <link /></code> 등이 있다.</p>
<h3 id="4-속성값에는-인용-부호를-붙여야-한다">4. 속성값에는 인용 부호를 붙여야 한다.</h3>
<pre><code> (O)
 (X)</code></pre><p>보통 '='다음에 오는 것을 값(value)이라고 하는데 값에는 인용 부호(" ")를 붙인다.</p>
<h3 id="5-속성은-속성값과-함께-써야-한다">5. 속성은 속성값과 함께 써야 한다.</h3>
<pre><code><input disabled="disabled" /> (O)
<input disabled /> (X)
<option selected="selecterd"></option> (O)
<option selected></option> (X)</code></pre><p>속성은 속성값과 같이 선언해야 하며 생략하면 안 된다.</p>
<h3 id="6-img와-area-요소에는-alt-속성이-있어야-한다">6. img와 area 요소에는 alt 속성이 있어야 한다.</h3>
<pre><code> (O)
 (X)
<area shape="rect" coords="0,0,0,72" alt="오늘" href="today.html" /> (O)
<area shape="rect" coords="0,0,0,72" href="today.html" /> (X)</code></pre><p><code></code> 요소에 alt를 주어야 하는 이유는 문법적으로도 필요하지만 <em>이미지를 볼 수 없는 환경에서도 충분히 그 이미지에 대한 정보를 제공</em> 해 주어야 하기 때문이다.</p>
<h3 id="7-특수문자를-쓸-때는-entity-name-또는-entity-code를-사용해야-한다">7. 특수문자를 쓸 때는 Entity Name 또는 Entity code를 사용해야 한다.</h3>
<pre><code><p>you & me</p> (O) -> &는 특수문자'&'의 Entity Name
<p>you & me</p> (O) -> &는 특수문자'&'의 Entity code
<p>you & me</p> (X)</code></pre><p>특수문자 '&'를 출력하기 위해 그냥 '&'를 쓰게 되면 Entity Name이나 Entity code 맨 앞에 오는 &로 오인하여 문법적 오류가 발생한다. 따라서 이러한 문제들을 발생시키지 않으려면 특수문자의 경우 Entity로 변환하여 기술해야 함.
※ <a href="http://emtity.com">http://emtity.com</a> 에 가면 Entity code 에 대한 더 많은 정보를 얻을 수 있다.</p>
<h3 id="8-주석처리-방법">8. 주석처리 방법</h3>
<p>주석은 일반적으로 협업(공동작업)시 다음 작업자가 현재 작업한 내용을 쉽게 알아볼 수 있도록 도와주는 설명문이라고 보면 됨.
주석 내용을 브라우저 화면에 출력되지 않으며 처리 방법은 다음과 같다.</p>
<pre><code><!--주석내용-->
<!--여기서부터 공지사항입니다.--></code></pre><hr>
<p>※작성한 웹 문서의 '문법 유효성 검사'는 <a href="http://validator.w3.org">http://validator.w3.org</a> 에서 할 수 있다.</p>
<hr>
<h2 id="기본-문서-구조">기본 문서 구조</h2>
<pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
  <head>
    <meta name="description" content="Responsible Web Project" />
    <meta name="keywords" content="xhtml, css, html5, css3, javascript, jquery" />
    <meta name="author" content="icons" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>반응형 웹</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
      body{font-size:12px;}
    </style>
  </head>
  <body>
    반응형 웹이란...
  </body>
</html></code></pre><ol>
<li><code><!DOCTYPE></code> 은 현재 문서 타입이 무엇인지를 브라우저에게 알려줌.</li>
<li><code><html></code> 요소 안에는 <code><head></code> 요소와 <code><body></code> 요소로 구성되어 있다.</li>
<li><code><head></code> 요소 안에는 <code><meta>, <title>, <link>, <script>, <style></code> 등과 같은 요소들이 올 수 있는데, 내용을 정리하면 다음과 같다.<ul>
<li><code><meta></code> : 문서의 설명, 키워드, 저자 등을 지정</li>
<li><code><title></code> : 문서의 제목 지정</li>
<li><code><link></code> : 일반적으로 외부의 CSS 파일을 연결할 때 사용</li>
<li><code><script></code> : 주로 자바스크립트를 선언할 때 사용</li>
<li><code><style></code> : 문서 내에서 직접 스타일(CSS) 정의</li>
</ul>
</li>
<li>XHTML은 '네임 스페이스'라는 것을 꼭 지정해 주어야 하는데 <code><html></code> 태그 안에 있는 xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> 속성이 바로 '네임 스페이스'부분이다. 옆에 있는 lang="ko" xml:lang="ko"는 '언어는 한국어(한글)이다'라는 뜻.</li>
<li><code><meta></code> 태그를 보면 'charset=UTF-8'로 지정한 부분이 있다. 'charset'은 'character set'의 약어로 '문자 조합'을 의미한다. 'UTF-8'은 모든 언어 문자 및 특수 문자를 표현할 수 있어 다국어 환경에 적합하다. 또한 여기에서 중요한 점은 charset을 UTF-8로 설정할 경우, 문서를 저장할 때에도 반드시 인코딩 옵션을 'UTF-8'로 지정하고 저장해야 한다는 것이다. 그렇지 않으면 글자가 깨지는 현상이 일어난다.</li>
</ol>

</article>
</main></body></html>

num1	num2	num1 \|\| num2	num1 && num2	!num1
A > B	C >= D	㉠	㉡	㉢
A >= B	C <= D	㉣	㉤	㉥
A <= B	C < D	㉦	㉧	㉨

Jay.log

제이쿼리 라이브러리(jQuery Library)

제이쿼리 라이브러리(jQuery Library)

다운로드 방식

CDN 호스트 링크 방식

선택자 및 속성(Selector & Attribute)

문서 객체 조작(DOM Control)

탐색 선택자

문서 객체 조작 메서드

이벤트(Event)

효과(Effects)

애니메이션(Animation)

제이쿼리 모바일(jQuery Mobile)

제이쿼리 모바일 준비과정

제이쿼리 모바일 기본 구조

메인 타이틀

푸터 영역

메인 타이틀

풋터영역

sub1 타이틀

풋터영역

제이쿼리 모바일 이벤트

문서 객체(Document Object Model)

문서 객체(Document Object Model)

선택자

선택자

원거리 선택자

근거리 선택자

원거리 선택자

id 선택

요소(태그)명 선택자

근거리 선택자

parentNode(부모 요소 선택자)

childNodes(자식 요소 선택자)

children(자식 요소 선택자)

firstChild(첫 번째 자식 요소 선택자)

lastChild(마지막 자식 요소 선택자)

prevSibling(이전 형제 요소 선택자)

요소 노드가 선택되어 prev에 저장된다. 그 후에 다시 while 문으로 조건을 검사하면 노드 타입이 '1'로 인식되어 반복을 마치게 되는 것이다.

nextSiblibng(다음 형제 요소 선택자)

문서 객체 조작

문서 객체 조작에 관련된 메서드

생성

추가

교체

삭제

복제

속성부여

문서 요소의 생성 순서

요소 생성 연습

문서 객체 조작

Javascript_브라우저 객체(Browser Object Model)

브라우저 객체(Browser Object Model)

window

opener페잊지

navigator

PC버전 페이지

location

screen

history

첫 페이지

두번째 페이지

마지막페이지

Javascript_이벤트(Event)

이벤트(Event)

이벤트 핸들러 사용법

이벤트 행 입력형 방식

이벤트 분리형 방식

수정 전(잘못된 사용)

수정 후(올바른 사용)

기존 방식(DOM Level 0) 이벤트의 문제점

DOM Level 2 방식 이벤트

표준 방식 브라우저(파이어폭스/크롬/사파리)에 대한 이벤트 등록방법

비표준 방식 브라우저(IE8 이하)에 대한 이벤트 등록방법

이벤트 객체 생성 및 속성

이벤트 객체 생성

이벤트 객체 속성

Javascript_함수

함수(Function)

기본적인 함수의 정의와 호출