CSS(Cascading Style Sheet)
문서의 장식(스타일)을 정의한다. (글꼴, 색, 크기등을 설정한다.)
-문서에 CSS를 적용하는 방법
1. 인라인 CSS
태그에 style속성을 사용해서 태그에 직접 CSS를 지정하는 방법
<태그명 style="스타일속성:값: 스타일속성2:값2; ....;">내용</태그명>
2. 내부 CSS
HTML문서 안에 <style>태그를 사용해서 CSS를 지정하는 방법
<style type="text/css">
셀렉터 {스타일속성:값; 스타일속성2:값2;......}
...
</style>
3. 외부 CSS
스타일을 정의한 파일을 따로 만들고 이것이 필요한 문서에서 이 파일을 읽어와 스타일을 적용하는 방법
여러개의 HTML문서에서 동일한 스타일을 적용할 때 사용한다.
(외부스타일문서의 확장자는 '.css'로 한다.)
파일명.css ==> 예: mystyle.css
외부 CSS 파일을 읽어와 문서에 적용시키는 방법
<head>태그의 하위 태그인 <link>태그를 사용한다.
<link type="text/css" rel="stylesheet" href="경로명/파일명.css">s
<title>외부 CSS 적용하기</title>
<!-- 외부 CSS 파일을 읽어와 현재 문서에 적용하기-->
<link type="text/css" rel="stylesheet" href="외부 CSS정의.css">
<!-- 매번 달라지는 것은 href이다.-->
<style type="text/css">
.클래스 {
border :2px solid coral;
background-color:blanchedalmond;
}
</style>
/*외부 CSS파일은 확장자가 .css로 끝나야한다.*/
/*
이것은 외부 CSS의 정의한 문서입니다.
이곳에는 CSS만 정의해서 저장하면 됩니다.
*/
.클래스 {
border :1px solid red;
font-family : 궁서체;
font-size : 10pt;
width: 400px; height: 30px;
}
<body>
<p>이것은 p태그 영역입니다.(1번)</p>
<div class="test">이것은 <i><span>div태그</span>영역</i>입니다.(1번)</div>
<p class="test">이것은 <span>p태그</span>영역입니다.(2번)</p>
<div id="myid">이것은 <span>div태그</span>영역입니다.(2번)</div>
<p id="myid">이것은 <span>p태그</span>영역입니다.(3번)</p>
<div class="test" style="border:5px solid seashell">이것은 <span>div태그</span>영역입니다.(3번)</div>
<p class="test">이것은 <span>p태그</span>영역입니다.(4번)</p>
<div>이것은 <span>div태그</span>영역입니다.(4번)</div>
</body>
우선순위 인라인 > 내부 > 외부 or 순서중에 마지막에 작성한 것.
'HtmlCss > CSS' 카테고리의 다른 글
| Css - background (0) | 2019.05.25 |
|---|---|
| Css- Block요소,Display (0) | 2019.05.25 |
| Css - 의사 클래스 (0) | 2019.05.25 |
| CSS - Font 명령어 (0) | 2019.05.25 |
| CSS-셀렉터 (0) | 2019.05.25 |
