인기여행국가 및 도시의 호텔정보​

국내 호텔 일본 호텔 필리핀 호텔 태국 호텔 홍콩 호텔 싱가포르 호텔 베트남 호텔 중국 호텔 대만 호텔 말레이시아 호텔 인도네시아 호텔 괌 호텔 마카오 호텔 미국 호텔 호주 호텔 영국 호텔 터키 호텔 스위스 호텔 몰디브 호텔 두바이 호텔 미얀마 호텔 인도 호텔 뉴질랜드 호텔 체코 호텔 오스트리아 호텔 크로아티아 호텔 사이판 호텔 캐나다 호텔 스리랑카 호텔 그리스 호텔 스페인 호텔 프랑스 호텔 독일 호텔 캄보디아 호텔 라오스 호텔 이탈리아 호텔 네팔 호텔 러시아 호텔 네덜란드 호텔 헝가리 호텔 포르투갈 호텔 몽골 호텔 벨기에 호텔 핀란드 호텔 멕시코 호텔 브라질 호텔


추천 인기 여행,휴양도시

방콕 호텔 서울 호텔 홍콩 호텔 싱가포르 호텔 세부 호텔 부산 호텔 오사카 호텔 도쿄 호텔 보라카이 호텔 타이베이 호텔 마닐라 호텔 제주도 호텔 후쿠오카 호텔 괌 호텔 마카오 호텔 파타야 호텔 호치민 호텔 발리 호텔 오키나와 호텔 쿠알라룸푸르 호텔 상하이 호텔 푸켓 호텔 하노이 호텔 칼리보 호텔 베이징 호텔 자카르타 호텔 교토 호텔 보홀 호텔 청도 호텔 파리 호텔 다낭 호텔 치앙마이 호텔 씨엠립 호텔 인천 호텔 시드니 호텔 코타키나발루 호텔 나트랑 호텔 런던 호텔 앙헬레스 호텔 경주 호텔 로마 호텔 삿포로 호텔 바르셀로나 호텔 비엔티엔 호텔 하와이 호텔 광저우 호텔 나가사키 호텔 루앙프라방 호텔 멜번 호텔 나고야 호텔 속초 호텔 이스탄불 호텔 몰디브 호텔 끄라비 호텔

CSS와 HTML의 연결

Posted by KOKPlay 1인 미디어
2015. 9. 7. 11:25 컴퓨터-유용한팁/CSS_사전

.css 파일 불러들이기 Linking to an External Style Sheet


.css 파일은 HTML의 'LINK'를 이용해서 HTML 문서와 연결할 수 있다. <LINK>는 HTML 문서의 <HEAD>안에 두어야 한다. 'TYPE' 은 MIME 형식(CSS의 경우 text/css)을 지정하는데, Css를 지원하지 않는 브라우저에서는 이것을 무시할 수 있도록 해준다. 'MEDIA'는 Css가 적용될 매체를 지정하는데, 그 형식은 다음과 같다.

print 인쇄
screen 화면 출력
projection 프로젝터 출력
braille 점자출력
aural 음성 출력
all 모든 매체에 대한 출력

여러 매체를 지정할 때에는 쉼표를 사용하거나 'all'을 사용한다.

보기

<LINK REL=StyleSheet HREF="sam.css" TYPE="text/css" MEDIA=screen>

REL은 HTML문서와 연결된 파일 사이의 관계를 정의한다. 위의 보기는 현재문서가 'sam.css'파일에 의해 모든 Style Sheet가 설정되어 있음을 보여준다.

<LINK REL=StyleSheet HREF="sam1.css" TYPE="text/css" TITLE="sam1.css" MEDIA="screen,print">

위의 보기에서는 'sam1.css' 파일이 현재문서에 자동 적용된다. REL=StyleSheet과 TITLE을 함께 사용한다.

<LINK REL="Alternate StyleSheet" HREF="sam3.css" TYPE="text/css" TITLE="sam3" MEDIA="screen, print">

위는 보조 스타일의 보기인데, REL="Alternate StyleSheet"를 이용해서 지정한다. 이것은 자동 적용된 스타일을 바꾸기 위해 사용한다.

<LINK REL=StyleSheet HREF="basics.css" TITLE="toge">
<LINK REL=StyleSheet HREF="tables.css" TITLE="toge">
<LINK REL=StyleSheet HREF="forms.css" TITLE="toge">

위의 보기는 세개의 css파일이 동시에 한 문서에 적용되는 예인데, 이를 위해서는 동일한 TITLE을 사용해야만 한다.

.css 파일 불러들이기Linking to an External Style Sheet는 여러 페이지에 동일한 css가 적용될 때 편리하다. 대부분의 브로우저는 css파일을 캐쉬Cash로 보관하므로 문서의 생성시간을 절약할 수 있다.

<Style></style> 사용하기 Embedding a Style Sheet


한 문서안에서 css를 지정할 때 사용한다.

보기

<STYLE TYPE="text/css">

<!--

