Front-End/CSS
HTML 문서에 CSS를 사용하는 방법들
dlgkstjq12
2019. 8. 26. 14:08
HTML문서에 CSS를 적용하는 3가지 방법 1. 외부 스타일 시트 2. 내부 스타일 시트 3. HTML 태그내에 스타일 지정 |
-외부 스타일 시트-
css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> |
장점 : 홈페이지 전체의 스타일을 일관성있게 유지할 수 있고, 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.
단점 : 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.
그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.
-내부 스타일 시트-
HTML 문서내에서 <head> 와 </head> 사이에 스타일을 정의하는 방법입니다.
<head> <style type="text/css"> <!-- body {font-size:9pt;} //--> </style> </head> |
HTML문서마다 스타일을 매번 지정해주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.
-HTML태그내에 스타일 지정-
위의 방법들에 비해서 적용범위가 더욱 좁하진 형태입니다.
스타일을 적용하고 싶은 HTML 태그안에서 정의하는 방법입니다.
<p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p> |
직관적으로 사용이 가능하다는 장점이 있다.
출처
http://www.homejjang.com/07/how_to.php
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.