Front-End/HTML

HTML - CSS 선언 하기

HappyWeasel 2020. 7. 6. 00:56

style을 HTML 페이지에 적용하는 3가지 방법

  • inline
    • HTML 태그 안에 적용
    • 다른 CSS 파일에 적용한 것 보다 우선적으로 적용된다.
    •  
<p style="border:1px solid gray;color:red;font-size:2em;">
  • internal
    • style 태그로 지정한다.
    • 구조와 스타일이 섞이기 때문에 유지보수가 어렵다.
    • 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.
    •  
<head>
<style>
p  {
  font-size : 2em;
  border:1px solid gray;
  color: red;
}
</style>
</head>

<body>
<div>...</div>
</body>
  • external
    • 외부의 css 파일을 지정하는 방식이다.
    • css 코드가 길면 해당 방법으로 구현하는 것이 좋다.
    • link 태그로 추가한다.
    •  
<html>
	<head>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div>
			<p>
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</p>
		</div>
	</body>
</html>

 

우선 순위

  • inline > internal = external