/images/white/buttonHelp.gif){kind=small}
/images/white/iconAllTags.gif){kind=small}
● 글자 제어
- 글꼴지정(font-family) : 글꼴을 지정할 때 여러개의 글꼴을 지정(사용자의 컴퓨터에 해당 글꼴이 없을 수 있기 때문)
- 글자형태지정(font-style) : 글자 형태 normal(정상글씨),italic(이태릭),oblique(기울임)
- 글자굵기지정(font-weight) : 글자 굵기 지정, 숫자가 클수록 두껍다 (normal(400),bold(700),100-900)
- 글자크기지정(font-size) : 글자크기
- 글자색(color) : 글자 색 지정
<html>
<head>
<style>
.fontAttr {font-family:궁서, 돋움;font-style:italic;font-weight:900;font-size:50;color:blue}
.space {letter-spacing:5em}
.space1 {word-spacing:3em}
.line {line-height:50pt}
.nwrap {white-space:nowrap}
.talign {text-align:center}
.jalign {text-align:justify}
.valign {vertical-align:bottom}
.tdeco {text-decoration:underline overline;font-size:50;background-color:yellow}
</style>
</head>
<body>
<h1>글꼴에 대한 지정</h1>
<p class="fontAttr">글꼴, 글자 스타일, 굵기, 크기, 글자색 등 지정</p>
<h1> 문장과 문단 제어 </h1>
<p class="space">글자와 글자 사이의 간격</p>
<p class="space1">단어와 단어 사이의 간격</p>
<p class="line">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다</p>
<table border=1 width=300 bordercolor=blue>
<tr>
<td>이 문장은 nowrap을 테스트하는 문장입니다</td>
</tr>
</table>
<table border=1 width=300 bordercolor=blue>
<tr>
<td class="nwrap">이 문장은 nowrap을 테스트하는 문장입니다</td>
</tr>
</table>
<table border=1 width=600 bordercolor=blue>
<tr>
<td class="talign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다.
루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<table border=1 width=600 bordercolor=blue>
<td class="jalign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<table border=1 width=600 height=300 bordercolor=blue>
<td class="valign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<p>
<span class="tdeco">글자에 장식</span>
</body>
</html>
● 문장과 문단을 제어
자간(letter-spacing) : 문자와 문자사이의 간격지정
단어간격(word-spacing) : 단어와 단어사이의 간격지정
줄간격(line-height) : 줄사이의 간격지정
공백과 줄바꿈(white-space)
- normal : 여러개의 공백이 하나의 공백
- nowrap : <br>이 없으면 줄을 바꾸지 않는다
좌우정렬(text-align)
- left,center,right,justify(좌우정렬)
세로방향정렬(vertical-align)
- top : 위에 정렬
- middle : 가운데에 정렬
- bottom : 아래에 정렬
- baseline : 부모요소의 베이스 라인에 정렬[기본값]
- text-top : 부모요소의 폰트 위에 정렬
- text-bottom : 부모요소의 폰트 아래에 정렬
- super : 위 첨자의 위치에 베이스 라인을 정렬
- sub : 아래첨자의 위치에 베이스 라인을 정렬
- % : 부모요소의 베이스라인을 0으로한 높이의 비율
글자에 선 긋기(text-decoration)
- underline : 텍스트에 밑줄을 긋는다
- none : 밑줄을 긋지 않는다
- overline : 텍스트위에 선을 긋는다
- line-throuth : 텍스트 가운데 선을 긋는다
● 배경 색상 배경 그림 제어
배경색상(background-color) : 색
배경이미지(background-image) : 이미지파일
배경그림 반복여부(background-repeat)
- repeat : 배경그림이 가로세로 반복
- no-repeat : 배경그림이 반복되지 않고 한번만 나타난다
- repeat-x : 배경그림이 가로 방향으로만 반복
- repeat-y : 배경그림이 세로 방향으로만 반복
배경그림위치(background-position)
- 가로방향 : left,center,right,%
- 세로방향 : top, center,bottom,%
배경그림스크롤(background-attachment)
- scroll : 문서의 내용이 스크롤 되면 배경그림도 같이 스크롤 된다
- fixed : 문서의 내용이 스크롤 되더라도 배경그림은 스크롤 되지 않는다
● 목록 속성 설정
목록 기호나 번호 형식(list-style-type)
- none : 지정하지 않음
- disc : 검은 원형
- circle : 원형
- square : 사각형
- upper-alpha : 대문자 알파벳
- lower-alpha : 소문자 알파벳
- decimal : 1부터 시작하는 10진수
- upper-roman : 대문자 로마자
- lower-roman : 소문자 로마자
그림으로 목록기호사용(list-style-image)
- url : 이미지파일
목록의 들여쓰기(list- style-position)
- inside : 들여쓰기
- outside : 내어쓰기
- 글꼴지정(font-family) : 글꼴을 지정할 때 여러개의 글꼴을 지정(사용자의 컴퓨터에 해당 글꼴이 없을 수 있기 때문)
- 글자형태지정(font-style) : 글자 형태 normal(정상글씨),italic(이태릭),oblique(기울임)
- 글자굵기지정(font-weight) : 글자 굵기 지정, 숫자가 클수록 두껍다 (normal(400),bold(700),100-900)
- 글자크기지정(font-size) : 글자크기
- 글자색(color) : 글자 색 지정
<html>
<head>
<style>
.fontAttr {font-family:궁서, 돋움;font-style:italic;font-weight:900;font-size:50;color:blue}
.space {letter-spacing:5em}
.space1 {word-spacing:3em}
.line {line-height:50pt}
.nwrap {white-space:nowrap}
.talign {text-align:center}
.jalign {text-align:justify}
.valign {vertical-align:bottom}
.tdeco {text-decoration:underline overline;font-size:50;background-color:yellow}
</style>
</head>
<body>
<h1>글꼴에 대한 지정</h1>
<p class="fontAttr">글꼴, 글자 스타일, 굵기, 크기, 글자색 등 지정</p>
<h1> 문장과 문단 제어 </h1>
<p class="space">글자와 글자 사이의 간격</p>
<p class="space1">단어와 단어 사이의 간격</p>
<p class="line">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다</p>
<table border=1 width=300 bordercolor=blue>
<tr>
<td>이 문장은 nowrap을 테스트하는 문장입니다</td>
</tr>
</table>
<table border=1 width=300 bordercolor=blue>
<tr>
<td class="nwrap">이 문장은 nowrap을 테스트하는 문장입니다</td>
</tr>
</table>
<table border=1 width=600 bordercolor=blue>
<tr>
<td class="talign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다.
루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<table border=1 width=600 bordercolor=blue>
<td class="jalign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<table border=1 width=600 height=300 bordercolor=blue>
<td class="valign">루마니아 국회의사당 7미터 난간에서 한 남성이 국회의원들을 향해 몸을 날리는 충격적인 사건이 발생했다. 루마니아 현지 언론과 영국 데일리 메일의 보도에 의하면 문제의 남성은 두 자녀를 둔 국영TV 엔지니어 애드리언 소바루(Adrian Sobaru). 소바루는 "너희들이 비수를 찔렀다. 너희들은 우리 아이들의 미래를 죽이고 있다. 자유"라고 적희 흰색 상의를 입고는 7미터 높이의 2층난간에 섰다. 그는 " 정부가 내 아이의 빵을 빼앗아 갔다" 고 외치고는 난간에서 몸을 던졌다.</td>
</tr>
</table>
<p>
<span class="tdeco">글자에 장식</span>
</body>
</html>
● 문장과 문단을 제어
자간(letter-spacing) : 문자와 문자사이의 간격지정
단어간격(word-spacing) : 단어와 단어사이의 간격지정
줄간격(line-height) : 줄사이의 간격지정
공백과 줄바꿈(white-space)
- normal : 여러개의 공백이 하나의 공백
- nowrap : <br>이 없으면 줄을 바꾸지 않는다
좌우정렬(text-align)
- left,center,right,justify(좌우정렬)
세로방향정렬(vertical-align)
- top : 위에 정렬
- middle : 가운데에 정렬
- bottom : 아래에 정렬
- baseline : 부모요소의 베이스 라인에 정렬[기본값]
- text-top : 부모요소의 폰트 위에 정렬
- text-bottom : 부모요소의 폰트 아래에 정렬
- super : 위 첨자의 위치에 베이스 라인을 정렬
- sub : 아래첨자의 위치에 베이스 라인을 정렬
- % : 부모요소의 베이스라인을 0으로한 높이의 비율
글자에 선 긋기(text-decoration)
- underline : 텍스트에 밑줄을 긋는다
- none : 밑줄을 긋지 않는다
- overline : 텍스트위에 선을 긋는다
- line-throuth : 텍스트 가운데 선을 긋는다
● 배경 색상 배경 그림 제어
배경색상(background-color) : 색
배경이미지(background-image) : 이미지파일
배경그림 반복여부(background-repeat)
- repeat : 배경그림이 가로세로 반복
- no-repeat : 배경그림이 반복되지 않고 한번만 나타난다
- repeat-x : 배경그림이 가로 방향으로만 반복
- repeat-y : 배경그림이 세로 방향으로만 반복
배경그림위치(background-position)
- 가로방향 : left,center,right,%
- 세로방향 : top, center,bottom,%
배경그림스크롤(background-attachment)
- scroll : 문서의 내용이 스크롤 되면 배경그림도 같이 스크롤 된다
- fixed : 문서의 내용이 스크롤 되더라도 배경그림은 스크롤 되지 않는다
● 목록 속성 설정
목록 기호나 번호 형식(list-style-type)
- none : 지정하지 않음
- disc : 검은 원형
- circle : 원형
- square : 사각형
- upper-alpha : 대문자 알파벳
- lower-alpha : 소문자 알파벳
- decimal : 1부터 시작하는 10진수
- upper-roman : 대문자 로마자
- lower-roman : 소문자 로마자
그림으로 목록기호사용(list-style-image)
- url : 이미지파일
목록의 들여쓰기(list- style-position)
- inside : 들여쓰기
- outside : 내어쓰기