BODY { background: url(sam.gif) black; color: #ffffff }
P { background: yellow; color: black }
.fir { margin: 10px }
-->

</STYLE>

<STYLE>은 HTML의 <HEAD>안에 위치한다.

@import로 불러오기 Importing a Style Sheet


@import는 css파일이나 <style>에서 사용하는데, @import 는 css내용의 첫부분에 있어야만 한다.

보기

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
..@import url(http://www.user.com/fir.css);
..@import url(sec.css); P { background: white }
-->
</STYLE>

위의 보기에서 같은 내용의 설정은 뒤에 것이 우선한다. 만일 P에 대해 fir.css에서는 바탕Background을 붉은 색으로, sec.css에서는 검은 색으로 지정했다면, 화면의 바탕은 흰색으로 나타난다. 즉, 세번째의 설정이 우선하는 것이다. 따라서, @import는 전반적으로 지정된 css내용을 불러들여 일부를 문서안에서 수정해가며 사용할 때 편리하다.

직접쓰기 Inlining Style


임의의 요소Element안에서 css를 직접 지정할 때에 사용한다.

보기

<SPAN STYLE="color: yellow; font-family: 굴림, impact">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다
</SPAN>.

위의 보기는 반드시 아래와 같은

<SPAN STYLE="color: yellow; font-family: 굴림, 'Comic Sans MS'">글꼴은 '굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>

형식을 지켜야만 한다.

CLASS (The CLASS Attribute)


이것은 일정한 css형식이 지정되어 있는 문서에 전혀 다른 내용의 css를 문서 일부에 포함시킬 때에 사용한다.

보기

.esp { color: #ffffff; background: red }
B.new { font-size: 16px; color: green }

위의 보기는 다음과 같이 사용한다.

<P CLASS="esp">...</P>
<B CLASS="new">...</B>

위에서 'new'라는 CLASS는 <B> 요소Element에만 적용된다.

ID (The ID Attribute)


이것은 CLASS와 거의 같은 기능을 가지는데, 다른 점은 ID는 문서안에서 단한번 적용된다는 것이다.

보기

#woolee { font-family: "Comic Sans MS" }

위의 보기는 다음과 같이 사용한다.

<P ID="woolee">...</P>

SPAN (The SPAN Element)


<SPAN>은 HTML 요소Element이지만, 아무런 기능도 가지고 있지 않다. 이는 순전히 css의 사용을 위해 고안된 것이다.

보기

<HTML>
<HEAD>
<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--
...sam { color: red }
-->

</STYLE>

</HEAD>

<BODY>

<SPAN CLASS="sam">붉은 보기</SPAN>

<P>

<SPAN STYLE="color: yellow">노란 보기</SPAN>

DIV (The DIV Element)


SPAN과 바슷한 기능을 하는데, 차이점은 DIV는 묶음 요소Block-Level Element여서 문단을 다루는 데에 편리하다.

보기

<HTML>
<HEAD>
<TITLE>SPAN</TITLE>

<STYLE TYPE="text/css">

<!--
...sam { color: red }
-->

</STYLE>

</HEAD>

<BODY>

<DIY CLASS="sam">붉은 보기</DIV>

<P>

<DIV STYLE="color: yellow">노란 보기</DIV>

위의 두 보기에서 <SPAN>과 <DIV>의 차이는 Netscape와 Explorer에서 상이하게 적용된다.


저작자표시

'컴퓨터-유용한팁 > CSS_사전' 카테고리의 다른 글

Importing a Style Sheet  (0) 2015.09.07
Embedding a Style Sheet  (0) 2015.09.07
The ID Attribute  (0) 2015.09.07
The SPAN Element  (0) 2015.09.07
The DIV Element  (0) 2015.09.07
Trackback: Comment:


인기여행국가 및 도시의 호텔정보​

국내 호텔 일본 호텔 필리핀 호텔 태국 호텔 홍콩 호텔 싱가포르 호텔 베트남 호텔 중국 호텔 대만 호텔 말레이시아 호텔 인도네시아 호텔 괌 호텔 마카오 호텔 미국 호텔 호주 호텔 영국 호텔 터키 호텔 스위스 호텔 몰디브 호텔 두바이 호텔 미얀마 호텔 인도 호텔 뉴질랜드 호텔 체코 호텔 오스트리아 호텔 크로아티아 호텔 사이판 호텔 캐나다 호텔 스리랑카 호텔 그리스 호텔 스페인 호텔 프랑스 호텔 독일 호텔 캄보디아 호텔 라오스 호텔 이탈리아 호텔 네팔 호텔 러시아 호텔 네덜란드 호텔 헝가리 호텔 포르투갈 호텔 몽골 호텔 벨기에 호텔 핀란드 호텔 멕시코 호텔 브라질 호텔


추천 인기 여행,휴양도시

방콕 호텔 서울 호텔 홍콩 호텔 싱가포르 호텔 세부 호텔 부산 호텔 오사카 호텔 도쿄 호텔 보라카이 호텔 타이베이 호텔 마닐라 호텔 제주도 호텔 후쿠오카 호텔 괌 호텔 마카오 호텔 파타야 호텔 호치민 호텔 발리 호텔 오키나와 호텔 쿠알라룸푸르 호텔 상하이 호텔 푸켓 호텔 하노이 호텔 칼리보 호텔 베이징 호텔 자카르타 호텔 교토 호텔 보홀 호텔 청도 호텔 파리 호텔 다낭 호텔 치앙마이 호텔 씨엠립 호텔 인천 호텔 시드니 호텔 코타키나발루 호텔 나트랑 호텔 런던 호텔 앙헬레스 호텔 경주 호텔 로마 호텔 삿포로 호텔 바르셀로나 호텔 비엔티엔 호텔 하와이 호텔 광저우 호텔 나가사키 호텔 루앙프라방 호텔 멜번 호텔 나고야 호텔 속초 호텔 이스탄불 호텔 몰디브 호텔 끄라비 호텔

티스토리툴바