따라하며 배우는 HTML - #7 ( Internal CSS )

HTML Style - Internal CSS

안녕하세요 오늘은 저번시간에 이어 스타일에 대해서 조금 더 알아보도록 하겠습니다. 

Style 은 태그 안에서 사용되는 Inline CSS와 문서의 head 부분에서 <style></style>사이에 정의 되는 Internal CSS 그리고 외부 문서에 별도로 저장되어지는 External CSS 로 구분되어 집니다. 이중에서 오늘은 저번시간에 배운 Inline CSS 를 복습하고 Internal CSS 를 배워보는 시간을 갖겠습니다.

먼저 실습영상을 보도록 하겠습니다.

이전 시간 내용을 복습해보는 시간을 가져봅니다.

리스트 태그 내에서 style 속성을 사용하여 글자의 색상을 변경해 보았습니다.

이전 시간의 내용을 확인해보시려면 

2018/10/07 - [Program/HTML] - 따라하며 배우는 HTML - #6 ( HTML Style)

을 참고하시면 됩니다.  

문서의 head 부분에서 아래와 같이 소스코드를 삽입하면

        <style>

            body { background-color: powderblue }

            h1 { color: red }

            p { background-color: green; color: white}

        </style>

문서의 내용이 변경되어지는 걸 보실 수 있습니다. 

소스를 분석해볼까요..? <style> ... <style> 은 문서의 스타일입니다.

body 는 문서내에 있는 body태그 입니다. background-color (배경색) 을 powderblue (파우더블루) 로 줍니다.

h1 태그는 글자의 색상을 빨강으로 p 태그는 배경색을 녹색으로 글자는 흰색으로 지정해 줍니다  

<style>

태그 { 속성(property) : 속성값(value) }

</style>

Internal CSS 사용하는 방법 이제 아시겠죠 ^^

눈으로만 보는 것보다 한번씩 작성해 보시면 더 이해하기 쉽습니다. 오늘도 즐거운 코딩 시간 되세요 ~