HTML에 CSS 적용하기
안녕하세요 열코입니다.
이번시간에는 CSS를 HTML에 적용하는 방법에 대해 알아보겠습니다.
☞ CSS란?
종속형 시트라고 불리며 Cascading Style Sheet의 줄임말입니다.
HTML이 뼈대면 CSS는 이 뼈대에 살을 붙이는 작업이라고 볼 수 있습니다. HTML을 꾸미는 작업이죠.
CSS는 HTML 또는 XHTML에 주로 사용되며 XML에서도 사용 할 수 있습니다.
레이아웃과 스타일의 자유도가 높아 현재 여러 언어에서 다양하게 사용되고 있습니다.
그럼 이 CSS를 HTML에 적용하는 방법에 대해 소개 해 드릴게요.
여러가지 방법이 있지만 이번 시간에는 3가지 방법 정도로 소개 해 드리겠습니다.
1. 인라인 방식
HTML에서 p 태그는 paragraph의 약자로 문단을 표현하는데 사용됩니다.
이 p 태그의 style 속성으로 간단하게 스타일을 변경 할 수 있습니다.
한, 두줄 정도의 간단한 스타일을 지정해 줄 때 간단하게 코드로 작업 하기에 편리합니다.
아래의 예제 코드 처럼 인라인 방식으로 스타일을 변경 해 보겠습니다.
myhtml.html
<!DOCTYPE HTML>
<html>
<body>
<p style="color:blue;">열코의</p>
<p style="color:red;"> 프로그래밍</p>
<p style="background-color:yellow;">일기</p>
</body>
</html>
☞ 실행 결과
2. 내부 스타일 시트 방식
두번째는 내부 스타일 시트 방식인데요. 이 방식은 head 부분에 스타일을 직접 정의해주고
해당 스타일 태그를 본문의 p 태그에서 id 속성으로 불러와 사용하는 방식입니다.
아래에 예제 코드와 실행 결과를 확인 해 볼까요?
myhtml2.html
<!DOCTYPE HTML>
<html>
<head>
<style>
#style1 {
color:yellow;
background-color:black;
}
#style2 {
color:red;
}
#style3 {
background-color:green;
color:white;
}
</style>
</head>
<body>
<p id=style1>열코의</p>
<p id=style2> 프로그래밍</p>
<p id=style3>일기</p>
</body>
</html>
☞ 실행 결과
3. 외부 스타일 시트 방식
마지막으로 가장 자주 사용되는 방식인 외부 스타일 시트 방식입니다.
이 방식은 css파일을 별도로 작성하여 css파일로 저장한 후 import를 사용하여 불러오는 방식입니다.
스타일을 정의해 두면 언제 어디서나 사용 가능한 장점이 있습니다.
현재 티스토리 블로그 스킨도 이런 방식으로 작성 되어있습니다.
본인의 티스토리 블로그에서 블로그 관리 - 스킨 편집 - html 편집에 들어가면 확인 할 수 있습니다.
아래의 예제 코드와 실행 결과를 한번 확인 해 봅시다.
myhtml3.html
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
@import url("mycss.css");
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id=style1>열코의</p>
<p id=style2> 프로그래밍</p>
<p id=style3>일기</p>
</body>
</html>
mycss.css
#style1 {
color:green;
font-size:30px;
}
#style2 {
color:red;
font-weight:bold;
}
#style3 {
background-color:blue;
color:white;
}
☞ 실행 결과
이상 'HTML에 CSS 적용하기'에 대해 알아보았습니다.
질문 또는 오타나 잘못된 정보가 있는 경우 댓글로 달아주세요!
공감♡ 버튼을 눌러주시면 더욱 유용하고 좋은 포스팅으로 찾아 뵙겠습니다.
'HTML, CSS, JS' 카테고리의 다른 글
| 자바스크립트 스크롤 멈춤 이벤트 (0) | 2019.04.07 |
|---|---|
| JavaScript String substring() Method : 자바스크립트 문자열 자르기 (0) | 2019.03.25 |
| css로 텍스트 ... 처리하기 - 고정, 가변 길이 element (0) | 2019.03.25 |
| Javascript에서 $ 기호는 뭘까? (1) | 2019.03.24 |
| [프론트엔드 개발자] ECMAScript란? (0) | 2019.03.20 |
| HTML div 태그 사용법 (0) | 2018.11.13 |
| Atom Editor 설치 (0) | 2018.10.01 |
| HTML 기본 문법 (3) | 2018.09.30 |
