Download
1 / 24
250 likes | 343 Views
스타일 시트 CSS. Cascading Style Sheets. 스타일 시트의 필요성. 웹 응용프로그램이 널리 사용됨에 따라 사용자들은 웹 브라우져에서 화려한 GUI 를 원하게 됨 . - 그에 따라 만들어 진 것이 CSS 이다 . 스타일 시트는 html 이 웹에서 어떤 식으로 보여지는 결정하는 규칙들로 구성되어 있다. 1. 스타일 시트 선언. 스타일 시트는 head 태그 안에 선언하여야 한다. <head> <style type = “text/ css ”> <!-- 스타일 규칙
E N D
스타일 시트 CSS Cascading Style Sheets
스타일 시트의 필요성 • 웹 응용프로그램이 널리 사용됨에 따라 사용자들은 웹 브라우져에서 화려한 GUI 를 원하게 됨. - 그에 따라 만들어 진 것이 CSS이다. • 스타일시트는 html이 웹에서 어떤 식으로 보여지는 결정하는 규칙들로 구성되어 있다.
1. 스타일 시트 선언 스타일 시트는 head 태그 안에 선언하여야 한다. <head> <style type = “text/css”> <!-- 스타일 규칙 … --> </style> </head> 사용할 스타일 시트가 CSS 임을 알림. 스타일 규칙을 선언하는 방법!!!
1. 스타일 시트 선언 H1{ color : blue; } 하나의 선언부에 여러 개의 HTML 태그를 선택자로 기술 H1, H2, H3, H4, H5, H6{ color : blue; } 선택자 션언부 선언부에 적혀 있는 모든 태그들에 같은 선언이 적용된다.
1. 스타일 시트 선언 한 선언부에서 여러 개의 속성을 기술 H1{ color : blue; font-size : 24pt; } 내포된 태그에 스타일 시트를 적용할 경우 H3 EM{ text-decoration : underline; } 세미 콜론으로 구분!! 한 개의 속성만 기술하는 경우에는 ‘;’을 넣지 않아도 됨.
1. 스타일 시트 선언 • 동일한 태그지만 서로 다른 스타일 시트를 적용하는 경우도 있다. 예 ) 문단을 나타내는 p 태그의 경우, 어떤 문단은 볼드체, 어떤 문단은 이탤릭체로 나타내는 경우 태그 클래스 사용!!!!
2. 태그 클래스 예 ) 문단을 나타내는 p 태그의 경우, 어떤 문단은 볼드체, 어떤 문단은 이탤릭체로 나타내는 경우 <style type = “text/css”> <!-- p.italic{ font-style : italic; } p.bold{ font-style : bold; } .underline{ text-decoration : underline; } --> </style> P 태그에서 italic 클래스는 글씨체를 italic 체로 나타냄 P 태그에서 bold 클래스는 글씨체를 bold 체로 나타냄 전체 태그들 중 underline 클래스로 명시 된 것은 글씨 밑에 밑줄을 넣음.
2. 태그 클래스 • 스타일 시트를 전 페이지 처럼 작성한 뒤, 각 태그들에 클래스를 명시하기 위해서는 어떻게 해야 할까?
2. 태그 클래스 • 스타일 시트를 전 페이지 처럼 작성한 뒤, 각 태그들에 클래스를 명시하기 위해서는 어떻게 해야 할까? <p class =“italic”>이탤릭체 문단</p> <p class =“bold”>볼드체 문단</p> <H1 class =“underline”> 밑줄 친 제목 </H1>
3. Id • 각 태그들에 클래스를 부여하는 것 처럼id를 부여할 수 있다. • id의 사용 방법은 선언부 앞에 ‘ # ‘ 을 붙임. • 각 id는 문서마다 유일한 것이어야 한다. • 선언된 id 는 html 태그 내에서 id 속성을 이용해서 사용 됨. ( id 속성에 넣을 때는 # 을 붙이지 않음.) <style type = “text/css”> <!-- #red {color : red;} --> </style>
Style 태그와 style 속성 • Html 자체에서도 style 을 정의 할 수 가 있는데, 그것이 태그별style 속성을 정의해 주는 것이다. <h2 style = “color : blue; text-decoration : underline”>제목</h2> 만약, CSS에 h2에 대한 정의가 있는 경우, 또 각각의 정의가 충돌을 일으키는 경우가 생긴다면, html에서는 위의 style 속성에 우선권을 주도록 되어있다. 정의하는 방법은 CSS와 같다.
4. LINK 태그를 이용한 STYLE 시트의 인클루드 • 보통의 홈페이지에서 스타일 시트는 문서마다 서로 비슷하다. 홈페이지 전체의 통일성을 유지해주기 위해서이다. 그런데 문서마다style 태그를 이용해서 정의를 해주면 너무 분량이 많아질 뿐만 아니라, 매우 불편한 일이 될 수 밖에 없다. Html 에서는 위의 불편을 없애기 위해서 link 태그를 이용해 html 문서에 include 기능을 제공한다. < link rel=“stylesheet” type = “text/css” href =“mystyle.css” > 포함된 문서가 stylesheet임을 알림. 포함할 문서의 경로를 적어줌.
