css 파일을 이용해 외부 스타일로 적용하면 하나의 스타일 파일을 이용하여 여러 웹페이지에 똑같이 사용할 수 있다. 이것은 개발의 편의성을 높이고 정규화된 css 스타일 파일을 이용해 수정의 횟수를 줄이는데 있다. 보다 근본적인 목적이 있다면 전체적인 웹사이트의 디자인 통일하는데 있기도 하다.
html css 외부 스타일 적용 사용 방법
using html css external style
css 스타일 파일을 외부로 분리하는 것은 여러모로 편리하다.
다른 html 파일에서도 사용할 수 있으며, 웹사이트의 통일화를 할 수 있다.
통일화는 하나의 css 스타일을 이용해 부수적인 작업을 줄일 수 있다.
즉, 모든 웹페이지에 대해 수정을 할 필요 없이 하나의 css 스타일 파일의 내용만 수정하면 전체 웹사이트에 반영이 되는 것이다.
css 외부 스타일 적용 방법
외부 스타일 적용은 css 스타일 파일을 별도로 만들어 웹페이지에서 불러들이는 방식을 말한다.
인라인 스타일로 웹사이트의 스타일을 지정하면 인터널 내부 스타일 정의 방식으로 웹페이지의 스타일을 지정할 수 있다.
하지만, 이 방식은 웹페이지당 하나씩 적용되기 때문에 매번 수정을 해야 할 불편이 있다.
인터널 내부 스타일 지정 방식의 스타일 코드를 별도의 파일로 분리하면 그만이다.
아래는 css 스타일 파일을 웹페이지에서 불러오는 적용 방법이다.
<head>
<link rel="stylesheet" href="css_스타일파일.css">
</head>
샘플코드
이제 css 스타일 파일을 만들고 웹페이지에서 불러오는 html 예제를 만들어 본다.
아래는 css 스타일 파일에 들어갈 스타일 코드이다.
이전의 css 인터널 내부 스타일 지정 방식의 코드를 그대로 파일로 만들면 된다.
p {
background-color:#ff0000;
color:#000000;
font-weight: bold;
}
#tagid {
background-color:#00ff00;
color:#000000;
font-weight: bold;
}
.tagclass {
background-color:#0000ff;
color:#ffffff;
font-weight: bold;
}
위의 스타일 코드를 css 파일로 만들었다면, 아래와 같이 웹페이지에서 css 스타일 파일을 불러오면 된다.
스타일 파일을 불러올 때는 link 태그를 사용한다.
여기서는 위의 코드를 이용하여 testStyle.css 파일명으로 만들어 주었다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<link rel="stylesheet" href="testStyle.css">
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<!-- 제목입니다 -->
<h2>
html css 표현<br/>
</h2>
<!-- // -->
<!-- 문서 내용 -->
<p>
태그명으로 지정
</p>
<p id="tagid">
id 선택자 지정
</p>
<p class="tagclass">
class 선택자 지정
</p>
<!-- // -->
</div>
</body>
<!-- // -->
</html>
<!-- // -->
이전에 사용했던 코드와 별 차이가 없다.
내부 스타일 지정 방식의 style 태그에 있던 코드를 외부 파일로 분리한 것 뿐이다.
내부 스타일 지정 방식에 대한 내용은 아래를 참고해 본다.
이제 결과 화면을 보자.
css 스타일 파일을 외부로 분리하였지만 내부 스타일 정의를 사용한 것과 결과는 같다.
스타일 파일을 굳이 외부로 분리하는 목적이 있다면 정규화된 하나의 파일을 다른 곳에서도 사용하면서 개발의 편의성을 높이는데 있다.
'programming > web' 카테고리의 다른 글
html css 테두리 선과 마진 패딩 차이 html border margin padding (0) | 2022.04.25 |
---|---|
html css 글자 폰트 스타일 지정 방법 using html font style (0) | 2022.04.23 |
html css 적용 내부 스타일 정의 사용 방법 using html css internal style (0) | 2022.04.18 |
HTML CSS inline 스타일 적용 태그에 직접 스타일 지정하는 방법 using html css inline style (0) | 2022.04.16 |
html에 css 적용하는 3가지 방법 adding css style to html (0) | 2022.04.13 |
댓글