1. 인라인 방식

- 해당태그의 style 속성에 넣는 방식이다.


예시)

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1 style="background-color:gray;">제목1</h1>
        <p style="color:red; font-size: 50px;">제목에 따른 내용(문단)입니다.</p>
    </body>
</html>
cs

결과)

2. 내부의 스타일 태그 방식

- 해당파일의 <head>태그 안에 <style>태그에 넣는 방식이다.

* <style>

지시자{

속성:속성값;

}

  </style>


예시)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            h1{
                background-color: yellow;
                text-align: center;
            }
            #content{
                color: deeppink;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h1>제목1</h1>
        <p id="content">제목에 따른 내용(문단)입니다.</p>
    </body>
</html>
cs

결과)


3. 외부의 .css 파일 연결하는 방식

- 해당파일 안이 아니라 별도의 .css 파일을 생성해 <link>태그로 연결하는 방식이다.


예시)

.css 파일

1
2
3
4
5
6
7
8
9
10
11
12
.sub,#content{
    color: yellow;
}
.sub{
    background-color: tomato;
}
#content{
    font-size: 50px;
}
strong{
    color: blueviolet;
}
cs

.html 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <link href="ex01.css" type="text/css" rel="stylesheet" />
        
    </head>
    <body>
        <h1 class="sub">제목1</h1>
        <h1>제목2</h1>
        <h1 class="sub">제목3</h1>
        <h1>제목4</h1>
        
        <p class="sub">내용 작성123</p>
        <p id="content">제목에 따른 <strong>내용(문단)</strong> 입니다.</p>
    </body>
</html>
 
cs

(파일이 다르다)

결과)


* 지시자

# : id 이름

. : class 이름



저작자표시 비영리 변경금지

'* Programming > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 블럭/인라인 블럭의 차이와 설정 오버라이드  (0) 2016.09.22
[HTML/CSS] 마우스 올렸을 경우,클릭하고있는 경우,클릭 후  (0) 2016.09.22
[HTML]Form(input, select, checkbox, radio)  (0) 2016.09.06
[HTML]table만들기  (0) 2016.09.06
[HTML]이미지 불러오기 / 이동하기  (0) 2016.09.06

+ Recent posts

티스토리툴바