프로그래밍/CSS
02 CSS 적용( 인라인,내부,외부 스타일)
윤지(●'◡'●)
2021. 4. 24. 20:22
반응형
CSS 적용
HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다.
1. 인라인 스타일(Inline style)
2. 내부 스타일 시트(Internal style sheet)
3. 외부 스타일 시트(External style sheet)
1) 인라인 스타일(Inline style)
인라인 스타일은, HTML 요소 내부에 style 속성을 사용하여 적용하는 방법이다.
<p style = "text align: center; color: red;">인라인 스타일</p>
이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다.
따라서 꼭 필요한 경우에만 사용해야 한다.
2) 내부 스타일(Internal style sheet)
HTML 문서의 <head> 요소에<style>요소를 사용하여 적용하는 방법이다.
<head>
<title>CSS란</title>
<style>
h2 { text-align: center; font-size: 50px; color: #FFA7A7;}
p { text-align: center;}
</style>
</head>
3) 외부 스타일(External style sheet)
웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장된다.
스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여
외부 스타일 시트를 포함해야만 스타일이 적용된다.
<head>
<title>외부 스타일</title>
<link href="./css/style.css" rel="stylesheet" type="text/css">
<!-- rel는 링크 태그랑 연결된 파일이 어떤 역할을 하는지 적는것-->
</head>
[style.css]
h2 { font-size: 50px;}
p { font-size: 20px;}
ul { list-style-type: none; color: rgb(196, 145, 255);}
li { display: inline-block; margin-right: 20px; font-weight: bold;}
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
반응형