본문 바로가기

0x01 Programming/0x013 HTML5&CSS3

# HTML문서에 CSS를 적용하는 세가지 방법

CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다.


HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 





태그에 직접 스타일을 주는 방법



<a href="http://www.monoeyes.com" style = "font-weight: bold; color:red;">쏭군 블로그</a>

<태그에 직접 스타일 적용하기>


이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 


위의 코드에서는 해당되는 <a> 태그 하나에만 굵고 빨간 효과가 적용됩니다. 


다른 태그들에게는 아무런 영향도 미치지 않습니다.


이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 


사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면,


 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 


그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다.





<style> 요소를 활용하여 HTML 내에서 사용하는 방법


<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<style type="text/css">

a {"font-weight: bold; color:red;"}

</style>

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>

<HTML 문서 내에 <style>태그를 사용하여 CSS적용하기>


이 방법은 HTML 파일의 <head> 또는 <body>에 <style> 태그를 선언함으로써 사용이 가능합니다. 


이 방법은 스타일이 삽입된 HTML파일, 즉 페이지 하나에 전부 영향을 미칩니다.


단, 해당 HTML파일 이 외에 다른 HTML파일에는 아무런 영향도 미치지 않습니다.





외부의 CSS파일을 링크하는 방법


a {"font-weight: bold; color:red;"}

<style.css>

<html>

<head>

<meta charset="UTF-8">

<title>CSS 연습</title>

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

</head>

<body>

<a href="http://www.monoeyes.com" >쏭군 블로그</a>

</body>

</html>


이 방법은 가장 널리 사용되는 방법입니다. 아예 웹사이트의 모든 디자인 정보를 CSS파일에 몰아넣고, 


HTML에서는 이 CSS파일을 링크하여 사용하는 방법입니다. 


이 방법은 CSS파일 하나로 여러 개의 웹페이지 디자인을 관리할 수 있다는 장점이 있습니다. 


또한, 미디어 타입을 지정하여 각 기기별로 최적화된 화면을 제공할 수 있습니다.





방법별 스타일을 적용하는 우선 순위


이 세가지 방법 중 스타일을 중복 적용하는 태그가 있다면 어떤 방식이 가장 우선적으로 적용될까요? 


그 순서는 다음과 같습니다.


  • 1순위 : 태그에 직접 스타일을 지정해 주는 방법
  • 2순위 : <style>요소를 이용해서 한 페이지에 스타일을 지정해 주는 방법
  • 3순위 : 외부의 CSS파일을 링크하여 스타일을 지정해 주는 방법