최근 글 목록
-
- 포토샵33-sharpen필터(1)
- 진보호스팅
- 2004
-
- 포토샵32-Render필터
- 진보호스팅
- 2004
-
- 포토샵32-Pixelate필터
- 진보호스팅
- 2004
-
- 포토샵31-Noise필터
- 진보호스팅
- 2004
-
- 포토샵30-Distort필터
- 진보호스팅
- 2004
23개의 게시물을 찾았습니다.
16. 파일 업로드하기
17. 복수의 조건들 검사하기
18. for 루프로 숫자 세기
19. 문자열을 숫자로, 정수로, 숫자를 문자열로 변환시키기
20. 페이지 로드에 반응하기
21. 상태바 메시지 디스플레이 하기
22. 대화형 버튼 만들기
23. 현재 날짜 디스플레이하기
24. 배열 만들기
25. 새로운 윈도우 열기, 윈도우 닫기
보안상의 이유로, 자바 스크립트는 이력 태그에 집어넣은 이름과 파일 업로드 요소 값만을 읽을 수 있다.
아래의 코드처럼, 유저가 파일을 선택했는지를 확인하는 데 value를 사용할 수 있다.
FileUpload 오브젝트
|
if(document.forms[0].theFie.value == ""){
alert("Please specify a file to upload.")
if 절의 괄호 안에 에러 메시지를 집어넣는다. 유저가 파일을 선택하기 전에 양식을 전송하려고 하면 자바 스크립트가 이 문장을 디스플레이하게 된다.■ 코드 실행 결과
|
function analyze(theForm){
검사하고 있는 양식을 참조하는 하나의 인자로 기능을 정의한다.if (theForm.group[0].checked && theForm.group2[0].checked) {
onClick="analyze(this.Form)"
HTML 태그 내에 이벤트 핸들러를 위치시켜 검사 기능을 호출한다. 이것을 this.form으로 패스하여 작업하고 있는 양식을 참조하는 것을 짧게 줄인다.■ 코드 실행 결과
{
document.write("
■ 코드 실행 결과
유저가 입력한 텍스트를 숫자로 변환시키는 데는 eval()을 가장 자우 사용하게 된다. eval()는 그것이 스크립트의 일부인 것처럼 부여한 텍스트를 읽는다.(이 것은 변환 작업은 부수적인 효과일 뿐이다.). 코드행을 검사하는 것과 같은 몇가지 목적을 위해서(아래의 코드 참조), 원래의 목적으로 eval 명령을 사용하게 된다.
document.forms[0].out.value = eval(document.forms[0].field.value)
■ 코드 실행 결과
유저가 숫자를 입력할지 잘 모르는 상황에서도 이런 명령을 사용할 수 있다. eval()에 글자를 부여하면 에러 메시지가 나타나는 반면에, parsInt()와 parseFloat()는 "숫자가 아님"을 나타내는 NaN을 반영하게 된다.
var a = parseInt(document.it.num.value)
■ 코드 실행 결과
document.forms[0].outfiedl.value = num.toString(base)
■ 코드 실행 결과
페이지가 아직 로드되고 있을 때 스크립트가 페이지의 일부로 접근하려 하면, 에러 메시지가 나타난다. 이런 현상을 피하려면, onLoad를 사용하여 페이지가 로드되자마자 스크립트가 트리거되도록해야 한다.
■ 코드 실행 결과
상태 바의 텍스트를 개별화하는 것은 자바 스크립트의 용도 중 가장 자주 사용되는 것이다. 이 것은 defaultStatus와 status로 할 수 있다. status에 배정된 텍스트는 즉각 디스플레이되는데, 브라우저가 다음에 메시지를 디스플레이할 때 사라진다. 보통 status는 유저가 링크 위로 이동하는 작업과 같은 유저의 이벤트와 메시지를 연계시키는 데 사용된다.
defaultStatus는 페이지가 로드되어 있는 한 상태 텍스트의 초기값을 설정해 준다. 이것은 변경되지 않고, 위의 코드에서처럼 아무 메시지도 나타나지 않을 경우에 보이게 되는 메시지를 디스플레이하는 데 사용한다.
■ 코드 실행 결과
마우스 위치 핸들러와 이미지 소스를 사용하여 대화형 버튼들을 만들 수 있다.
var down = new Image()
스크립트 내에 Image 생성자를 사용하여 새로운 이미지를 만든다.down.src = "buttonDown.gif"
새로운 이미지의 변수 이름과 그 뒤에 .src=를 써 넣고 캐시에 미리 로드될 이미지의 이름을 써 넣는다.■ 코드 실행 결과
var today = new Date()
■ 코드 실행 결과
넷스케이프3.0의 Array 생성자로 배열들을 만들 수 있다. 배열 엔트리에 집어 넣을 것과 엔트리 수를 지정할 수 있다.
var colors = new Array(3)
colors[0] = myColor
특정 엔트리를 채우려면, 배열 이름과 엔트리 번호를 대괄호 안에 써 넣는다. 등호 표시를 사용하여 그것에 값을 배정한다.■ 코드 실행 결과
var myWin = window.open("beauty.htm"),"picture
■ 코드 실행 결과
페이지가 두번째 윈도우를 열었다면, 그것을 열을 때 사용했던 변수 이름으로 그것을 닫을 수 있다. 현재 윈도우를 닫으려면 self를 사용하고, 현재 윈도우를 열어 준 윈도우를 닫으려면 opener를 사용한다.
onClick="self.close()"
■ 코드 실행 결과
11. 이벤트와 이벤트 핸들러
12. 함수 정의하기
13. 숨겨진 요소들
14. 자바스크립트와 CGI
15. 양식 전송 트리거 하기
|
일반적으로 이벤트 헨들러를 통해 스크립트의 제동 장치 역할을 부여하게 된다. 유저가 버튼을 클릭하면, 자바 스크립트로 강화된 페이지가 반응을 하게 된다. 이것은 onClick에 원하는 반응을 배정하여 할 수 있다. 웹 페이지의 각 부분은 어떤 특정한 이벤트 핸들러로써 작동된다.
대부분의 경우, 이런 이벤트 핸들러의 이름들은 자신들이 작동될 때를 나타내 준다. 하지만 몇 가지는 설명이 필요하다. 텍스트 난이나 윈도우로 이동하여 초점을 맞추는 이벤트는 onFocus로 작동된다. 난이나 윈도우를 떠나는 것은 onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur로 작동된다. 텍스트 난을 떠나기 전에 유저가 텍스트를 입력하면, onBlur가 아니라 onChange로 작동된다.
어떤 이벤트들은 유저의 행동에 직접적으로 개입하지 않는다. 예를 들어, onError는 스크립트가 작동시에 에러를 만났을 때 반응을 유발시킨다.
이벤트 핸들러에 스크립트의 부분을 할당하여 그 이벤트가 (on-다음에 오는 것)발생할 때 그 스크립트 부분을 자바 스크립트가 읽도록 해 놓는다. 작동시키고 싶은 코드를 인용 부호 안에 집어넣어야 한다.
글쓰지 마세요:
함수를 사용하기 전에 그것을 정의해야 하므로, 스크립트를 제목 태그 내에 위치시켜 그것이 먼저 읽히게끔 해 놓는다.
function diplay()
{ alert("Have a Great Day!") }
■ 코드 실행 결과
페이지 상의 거의 모든 곳에서 몇 번이고 함수를 호출할 수 있다. 함수를 트리거하는 데는 보통 이벤트 핸들러를 사용하게 된다.
■ 코드 실행 결과
document.links[0].onclick = shootTwo
■ 코드 실행 결과
제 강좌에 나와 있는 예제들을 버튼들을 자주 사용한다. 다음의 표는 버튼 오브젝트의 특성들을 설명하고 있다. 이런 표들은 이 강좌의 나머지 부분들에서도 이벤트 핸들러, 특성, 오브젝트와 연계된 방식들에 대해서 말할 때 사용되고 있다.
버튼 오브젝트
|
■ 코드 실행 결과
라디오 오브젝트
|
function tellMe(theForm) {
한 개의 인자를 채택하는 함수를 정의한다. 인자는 양식 참조를 저장하게 된다.alert(theForm.group[0].checked)}
onClick="tellme(this.form)"
HTML 버튼 태그 내에서 onClick에 함수를 배정한다. 이것을 this.form으로 패스하면 한 단어로 정확한 양식을 나타낼 수 있다.■ 코드 실행 결과
체크 박스 오브젝트
|
alert(document.forms[0].one.checked)
onClick="display()"
원하는 HTML 태그 내에서, 디스플레이 함수를 이벤트 핸들러에('함수 호출하기' 참조) 배정한다.■ 코드 실행 결과
텍스트 오브젝트
|
function doIt(theForm){
텍스트란의 양식을 참조하는 하나의 인자로 함수를 정의한다.theForm.text2.value=theForm.text1.value
onBlur=doIt(this.Form)
■ 코드 실행 결과
선택 메뉴에는 여러 개의 옵션이 들어 있다. 자바 스크립트는 이런 옵션들의 각각을 서버 오브젝트로 취급한다. options[]를 통해서 메뉴에 있는 각각의 항목에 접근할 수 있다.
선택 오브젝트
|
function display(selector){
선택 리스트를 참조하는 하나의 인자로 함수를 정의한다.selector.options[selector.selectedIndex].text
onChange="display(this)"
HTML 태그에 있는 이벤트 핸들러로 함수를 트리거 한다.■ 코드 실행 결과
복수의 페이지들로 작업할 경우, 숨겨진 오브젝트를 사용해서 복수의 페이지들이 펼쳐 있는 양식을 만들 수 있다. 한 양식에서 다른 양식으로 정보를 패스하고 싶을 때마다 사용한다.
위의 코드에서처럼 두 개의 HTML 양식을 만든다. 두번째 내에 숨겨진 요소를 정의한다. 그것에 이름을 붙이면 더 쉽게 찾아낼 수 있다.
document.forms[1].hider.value = document.forms[0].elements[0].value
자바 스크립트는 어떤 상태에 있는 CGI를 대치할 수 있는데, 때로는 서버에게 정보를 보내야만 할 때도 있다. 자바 스크립트를 이용하여 전송하기 전에 양식들을 검증함으로써 이 처리 과정을 개선시킬 수 있다.
양식 오브젝트
|
양식들에는 CGI 전송에 특별하게 적용되는 많은 특성들(action, method, target, encoding)이 포함된다. CGI를 능숙하게 사용할 줄 안다면, 이런 속성들을 HTML에 설정해 놓았을 것이다.
기본적인 배정 문장을 사용하여 스크립트에서 그것들을 변경할 수도 있다. 예를 들어 새로운 값을 action에 배정하면 두 개의 서버 사이에서 CGI 조회들을 분리시킬 수도 있고 여러 개의 CGI 애플리케이션들에 단일 HTML 양식을 사용할 수 있다.
유저가 전송 버튼을 클릭하면 HTML에 ACTION으로 배정한 URL로 양식 데이터가 보내진다. 아래의 코드에서처럼, 스크립트 내에서도 양식 전송을 트리거할 수 있다.
function checker(theForm){
양식을 참조하는 하나의 인자로 기능을 정의합니다.if (confirm("Are you ready to submit this information?")) {theForm.submit()}}
onChange = "checker(this.Form)"
기능을 트리거하는데 이벤트 핸들러를 사용한다. 기능을 this.form으로 패스하여 기능에서의 주소 지정을 짧게 만든다.■ 코드 실행 결과
8. 자바스크립트 활용하기
9. 변수들
10. 오브젝트에 대하여
alert("message")
document.write(confirm("message"))
document.write(prompt("message","")
■ 코드 실행 결과
아래의 코드에서처럼 var라는 키워드를 사용하여 변수를 정의한다. 일단 정의하고 나면, 그것에 부여한 이름으로 변수를 참조할 수 있다. 다음 규칙에 의해 변수의 이름을 선정해야 한다.
브랜드나 모델과 같은 질은 특성(property)라고 한다. 애플리케이션을 작동시키는 것과 같은 수행 작업은 방식(method)이라고 부른다.
예를 들어, 페이지에 HTML을 쓰려면, document.write()를 사용한다('자바스크립트에서 HTML 쓰기' 참조). 이 코드에서 write()는 도큐멘트라고 부르는 오브젝트에 속해 있는 방식이다. 오브젝트의 특성이나 방식을 나타내는 데 마침표를 사용한다. 이런 시스템을 도트구문 이라고 한다.
오브젝트 지향은 이런 명령 시스템을 사용하지 않는 작업 과정 언어들에 많은 이점을 가지고 있다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 오브젝트는 관련 정보와 명령어들을 논리적인 그룹들에 위치시켜서 더 다루기 쉽게 해준다. 예를 들면 document는 웹 도큐멘트에 들어 있는 링크나 이미지로부터 그 배경색에 이르기까지 웹 도큐멘트의 부분들을 포함한다.
자바 스크립트는 오브젝트의 계층 구조를 이용하여 페이지의 부분들로 접근하고 조직한다. 다른 모든 것을 담고 있는 오브젝트인 브라우저 윈도우가 맨 위에 위치한다. 이 오브젝트는 자신의 특성들과 방식들을 갖고 있다. 윈도우 내에 자리잡고 있는 모든 서브 오브젝트를 특성으로서 다룰 수 있다.
특성이나 방식과 같은 서브 오브젝트들은 도트 구문을 통해서 부모 오브젝트들과 연계되어 있다. 이런 서브 오브젝트들도 자신의 특성, 방식, 그리고 서브 오브젝트를 가질 수 있다.
자바 스크립트를 마스트하고 페이지의 부분들을 작성하려면, 그 계층 구조를 배워야 한다.
현재의 날짜나 산술적인 상수처럼 페이지에는 아무 작용도 하지 않는 정보를 다루어야 할 때도 있다. 자바스크립트는 계층 구조의 일부가 아닌 내장되어 있는 오브젝트들을 통해서 이런 일을 해준다. 계층 구조에 있는 것과는 달리, 내장되어 있는 오브젝트들은 윈도우의 서브 오브젝트로서 나타낼 수 없다.
최상위 단계
자바 스크립트의 계층 구조에서 최상위 단계는 브라우저 윈도우이다. 이것은 Window로 나타낸다. 각 윈도우는 현재의 주소를 위치와 히스토리 상에서의 이전의 URL에 담고 있다.
유저가 보고 있는 페이지는 윈도우 내에 있다. HTML로 정의한 모든 것을 포함하여 이 페이지의 내용들은 세번째 서브 오브젝트인 도큐멘트를 구성한다. 도큐멘트에는 모든 닻, 링크, 이미지, 그리고 페이지 상의 양식들이 들어 있다.
하위 단계
도큐멘트의 각 서브오브젝트를 여러 개의 요소들로 더 세분화 할 수 있다. 예를 들면 forms[]는 여러 개의 요소들을 담고 있고, 그 각각은 자신의 특성을 지니고 있다.
네번째 단계의 네 개의 오브젝트들은 모두 배열이라고 하는 것으로 정보를 담고 있다. 자바 스크립트는 배열을 사용하여 페이지에 비슷한 부분들을 번호순으로 조직한다.
예를 들어, 이미지 오브젝트는 그 페이지의 모든 이미지들을 담고 있다. 특정 이미지로 접근하려면 images[]를 써넣고 그 괄호 안에 번호를 써 넣어야 한다.
자바 스크립트는 HTML에 나타나는 HTML 순서로 이미지들과 모든 배열 입력 내용들을 담고 있다. 이 순서는 항상 0으로 시작된다. 페이지 상의 맨 처음 이미지는 document.images[0]이라는 코드로 나타내고, 두번째 것은 document.images[1]로 나타내는 식이다.
1. 출력문
2. HTML에 스크립트 삽입하기
3. 별개의 파일에서의 스크립트
4. 자바스크립트가 아닌 내용
5. 자바스크립트에서 HTML 쓰기
6. 미리 포맷된 텍스트 쓰기
7. 스크립트에 주석 삽입하기
자바 스크립트를 배웁시다.
자바 스크립트를 배웁시다.
자바 스크립트를 배웁시다.") 명령이 HTML 문서로의 출력 작업을 수행한다. 이 명령은 현재의 문서에 문자열을 출력할 것을 명령하고 있다. 이 문자열에서는 HTML 명령 또는 추가로 문자 포맷 명령이 포함될 수 있다. 예를 들어, document.write("
자바 스크립트를 배웁시다")라는 명령을 사용하여 그 문자열의 일부를 볼드체로 나타낼 수도 있다. 밑의 그림에서 HTML의 "자바스크립트" 메시지 전에 나오는 자바 스크립트의 "자바스크립트" 메시지를 주의하여 보면 이것은 자바 스크립트 코드를 문서의 앞부분, 그러니까 HTML 메시지의 본문 앞에 위치시켰기 때문이다. 만약 HTML 문서의 앞부분에, 그리고 자바 스크립트 본문의 앞부분에 위치되었다면 그 순서가 뒤바뀌었을 것이다.
페이지의 제목 부분과 본문 부분에 스크립트를 배치시킬 수 있다. 자바 스크립트를 보다 능숙하게 사용하게 되면, 스크립트를 제목에 집어넣어 그것이 맨 처음으로 로드되게 해 놓을 수 있다.
HTML에 스크립트 삽입하기
브라우저가 자신의 스크립트를 알게 하려면, 그 파일이 있는 장소를 알려 주어야 한다. 이것은 스크립트 태그에 있는 소스 속성으로 가능하다. 별개의 소스 파일들을 사용하면 유저들이 읽지 못하도록 주석을 달 필요가 없다. 외부 소스 도큐먼트를 사용하기 전에, 자신의 서버 관리자로 하여금 MIME 유형의 application/x-javascript에 .js를 붙여 놓도록 해야 한다.
|
별개의 파일에 스크립트 위치시키기
넷스케이프 3.0은 noscript의 시작과 끝맺음 태그 사이에 있는 모든 것을 무시한다. 이 두 태그 내에 다른 대체 내용을 집어넣을 수 있다.
이 noscript 태그는 넷스케이프 3.0에 새로 등장한 것이다. 만약 유저가 네트웍 설정에서 자바스크립트를 불능으로 해 놓아도 텍스트가 디스플레이된다.
자바 스크립트를 해석하지 못하는 브라우저를 위한 메시지 담기
자바 스크립트에 대해 더 배우게 되면, document.write()를 이용하여 HTML 도큐먼트를 유저의 상호 반응에 따라 개별화시킬 수 있다는 것을 알게 될 것이다.
스크립트로부터 텍스트와 HTML 쓰기
document.write(" 강좌!)
|
document.writeln("
안녕하세요")
미리 포맷된 텍스트 블록의 시작을 나타내는 미리 포맷 태그를 써넣는다.
밑의 코드는 주석에 대해 보여주고 있다. 스크립트가 작동하는 방법을 꼭 이해할 필요는 없지만, 주석이 사용되는 방법은 꼭 검사해 보는 것이 좋다.
자바 스크립트에는 단일 행과 복수 행의 두 가지 유형의 주석이 있다. 단일 행 주석은 브라우저로 하여금 그 뒤에 나오는 모든 것을 무시하게끔 한다. 복수행 주석은 무시될 코드 블록을 표시해 준다. 스크립트에 주석 삽입하기
/*comment*/
1. 자바스크립트의 산술표현식
2. 선언문과 지정문
3. 자바스크립트의 숫자 표현
|
2.1. var 문장
자바 스크립트에서 var 문장은 변수를 선언할 때 사용된다. 이것은 int, float, double(이 외에도 많음) 같은 뚜렷한 데이터 형식을 사용하는 C, C++, 자바와는 근본적으로 다르다. 자바 스크립트 변수 이름은 문자 또는 밑줄 문자( _ )로 시작될 수 있으며, 그 뒤에 숫자, 문자, 밑줄 문자 등을 포함할 수 있다. 물론 자바 스크립트 예약어들은 적절한 변수 이름이 아니므로 사용하면 안된다. 다음의 코드는 몇 가지의 부적절한 변수 이름과 적절한 변수 이름을 보여주고 있다.
var 2p1; // 부적절한 변수 이름이다. 숫자 2를 처음에 쓸 수 없다.
var with; // 부적절한 변수 이름이다. 자바 스크립트 예약어를 사용할 수 없다.
var p21; // 적절한 변수 이름이다.
var number_of_widgets; // 적절한 변수 이름이다.
일반적으로 변수를 선언할 때 그것에 0 또는 빈 문자열을 할당함으로써 그것을 초기화하는 작업도 같이 해야 한다. 그렇게 변수들을 명확히 초기화하지 않으면 그 변수에는 null 값이 배정된다. 그래서 나중에 여러분이 먼저 그 변수에 아무런 값도 지정하지도 않고서, 그 변수를 숫자로서 참조하려고 하면 인터프리터는 에러를 발생시킨다. 다음의 코드는 이러한 예를 보여주고 있다.
var totalUser; // 변수를 선언하고 그 변수를 0으로 초기화한다.
var newUser; // 변수만 선언한다.
totalUsers=totalUsers+nesUsers; // 에러가 발생한다.
편의상 자바 스크립트는 다음과 같이 여러분이 하나의 문장에서 콤마로 분리하여 여러 개의 변수들을 선언할 수 있도록 해준다.
var rate=0, distance=100;
물론, 초기화할 때는 여러 가지의 형식을 사용할 수 있다. 다음의 예는 먼저 선언된 변수를 어떤 문자에 곱합니다. 그것은 문법적으로 완전한 자바 스크립트 문장이다.var rate=0
var newRate=rate*1.1;
2.2. 옵션으로서의 var
변수를 선언하고 초기화하는 데 var를 사용해도 되고, 안해도 된다. 그러나 여러분이 이 변수를 선언하고 초기화하고자 한다는 사실을 명확하게 나타내는 데 var를 사용한다는 것은 바람직한 일이다.
만약 여러분이 var를 사용하지 않았을 때 그 변수가 존재하지 않는 것이라면 그 변수는 묵시적으로 또는 자동적으로 선언될 것이다. 만약 그 변수가 이미 선언되어 있는 것이라면 그 변수에는 단지 새로운 값이 할당될 것이다. 만약 여러분이 함수를 사용하기 시작한다면 여러분은 로컬 변수를 선언하는 데 var를 사용하여야 똑같은 이름의 글로벌(global) 변수의 값이 부주의로 바뀌는 것을 막을 수 있다. 여기에 있는 코드는 변수를 선언하고 초기화하는 두 가지의 방법을 보여주고 있다.
첫 번째 줄은 var를 사용하여 변수를 선언하고 정의하려 한다는 사실을 명확하게 밝히고 있다. 두 번째 줄에서는 var를 사용하고 있지 않다.
그러므로 그전의 코드를 살펴보지 않는 한 이것이 새로운 변수를 선언하고 그 것을 초기화하는 것인지, 아니면 기존의 변수 그냥 새로운 값을 할당하는 것인지를 알 수 없다.
var count=0; // 이 방법을 권장한다.
// 아래의 코드도 새로운 변수를 선언하고 초기화하는 일을 수행한다. 그러나 이렇게 하면 여러분의 프로그램을 알아보기 어렵게 된다.numWidget=0;
3.1. 정수값의 표현
자바 스크립트는 정수를 10진수, 16진수, 8진수 등으로 표시할 수 있다. 10진수로 표시되는 정수가 디폴트로서, 앞에 문자를 붙일 필요가 없다. 16진수는 Ox 또는 OX 문자로 시작되며, 0에서 9까지의 숫자와 f 또는 A에서 F까지의 문자들을 가진다. 8진수는 0으로 시작되며, 0에서 7까지의 숫자만을 가질 수 있다. 다음의 예는 255라는 십진수를 나타내는 각각의 형식을 보여주고 있다.
dec = 255;
hex = Oxff;
oct = 0377;
fp = 1.732;
fp = 2E-7;
fp = -3.3e5; fp = .5e3;
HTML 태그 중의 LI 태그와 비교하면서 알아보자.
속성 속성값 설명 list-style-type disc | circle | square | decimal | loer-roman | upper-roman | lower-alpha | upper-alpha | none Display 속성값이 list-item인 태그(UL, LI)에 적용할 수 있고, 상속된다. 초기값은 disc이다. list-style-position inside | outside Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 outside이다. list-style-image URL | none Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 none이다. list-style 'list-style-type' | 'list-style-position' | 'list-style-image' Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 대표속성은 초기값이 없다.
다음의 코드를 실행시켜 보고 결과를 예측해 보자.
| |
CSS에서는 워드프로세서나 일반 데스크탑용 출판 어플리케이션 프로그램들이 제공하던 세밀한 인쇄상의 타입제어를 위한 많은 속성들이 존재한다.
먼저 문단모양을 위한 속성들을 살펴보자.
속성 속성값 설명 text-indent 길이 | 퍼센트 문단의 들여쓰기를 뜻한다.
Block 요소 - DIV, P, BLOCKQUOTE 등 - 에 적용할 수 있고, 상속된다. 초기값은 0이다. 퍼센트값은 부모 요소의 길이를 기준으로 한다.text-align left | right | center | justify 텍스트 정렬 방식을 결정하는 속성이다. Block요소에 적용할 수 있고, 상속된다. 초기값은 브라우저마다 다르다. Justify는 보통 left와 같다. line-height normal | 숫자 | 길이 | 퍼센트 줄간격을 의미한다. 모든 요소에 적용되며, 상속된다. 초기값은 normal이다. 숫자를 쓰면, 해당 요소의 "글자 크기×숫자"만큼을 뜻한다. 퍼센트 값은 해당 요소의 글자 크기를 기준으로 한다.
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
위의 세 가지 예는 모두 같은 뜻이다.vertical-align top | bottom | middle 한 줄 안에서의 단락간의 수직 정렬 방식을 정한다. Table에서의 vertical-align 속성을 참조한다.
다음은 이러한 속성들을 사용하여 작성한 코드이다.
DIV로 새 문단을 시작할 때마다 두 글자 크기만큼 들여쓰기를 하게 됩니 다. 여기서부터는 가운데 정렬이 적용되겠군요. 한번 테스트해보도록 하죠. 어떤 글들이 될까요.. 지금 우리가 시 험해 보고 있는 것은 줄간격의 변화입니다. 어떻습니까. 줄간격이 조금 차이가 나는 것 같지요? | |
다음으로는 텍스트 내의 줄 간격과 단어 간격, 문자 간격 등을 제어하는 속성들을 살펴본 다. 워드프로세서의 글자모양 정도를 생각해 보면 이해하기 쉬울 것이다.
속성 속성값 설명 letter-spacing normal | auto 문자사이의 간격을 제어하는 속성이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. word-spacing normal | 숫자 단어 사이의 간격을 조정한다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. white-space normal | pre | nowrap 문장 안에 있는 빈칸을 어떻게 처리할 것인지 결정한다. Block-level 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다.
- normal : 일반 HTML에서와 마찬가지로 두 칸 이상의 빈칸은 한 칸으로 취급된다.
- pre : PRE 요소에서처럼 사용자가 입력한 모습 그대로 빈칸도 화면에 출력된다.
- nowrap : BR 요소처럼 강제로 줄을 바꾸기 전에는 계속 같은 줄에 나타난다.
다음의 코드를 보면서 결과를 예상해 보도록 하자.
글자간 간격이 0.5em이다. Letter-spacing보통 글자 without letter-spacing단어간격이 어떤가요?여기와 비교해 보도록 하죠빈칸의 처리가 아무래도 안되는 것 같군요 | |
7.1. Font 속성
7.1. Font 속성 글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다. 주로 사용되는 속성들에 대한 정리를 다음의 표를 이용하여 해보았다.
속성 속성값 설명 font-family [[글꼴이름 | 기본글꼴이름] 글꼴을 정하는 속성이다. 두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰따옴표(" ")로 묶는다. 브라우저는 앞에 있는 글꼴을 먼저 찾고 사용자의 시스템에 설치되어 있지 않은 글꼴인 경우에는 기본 글꼴을 보여준다. 제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 주도록 하는 것이 현명할 것이다. 영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다. font-style normal | italic | oblique 글자의 모양이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. Italic과 oblique는 모두 기울임꼴이다. font-variant normal | small-caps 초기값은 normal이다. Small-caps는 크기가 작은 대문자로 나온다. font-weight normal | bold | bolder | lighter | 100∼900 글자의 굵기를 조정한다. 초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다. 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다. 어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다. font-size 절대값 | 상대값 | 길이 | 퍼센트 글자의 크기를 정한다. 초기값은 medium이다. 절대값 : xx-small | x-small | small | medium | large | x-large | xx-large 상대값 : larger | smaller 퍼센트 값을 썼을 때는 부모 요소의 글자 크기를 기준으로 한다. font [['font-style'||'font-variant'||'font-weight'||'font-size'||'line-height'||'font-family'] 글꼴, 글자굵기, 글자크기 등을 한꺼번에 지정해 줄 수 있으며 표속성이나 초기값은 없다. text-decoration none|[ underline||overline||line-through||blink] 글자에 밑줄이나 윗줄을 그을 수 있으며 초기값은 none이다. color 색이름 | RGB값 글자색을 나타낸다. 초기값은 브라우저마다 다르다. text-transform capitalize | uppercase | lowercase | none 영문자열의 대소문자를 변경하는데 사용한다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 none이다.
여기서 살펴본 여러 속성들을 브라우저에서 테스트해보도록 하자.
This is a simple text for test! This is another text for test!! 진보네트워크 교육센터 링크는 아니지만 밑줄을 쳐보죠. line-through capitalize & weight effect | |
6.1. Width 속성
6.2. Height 속성
6.3. Overflow 속성
6.4. 배경색과 이미지
6.1. Width 속성
하나의 요소에 의해 그려지는 box의 폭은 width 속성의 값으로 결정된다.
6.2. Height 속성
속성 속성값 설명 width 길이 | 퍼센트 | auto Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. max-width 길이 | 퍼센트 Box의 최대폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. min-width 길이 | 퍼센트 Box의 최소폭을 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 폭을 기준으로 한다.
6.3. Overflow 속성
속성 속성값 설명 height 길이 | 퍼센트 | auto Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. max-height 길이 | 퍼센트 Box의 최대 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 100%이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. min-height 길이 | 퍼센트 Box의 최소 높이를 정한다. Block-level과 IMG 요소에 적용되며, 상속되지 않는다. 초기값은 0이다. 퍼센트 값은 부모 요소 box의 높이를 기준으로 한다.
overflow visible | hidden | scroll | auto
Position 속성의 값이 absolute인 요소에 적용되며, 상속되지 않는다. 초기값은 visible이다.visible 크기에 관계없이 내용을 모두 보여준다. hidden 해당 요소에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다. Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다. auto 할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다. scroll 언제나 스크롤바를 나타낸다.
아래 예를 보면, 주어진 공간의 크기보다 내용이 길지만, 기본값이 visible이 적용되어 내용이 화면에 모두 나타난다.
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다. | |
Overflow 속성의 값을 hidden으로 해 보자.
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한 다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나 오지만, 너비는 200픽셀을 유지한다. | |
Overflow 속성의 값을 auto와 scroll로 준 경우이다.
overflow : auto /*필요한 수직 스크롤바만 나온다.*/ | |
overflow : scroll /*수평, 수직 스크롤바가 모두 나온다.*/ | |
6.4. 배경색과 이미지
배경이란, Box model에서 content의 배경이 되는 부분과 padding을 포함한 부분을 말한 다. Border 부분의 색과 모양은 border 속성으로 지정할 수 있다. Margin 부분은 언제나 투명하기 때문에 부모 요소의 배경이 비쳐 보이게 된다. 배경에 관계된 속성은 실제로는 모두 상속되지 않는다. 그러나, background-color 속성 의 기본 초기값이 transparent(투명)이기 때문에 특별히 이 속성을 사용하지 않았을 때는 부모 요소의 배경색이나 무늬가 자식 요소에도 똑같이 나타나 상속된 것처럼 보일 수 있다. 다음의 표를 살펴보면서 하나씩 알아나가도록 하자.
background-color : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 transparent이다. 다음 예제의 결과를 한번 생각해 보자.
속성 속성값 background-color 색이름 | RGB 값 | transparent background-image url | none background-repeat repeat | repeat-x | repeat-y | no-repeat background-attachment scroll | fexed background-position 퍼센트값 | 길이, top | center | bottom, left | center | right background background-color || background-image || background-repeat || background-attachment || background-position
FF0000에 해당하는 색 | |
background-image : URL의 값으로 나오는 이미지를 요소의 배경으로 지정할 수 있 다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 none이다. 그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 위쪽에 덮이게 된다.
이 곳에는 배경이 나오지 않습니다. 이 곳에는 배경이 나와야겠지요. 여기에는 배경이 나오지 않겠지요. | |
예제에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게 된다.
background-repeat : 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 repeat이다. 배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다. Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다.
본문 전체가 물고기배경으로 덮이겠지요. 세로 방향으로만 연속될 겁니다. | |
위의 예를 보면, 배경 그림을 한 방향으로만 연속시키거나 연속시키지 않을 때(none으로 줄 때)는 시작 위치가 브라우저의 왼쪽 위라는 것을 알 수 있다.
background-attachment : 배경 그림으로 사용한 그림의 위치가, 적용된 요소와 함께 움직이는지, 브라우저의 화면에 고정되는지를 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 scroll이다. 다음에 나오는 background-position과 함께 보자.
background-position : 배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를 정한다. Block-level 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 0%, 0%이다. 퍼센트 값을 썼을 때, background-attachment의 값이 scroll이면, 이 속성이 사용된 요소의 content box(Box dimensions 참고)를 기준으로 한다(padding, border, margin을 포함한 상자가 아니다). Background-attachment의 값이 fixed이면, 전체 화 면의 크기를 기준으로 한다.
화면의 정 중앙에서 시작해 아래쪽으로만 배경그림이 연속되어야 정상이다. | |
background : 모든 요소에 적용할 수 있고, 상속되지 않는다. 대표속성에는 초기값이 없다.
5.1. Position 속성
5.1.1. position : absolute | relative | static | fixed
5.1.2. Relative positioning
5.2. Float, Clear 속성
5.2.1. float : left | right | none
5.2.2. clear : none | left | right | both
5.3. Absolute positioning
5.4. relative, floating, absolute positioning 비교
5.4.1. Relative positioning
5.4.2. Floating
5.4.3. Absolute positioning
CSS가 가정하고 박스 모델에서 또 하나의 중요한 기능은 바로 박스를 브라우저의 어느 곳에 배치할 수 있는가 이다. 우리가 배운 HTML에서는 문단의 겹침, 문단간격의 세밀한 조정 등 이 불가능했지만 CSS에서는 이러한 것들을 가능하게 해준다.
5.1. Position 속성
5.1.1. position : absolute | relative | static | fixed
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 static이다.
5.1.2. Relative positioning
Block-level이나 inline layout에 의해 위치가 결정되면, 이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다. 이것을 상대위치지정(relative positioning)이라고 한 다. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위 치를 이동시킨다고 해서 다음에 나오는 형제자매 요소의 위치가 함께 이동되는 것은 아니다. 따라서, 상대적 배열을 이용하면, 요소 box들이 서로 겹쳐지는 효과를 낼 수 있다.
P안에 SPAN이 포함되는 경우, P는 SPAN의 부모(parent) 요소가 되고, SPAN은 P의 자식 (child) 요소가 된다. P 다음에 다른 P가 올 경우, 두 개의 P는 서로 형제자매 관계 (sibling)가 된다. P안에 있는 SPAN 안에 다시 EM이 포함된다면, P는 EM의 조상 (ancestor)이 되고, EM은 P의 후손(descendant)이 된다.
부모 요소가 상대적 배열에 의해 위치가 변경되면, 자식 요소는 변경된 위치를 기준으로 배열된다. 하나의 요소 box를 상대적으로 지정하려면, position 속성의 값을 relative로 주어야 한다.
5.2. Float, Clear 속성
5.2.1. float : left | right | none
float 속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 된다.모든 요소에 적용되며, 상속되지 않는다. 초기값은 none이다.
5.2.2. clear : none | left | right | both
지정한 방향에는 떠다니는 box가 자리할 수 없음을 나타낸다. 즉, clear의 값을 both로 하면, 해당 요소의 단락 좌우에는 떠다니는 box가 올 수 없다. 따라서, 떠다니는 box의 다음 줄로 내려가게 된다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 none이다.
HTML에서는 이렇게 그림 다음에 글자를 쓰면 그림 옆에 한 줄 나오고, 나머지는 그림 아래로 내려가 버리는 것을 앞선 강좌에서 배우셨을 겁니다. 지금은 어떤가요? clear 속성을 쓴 가로선은 그림 아래로 내려가구요. | |
5.3. Absolute positioning
Absolute positioning은 기준박스에서 상하좌우로 위치를 이동시킨다. 기준 박스란 보통 브라우저를 의미하게 된다. 만약, 부모 요소가 absolute positioning에 의해 위치가 정해졌다면, 자식 요소에 absolute positioning을 적용할 때는 부모 요소의 box를 기준으로 위치를 잡게 된다. Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다.
속성 속성값 설명 top 길이 | 퍼센트 | auto 브라우저 화면 윗쪽을 기준으로 얼마나 내려올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. right 길이 | 퍼센트 | auto 브라우저 화면 오른쪽을 기준으로 왼쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. bottom 길이 | 퍼센트 | auto 브라우저 화면 아랫쪽을 기준으로 윗쪽으로 얼마나 올라올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. left 길이 | 퍼센트 | auto 브라우저 화면 왼쪽을 기준으로 오른쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다.
5.4. relative, floating, absolute positioning 비교
각각의 positioning 방법을 비교하기 위해 아래와 같은 문서가 있다고 가정하자. 아래 나오는 예는 BODY 부분은 변하지 않고, STYLE에 들어가는 속성만을 계속 바꾸어 준 것이다.
여기서부터 본문이 시작합니다. | |
5.4.1. Relative positioning
BODY {line-height : 80%} #outer {position: relative; top: -12px; color: red;} #inner {position: relative; top: 12px; color: blue;} | |
5.4.2. Floating
여기서부터 본문이 시작합니다. | |
5.4.3. Absolute positioning
#outer {position: absolute; top: 150px; left: 150px; width: 200px; color: red;} #inner {color: blue;} | |
#outer {color: red;} #inner {position: absolute; top: 100px; left: -50px; width: 130px; color: blue;} | |
5.5. Z-index 속성
여러 개의 box가 서로 겹쳐지게 보이도록 하는 속성이다.
z-index : auto | 숫자
Position 속성의 값이 absolute나 relative인 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다.
- auto : 쓴 순서대로 쌓인다. z-index가 0인 것과 같다.
- 숫자 : 숫자가 낮은 요소가 밑으로 간다.
- 음수가 들어가면, 부모 요소보다 밑으로 간다. 조상 요소 밑으로 보낼 수는 없다.
- 양수가 들어가면, 부모 요소보다 위로 간다.
Top Middle Bottom |
다음의 결과를 확인해 보도록 하자.
최근 댓글 목록