스타일 시트란? HTML만으로 홈페이지를 만드는 것보다 더 많은 페이지의 디자인을 업그레이드하고자 할 때 사용 문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하게 만들 수 있고, 문자색상 등을 좀 더 자유롭게 만들 수 있다.
CSS (Cascading Style Sheet)란? 스타일 시트의 표준안 CSS를 쓰면 통일된 문서 양식을 만들 수 있다. 풍부한 디자인과 동적인 형식을 부여 웹 페이지의 스타일 정보를 별도로 저장해두면 이러한 것들을 효율적으로 관리 문서 전체의 일관성을 유지 페이지 개발 및 유지관리 시간을 단축 각기 다른 사용자 환경에서 동일한 형태의 문서를 제공 통상 <head> 태그 내에 서술
Style sheet 사용 내부 스타일시트(embedding style sheet ) 사용 예 문서 내에서 직접 정의 <style type = "text/css"> 스타일 내용 ㆍㆍㆍ </style> 사용 예 <html><head> <title>embedding 스타일 시트</title> <style type="text/css"> h2{font-style: italic; color: blue} </style></head> <body><center> <h2> embedding 스타일시트</h2> <hr width=300 color="red"> <h4>전산정보계열</h4></center> </body></html>
Style sheet 사용 인라인 스타일시트(inline style sheet) 사용 예 태그 내에서 직접 정의 <html><head> <title> inline 스타일 시트 </title> </head> <body bgcolor="yellow"> <h2 style="font-family: 궁서체; color: blue"> inline 스타일시트</h2> </body></html>
Style sheet 사용 외부 스타일시트(linking style sheet ) 스타일시트를 만들어 HTML문서에 링크하여 사용 웹 문서와 별개의 스타일시트 파일 작성 저장 <link rel = "stylesheet" type = "text/css" href = "스타일 시트 파일명 또는 스타일 시트의 주소(URL)"> 사용 예 <html><head> <title> linking 스타일 시트 </title> <link rel="stylesheet" type="text/css" href="dynamic.css" ></head> <body ><center> <h3>linking 스타일시트(외부)</h3> <b> 우리여자대학(외부)</b> <p> 전산정보계열</p> </center></body></html> 외부 파일 *** dynamic.css 파일 내용 *** h3{font-style: italic; color: red} p{font-style: italic; color: blue; font-size=25pt; font-weight: bold} h4{font-family: 궁서체; color: violet} b{color: green}
Style sheet 사용 외부 스타일시트(linking style sheet ) 스타일시트를 만들어 HTML문서에 링크하여 사용 웹 문서와 별개의 스타일시트 파일 작성 저장 <link rel = "stylesheet" type = "text/css" href = "스타일 시트 파일명 또는 스타일 시트의 주소(URL)"> 사용 예 <html><head> <title> linking 스타일 시트 </title> <link rel="stylesheet" type="text/css" href="dynamic.css" ></head> <body ><center> <h3>linking 스타일시트(외부)</h3> <b> 우리여자대학(외부)</b> <p> 전산정보계열</p> </center></body></html> 외부 파일 *** dynamic.css 파일 내용 *** h3{font-style: italic; color: red} p{font-style: italic; color: blue; font-size=25pt; font-weight: bold} h4{font-family: 궁서체; color: violet} b{color: green}
Style sheet 에서 주석 달기 방법 사용 예 여러 줄 주석 : /* */ 으로 감싼다. 여러 줄 주석 : /* */ 으로 감싼다. 한 줄 주석 : // 을 줄 앞에 쓴다. 사용 예 <html><head><title>embedding스타일시트</title> <style type="text/css"> h2{font-style : italic; color : blue} // head 태그 정의 // p {font-style : italic; color : blue} /* <h2> 태그는 스타일 적용됨 */ </style></head> <body><center> <h2> embedding 스타일시트</h2> <p> 우리들 세상</p> <h4>우리들의 세상</h4> <!-- <h4>태그는 무관함 --> </center> </body></html>
Style sheet 정의 1 기본 형식 그룹 선택자 스타일 정의 형식 클래스 명 사용 스타일 정의 형식 선택자(태그명) {속성1: 속성 값1} { } 안에 서술 속성이 여러 개인 경우는 ; 로 구분 h1{font-style : italic}, font{font-family : 궁서체 ; color : red} 그룹 선택자 스타일 정의 형식 선택자1,ㆍㆍㆍ ,선택자n {속성1: 속성 값1; ㆍㆍㆍ ; 속성n: 속성 값n} 예 h1, h2, p, font {color : red ; font-weight : bold} 클래스 명 사용 스타일 정의 형식 하나의 태그에 다른 내용을 적용하고 싶을 때 사용 선택자. 클래스 명 {속성: 속성 값} 사용시 <body> 내에서 <태그명 class = "클래스 명">ㆍㆍㆍ</태그명>
사용 예 <html><head> <title> 스타일의 class화 </title> <style type="text/css"> h1.aaa{color: red} h1.ccc{color:gold;font-style=italic} </style></head> <body bgcolor="white"> <b> 스타일의 class화 </b><hr> <h1 class="aaa"> 스타일 aaa 적용</h1> <h1 class="ccc"> 스타일 ccc 적용</h1> <h1> 스타일 적용 없슴</h1> </body></html>
Style sheet 정의 2 공동 사용 class 이용 스타일 정의 ID 명 사용 스타일 정의 형식 .클래스 명 {속성: 속성 값} 사용시 <body> 내에서 <태그명 class="클래스 명">ㆍㆍㆍ</태그명> 어떤 태그든지 속성이 사용 가능 하다면 사용할 수 있슴 ID 명 사용 스타일 정의 형식 # ID 명 {속성: 속성 값} 사용시 <body> 내에서 <태그명 ID = “ID 명">ㆍㆍㆍ</태그명> 스타일 시트에 고유한 이름을 붙여서 스타일을 정의
사용 예 <html><head><title>스타일 연습 1</title> <style type="text/css"> .a {font-style:italic; color:red; font-size:15pt} .b {color:gold; font-size:40px} .c {font-weight:bold; color: blue} #qq {font-style:italic; font-size:25pt} </style></head> <body> <p class ="c"> 스타일 지정과 적용 연습</p> <h1 class ="a">우리들의 세상</h1> <h2 class ="b">살기좋은 세상</h2> <font id=qq> 정말좋은 세상</font><br> <b class ="c"> 아! 대한민국</font> </body></html>
Style sheet 정의 3 스타일의 상속 사용 예 스타일이 정의된 태그 내에 있는 다른 태그가 밖에 있는 태그의 스타일을 따른다는 것 스타일이 정의 되어있으면 상속이 않된다. 사용 예 <html> <head><title> 스타일의 상속성 </title> <style type="text/css"> p {color : red; font-family :궁서체} </style></head> <body> <p> p 태그 내에 있는 <b> b태그 내용</b> 은 어떻게 되는가</p> </body></html>
Style sheet 정의 4 태그 내의 또 다른 스타일 정의 선택자가 콤마로 구분이 안되어 있는 경우 사용 예 뒤에 있는 선택자는 앞에 있는 선택자의 안에서만 적용됨 따로 쓰는 경우는 적용이 안됨 사용 예 <html><head> <title> 태그 내의 또 다른 스타일 정의 </title> <style type="text/css"> h1 b { color: red; } p b { color: blue; font-family: 궁서체; } </style></head> <body> <h1>태그<b>매니</b>아</h1> <p>스타일 시트 <b>특강 중</b> 입니다.</p> <b> 별도의 내용은 영향을 받지 않는다. </b> </body></html>
Style sheet 정의 5 부분 스타일 정의 형식 문단이나 문자열에서 부분만 스타일 적용 시 사용 <span style = "속성: 속성 값"> ㆍㆍㆍ </span> 사용 예 <html><head><title> 스타일 범위 지정 </title></head> <body bgcolor="white"> <center>스타일 범위 지정<p> <h2><span style="font-style:italic; color:red">범위안에서</span> 스타일지정</h2> </center></body></html>
Style 의 속성과 속성 값 글꼴 속성과 속성 값 사용 예 font-family 글자체(굴림, 바탕, arial, 등) 글자체 이름 font-style normal, italic, oblique 글자 모양지정 font-size pt(포인트), px(픽셀) 글자 크기 font-weight normal, bold 글자 굵기 font-variant normal, small-caps 작은 대문자 사용 예 P {font-family: 굴림체; font-size:15pt; font-weight: bold} H3 {font-style : italic} P {font-size : 20 pt} body {font-weight : bold} b {font-variant : small-caps}