2.2 필요한 HTML 태그 내에 직접 CSS 코드 입력 방법
필요한 HTML 태그 내에 직접 CSS 코드를 입력하는 방법은 스타일을 적용할
해당 HTML 태그 내에 style 속성을 이용하여 직접
스타일을 기술하는 방법으로 HTML 문서는 다음과 같은 구조로 되어 있습니다.
<!DOCTYPE
HTML>
<html>
<head>
<title><head>필요한 HTML 태그 내에 직접 CSS 코드 입력 방법</title>
</head>
<body>
<HTML태그이름 style=”CSS 코드”></HTML 태그이름>
…
<HTML태그이름
style=”CSS 코드”></HTML 태그이름>
</body>
</html>
위와 같은 구조를 참고하여 방금 전 “withheadTag.html”의 스타일 적용 결과와 동일하게 결과화면을 보려고 합니다. 이를 위해 메모장을 열어서 위와 같은 구조로 코드를 작성하고 <body> 태그 안에 다음과 같이 코드를 작성하면 됩니다.
<body style="background-color: yellow">
<strong
style="font-weight: bolder; font-size:20px">CSS</strong>를 이용하는 방법<br/>
<p
style="margin-left:20px">여러분들이 CSS를
웹 페이지에 적용하는 방법은 <head> 태그
블록 내에 직접 CSS 관련
코드를 입력하는 방법, 필요한 HTML 태그 내에 직접 CSS 코드를
입력하는
방법, 마지막으로 파일 확장자가 .css로 끝나는 외부 파일에 CSS 코드를 작성,
저장한 후 이를 웹 페이지에서 참조하여 CSS에 정의된 대로 스타일을 적용하는 방법으로
나눌 수 있습니다.</p>
</body>
작성이 완료되었으면
“inlineStyle.html”로 저장한 후 IE9를 통해
확인하면 withheadTag.html의 스타일 적용 결과와 동일하게 결과화면을 볼 수 있게 됩니다.
이와 같이 필요한 HTML 태그 내에 직접 CSS 코드를
입력하는 방법은 필요에 따라 직접 스타일을 적용하는 것이 편리해보입니다. 위의 간단한 코드에서 보는
것처럼 HTML 코드와 CSS 코드가 뒤섞여서 코드에 대한
가독성도 떨어지고 웹페이지의 디자인과 내용을 분리하여 처리하는 일반적인 원칙에도 잘 맞지 않는 단점을 노출합니다.
2.3 외부 파일(.css) 형태로 외부 파일에 CSS 코드 입력 방법
외부 파일(.css) 형태로 외부 파일에 CSS 코드 입력 방법은 웹사이트에
가장 일반적으로 사용되는 스타일을 적용할 때 사용하는 방법으로 다수의 웹페이지가 존재하고 스타일을 적용할 양이 많을 때 사용하는 방법으로 파일
확장자가 .css인 파일에 CSS 코드를 입력하여 다수의
웹페이지에 필요한 스타일을 반복하여 적용시키는 아주 용이하며 사용하는 일반적인 HTML 문서는 다음과
같은 형태로 사용합니다.
이제 외부 .css 파일을 이용하여 “withheadTag.html”의 스타일 적용 결과와 동일하게 나타나도록 하기 위해서 메모장을 열어서 다음과 같이 코드를 작성합니다.
</head>
<body>
<strong>CSS</strong>를 이용하는 방법<br/>
<p>여러분들이
CSS를 웹 페이지에 적용하는 방법은 <head> 태그 블록 내에 직접 CSS
관련 코드를 입력하는 방법,
필요한 HTML 태그 내에 직접 CSS 코드를
입력하는 방법,
마지막으로 파일 확장자가
.css로 끝나는 외부 파일에 CSS 코드를 작성, 저장한
후 이를
웹 페이지에서 참조하여
CSS에 정의된 대로 스타일을 적용하는 방법으로 나눌 수
있습니다.</p>
</body>
</html>
위와 같이 작성한
후 “usingexterncss.html”로 저장합니다. 그
다음 위에서 사용한 외부 .css 파일로 “bodystrongp.css”로
정의해주었으므로 메모장에서 새 파일을 선택하여 다음과 같이 코드를 작성합니다.
body {background-color: yellow}
strong {font-weight: bolder;
font-size:20px }
p { margin-left:20px}
작성이 완료되었으면 “bodystrongp.css”로 저장합니다. 마지막으로 확인하는 일만 남았습니다. IE9를 이용하여 “usingexterncss.html”을 열어보면 withheadTag.html의
스타일 적용 결과와 동일하게 결과화면을 볼 수 있게 됩니다.
이상으로 여러분들이 웹 페이지의 스타일을 적용하는데 사용하는 CSS를 웹 페이지에 어떻게
적용할 수 있는지 3 가지 방법으로 설명하였습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 4. CSS에서 사용되는 수치(Measurements) (0) | 2013.08.04 |
|---|---|
| 3. CSS 적용 우선 순위 (2) | 2013.08.04 |
| 2. CSS를 이용하는 방법 3 가지 (0) | 2013.08.04 |
| 1.8 모든 요소(Element)를 포함하는 선택자(Selector) 구성과 규칙(Rule) 만들기 (0) | 2013.08.01 |
| 1.7.4 일반적인 형제(General Sibling) combinator (0) | 2013.08.01 |
