html에서의 css 사용해보기
1. inline
1)엘리먼트에다 스타일을 직접 기술하는 방법
2)셀렉트가 필요 엄씁니다.
3)css선언이 분명해서리 style tag 방식에 비하여 엘리먼트에다 영향을 주고 있는 css를
추적하기가 용이하다.
4)코드가 많아지고 (코드 생성양들이 많아진다),의미와 디자인의 분리라는 css의 방식에 벗어나게 된다.
2. style tag방법
1) style 태그에 적용하는 방법
2) 의미와 디자인의 나눔이라는 css의 방식에 부합한다.
3) inline 방식 대비하여 효과적으로 코딩 할 수 있다.
3.외부 파일 방식
1) 파일의 교체로 디자인을 변경할수 있단느 부분에서 유지 및 보수가 용의하다.
2) 문법적으로 style tag와 동일하다.
3) css를 별도의 파일로 분리하여 링크해버리는 방식
참고 1) inline
<html>
<body>
<!-- tag안에 style 시트를 직접 기술, selector가 불필요-->
<h1 style="color:blue"> 기초 코딩 상식 </h1>
<p>css를 배워보장 아자 아자.</p>
</body>
<html>
참고 2) style tag
<html>
<head>
<style type="text/css">
h1 {
color :blue;
}
</style>
</head>
<body>
<!-- tag안에 style 시트를 직접 기술, selector가 불필요-->
<h1>초보의 무한 css 방법 </h1>
<p>css 초보 탈출을 한번 해보자 아자 아자 </p>
</body>
</html>
참고 3) 외부의 파일 방식
<html>
<head>
<link type="text/css" href="http://dungx2.tistory.com/css/style.css" rel="stylesheet" />
</head>
<body>
<h1>초보의 무한 css 방법 </h1>
<p>css 초보 탈출을 한번 해보자 아자 아자 </p>
</body>
</html>
-------------------------------------------------------------------
/* http://dungx2.tistory.com/css/style.css 의 하위 내용 */
h1 {
color : yellow;
}
'IT > CSS' 카테고리의 다른 글
| 폰트(텍스트) 활용하기 (1) | 2015.03.10 |
|---|---|
| css로 텍스트 꾸미기 (2) | 2015.03.09 |
| css 선택자의 조합 (1) | 2015.03.09 |
| css의 선택자의 사용 (0) | 2015.03.09 |
| css초보상식 (0) | 2015.03.09 |