본문 바로가기
WEB/CSS

[HTML/CSS] CSS 스타일 적용

by 겅아링 2020. 8. 14.
반응형

인라인스타일

: 태그속에 속성으로 스타일 적용

<!DOCTYPE html>
<html>
    <head>
        <title>처음으로 만든 페이지</title>
    </head>

    <body>
       <h1 style="background-color: deepskyblue;">Hello HTML5</h1>
    </body>
</html>

 

결과)

 

 

 

 

 

 

내부 스타일시트

: HTML 내부에서 style태그를 사용해 스타일 시트를 직접 입력해서 적용

<!DOCTYPE html>
<html>
    <head>
        <title>처음으로 만든 페이지</title>
        <style>
            h1{
                background-color: deeppink;
            }
        </style>
    </head>

    <body>
        <h1>Hello HTML5</h1>
    </body>
</html>

결과)

 

 

 

 

외부 스타일시트

: 스타일시트를 생성해(.css) link 태그를 사용해 href 속성으로 불러와 적용 

<!-------------- HTML -------------->
<!DOCTYPE html>
<html>
    <head>
        <title>처음으로 만든 페이지</title>
		<link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <h1>Hello HTML5</h1>
    </body>
</html>

 

/* ------------ CSS ------------ */
h1 {
	color: white;
	background: black;
}

 

결과)

 

반응형

'WEB > CSS' 카테고리의 다른 글

[CSS] box-sizing  (0) 2020.09.03
[CSS] reset.css  (0) 2020.09.02
[CSS]텍스트에 줄 긋기  (0) 2020.09.02
[HTML/CSS]네이버 메인화면 무작정 따라 만들어보기(레이아웃잡기 연습)  (0) 2020.08.17
[HTML/CSS] 로그인 폼 만들기  (0) 2020.08.16