HTML/XML 인터넷보충학습자료 - 1 - - Cascading Style Sheets - HTML의단점을보완하기위해사용하는것으로, 웹문서에스타일 ( 예 ; 글꼴, 색상, 여백등 ) 을추가하는간단한메카니즘 1 다양한기능의확장 : HTML의단순한기능을확장 ( 추가, 변경 ) 시킴 2 통일된문서양식제공 : 한번의속성정의로여러문서에동시에적용가능 3 독립적인문서제작환경가능 : 사용환경 ( 브라우저 ) 에상관없는문서제작지원 4 문서형식의다양화 : CSS를통해보다다양하고멋진 HTML 문서작성이가능 5 로딩시간단축 : 통일된문서양식을통해처리할데이터양이감소 - 스타일정의형식
HTML/XML 인터넷보충학습자료 - 2-1 임베디드방식 : <HEAD> 태그안에 <STYLE> 태그를사용하여정의하는것으로, 설정한스타일은하나의페이지에서만적용. 따라서 HTML 문서마다다른스타일을적용할때편리 2 링크방식 : HTML 문서와는별도로스타일만설정한 CSS파일을만들어사용. *.css파일을따로만들어야하며 <HEAD> 태그내에 HREF속을이용하여 CSS파일을링크시킨다. TYPE속성을사용하여스타일시트종류를나타낼수도있다. 하나의 CSS 파일로여러 HTML 문서에적용할수있으므로, HTML 문서의수정없이하나의 CSS 문서수정으로스타일변경이가능
HTML/XML 인터넷보충학습자료 - 3 - 스타일시트를정의하는것은 CSS 이외에도여러가지가있다. 하지만본교재에서는 CSS만을다루므로 REL 속성의값은 stylesheet, TYPE 속성의값은 text/css 로지정한다. 3 인라인방식 : 인라인방식은원하는각태그에직접스타일을적용하는방법이다. 임베디드방식이페이지전체에적용된다고하면인라인방식은하나의태그안에서만적용된다. - 임베디드방법, 링크방법, 인라인방법을동시에사용할경우먼저적용되는우선순
HTML/XML 인터넷보충학습자료 - 4 - 위가있다. 인라인방법이우선순위가가장높고, 그다음은임베디드방식, 링크방법이가장낮게적용된다. - 클래스는하나의태그로여러가지속성을써야할경우사용한다. 즉하나의태그에대해서상황에따라다른여러가지속성을적용하는경우에유용 - 스타일정의 1 : - 스타일적용 :
HTML/XML 인터넷보충학습자료 - 5 - - 스타일정의 2: - <H1>, <P>, <FONT> 가모두똑같은스타일을적용할경우앞에태그는생략하고 '.' 으로시작하도록정의하여사용할수있다. - 클래스속성과같은스타일적용을아이디속성을사용하여정의할수있다. - 아이디속성을사용하는방법은전체적으로클래스속성을사용할때와비슷하며, 다른점은. 대신에 # 를사용하여정의한다. - 본문에서스타일적용하기위해서는 CLASS 속성대신에 ID 속성의값을입력하여사용한다.
HTML/XML 인터넷보충학습자료 - 6 - - 클래스는여러개를하나의페이지에사용할수있지만, 아이디는하나의페이지에한번만사용할수있다. - 글자를지정하는 CSS 속성 값 font-family : 글자체 font-size : 크기 font-weight : 크기 font-style : 스타일 font-variant : 키워드 설명글자체지정글자크기지정글자굵기지정글자스타일지정작은대문자로변환 - font-family - HTML의 <FONT> 태그의 face 속성과같은역할을한다. - 속성의값으로는구체적인글자체의이름을지정하며만약여러개의글자체를지정하고자할때에는, 로구분하여글자체를열거한다. - 여러개의글자체를지정해두면만약사용자시스템환경에해당글자체가없을경우다음글자체가자동으로적용된다. - 명조체, 굴림체, 궁서체 등구체적인글자체이외에다음값들을사용하여폰트의종류를값으로지정할수있다.
HTML/XML 인터넷보충학습자료 - 7 - 값 serif sans-serif cursive fantasy monospace 설명명조계열글자체고딕계열글자체필기체장식이되어있는글자체일정한공간으로되어있는글자체 - font-size - <FONT> 태그의 SIZE 속성과같은기능이다. 단 <SIZE> 의경우글자크기값이 1~7 까지만지정할수있는한계가있지만, font-size를사용하면훨씬더세밀한크기조정및크기조정도제한없이적용할수있다. - 기본값은픽셀단위로지정. 다른단위지정도가능 - 퍼센트 (%) 는브라우저창의크기에대비한비율로지정할수있다. - font-size 속성의값 값 xx-small x-small small medium large x-large xx-large smaller larger 설명대단히작은글자크기작은글자크기조금작은글자크기기본값 (12pt) 조금큰글자크기큰글자크기대단히큰글자크기상위글자크기에서 1단계큰글자크기상위글자크기에서 1단계작은글자크기
HTML/XML 인터넷보충학습자료 - 8 - - font-weight - HTML 태그의 <B> 태그와같이글자의굵기를지정할수있다. - 글자굵기의기본값은 400이고, 굵기의값은 100~900으로지정할수있다. 단, 굵기의표현은브라우저마다다르며, 값에따라굵기가변하지않는경우도있다. - font-weight 속성의값값설명 normal 기본값 bold 굵은글자굵기 (700) bolder 상위요소보다 1단계굵은글자굵기 lighter 상위요소보다 1단계작은글자굵기
HTML/XML 인터넷보충학습자료 - 9-1 font-style - HTML의 <I> 태그와같이글자의이탤릭체효과를내는스타일속성이다. - font-style 속성의값 값 italic oblique no 이탤릭체이탤릭체기본값 설명 - italic 값과 oblique 값의결과차이점은엄밀히말하면다르지만일반적인브라우저에서는이를구별하지않는다. 2 font-variant - 소문자를작은크기의대문자로변환시키는속성이다. - font-variant 속성의값 값 small-caps normal 설명작은대문자로변환기본값 -글자의글자체, 굵기, 크기, 스타일등을한꺼번에지정하고자할때는간단하게 font 속성을사용하여값만지정해서사용할수도있다. - 작성순서 : font-weight 값 font-style 값 font-variant 값 font-size 값 /line-height 값 font-family 값순서로표현하며, font-weight의값과 font-style 값, font-variant 값은서로순서를바꿔도상관없다. - 행의높이를지정하는 line-height 값은 font-size 값뒤에 / 를붙여입력한다.
HTML/XML 인터넷보충학습자료 - 10 - - font-size 값과 font-family 값은반드시넣어야한다. -예 - 문장지정하기는글자의간격, 정렬에대한스타일속성에관한것이다. - 문장을지정하는관련속성 값 letter-spacing : 수치 word-spacing : 수치 vertical-align : 수치 text-align : 수치 text-decoration : 키워드 text-transform : 키워드 설명글자간격지정단어간격지정수직정렬지정수평정렬지정글자장식지정대소문자지정 - HTML로는글자간간격을지정할수없기때문에 CSS를사용하여지정한다. 1 자간 : 글자와글자사이의간격. letter-spacing 속성사용. 마이너스값사용시글자끼리겹쳐보이게됨.
HTML/XML 인터넷보충학습자료 - 11-2 단어간격 : 단어와단어사이의간격. word-spacing 속성사용. 1 수평정렬 : HTML의 <align> 과같은기능. text-align 속성사용. - text-align 속성의값 속성 left right center justify 설명왼쪽정렬오른쪽정렬가운데정렬균등하게정렬 2 수직정렬 : vertical-align 속성사용. - HTML에서 <SUP> 태그, <SUB> 태그, ALIGN 속성등의기능에해당된다. - vertical-align 속성의값
HTML/XML 인터넷보충학습자료 - 12 - 값 baseline super sub top middle bottom 설명기본값위첨자로정렬아래첨자로정렬위쪽으로정렬가운데로정렬아래쪽으로정렬 - <SPAN> 태그 : 문장단위로텍스트영역을지정하는것, 그자체로는아무역할도하지않고문장의특정구역에 CSS 스타일을지정할때사용. 웹페이지중에서어떤태그도달려있지않은곳에뭔가를지정하기위해서사용 - HTML에서 <U> 태그, <STRIKE> 태그, <S> 태그등으로표현했던글자에밑줄이나취소선등을넣는기능이다. - text-decoration 속성사용. - text-decoration 속성의값
HTML/XML 인터넷보충학습자료 - 13 - 값 overline underline line-through blink none 설명글자에윗줄을그음글자에밑줄을그음글자가운데에선을그음글자를깜박이게함기본값 - 영문대소문자를소문자로, 소문자를대문자로변환, 또는단어의첫번째글자를대문자로자동으로지정하기위한속성 - text-transform 속성사용 - text-transform 속성의값 값 capitalize uppercase lowercase none 설명단어의첫번째글자를대문자로변환문자전체를대문자로변환문자전체를소문자로변환기본값 - 문단의첫글자를한칸띄워주는기능이다. - HTML에서는  를사용하여수동으로빈칸띄워줘야하지만, CSS에서는
HTML/XML 인터넷보충학습자료 - 14 - text-indent 속성을사용하여자동으로첫글자를띄워줄수있다. - - 줄과줄사이의간격을지정할수있는속성이다. - line-height 속성사용. - 높이는수치단위및퍼센트 (%) 로나타낼수있다. 단위가없이수치만지정하면글자크기의배수로간격지정된다.
HTML/XML 인터넷보충학습자료 - 15 - 연습문제 1. CSS의장점에대하여설명하시오. 다양한기능의확장 HTML은누구나쉽게익힐수있을정도로단순한기능을제공한다. 이에 CSS를사용하면다양한기능을추가시킬수있으며기능의변경도가능하다. 예를들어 HTML 태그에서는글자크기지정의범위가정해져있다. 이에 CSS를사용하면 HTML에서지원하지않는다양한글자크기의지정도가능하다. 통일된문서양식제공 HTML은각태그마다속성을일일이지정해줘야한다. 하지만 CSS를사용하면한번의속성정의로여러문서에서동시에다양하게적용할수있다. 이에따라페이지의관리가용이해져유지보수가쉬워진다. 즉문서의형식이모듈화된다. 사용자환경과상관없는독립된문서제작가능현재많은종류의브라우저를여러분들은볼수있다. 이에브라우저에따라서 HTML 문서의결과물이다르게표시될경우가있다. CSS를사용함으로써이를방지할수있고만든이의의도대로 HTML 문서의결과를확인할수있다. 문서형식의다양화 HTML은사용법과배우는데간단한반면그기능은단순하다. 하지만여기에추가적으로 CSS를사용함으로써더욱다양하고멋진 HTML 문서를만들수있다. 물론 HTML을배운사람들이라면 CSS를배우는것쯤은엄청쉽다. 로딩시간단축통일된문서양식을제공함으로써브라우저가읽어야하는문자의수가작아지기때문에로딩시간이단축된다. 2. CSS를사용하기위한 3가지방식에대하여설명하시오. 임베디드방식 HTML 문서에 CSS를삽입하는방식이다. <HEAD> 태그안에 <STYLE> 태그를사용하여스타일을정의하는것이다. 링크방식링크방식은 HTML 문서와는별도로스타일만을설정한 CSS 파일을만들어사용하는방법이다. CSS 만을작성한확장자 *.css를따로만들어야하며 <HEAD> 태그내에해당 CSS 파일을링크시킨다. CSS 파일을링크시킬때는스타일시트에링크하고있는것을나타내는 REL 속성과 CSS의경로를입력하는 HREF 속성, 그리고스타일시트의종류를나타내는 TYPE 속성을사용한다. 인라인방식인라인방식은각태그에직접스타일을적용하는방법이다. 임베디드방식이페이지전체에적용된다고하면인라인방식은하나의태그안에서만적용된다. 3. 다음은 CSS의임베디드방식을사용하여만든페이지이다. 이를링크방식으로바꿀경우 HTML 페이지와 CSS 페이지를작성하시오. (CSS 페이지의이름을 Exercise.css으로지정한다.
HTML/XML 인터넷보충학습자료 - 16 - <HTML> <HEAD> <TITLE> 연습문제 </TITLE> <STYLE TYPE="text/css"> <!-- FONT { font-size: 10pt; font-family: 굴림체 ; font-weight: bold} P {line-height: 150%; text-indent: 10pt} --> </STYLE> </HEAD> <BODY> <P><FONT> 임베디드방식과링크방식의차이점 <FONT></P> </BODY> </HTML> FONT {font-size: 10pt; font-family: 굴림체 ; font-weight: bold} P {line-height: 150%; text-indent: 10pt} <HTML> <HEAD> <TITLE> 연습문제 </TITLE> <LINK REL="stylesheet" HREF="Exercise.css" TYPE="text/css"> </HEAD> <BODY> <P><FONT> 임베디드방식과링크방식의차이점 <FONT></P> </BODY> </HTML>
HTML/XML 인터넷보충학습자료 - 17 - 확인문제 다음의빈칸에알맞은단어를작성하시오. 1. 링크방식을사용하여스타일을적용할때에는 html 확장명을가진페이지이외에 ( ) 확장명을가진페이지를만들어야한다. 2. 필기체를글자체로적용하고자할때 font-family 속성의값을 ( ) 로지정해야한다. 3. font-style 속성의값을 italic로지정할경우그것은 HTML의 ( ) 태그와같은효과를낸다. 4. 글자를깜박이는효과를주기위해서는 text-decoration 속성값을 ( ) 로지정해줘야한다. 5. 글자의 2배만큼의줄간격을주기위해서는 line-height 값을 ( )% 로지정해줘야한다. 다음문장의참거짓여부를판별하시오. 6. 아이디속성을사용하여스타일을적용할때에는클래스속성을사용할때와는달리 & 문자를사용하여정의한다. ( ) 7. 글자크기를지정하는 font-size의값을기본값인 medium으로지정할경우그값은 10pt와같다. ( ) 8. 글자의간격을지정하는 letter-spacing 속성의값으로마이너스값을입력할수있다. ( ) 9. 수평정렬을위해서는 vertical-align 속성을사용한다.( ) 10. 영문의첫번째글자를대문자로변환시키는 text-transform 속성값은 uppercase 이다. ( ) 다음의문제에해당되는보기를고르시오. 11. 다음중 CSS의특징이아닌것은? ( ) 1) HTML에서지원하지않는다양한스타일을적용시킬수있다. 2) 통일된문서양식을제공한다. 3) 사용자환경을고려하여 CSS를작성해야한다. 4) 페이지로딩시간을단축시킨다. 12. font-weight 값으로 100~900 까지지정할수있다. 이에기본값은무엇인가? ( )
HTML/XML 인터넷보충학습자료 - 18-1) 300 2) 400 3) 500 4) 600 13. 다음중 font 속성에대한설명으로잘못된것은? ( ) 1) font-weight 값과 font-style 값은넣지않아도상관없다. 2) font-weight 값과 font-style 값, font-variant 값은서로순서를바꿔도상관없다. 3) font-size 값과 font-family 값은반드시넣어야한다. 4) line-height 값은 font-size 값뒤에 & 를붙여줘야한다. 14. 다음중위첨자를입력하고자할때알맞은 vertical-align 값은? ( ) 1) baseline 2) super 3) sub 4) bottom 15. 다음중 <STRIKE> 태그와같은역할을하는 text-decoration 값은? ( ) 1) overline 2) underline 3) line-through 4) blink