학습목표 학습목차 CSS에 대해 살펴봅니다. 문서의 트리구조에 대해 학습합니다. CSS의 기본구조에 대해 알아봅니다. 셀렉터의 종류에 대해 알아봅니다. 학습목차 CSS의 개요 문서의 트리구조 스타일시트의 위치 데이터의 형태 셀렉터의 종류
홈페이지와 CSS CSS란 무엇인가? 기존의 HTML 문서 단조롭고, 문서를 작성할 때 태그를 반복적으로 사용 여러 가지 태그를 동시에 복잡하게 나열 모양과 속성을 지닌 요소를 다시 사용하려면 그러한 태그의 나열을 반복해야 하는 번거로움 CSS의 등장 여러 가지 태그들을 한데 모아 특정기호를 사용하여 이를 통해 하나의 태그처럼 사용 텍스트를 둘러싼 여러 요소들의 속성들에 대해서도 다양한 변화 부여 정의된 내용들을 변경하여 전체 문서의 모양도 한번에 바꿀 수 있음 여러 페이지의 웹문서를 동일한 형태로 제어 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 효과적 처리 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택 스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 디자인을 요구하는 여러 개의 문서를 만들 때 매우 편리
홈페이지와 CSS 스타일 시트 HTML 문서 <html> <body> <H1>H1 태그를 통한 문장 출력</H1> </body> </html> 스타일 시트 문서 <html> <head> <style type="text/css"> H1 {font-size:12pt; font-style:italic;} </style> </head> <body> <H1>스타일시트를 통한 문장 출력</H1> </body> </html> 08_1.html
홈페이지와 CSS CSS의 특징 HTML 문서 밖에서 정의 HTML 문서 밖에서 정의 <style> <head> 스타일시트 </head> <body> <p style=“스타일시트”> </body> </html> <style> 스타일시트 </style Embeded Style Sheet : <head>와 </head> 사이에 정의 Inline Style Sheet : Body 태그의 특정 요소에서 정의 External Style Sheet : HTML 문서의 밖에서 별도로 정의
홈페이지와 CSS CSS의 장단점 Dynamic HTML 장점 기능의 확장성 : HTML의 기능을 확장 양식의 모듈화 : 흐름이 같은 문서양식으로 전체를 구성 간편성 : 문서의 형식을 손쉽고 다양하게 구성 일관성 단점 브라우저 호환성 완벽 지원 브라우저 미비 Dynamic HTML HTML CSS JavaScript
CSS의 구조 주요 용어 제작자(Author) : HTML, CSS, XML 등의 문서를 제작하는 사람 사용자(User) : 제작자에 의해 만들어진 문서를 보거나 듣는 사람 유저 에이전트(User Agent) : 웹 브라우저(IE, NN, Opera, Firefox 등) 문서언어(Document Language) : HTML, XML 등과 같이 웹의 문서들을 만들어 내는 데 사용되는 언어 요소(Element) : HTML의 경우 <H1>이나 <IMG> 등과 같은 태그 속성(Attribute) : <IMG> 요소의 속성들에는 src, alt, align 등을 의미 값(Value) : 속성의 값. 예를 들어 align 속성의 값에는 left, right, top 등이 있음 셀렉터(Selector : 선택자) : CSS에서 사용되는 용어로서 ‘요소’와 유사 프로퍼티(Property : 특성) : CSS에서 사용되는 용어로서 ‘속성’ 개념과 유사 프로퍼티 값(Property Value) : CSS에서 사용되는 용어로서 프로퍼티에 지정되는 값 속기 프로퍼티(Short Hand Property) : 프로퍼티 중에서 비슷한 것들을 묶어 한번에 표현하는 것.
CSS의 구조 문서의 트리구조 부모요소(Parents) : 한 요소가 다른 요소를 포함하고 있거나, 내용상, 구조상으로 상위 구조에 있을 경우 자식요소(Child) : A가 B의 부모요소라면 B는 A의 자식요소 자손요소(Descendant) : A가 B의 자식요소이거나, B의 자식요소의 자식요소일 때, A를 B의 자손요소126 조상요소(Ancestor) : A가 B의 자손요소이면 B는 A의 조상요소 형제요소(Sibling) : 동일한 부모요소를 가지는 두 개 이상의 요소를 서로 형제요소 A, B 요소가 있을 때 A 요소가 B 요소보다 먼저 나타났을 경우, A를 형 요소(PrecedingSibling : 선행 요소), B를 동생 요소(Following Sibling : 후행요소)
CSS의 구조 추가 태그 : CSS를 위한 HTML 태그 <STYLE> .. </STYLE>: 스타일시트가 시작과 끝을 지정 TYPE 속성에 “text/css” 값을 표기 사용방법 <HTML> <HEAD> <STYLE TYPE=“TEXT/CSS”> - - - - </STYLE> </HEAD> <BODY> - - - - </BODY> </HTML> <HTML> <BODY> <P STYLE=“ - - - ”> </BODY> </HTML> 태그 내에 위치 <STYLE> - - - - - - </STYLE> HTML 문서의 HEAD 부분에 위치 HTML 문서 밖에 위치(별도의 파일)
CSS의 구조 추가 태그 : CSS를 위한 HTML 태그 <LINK> .. </LINK>: 외부 스타일시트 파일을 HTML 문서 내에 링크할 때 사용 HTML 문서의 HEAD 부분에 위치 REL 속성과 그 값으로 “stylesheet”를 표기 TYPE 속성과 그 값으로 “text/css”를 표기 사용방법 <HTML> <HEAD> <LINK REL=stylesheet TYPE=“text/css” HREF=“CSS 파일의 위치”> </HEAD> </HTML> <SPAN> : 라인 레벨 CSS를 적용할 경우 사용 <DIV> : 블록 레벨에 스타일시트를 적용할 경우 사용 <LAYER> : Netscape 브라우저에서 사용되는 블록 레벨 태그
CSS의 위치 Inline 스타일 시트 08_2.html <HTML> <BODY style=“background:gray”> <H1 style=“font-size:12; font-style:italic;“> Inline 스타일시트 1</H1> <P style="border-style:dotted">Inline 스타일시트 2</P> <H1>스타일시트1가 적용 되지않음</H1> <P>스타일시트 2가 적용되지 않음</P> </HTML> 08_2.html
CSS의 위치 Embeded 스타일 시트 <HTML> <HEAD> <STYLE type=“text/css”> <!— 셀렉터1 {프로퍼티1:값; 프로퍼티2;값;} 셀렉터2 {프로퍼티1:값; 프로퍼티2;값;} --> </STYLE> </HEAD> <BODY></BODY> </HTML> <HTML><HEAD> <STYLE type=“text/css”> <!-- P {font-size:20pt; font-style:italic;} --> </STYLE> </HEAD> <BODY> <P>Embeded 스타일시트</P> </BODY> </HTML> 08_3.html Embeded 스타일시트 기본 구조 <?-- --> : CSS를 인식하지 못하는 브라우저에서 코딩 내용을 감추기 위함
CSS의 위치 External 스타일 시트 HTML 문서 내가 아닌 외부에 CSS 파일을 만들어서 HTML 문서와 링크하여 사용 스타일 시트 파일은 일반 텍스트 편집기로 작성되고 확장자 이름은 .css CSS 본연의 목적(문서를 고치지 않고서 문서에 효과를 변경할 수 있는)에 충실 통일된 모양으로 HTML 문서를 제어 모양을 변경하려 할 경우에도 스타일시트 파일의 내용만 변경 다음과 같은 2가지 방법 ① <LINK> 태그를 이용하는 방법 ② @IMPORT
CSS의 위치 External 스타일 시트 filename.css ① <LINK> 태그를 이용하는 방법 <HEAD> <LINK REL=stylesheet TYPE=“text/css” HREF=“filename.css”> </HEAD> <STYLE> <!-- 셀렉터1 {프로퍼티1:값;프로퍼티2;값;} 셀렉터2 {프로퍼티1:값;프로퍼티2;값;} --> </STYLE> filename.css 스타일시트 파일의 정의 목록
CSS의 위치 External 스타일 시트 ① <LINK> 태그를 이용하는 방법 <STYLE> <!-- H1 {font-size:20; font-style:italic;} P {border-style:outset} --> </STYLE> mystyle.css <HEAD> <LINK REL=stylesheet TYPE="text/css" HREF="mystyle.css"> </HEAD> <BODY> <H1>외부 스타일시트의 H1 태그 적용</H1> <P>외부 스타일시트의 p 태그 적용</P> </BODY> 08_4.html
CSS의 위치 External 스타일 시트 ② @IMPORT를 이용한 방법 <STYLE> <!-- H1 {font-size:20; font-style:italic;} P {border-style:outset} --> </STYLE> mystyle.css <HEAD> <style type=“text/css”> @IMPORT url(mystyle.css); </style> </HEAD> <BODY> <H1>외부 스타일시트의 H1 태그 적용</H1> <P>외부 스타일시트의 p 태그 적용</P> </BODY> 08_5.html
CSS의 기본구조 기본구조 프로퍼티(Property) ① 셀렉터 {프로퍼티1:값1; 프로퍼티2:값2; . . . .; 프로퍼티n:값n;} 또는 ② 셀렉터 {프로퍼티1=값1; 프로퍼티2=값2; . . . .; 프로퍼티n=값n;} ① H1 { color : yellow; font-size: 14pt;} ② H1 { color=yellow; font-size=14pt;} 프로퍼티(Property)
CSS의 기본구조 값 ① 키워드 : 키워드는 그 자체가 의미를 갖는 값이기 때문에 따옴표 하지 않음 ② 일반 값 - N | NE | SW : N, NE, SW 중 하나만 나타남 - [<길이> | thick | thin]{1, 4} : 길이 값, thick, thin 중 하나만 나타나며, 이렇게 나타난 값은 1개에서 4개까지 지정될 수 있음
CSS의 기본구조 상속성 스타일시트의 요소들은 부모요소의 속성을 물려받으며, 자신의 속성을 자식요소에게 상속 요소 A의 내부에 나타나는 요소 B는 요소 A의 자식요소 또는 자손요소 트리구조 상 상위구조에 있는 요소는 부모요소 또는 조상요소 요소의 특성상 다른 조건에 상관없이 무조건 상속관계가 성립되는 요소들도 있음 BODY 요소는 모든 요소의 부모요소 H1 { color: blue} --------------------------------------------------- <H1>상속성의 <em>실체를</em>벗긴다</H1> H1 { font-size : 10pt} ---------------------------------------- H1 { line-height : 120%}
데이터의 형태 정수와 실수 길이 상대단위 em : 관련된 폰트의 크기 ex : 관련된 폰트의 x-너비 px : 관련된 가시매체의 픽셀 P{padding: 0.5em} 패딩을 관련된 폰트의 반으로 지정 H1{margin: 1ex} 마진을 관련된 폰트(여기서는 H1)의 x-너비로 지정 EM{font-size: 10px} 폰트의 크기를 10px로 지정 절대단위 in cm mm pt : point(1/72 인치) pc : pica(1 피카 = 12 point) H1 { margin: 0.5in } /* inches */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points */ H4 { font-size: 1pc } /* picas */
데이터의 형태 백분율 URL+URN=URI(실제로는 URL 사용) 색상값 BODY { background: url(“http://iel.gwnu.ac.kr/jhkim/logo.jpg”) } EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* 정수 범위 0 - 255 */ EM { color: rgb(100%, 0%, 0%) }/* 유동(float) 범위 0.0% - 100.0% */
셀렉터(Selector) 셀렉터(Selector) 단순한 형태 H3 {font-family: “굴림,arial”; font-style:italic; color:#ff0088; text-align: left;} 그룹화 : 여러 요소를 한꺼번에 정의하는 방법 H1 {font-family:굴림; font-style: italic;} H2 {font-family:굴림; font-style: italic;} H3 {font-family:굴림; font-style: italic;} H1, H2, H3 {font-family:굴림; font-style: italic;} 종속관계 <P>종속관계 성립 안됨</P> <B>종속관계 성립 안됨</B> <P><B>종속관계 성립</B></P> P B {font-weight: bold; background: black;}
셀렉터(Selector) 셀렉터의 종류 공통 셀렉터(Universal Selector) : * 로 표기되며 생략가능 아래 2개의 코드는 동일한 결과 <head> <style type=“text/css”> *.mycls {font-size:40pt; font-style:italic} </style></head> <body> <p class=“mycls”>캐스캐이딩</p> </body> <head> <style type=“text/css”> .mycls {font-size:40pt; font-style:italic} </style></head> <body> <p class=“mycls”>캐스캐이딩</p> </body> 08_6.html 08_7.html
셀렉터(Selector) 그룹화 : 여러 요소를 한꺼번에 정의하는 방법 H1 {font-family:굴림; font-style: italic;} H2 {font-family:굴림; font-style: italic;} H3 {font-family:굴림; font-style: italic;} H1, H2, H3 {font-family:굴림; font-style: italic;} 08_9.html 08_8.html 형태 셀렉터(Type Selector) : 가장 일반적으로 사용되는 셀렉터 <head> <style type=“text/css”> P {font-size:16pt;text-decoration:underline} </style> </head> <body> <P>대한민국</P> <P><I>대한민국</I></P> </body> 08_10.html