예제 4-5. <link> 태그로 CSS3 파일 불러오기. 예제 4-6. @import로 CSS 파일 불러오기.
WEB/CSS3-CONCEPT 2017. 11. 4. 18:50 |CSS3 스타일 시트만 떼어내어. .css 확장자를 가진 파일을 저장해놓고, 필요한 웹 페이지에서 불러 사용할 수 있다.
이것은 동일한 CSS3 스타일을 웹 페이지마다 중복 작성하는 불편함을 해소하고, 웹 사이트의 전체 웹 페이지 모양에 일관성을 준다.
첫번째방법. <link> 태그 이용
두번째방법. @import 이용 (이것을 이용)
첫번째방법. <link> 태그 이용
1 2 3 4 5 | <head> // <link> 태그를 여러 번 사용하여 여러 CSS 파일을 불러 올 수 있다. <link href="mystyle.css" // mystyle.css을 파일을 불러올것을 지시한다. type="text/css" // 불러오는 파일이 CSS 언어로 작성된 텍스트 파일임을 알려준다. rel="stylesheet"> // 불러오는 파일이 스타일 시트임을 알려준다. </head> | cs |
예제 4-5. test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><link> 태그로 스타일 파일 불러오기</title> <link type="text/css" rel="stylesheet" href="mystyle.css"> </head> <body> <h3>소연재</h3> <hr> <p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p> </body> </html> | cs |
mystyle.css
* <style> 태그를 함께 저장하면 안된다.
1 2 | body { backgroud-color:linen; color:blueviolet; margin-left:30px;margin-right:30px; } h3 { text-align:center;color:darked;} | cs |
두번째방법. @import 이용 (이것을 이용)
1 2 3 | <style> @import url(mystyle.css); </style> | cs |
예제 4-6. test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <title><@import>로 외부 스타일 불러오기</title> <style> @import url(mystyle.css); </style> </head> <body> <h3>소연재</h3> <hr> <p>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</p> </body> </html> | cs |
mystyle.css
* <style> 태그를 함께 저장하면 안된다.
1 2 | body { backgroud-color:linen; color:blueviolet; margin-left:30px;margin-right:30px; } h3 { text-align:center;color:darked;} |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-8. CSS3 규칙. 스타일 합치기(cascading)와 오버라이딩(overriding). 여러 스타일 시트가 중첩되는 경우 (0) | 2017.11.04 |
|---|---|
| 예제 4-7. CSS 규칙, CSS 스타일은 부모 태그로부터 상속된다. 부모 스타일 상속 (0) | 2017.11.04 |
| 예제 4-4. style 속성에 스타일 시트 만들기 (0) | 2017.11.04 |
| 예제 4-3. <style> 태그로 스타일 시트 만들기 (0) | 2017.11.04 |
| 예제 4-2. CSS3 스타일 시트로 꾸민 웹 페이지 (0) | 2017.11.04 |