손영배 블로그 누구나 쉽게 이해하고 습득하기
CSS 본문
css 선언방법
span {
color : red;
}
span : selector(선택자)
color : property
red : value
style을 HTML페이지에 적용하는 3가지 방법
1. inline : HTML 태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다.
<p style="border": 1px solid gray; color: red; font-size: 2em;">
2. internal : style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다.
<head>
<style>
p {
font-size : 2em;
border:1px solid gray;
color: red;
}
</style>
</head>
<body>
<div>...</div>
</body>
3. external
외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다.
현업에서는 여러개의 CSS 파일로 분리하고 이를 합쳐서 서비스에서 사용하기도 합니다. internal 코드와 같은 css코드를 구현하고, style.css와 같은 별도 파일로 만듭니다.
<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>4. 우선순위
inline은 별도의 우선순위를 갖지만, internal과 external은 우선순위가 동등하니다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영됩니다.
CSS 상속
'Web' 카테고리의 다른 글
| Servlet (0) | 2019.06.17 |
|---|---|
| Apache Tomcat (0) | 2019.06.16 |
| HTML Tag 리스트 (0) | 2019.06.15 |
| 웹공부2 WAS (Web Application Server) (0) | 2019.06.14 |
| HTTP에 S가 붙은 HTTPS 는 어떤 용도로 사용되는 건가요? HTTP와 무엇이 다른가요? (0) | 2019.06.14 |
'Web' Related Articles
more
