Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

3일만에 끝내는 HTML, CSS, JS 기초

h07. HTML CSS 스타일 본문

HTML

h07. HTML CSS 스타일

눈의나라북범 2016. 6. 5. 15:27

HTML CSS 스타일

CSS 는 Cascading Style Sheets 의 두문자어 입니다.

HTML 태그에 스타일을 적용할 수 있는 스타일 모음이라고 생각할 수 있겠습니다.

HTML 태그에 스타일을 적용하는 방법은 3가지가 있습니다.

	1. 태그내(인라인) : HTML 태그 내에 직접 스타일 속성을 사용하는 방법
	2. 페이지 내부(인터널) : <head> 영역에  <style> 태그를 넣어 사용하는 방법
	3. 페이지 외부(익스터널) : 별도의 CSS 파일을 외부에 두고 사용하는 방법

가장 일반적인 방법은, 별도의 CSS 파일에 스타일을 적어놓고 사용하는 방법입니다.

CSS 에 대해 더 상세한 정보는 CSS 강의 편에서 설명합니다.

여기서는 가장 기본적인 내용만 설명합니다.
먼저, 인라인 스타일의 경우 각각의 하나의 HTML 태그에 직접 적용합니다.

인라인 스타일은, 스타일 속성을 사용합니다.

<h3> 태그내의 글자의 색깔을 청색으로 바꾸는 예제입니다.


<h3 style="color: blue;">청색 머리글 입니다.</h3>

청색 머리글 입니다.

두번째로, 인터널 스타일은 해당 HTML 페이지내에만 적용됩니다.

인터널 스타일은 <head> 영역에, <style> 태그를 추가하고 그 안에 스타일을 정의합니다.


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>

<h1>여기에 머리글을 적고</h1>
<p>여기 내용을 적는데, 위에 정의한 스타일이 적용됩니다. 
단, tistory.com 사이트에서는 그 사이트 자체의 css 파일도 적용되므로, 
이 예제에서는 위의 스타일이 정확히 적용되지는 않을 수 있습니다.</p>

</body>
</html>

여기에 머리글을 적고

여기 내용을 적는데, 위에 정의한 스타일이 적용됩니다. 단, tistory.com 사이트에서는 그 사이트 자체의 css 파일도 적용되므로, 이 예제에서는 위의 스타일이 정확히 적용되지는 않을 수 있습니다.

익스터널 스타일의 경우에는 여러 페이지에서 사용할 수 있습니다.

스타일 하나만 바꾸면 전체 웹사이트의 외관을 한꺼번에 바꿀 수 있습니다.

익스터널 스타일을 사용하려면 영역에 스타일 파일의 링크를 추가하면 됩니다.


<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


여기서는 예제를 생략하였습니다만, 두번째의 인터널 스타일과 결과는 동일합니다.
스타일 시트도 사실 아무 텍스트 편집기로도 작성할 수 있습니다. 

다만, 저장할 때 파일이름은 .css 의 확장자로 저장되어야 합니다.

아래는 위 예제에서 링크된 "styles.css" 파일의 예제입니다.

.css 파일을 텍스트 편집기로 열어보면 아래와 같은 스타일 들이 지정된 것을 볼 수 있을 것입니다.


body {background-color: lightgrey;}
h1 {color: blue;}
p {color:green;}
CSS 컬러 속성은 글자의 색상을 지정합니다.

CSS font-family 속성으로 글꼴을 지정합니다.

CSS font-size 속성은 텍스트 크기를 지정합니다.


<!DOCTYPE html>
<html>
<head>
<style>
h3 {
 color: blue;
 font-family: verdana;
 font-size: 300%;
}
h4 {
 color: red;
 font-family: courier;
 font-size: 160%;
}
</style>
</head>
<body>

<h3>여기 머릿글 h3</h3>
<h4>여기 머릿글 h4</h4>

</body>
</html>

여기 머릿글 h3

여기 머릿글 h4

모든 HTML 태그들은 박스에 둘러싸여 있습니다만 보이지 않습니다.

CSS border 속성으로 HTML 태그 주위로 테두리를 보이게 할 수 있습니다.


<style>
p#myBorder{border: 1px solid black;}
</style>

<p id="myBorder">p 태그 주위에 테두리를 보이게 하였습니다.</p>

p 태그 주위에 테두리를 보이게 하였습니다.

CSS padding 으로 박스내에 패딩(여백)을 줍니다.


<style>
p#myPadding{
border: 1px solid black;
padding: 10px;
}
</style>

<p id="myPadding">p 태그 주위에 테두리 및 패딩 즉, 테두리와 텍스트 사이에 여백을 추가하였습니다.</p>

p 태그 주위에 테두리 및 패딩 즉, 테두리와 텍스트 사이에 여백을 추가하였습니다.

CSS margin 속성으로 테두리 바깥으로 마진(공간)을 줍니다.


<style>
p#myMargin{
border: 1px solid black;
padding: 10px;
margin: 30px;
}
</style>

<p id="myMargin">p 태그 주위에 테두리, 패딩 그리고 마진 즉, 테두리 바깥쪽에 여백도 추가하였습니다.</p>


위의 예에서 px 를 사용하였는데, 화면의 각 화소 즉, 픽셀 단위의 크기를 의미합니다.

p 태그 주위에 테두리, 패딩 그리고 마진 즉, 테두리 바깥쪽에 여백도 추가하였습니다.

위의 예제에서 p 태그 내에 id 는 여러개의 p 태그가 있을 경우, 해당 id 에만 지정된 스타일을 적용하기 위해 사용하였습니다.

즉, 특정 태그 한개에만 스타일을 정의하려면, 먼저 태그내에 id 속성을 줍니다.


<p id="p01">같은 p 태그라도 id 에 따라 스타일이 달라집니다.</p>


그 다음에 각각의 id 별로 스타일을 지정합니다. #은 id 표시입니다.


p#p01 {
    color: blue;
}
태그에 스타일을 특정한 타입(클래스)별로 지정하려면, class 속성을 태그에 줍니다.


<p class="myRedFont">myRedFont 라는 클래스를 갖는 모든 p 태그들은 글자 색이 빨강으로 보일 것입니다.</p>


이제 특정한 클래스를 갖는 모든 태그 들에 대해 아래 예와 같이 스타일을 지정할 수 있습니다.

"#" 이 id를 의미하였듯이 "." 은 class 를 의미합니다.


<style>
p.myRedFont {
color: red;
}
</style>

<p class="myRedFont">myRedFont 라는 클래스를 갖는 모든 p 태그들은 글자 색이 빨강으로 보일 것입니다.</p>

myRedFont 라는 클래스를 갖는 모든 p 태그들은 글자 색이 빨강으로 보일 것입니다.



[광고] Udemy 동영상 강의로 보기

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

h11. HTML 이미지 태그  (0) 2016.06.05
h08. HTML 링크  (0) 2016.06.05
h05. HTML 프로그래밍 코드 표시  (0) 2016.06.05
h04. HTML 인용문 태그들  (0) 2016.06.05
h03. HTML 텍스트 태그들  (0) 2016.06.05
'HTML' Related Articles more