학습목표 학습목차 홈페이지에 색상을 표현하는 방법 이해할 수 있습니다. 문자의 크기, 글꼴, 색상 등을 설정하는 방법을 학습합니다. 문단을 조절하는 태그 기능의 실습이 가능합니다. 항목(리스트)를 생성하는 태그 기능의 실습이 가능합니다. 학습목차 RGB의 이해 특수문자 표시하기 글자 관련 태그 : <h1>, <font>, <b>, <i>, <u>, <sup>, <sub> 문단 관련 태그 : <p>, <br>, <hr> 리스트 관련 태그 : <ul>, <ol>, <li> 용어 정의 태그 : <dl>, <dt>, <dd>
색상값 프린터 색상 : 잉크, 물감 색의 3원색 : 자홍(Magenta), 청록(Cyan), 노랑(Yellow) CMYK 3원색을 동일한 양으로 섞으면 검정색 감산효과 모니터 색상 : 빛 빛의 3원색 : 빨강(Red), 녹색(Green), 파랑(Blue) RGB 3원색을 동일한 양으로 섞으면 흰색 가산효과 출전 : 색채용어사전 박연선, 2007
색상값 배경 색상, 글자 색상, 표 색상 등을 적절히 사용 1 bit color : black/white 대표적인 색상 16개 Gray Scale
색상값 8 bit color : 256 가지 색상 Web safe color: 216 가지 색상 모든 브라우저에서 표현 가능 http://blog.naver.com/killmins/70072668561
색상값 16 bit color : high color 65536 color 24 bit color : True Color R:G:B – 5:6:5(비트수) 24 bit color : True Color 24비트(16,777,216 색상)로 표현되는 10진수 혹은 16진수 값 R:G:B – 8:8:8(비트수) RGB 각 8비트(256단계)들의 조합 검은색의 경우 000000, 흰색의 경우 FFFFFF 예 : bgcolor=#ff0000(#은 16진수 표시문자) 10진수는 0∼255 숫자 범위 예 : bgcolor=RGB(255,0,0)과 같이 사용 32 bit color : True color R:G:B:투명도 – 8:8:8:8(비트수) 32비트(4,294,967,296 색상)
색상값 색상 영어 단어 white, black, yellow 등과 같은 영어 단어로 색상 표현 모든 색상에 해당되는 영어 단어는 제한적임 색상 단어를 통해 색상을 표현하는 데는 한계 대표적인 색상 단어 및 RGB 값 색상 색상 단어 RGB 값 흰색 white FFFFFF 노란색 yellow FFFF00 빨강색 red FF0000 자홍색 megenta FF00FF 녹색 green 00FF00 청녹색 cyan 00FFFF 파란색 blue 0000FF 검정색 black 000000 보라색 violet EE82EE 자주색 purple A020F0 베이지색 beige F5F5DC 핑크색 pink FFC0CB 하늘색 skyblue 87CEEB 회색 gray BEBEBE 갈색 brown A52A2A 주홍색 coral FF7F50 아이보리색 ivory FFFFF0 카키색 khaki F0E68C
색상값 사용 <HTML> <HEAD> </HEAD> <BODY bgcolor = yellow> </BODY> </HTML> <HTML> <HEAD> </HEAD> <BODY bgcolor=yellow text=red> 열린사이버대학교 </BODY> </HTML> <HTML> <HEAD> </HEAD> <BODY bgcolor=#FFFF00> </BODY> </HTML> <HTML> <HEAD> </HEAD> <BODY bgcolor=#FFFF00 text=rgb(255,0,0)> 열린사이버대학교 </BODY> </HTML> 02_1.html 02_2.html
특수문자 나타내기 – 키보드 문자 홈페이지에 <, >, " 등과 같이 HTML의 태그에 사용되는 문자 표현 가능 &키워드; 혹은 &#숫자; 특수문자 표현 예 나타낼 문자 키워드 방식 숫자 방식 < < < > > > & & & " " " 공백    
특수문자 나타내기 – 그래픽 문자 키보드로는 표현할 수 없는 ♣, ♬ 등과 같은 그래픽 기호 Â, Ù 등과 같은 외국문자 Ψ, √ 등과 같은 수학기호 그래픽 문자 표현 예 나타낼 문자 키워드 방식 숫자 방식 ♣ ♥ ♠ ♣ ♥ &spades α β γ α β γ ∑ ∫ ∞ ∑ ∫ ∞ ‰ ￥ ® ‰ ¥ ® ‰ ¥ ®
특수문자/기호의 다른 표현 방법 한글 자음 키보드와 한자 키보드를 이용하는 방법 한글 입력상태에서 아래의 자음 키보드를 누르고 한자 키보드를 누르면 다음과 같은 윈도우가 화면 오른쪽 하단에 나타나고 원하는 특수문자/기호를 클릭하면 현재 작업하는 편집기에 놓이게 된다. 한글 자음 키보드에 할당표 그래픽 문자(일부) 종 류 기 호 ㄱ (문장부호) ！，．／：；？＾＿｀｜￣、。·‥…¨〃―∥＼∼´～ˇ˘˝˚˙¸˛¡¿ː ㄴ (괄 호) ″（）［］｛｝‘’“”〔〕〈〉《》「」『』【】 ㄷ (학술기호) ＋－＜＝＞±×÷≠≤≥∞∴♂♀∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∮∑∏ ㄹ (단 위) ＄％￦Ｆ′″℃Å￠￡￥¤℉‰㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎙㎚㎛㎜㎝㎞㎟㎠㎡㎢㏊㎍㎎㎏㏏㎈㎉㏈㎧㎨㎰㎱㎲㎳ ㎴㎵㎶㎷㎸㎹㎀㎁㎂㎃㎄㎺㎻㎼㎽㎾㎿㎐㎑㎒㎓㎔Ω㏀㏁㎊㎋㎌㏖㏅㎭㎮㎯㏛㎩㎪㎫㎬㏝㏐㏓㏃㏉㏜㏆ ㅁ (일반도형) ＃＆＊§※☆★○●◎◇◆□■△▲▽▼→←↑↓↔〓◁◀▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩ ♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜№㏇™㏂㏘℡ ㅂ (배각괘선) ─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢┦ ┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊
특수문자/기호의 사용 02_26.html <HTML> <HEAD> <TITLE> ♡♡♡♡♡ </TITLE> </HEAD> <BODY text=red> <HTML> ♥ </BODY> </HTML> 02_26.html
글자크기 : <h#> 02_3.html 문단의 제목을 나타낼 때 주로 사용하며 문단의 제목을 나타낼 때 주로 사용하며 가장 큰 h1에서 가장 작은 h6까지 6단계가 존재 <font size=숫자>…</font> 본문의 글자 크기를 바꾸기 위해 사용되며 7이 가장 크고 1이 가장 작다.(font 태그의 size 속성) <H1>H1크기</H1> <H2>H2크기</H2> <H3>H3크기</H3> <H4>H4크기</H4> <H5>H5크기</H5> <H6>HT크기</H6> <H1>H1크기</H1> <H2>H2크기</H2> <H3>H3크기</H3> <H4>H4크기</H4> <H5>H5크기</H5> <H6>HT크기</H6> 02_3.html
글자크기 : <font size=숫자> <font size=1>대</font> <font size=2>한</font> <font size=3>민</font> <font size=4>국</font> <font size=5>의</font> <font size=6>미</font> <font size=7>래</font> 02_4.html <h#> 태그는 문단의 제목을 나타내는 태그이므로 </h1>으로 끝을 맺으면 자동으로 줄바꿈이 이루어지고 <font size> 태그는 본문의 글자 크기를 조절하는 태그이므로 </font>로 끝을 맺더라도 줄바꿈이 이루어지지 않음
글자 모양 태그 : <b>, <i>, <u> 등 <B>…</B> 굵은체(Bold) <I>…</I> 이텔릭체(Italic) <U>…</U> 밑줄체(Underline) <S>…</S> 중간밑줄 <STRIKE>…</STRIKE> 중심선 <TT>…</TT> 텔레타이프(TeleType) <EM>…</EM> 강조체(EMphasis) <STRONG>…</STRONG> 강한 강조체 <SUP>…</SUP> 윗첨자(SUPscribe) <SUB>…</SUB> 아래첨자(SUBscribe) <DFN>…</DFN> 함수정의체 <CITE>…</CITE> 인용체
글자 모양 태그 : <b>, <i>, <u> 등 <B>B태그</B><I>I태그</I> <U>U태그</U><S>S태그</S> <STRIKE>STRIKE태그</STRIKE> <TT>TT태그</TT> <EM>EM태그</EM> <STRONG>STRONG태그</STRONG> <SUP>SUP태그</SUP> <SUB>SUB태그</SUB> <DFN>DFN태그</DFN> <CITE>CITE태그</CITE> 02_5.html x<SUP>2</SUP> + y<SUP>2</SUP> = z<SUP>2</SUP> C<SUB>2</SUB>H<SUB>4</SUB>O<SUB>6</SUB> 02_6.html
글자 모양 태그 : <b>, <i>, <u> 등 - 글자모양 태그들은 서로 혼용해서 사용 가능 <U><I> U태그와 I태그의 혼합 </I></U> 02_7.html - 글자모양 태그들은 H 태그, FONT SIZE 태그와 혼용해서 사용 가능 <H1><U>H태그와 U태그의 혼합</U></H1> <FONT SIZE=6><I>FONT 태그와 I태그의 혼합</I></FONT> 02_8.html
글자 색상 태그 : <font color=“색상값”> <font color="색상값">…</font> 글자 색상 변경 예 : 다른 글자들은 검은색이지만 민족중흥이라는 글자만 붉은색으로 지정 ※ 글자 색상 태그들은 글자 크기/모양 태그들과 혼용해서 사용 <body text=black> 우리는 <font color=red>민족중흥</font>의 역사적 사명을 띠고 </body> 02_9.html
글꼴 태그 : <font face=“글꼴이름”> <font face="fontname">…</font> face 속성의 fontname은 arial, lucida, courier, 궁서체 등을 사용 <h3> 보통 글꼴에서 <font face="궁서체">궁서체</font> 글꼴로 됨 </h3> 02_10.html <font face="Arial, Sans, Times Roman"> Font Select </font> 쉼표(,)를 통해 여러 종류의 후보 글꼴을 나열해 그 순서에 따라 우선 순위 지정 즉 방문자의 시스템 글꼴이 나열된 글꼴과 최초로 일치되는 글꼴로 출력됨 일치하는 글꼴이 없을 경우에는 기본 글꼴로 표시됨 글꼴 설정은 방문자의 브라우저의 글꼴 설정에 좌우됨
글꼴 태그 : <font face=“글꼴이름”> 브라우저의 기본 글꼴은 어디에? Internet Explorer 브라우저의 [도구] → [인터넷 옵션] →[일반] → 글꼴 버튼
H 태그와 font 태그의 정리 ※ h#태그와 font 태그는 body 태그 내에서 여러 번 등장할 수 있으며, 크기나 색상이 상충되는 경우에는 가장 최근에 설정한 것이 적용 ※ font 태그 정리 font 태그는 size, color, face 등의 속성을 가지고 있다. 속성들은 각각 쓰일 수 있고 나란히 함께 쓰일 수도 있음 <font size=6 color=red>…</font> <font color=blue face=arial>…</font>
문단조절 태그 : <p> 텍스트 편집기를 통해 HTML 파일을 작성하면서 나타나는 줄 바꿈은 웹 브라우저에선 전혀 의미가 없고, 단지 1칸으로만 이해 <h#>태그를 비롯한 몇몇 태그들은 </h#>하면서 자동으로 줄 바꿈이 이루어졌지만 이는 그 태그에 줄 바꿈 기능이 포함된 것임 문단 조절 태그들을 사용함으로써 강제적으로 브라우저에서 줄 바꿈을 수행 <p> 문단 나눔 태그 : Paragraph <p> 태그는 문단을 나누는 태그로서, 줄을 바꿈과 동시에 빈 줄 하나를 추가할 때 사용하며, 시작 태그만 쓰임.
문단조절 태그 : <p> 예 텍스트 편집기에서 <p> 태그를 사용함으로써 예 <h4> 우리는<p>민족중흥의<p>역사적<p> 사명을 띠고<p> 이 땅에 태어났다 </h4> 02_11.html 텍스트 편집기에서 <p> 태그를 사용함으로써 웹 브라우저에서 문단 바꿈이 이루어짐.
문단조절 태그 : <br> <br> 줄바꿈 태그 : BReak 예 우리는<br> 민족중흥의<br> 역사적<br> 사명을 띠고<br> 이 땅에 태어났다 02_12.html <p> 태그와는 달리 줄만 바뀌고 빈 줄 추가는 없다. <p> 태그와 <br> 태그의 차이 여러 개의 빈 줄을 삽입하고자 할 경우 <p>태그는 아무리 많이 사용해도 하나를 사용한 것과 동일하다. 그러나 <br> 태그는 사용한 (개수-1) 만큼 빈줄이 생기게 된다.
문단조절 태그 : <pre> <pre> 태그 : PREformat text 즉 두 개 이상의 빈칸이나 줄 바꿈은 웹 브라우저에 그대로 반영 예 <pre> 우리는 민족중흥의 역사적 사명을 띠고 이땅에 태어났다. </pre> 02_13.html
수평선 태그 : <hr> <hr> 수평선 태그 : HRizontal - 문단을 구분하기 위해 수평선을 삽입해 사용 - 속성 없이 쓰면 브라우저의 가로 크기에 맞추어 나타남 - 시작 태그만 사용되며 자동 줄 바꿈이 발생 - 속성 및 속성값 <hr size=숫자> 수평선의 두께를 지정. 숫자는 pixel 단위 <hr width=숫자|숫자%> 수평선의 길이를 지정. 숫자는 pixel, 백분율 <hr align=left|center|right> width 속성이 사용될 때 브라우저 내에서의 위치 지정. 사용하지 않으면 center <hr color=색상값> 수평선의 색상 지정.
수평선 태그 : <hr> <hr> <hr size=3> <hr width=200> <hr width=50% align=right> <hr size=10 width=200 align=center> <hr size=10 width=150 color=#ff0000 align=left> 02_14.html width 속성 값을 픽셀 값으로 지정하면 브라우저의 가로 길이와 상관없이 고정된 선의 길이를 유지하지만 백분율로 지정하면 브라우저 가로 길이에 대한 백분율로 자동 조정됨
항목(리스트) 생성 태그 리스트 생성 태그 : <ul>, <ol>, <li> 리스트(List) 생성 태그는 불릿(글머리표)이 생성되는 UL 태그와 숫자가 생성되는 OL 태그가 있으며 시작과 끝 태그로 구성 UL태그와 OL태그 내부에는 실제 항목을 표시하기 위해 LI 태그를 사용 UL(Unordered List) : 순서 없는 항목 <ul>…</ul> <h2> 순서없는 항목</h2> <ul> <li>대한민국 <li>멕시코 <li>벨기에 </ul> 02_15.html
항목(리스트) 생성 태그 글머리표 모양 변경 글머리표의 모양을 변경하기 위해서는 LI 태그의 속성인 TYPE을 이용한다. <ul type=disc|circle|square> <li type=disc|circle|square> ul 이하 항목의 글머리표 형태를 지정 해당항목의 글머리표 형태를 지정. ●(disck,기본값),○(circle), ■(square) 중 하나를 지정 LI 태그의 TYPE 속성을 사용하지 않으면 기본적으로 disc(●)값이 설정 모든 항목에 동일한 글머리표를 적용하기 위해서는 ul에 한번만 지정 <h2> 순서없는 항목</h2> <ul> <li type=disc>대한민국 <li type=circle>멕시코 <li type=square>벨기에 </ul> 02_16.html <h2> 순서없는 항목</h2> <ul type=circle> <li>대한민국 <li>멕시코 <li>벨기에 </ul> 02_17.html
순서있는 항목 OL(Ordered List) : 순서있는 항목 <ol>…</ol> 순서있는 항목은 그 항목의 왼쪽에 순서가 표시되는 것인데, 아라비아 숫자 이외에 로마숫자, 알파벳 문자로 순서를 매김 <h2> 순서있는 항목</h2> <ol> <li>대한민국 <li>멕시코 <li>벨기에 </ol> 02_18.html 숫자 형태 변경 숫자의 형태을 변경하기 위해서는 LI 태의 속성인 TYPE을 이용 <ol type=1|A|a|I|i> <li type=1|A|a|I|i> ol 이하 항목의 숫자형태를 지정 해당항목의 숫자형태를 지정(기본값은 1)
순서있는 항목 예제 <h2> 순서있는 항목</h2> <ol type=A> <li>대한민국 <li>멕시코 <li>벨기에 </ol> 02_19.html <h2> 순서있는 항목</h2> <ol> <li type=i>대한민국 <li >멕시코 <li>벨기에 </ol> 02_20.html
순서있는 항목 예제 숫자 모양은 혼합하여 사용할 수 있는데 그럴 경우 순서 매김은 숫자의 모양이 어떤 것이던지 처음 항목을 시작 순서로 하여 차례대로 설정됨 <h2> 순서있는 항목</h2> <ol> <li type=I>대한민국 <li type=i>멕시코 <li type=A>벨기에 <li type=a>네덜란드 <li type=1>프랑스 </ol> 02_21.html
혼합 항목 예제 항목 안에 다른 세부항목을 삽입할 수 있고 UL과 OL은 서로 겹쳐서 사용 가능 이럴 경우 자동적으로 들어쓰기가 발생 <ul type=square> <li>스포츠 <ol type=I> <li> 축구 <ul type=disc> <li>월드컵 <li>아시안컵 <li>유럽컵 </ul> <li>농구 <li>배구 </ol> <li>음악 <ul type=circle> <li>재즈 <li>클래식 <li>가요 </ul> </ul> 02_22.html
용어정의 태그 : <dl>…</dl> DL(Data List) : 용어 정의 태그 <dl>…</dl> - 어떤 용어를 정의하는데 사용 정의할 용어는 DT(Data Title)로, - 정의되는 내용은 DD(Data Description)로 표현 - 용어와 그 용어의 정의내용을 자동 줄 바꿈과 자동 들여쓰기 예 <dl> <dt>인터넷 <dd>전세계 컴퓨터 네트워크를… <dt>도메인 네임 <dd>IP대신 인간이 쉽게 알 수… <dt>홈페이지 <dd>자신만의 가상공간을 구성… </dl> 02_23.html
용어정의 태그 예제 예 : 정의할 용어에 다른 글자 모양 사용 예 : DL, UL, OL은 서로 겹쳐서 사용 가능 <dt><b>인터넷</b> <dd>전세계 컴퓨터 네트워크를… <dt><b>도메인 네임</b> <dd>IP대신 인간이 쉽게 알 수… <dt><b>홈페이지</b> <dd>자신만의 가상공간을 구성… </dl> 02_24.html 예 : DL, UL, OL은 서로 겹쳐서 사용 가능 <dl> <dt><strong>주변기기</strong> <dd> <ul> <li>하드디스크 <li>모니터 <li>프린터 <li>CD 드라이버 </ul> </dl> 02_25.html