HTML에 CSS 적용

HTML에 CSS 적용

HTML에 CSS를 적용하는 세 가지 방법이 있다: inline, 내장, external 스타일 시트이다. 특별한 이유가 없으면 external 스타일 시트를 사용한다. 그 이유는 곧 알게 될 것이다. 우선 다른 옵션들을 검토해 보자.

Inline 스타일

style 속성을 사용하여 특정 요소에 스타일을 적용할 수 있다. 다음과 같다:

이 속성 안에 모든 CSS 속성과 값을 적을 수 있다. (각각의 속성/값 쌍은 세미콜론으로 구분되고, 각각의 속성과 값은 콜론으로 구분된다). Try viewing the source of this example을 참조하자.

브라우저에서 이 예제를 열면,If you open this example in a browser you will see that the paragraph with the style 속성이 흰색 텍스트에 파랗고, 크기가 다른 것과 다른 문단을 볼 것이다. 그림 1과 같다.

Screenshot of the Opera browser showing an applied inline style sheet

그림 1: 오페라에서 인라인 스타일 적용된 문단은 다른 것과 다르게 보인다.

inline 스타일의 장점은 브라우저에서 이 설정을 사용하려고 한다는 점이다. 다른 스타일 시트 또는 문서의 <head>에 내장된 어떤 스타일 시트도 이 스타일 시트에 의해 덮어 씌워진다.

큰 단점은 유지보수가 어렵다는 점입니다. CSS를 사용하면 문서의 구조와 표현방식이 구분되지만, inline 스타일은 반대로 하고 있는 것이다 – 문서 전체의 표현 규칙을 분산시킨다.

유지보수 문제 뿐만 아니라, CSS의 가장 강력한 수단( the cascade, 종속형시트)을 사용할 수 없다. cascade 개념은 나중에 상세히 논의된다. 그러나 지금 알아야 할 것은 cascade를 사용한다는 것은 한 곳에서 형태나 느낌(a look and feel)을 정의하면 브라우저는 특정 규칙을 적용하는 모든 요소에 그 형태나 느낌을 적용한다는 의미이다.

내장(내장) 스타일

내장 스타일은 문서의 <head> <style> 요소 안에 설정된다. as in this example 참조:

브라우저에서 위 링크 예제를 열면, 문서에 있는 모든 문단에 정의된 스타일이 적용된 것을 볼 수 있다. 그림 2에서 볼 수 있다. head 안에 있는 CSS를 보려면 예제 페이지의 소스를 참조하자.

Screenshot of the Opera browser showing how an 내장 style sheet affects a lot of elements

그림 2: 오페라는 내장 스타일 시트로 정의된 스타일을 가진 모든 문단을 보여준다.

내장 스타일의 장점은 각 단락마다 스타일 속성을 추가할 필요가 없다는 점이다 – 한번만 정의하면 모두 스타일을 적용할 수 있다. 이는 모든 단락의 형태와 느낌을 바꾸고자 한다면, 한 곳만 변경하면 된다는 의미이다. 그러나 아직 한 문서에만 적용된다 – 한 번에 모든 사이트의 단락 형태를 정의하고자 한다면 어떨까? 이를 위해 외부 스타일 시트를 사용한다.

외부 스타일 시트

외부 스타일 시트는 개인 파일에 모든 CSS 정의를 하는 것을 의미한다. .css 확장자로 저장된다. 그리고 문서 <head> 안에 <link> 요소를 사용하여 HTML 문서에 적용한다. example page를 참조하고, <head>external CSS file을 참조하는, <link> 요소가 포함되어 있는 것에 주목하자. 그리고 외부 CSS 파일에 정의된 스타일이 HTML에 적용된 것을 확인하자. <link> 요소를 자세히 보자:

이 과정 앞에서 <link> 요소에 대해 논의하였다. 요점은: href 속성 CSS 파일을 가리키고, media 속성은 어떤 media에 이 스타일이 적용되는지를 정의한다 (이 예에서는 이와 같이 인쇄하기를 원하지 않기 때문에 (screen이다). type은 링크된 대상이 어떤 것인지를 정의한다 (파일 확장자는 이것을 정의하기에 불충분하다).

Screenshot of the Opera browser showing how an external style sheet affects a lot of elements

그림 3: 오페라는 링크 요소를 가지고 링크되었을 때, 외부 스타일 시트로 정의된 스타일을 보여준다.

이것은 세계에서 최고이다: 하나의 파일로 모양과 느낌을 정의한다. 이것은 하나의 파일을 변경하여 전체 사이트를 변경할 수 있다는 의미이다. 그리고 브라우저는 이것을 한 번 로드하고, 그것을 참조하는 모든 문서들 위해 캐시할 수 있다. 다운로드를 덜 하게 된다.

@스타일 시트 가져오기

HTML 파일로 외부 스타일 시트를 가져오는 다른 방법이 있다 – @import 속성. 이것은 내장 스타일 시트에 삽입된다. 위에서 보여준 내장 CSS와 같은 방법이다. 구문은 다음과 같다:

때때로 import 문은 괄호 없이 작성되지만, 같은 목표를 달성한다. 인식해야 할 또 다른 것은 이 @import는 항상 내장 스타일 시트에서 처음에 있어야 한다는 점이다. 마지막으로, 가져온 스타일 시트는 가져 오기 문의 끝 부분에 미디어 유형을 포함하여, 특정 유형의 미디어에만 적용할 것을 지정할 수 있다 (IE6 이하 버전을 제외한 모든 브라우저에서 작동). 다음은 이전 코드 예제와 같은 일을 한다 :

궁금한 첫 번째 질문은 “도대체 왜 HTML 문서에 외부 스타일 시트를 적용하기 위한 다른 방법이 필요한가?”이다. 그렇다, 실제로 필요 없다 – 완벽하게 하기 위해 여기에서 @import 정보를 소개하고 있다. <link>대신 @import 요소를 사용하면, 몇 가지 사소한 장점/단점이 있다. 그러나, 그것들은 매우 사소하다. 그래서 어떤 방법을 사용하는 가는 당신에게 달려 있다. 요즘 <link> 요소는 일을 하기 위해 인정받는 최선의 방법이다.

  • 이전 브라우저는 @import를 전혀 인식하지 못하므로 완전히 무시한다 (Netscape 4 이전 버전, IE 4 이전 버전에서 파일 이름 주위에 괄호를 생략하면), 그러므로 오래된 버그가 있는 브라우저(이것들을 부정확하게 사용하는)에서 스타일을 숨기기 위해 @import문을 사용할 수 있다. 외부 스타일 시트에 최신 스타일을 설정하고 @import문으로 가져올 수 있다. 그러면 기본 스타일이 적용된다. 외부 스타일 시트로 IE/Netscape 4를 망치게 하지 않을 것이다. 이 방법은 유용하지만, 요즘 IE/Netscape 4와의 호환성을 확보할 필요가 거의 없다!
  • 앞에서 언급했듯이, IE6는 @import 행 끝에 media 유형 설정을 지원하지 않는다. 그래서 다른 미디어를 위해 여러 개의 스타일 시트를 삽입하려는 경우, 좋은 방법이 아니다.
  • 여러 개의 @import 문을 위한 코드가 여러 개의 <link> 요소를 위한 코드 보다 더 적다고 주장할 수 있다. 그러나 이것은 무시할 수 있다.

답글 남기기