HTML CSS 적용 방식

CSS(Cascading Style Sheets)
CSS는 Cascading Style Sheets 을 줄인말이다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다. 또한 CSS는 한 번에 여러개의 작업을 하여 별도의 파일로 저장해서 한 번에 여러 웹 페이지의 레이아웃에 사용될 수 있다.

HTML 문서에 CSS를 표현하는 방법은 아래 3가지로 정해져 있다.

  • 인라인 스타일(Inline style) : HTML 요소에 style 속성 사용.
  • 내부 스타일 시트(Internal style sheet) : HTML 문서의 <head> 태그 내에 <style> 요소를 사용.
  • 외부 스타일 시트(External style sheet) : 외부 .css 파일 생성해서 불러와서 사용.

※CSS를 추가하는 가장 일반적인 방법은 별도의 CSS 파일에 스타일(style) 속성을 사용하는것이다. 인라인 및 내부 스타일 시트를 사용할 수 있고, 이렇게 적용된 CSS 파일을 불러와서 사용하면 더욱 쉽다.

인라인 CSS(Inline style)

인라인 CSS는 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다. 이러한 인라인 css는 해당 요소에만 스타일을 적용할 수 있다.

다음 예제를 보면 <h1> 요소의 텍스트 색을 파란색으로 설정한 모습이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML 인라인 CSS</title>
</head>

<body>
<h1 style="color:blue;">인라인 CSS 파란색으로 표현</h1>
</body>

</html>

내부 CSS(Internal style sheet)

내부 CSS 를 이용한 방법은 HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여 CSS를 지정하는 것이다. 이러한 내부 CSS는 해당 HTML 문서에만 스타일을 적용할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML 내부 CSS</title>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

<body>
<h1>파란색으로 표현한 내부 CSS 예제</h1>
<p>빨간색으로 단락을 표현한 내부 CSS 예제</p>
</body>

</html>

외부 CSS(External style sheet)

외부 CSS를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다. 스타일을 적용할 모든 웹 페이지의 <head> 태그 내에 <link> 태그를 사용하여 외부 CSS를 포함하면 된다.

styles.css 파일 생성

예제1

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

예제2

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML 외부 CSS</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>파란색으로 표현한 외부 CSS 예제</h1>
<p>빨간색으로 단락을 표현한 외부 CSS 예제</p>
</body>

</html>

※외부 css 파일을 생성하기 위해서는 메모장(notepad)와 같이 텍스트 편집기를 열어서 html 코드가 없어야 되며, 꼭 .css 확장자를 저장해야 된다.

외부 CSS 적용하는 일반적인 예

외부 스타일 시트는 전체 URL 주소, 웹 사이트의 html 폴더 경로, 현재 웹 페이지의 같은 경로에서 참조할 수 있다.

외부 URL

<link rel="stylesheet" href="https://www.itopening.com/html/styles.css">

현재 웹사이트내의 html 폴더

<link rel="stylesheet" href="/html/styles.css">

현재 페이지의 같은 폴더

<link rel="stylesheet" href="styles.css">

CSS 적용 우선 순위

CSS 스타일 적용 방법들을 혼합하여 사용할 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.

인라인 CSS > 내부 / 외부 CSS > 웹 브라우저 기본 스타일

예를 들어 인라인 CSS가 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 CSS가 적용된다. 또한, 내부 CSS와 외부 CSS는 가장 마지막에 적용된 CSS가 적용된다.

CSS 글꼴(Fonts)

CSS color 속성은 사용할 텍스트 색상을 정의한다.
CSS font-family 속성은 사용할 글꼴을 정의한다.
CSS font-size 속성은 사용할 텍스트 크기를 정의한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML CSS 글꼴</title>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>

<body>
<h1>css사용하여 글자 크기 및 색깔을 변경하였다.</h1>
<p>css사용하여 글자 크기 160%와 색깔을 변경하였다.</p>
</body>

</html>

CSS 테두리(Border)

CSS border 속성은 HTML 요소 주위에 테두리를 정의한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML CSS 테두리</title>
<style>
p {
  border: 1px solid powderblue;
}
</style>
</head>

<body>
<h1>CSS 테두리 변경</h1>
<p>CSS 테두리를 적용한 모습1.</p>
<p>CSS 테두리를 적용한 모습2.</p>
<p>CSS 테두리를 적용한 모습3.</p>
</body>

</html>

CSS 패딩(Padding)

CSS padding 속성은 텍스트와 테두리 사이의 여백(공백)을 정의한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML CSS 패딩</title>
<style>
p {
  border: 1px solid powderblue;
  padding: 30px;
}
</style>
</head>

<body>
<h1>CSS 패딩</h1>
<p>CSS 패딩을 적용한 모습1.</p>
<p>CSS 패딩을 적용한 모습2.</p>
<p>CSS 패딩을 적용한 모습3.</p>
</body>

</html>

CSS 여백(Margin)

CSS margin 속성은 경계 외부의 여백(공백)을 정의한다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML CSS 여백</title>
<style>
p {
  border: 1px solid powderblue;
  margin: 50px;
}
</style>
</head>

<body>
<h1>CSS 여백</h1>
<p>CSS 여백을 적용한 모습1.</p>
<p>CSS 여백을 적용한 모습2.</p>
<p>CSS 여백을 적용한 모습3.</p>
</body>

</html>

id 속성(Attribute)

id 속성은 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용 된다. 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해주는 것이다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML id 속성</title>
<style>
#p01 {
  color: blue;
}
</style>
</head>

<body>
<h1>id 속성</h1>
<p>일반적인 html 문서</p>
<p id="p01">id 속성을 적용한 html 문서</p>
</body>

</html>

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다. 하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다. 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.

클래스 속성(Class Attribute)

클래스 속성은 특정 집단의 여러 요소를 한 번에 선택할 때 사용된다. 이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 준다.

예제

<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<title>HTML 클래스 속성</title>
<style>
.cla {
  color: red;
}
</style>
</head>

<body>
<h1>class 속성</h1>
<p>일반적인 html 문서</p>
<p class="cla">class 속성을 적용한 html 문서</p>
</body>

</html>

HTML 스타일 태그(style tag)

태그내용
<style>HTML 문서의 스타일 정보를 정의
<link>문서와 외부 리소스 간의 연결을 정의

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다