학습목표 박스의 레이어 표현에 대해 학습합니다. 텍스트의 표현에 대해 학습합니다. 폰트의 표현에 대해 학습합니다. 학습목차 레이어의 표현 개체의 스택 레벨 <Div>, <Span> 태그 텍스트의 정렬, 형태, 간격 조절 폰트의 표현, 글꼴, 스타일, 크기
레이어의 표현 레이어의 표현 박스들의 깊이 지정 여러 개의 요소들이 겹쳐젔을 때 어느 것이 위에 표시되지는 가의 순서 레이어 서로 겹쳐져 있는 여러 장의 종이 혹은 셀로판지와 같은 개념 스택 레벨 여러 개의 개체가 쌓여있는 구조 및 순서 Z-index 스택 레벨을 구체화한 것
Z-index Property Z-index Property 개체의 깊이 조절 값 auto | <정수> | inherit 초기값 auto 적용 절대/상대 위치지정 박스 상속성 상속되지 않음 백분율 사용할 수 없음 미디어 시각 미디어 <style type="text/css"> .layer1 {position:absolute; background:yellow; border:solid} .layer2 {position:absolute; background:gray; top:50;left:50; border:double} .layer3 {position:absolute; background:white; top:80;left:100; border:solid} </style> </HEAD> <BODY> <h2 class=layer1>첫번째 나타난 블록<br>그러나 z-index값은 하위</h2> <h2 class=layer2>두번째 나타난 블록<br>그러나 z-index값은 중간</h2> <h2 class=layer3>세번째 나타난 블록<br>그러나 z-index값은 상위</h2> 12_1.html
Z-index Property 12_2.html 12_3.html <style type="text/css"> .layer1 {position:absolute; background:yellow; z-index:1; border:solid} .layer2 {position:absolute; background:gray; top:50;left:50;z-ndex:2;border:double} .layer3 {position:absolute; background:white; top:80;left:100;z-index:3;border:solid} </style> </HEAD> <BODY> <h2 class=layer1>첫번째 나타난 블록<br>그러나 z-index값은 하위</h2> <h2 class=layer2>두번째 나타난 블록<br>그러나 z-index값은 중간</h2> <h2 class=layer3>세번째 나타난 블록<br>그러나 z-index값은 상위</h2> 12_2.html <style type="text/css"> .layer1 {position:absolute; background:yellow; z-index:3; border:solid} .layer2 {position:absolute; background:gray; top:50;left:50;z-ndex:2;border:double} .layer3 {position:absolute; background:white; top:80;left:100;z-index:1;border:solid} </style> </HEAD> <BODY> <h2 class=layer1>첫번째 나타난 블록<br>그러나 z-index값은 하위</h2> <h2 class=layer2>두번째 나타난 블록<br>그러나 z-index값은 중간</h2> <h2 class=layer3>세번째 나타난 블록<br>그러나 z-index값은 상위</h2> 12_3.html
Visibility Property 요소의 보이기/감추기 생성된 박스들은 필요에 따라 보이게 할 수도, 나타나지 않게 할 수도 있음 Visibility Property 값 visible | hidden | collapse | inherit 초기값 inherit 적용 모든 요소 상속성 상속되지 않음 백분율 사용할 수 없음 미디어 시각 미디어 <style type="text/css"> .layer1 {position:absolute; background:yellow; z-index:3; border:solid} .layer2 {position:absolute; visibility:hidden;background:gray; top:50;left:50; z-ndex:2;border:double} .layer3 {position:absolute; background:white; top:80;left:100; z-index:1;border:solid} </style> </HEAD> <BODY> <h2 class=layer1>첫번째 나타난 블록<br>그러나 z-index값은 하위</h2> <h2 class=layer2>두번째 나타난 블록<br>그러나 z-index값은 중간</h2> <h2 class=layer3>세번째 나타난 블록<br>그러나 z-index값은 상위</h2> 12-4.html
DIV와 SPAN DIV와 SPAN 태그는 레이어를 생성시키는 전형적인 태그 DIV 태그는 블록 레벨 요소 레이어 생성방법 레이어들 간의 구분을 위해 ID 속성을 이용하여 이름을 지정 Position 프로퍼티를 이용하여 절대위치 혹은 상대위치 인지를 결정 Left와 top 프로퍼티를 이용하여 레이어의 위치 지정 Width 와 height 프로퍼티를 이용하여 레이어의 크기 지정 <DIV ID="mylayer" STYLE="position:absolute;left:50px;top:100px;width:100px;height:50px;"> 레이어의 위치를 지정하여 생성한다. </DIV> 12-5.html
코딩 시간 단축 ① 익스플로러와 넷스케이프에서는 모두 길이에 대한 기본값을 pixel로 사용 따라서 좌표나 크기 나타내는 수치 뒤에 ‘px’을 붙일 필요가 없음. ② visibility 속성에 대한 기본값은 ‘visible’ 따라서 감추고자 하는 레이어가 아닌 이상은 따로 정의할 필요가 없음. ③ DIV 태그의 height는 선택사항 따라서 특정한 width 값을 준 상태에서 텍스트를 입력하게 되면 그 레이어 의 height 값은 자동으로 지정됨. <DIV ID="mylayer" STYLE="position:absolute;left:50px;top:100px;width:100px;height:50px;"> 레이어의 위치를 지정하여 생성한다. </DIV> <DIV ID=“mylayer” STYLE=“position:absolute; left:50; top:100; width:100;”> 레이어의 위치를 지정하여 생성한다. </DIV>
레이어의 border 레이어에 border 관련 프로퍼티 추가 Z-index를 이용한 중첩된 레이어 생성(투명) <DIV id="page1" style="position:absolute; top:100; left:100; height:100; width:100; border-width:3; border-style:solid; background:yellow"> 레이어에 들어가는 내용 </DIV> 12-6.html Z-index를 이용한 중첩된 레이어 생성(투명) Background 프로퍼티가 사용되지 않을 경우 기본값은 transparent <DIV id="layer_1" style="position:absolute; top:50; left:50; height:100; width:100; border-width:1; border-style:solid; z-index:1;"> 레이어에 들어가는 내용 1 </DIV> <DIV id="layer_2" style="position:absolute;top:80; left:80; border-width:1; border-style:solid;z-index:2;"> 레이어에 들어가는 내용 2 12-7.html – no ba
중첩된 레이어 Z-index를 이용한 중첩된 레이어 생성 12-8.html <DIV id="layer_1" style="position:absolute; top:50; left:50; height:100; width:100; border-width:1; border-style:solid; z-index:1; background-color:yellow;"> 레이어에 들어가는 내용 1 </DIV> <DIV id="layer_2" style="position:absolute; top:60; left:60; height:100; width:100; border-width:1; border-style:solid; z-index:2; background-color:#EEEEEE;"> 레이어에 들어가는 내용 2 <DIV id="layer_3" style="position:absolute; top:100; left:100; height:100; width:100; border-width:1; border-style:solid; z-index:3; background-color:rgb(200,200,200);"> 레이어에 들어가는 내용 3 12-8.html
레이어의 위치 레이어의 절대 위치 지정 레이어의 절대 위치 지정 12-9.html 12-10.html <BODY> 강릉원주대학교 <DIV id="layer_1" style="position:absolute; top:30; left:30; height:30; width:100; border-width:1;border-style:solid;"> 레이어에 들어가는 내용 2 </DIV> 12-9.html 레이어의 절대 위치 지정 <BODY> 강릉원주대학교 <DIV id="layer_1" style="position:relative; top:30; left:30; height:30; width:100; border-width:1;border-style:solid;"> 레이어에 들어가는 내용 2 </DIV> 12-10.html
텍스트 들여쓰기 텍스트의 들여쓰기, 내어쓰기 텍스트의 첫번째 라인을 들여쓰기나 내어쓰기로 설정 Text-indent Property 값 <길이> | <백분율> | inherit 초기값 0 적용 블록 레벨 요소 상속성 상속됨 백분율 포함 블록의 너비에서 참조 미디어 시각 미디어 길이 : 텍스트의 들여 쓰기와 내어 쓰기를 고정된 길이로 지정 백분율 : 포함 블록의 너비를 기준으로 지정 내어 쓰기는 text-indent 프로퍼티의 값이 음수로 지정 <BODY> <p style="text-indent:2em"> 들여쓰기를 한 예입니다.</p> </BODY> 12-11.html
텍스트 정렬 텍스트의 정렬 text-align 프로퍼티 left, right, center, justify 값 left | right | center | justify | <문자열> | inherit 초기값 유저 에이전트의 의존 적용 블록 레벨 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 left, right, center, justify 각각 왼쪽, 오른쪽, 가운데, 좌우 정렬 <p style="width:200;text-align:justify;border:solid 2pt"> 좌우정렬의 한 예입니다. 박스 안에서 어떻게 정렬이 되나요 좌우가 가지런히 정렬이 되었지요 </p> 12-12.html 12-13.html text-align:center
텍스트 형태 텍스트의 형태 text-decoration 프로퍼티 값 none | [ underline || overline || line-through || blink ] | inherit 초기값 유저 에이전트의 의존 적용 블록 레벨 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <h3 style="text-decoration:underline">Underline</h3> <h3 style="text-decoration:line-through">line-through</h3> <h3 style="text-decoration:overline">Overline</h3> <h3 style="text-decoration:underline overline line-through">혼합 라인 12-14.html
텍스트 색상 텍스트의 색상 Color 프로퍼티 <h3 style="color:red">RED TEXT</h3> <h3 style="color:#00ff00">GREEN TEXT</h3> <h3 style="color:RGB(0,0,255)">BLUE TEXT</h3> 12-15.html
글자 간격 조절 글자간격 조절하기 letter-spacing 프로퍼티 값 normal | <길이> | inherit 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <style type="text/css"> H1.space1 { letter-spacing: -0.5em} H1.space2 { letter-spacing: 0.5em} H1.space3 { letter-spacing: 1em} </style> </head> <BODY> <h1>정상 글자 간격</h1> <h1 class=space1>-0.5em 글자 간격</h1> <h1 class=space2>0.5em 글자 간격</h1> <h1 class=space3>1em 글자 간격</h1> 12-16.html
단어 간격 조절 단어간격 조절하기 word-spacing 프로퍼티 값 normal | <길이> | inherit 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <style type="text/css"> H1.space1 { word-spacing: -0.5em} H1.space2 { word-spacing: 0.5em} H1.space3 { word-spacing: 1em} </style> </head> <BODY> <h1>정상 단어 간격</h1> <h1 class=space1>-0.5em 단어 간격</h1> <h1 class=space2>0.5em 단어 간격</h1> <h1 class=space3>1em 단어 간격</h1> 12-17.html
대소문자 전환 text-transform 프로퍼티 값 capitalize | uppercase | lowercase | none | inherit 초기값 none 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <style type="text/css"> .cap { text-transform:capitalize} .up { text-transform:uppercase} .low { text-transform:lowercase} </style> </head> <BODY> <h4>transformation is language dependent</h4> <h4 class=cap>transformation is language dependent</h4> <h4 class=up>transformation is language dependent</h4> <h4 class=low>transformation is language dependent</h4> 12-18.html
폰트의 규격 스타일시트 제작자의 폰트 사용자 시스템 폰트 유저 에이전트 지정 폰트 사용자 시스템 글꼴(브라우저의 기본 글꼴)은 어디에? Internet Explorer 브라우저의 [도구] → [인터넷 옵션] →[일반] → 글꼴 버튼
폰트의 표현 폰트의 규격 : 6가지를 고려하여 지정 Font Family(폰트 가족) Font Style(폰트 스타일) Font Variant(폰트 변형) Font Weight(폰트 두께) Font Strectch(폰트 너비) Font Size(폰트 크기)
font-family 프로퍼티 font-family 프로퍼티 값 [[ <폰트 이름> | <표준 폰트 이름> ],]* [ <폰트 이름> | <표준 폰트 이름> ] | inherit 초기값 유저 에이전트에 의존 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <BODY> <h1 style="font-family:'이상한 글꼴', '궁서체'"> 궁서체로 표시</h1></BODY> </HTML> 12-19.html <BODY> <h1 style="font-family:'이상한 글꼴'"> 브라우저의 기본 글꼴</h1> </BODY> 12-20.html
font-style 프로퍼티 font-style 프로퍼티 값 normal | italic | oblique | inherit 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <BODY> <h4 style="font-style:normal">normal 글꼴</h4> <h4 style="font-style:oblique">oblique 글꼴 </h4> <h4 style="font-style:italic">italic 글꼴</h4></HTML> 12-21.html
font-variant 프로퍼티 font-variant 프로퍼티 Small-caps 소문자를 대문자로 전환하면서 약간 작은 형태 대문자와 한글의 경우 원래 문자보다 약간 작은 형태 값 normal | small-caps | inherit 초기값 normal 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 <BODY> <h2 style="font-VARIANT:normal"> VARIANT(normal)정상</h2> <h2 style="font-variant:small-caps"> VARIANT(small-caps)스몰캡</h2> </BODY> 12-22.html
font-weight 프로퍼티 font-weight 프로퍼티 폰트의 두께를 지정하는 데 사용 Normal : 400과 동일 Bold : 700과 동일 Bolder : 상속된 값보다 두껍게 Lighter : 상속된 값보다 얇게 100 ~ 500 : 동일 두께 600 ~ 900 : 동일 두께 값 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit 초기값 normal 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어
font-weight 프로퍼티 <div style="font-weight: 100">100 Weight</div> <div style="font-weight: 300">300 Weight</div> <div style="font-weight: 500">500 Weight</div> <div style="font-weight: 600">600 Weight</div> <div style="font-weight: 900">900 Weight</div> <div style="font-weight: bold">bold Weight</div> <div style="font-weight: bolder">bolder Weight</div> <div style="font-weight: lighter">bolder lighter</div> 12-23.html
font-size 프로퍼티 font-size 프로퍼티 값 <절대적인 키워드> | <상대적인 키워드> | <길이> | <백분율> | inherit 초기값 medium 적용 모든 요소 상속성 상속됨(계산된 값) 백분율 부모 요소의 폰트 크기에 연관 미디어 시각 미디어 절대적인 키워드 xx-small, x-small, small, medium, large, x-large, xx-large 각 크기간에는 1.2배 medium이 12pt라면 large는 14.4pt가 되고 small은 10p 상대적인 키워드 부모 요소의 폰트 크기에 연관되어 계산 larger, smaller 길이 절대적인 폰트의 크기를 지정(400까지 지정)
font-size 프로퍼티 <h1 style="font-size:xx-small">Font Size xx-Small</h2> <h1 style="font-size:x-small">Font Size x-Small</h2> <h1 style="font-size:small">Font Size Small</h2> <h2 style="font-size:medium">Font Size Medium</h2> <h2 style="font-size:large">Font Size Large</h2> <h2 style="font-size:x-large">Font Size x-large</h2> <h2 style="font-size:xx-large">Font Size xx-large</h2> 12-24.html
font-size 프로퍼티 <BODY> <h1>Normal Size <p style="font-size:larger">Font Size Larger</p> <p style="font-size:smaller">Font Size Larger</p> </BODY> 12-25.html
font-size 프로퍼티 <b style="font-size:10">A(10)<b style="font-size:12">A(12)<b style="font-size:16">A(16) <b style="font-size:24">A(24)<b style="font-size:48">A(48)<br> <b style="font-size:72">A(72)<br> <b style="font-size:144">A(144)<br> 12-26.html 600 size
Font shorthand font 프로퍼티 6가지의 프로퍼티fmf 한꺼번에 지정 값 [[ <font-style> | <font-variant> | <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon |menu | message-box | small-caption | status-bar | inherit 초기값 normal 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 6가지의 프로퍼티fmf 한꺼번에 지정 font-style, font-variant, font-weight, font-size, line-height, font-family
Font shorthand 사용예 P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } P { font: oblique 12pt "Helvetica Nue", serif;} 12-27.html
폰트 종합 예제 12-28.html <style type="text/css"> div { position:absolute; font-size:1.5em; font-weight:bold;} .panel11 { top:0; left:0; color:black;} .panel12 { top:+3; left:+3; color:gray;} .panel21 { top:-1; left:-1; color:dff; font-family:'궁서체'} .panel22 { top:0; left:0; color:bce; font-family:'궁서체'} .panel23 { top:+1; left:+1; color:68a; font-family:'궁서체'} .panel24 { top:+2; left:+2; color:148; font-family:'궁서체'} .panel31 { top:-2; left:-2; color:cef; font-family:'휴먼엽서체'} .panel32 { top:0; left:0; color:48f; font-family:'휴먼엽서체'} .panel33 { top:+2; left:+2; color:048; font-family:'휴먼엽서체'} .panel41 { top:-2; left:-2; color:df4; font-family:'comic sans ms'} .panel42 { top:0; left:0; color:080; font-family:'comic sans ms'} .panel43 { top:+2; left:+2; color:df4; font-family:'comic sans ms'} </style> <div> <div class="panel12">그림자 효과</div> <div class="panel11">그림자 효과</div> </div><br><br><br> <div class="panel24">궁서체 입체효과</div> <div class="panel23">궁서체 입체효과</div> <div class="panel21">궁서체 입체효과</div> <div class="panel22">궁서체 입체효과</div> <div class="panel31">휴먼엽서체</div> <div class="panel32">휴먼엽서체</div> <div class="panel33">휴먼엽서체</div> <div class="panel41">네온 효과</div> <div class="panel43">네온 효과</div> <div class="panel42">네온 효과</div> </div> 12-28.html
글꼴 저장 위치 내 컴퓨터에 설치되어 있는 글꼴 위치(Windows XP) c:\windows\fonts\