[HTML/CSS] HTML/CSS 내부, 외부 접근 방식

[CSS의 외부접근방식과 내부접근방식]

외부접근방식

[main.css]

body{
	padding: 10px 20px 30px 40px;
	margin: 50px; 
	font-size: 12px;
	font-family: Arial, Helvertica, sans-serif;
	color: #333;
}

[html]

<link rel="stylesheet" type="text/css" href="css/main.css"/>

내부접근방식

[html]

<h1 style="size: 24px; color: #06F; font-family: '맑은 고딕';">Windows 7과
		Mac OSX 비교</h1>

---

[CSS속성]

 

• font- family: CSS font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다.

font-family: "Goudy Bookletter 1911", sans-serif;

 

• css끼리는 @import를 사용하여 동일한 값을 복사해서 쓸 수 있다. 

[main.css]

body{
	padding: 10px 20px 30px 40px;
	margin: 50px; 
	font-size: 12px;
	font-family: Arial, Helvertica, sans-serif;
	color: #333;
}

 

[ex09.css]

@charset "UTF-8";
@import "main.css";

body{
	background-color: #ff6;
}

h1{
	color:#999;
}

• tagName(h1{ }), id(#id{ }), class(.class{ })를 사용하여 스타일을 지정
• padding: element안  ,  margin: element밖
• 주석은 /*  */을 사용한다.
• 동일한 태그에 스타일이 다르게 적용될 경우, tag<class<id(우선순위) 순으로 적용된다.

[css]

.headline{
	color:#333;
}

p{
	font-size: 12px;
	color: #111;
}

[html]

<p class="headline">윈도우 7은 전작인 윈도우 비스타의 불편함을 개선하고, 또한 사용자 편의를 위해서 이전 버전에 비해 많은 부분이
		보강되었습니다.
</p>

- 위의 상황은 .healine이 우선순위이므로, color에 #333이 적용된다

• html에서는 labeling대신에 placeholder를 많이 사용한다.