본문 바로가기

쇼핑몰 검색

css강좌

제4강.  CSS 사용법

본문

동영상 강좌보기

https://www.youtube.com/watch?v=rwU0ClgmFKg&list=PLdajQmV2DgoSKjvHAAKm97qleUTQo2yRu&index=3 


브라우저가 스타일시트를 읽으면 스타일시트의 정보에 따라 HTML문서의 서식을 지정합니다.


CSS를 삽입하는 3가지 방법

스타일 시트를 삽입하는 방법에는 세가지가 있습니다.

  • 외부 스타일 시트
  • 내부 스타일 시트
  • 인라인 스타일


외부 스타일 시트

외부 스타일 시트를 사용하면 하나의 파일만 변경하여 전체 웹사이트의 모양을 변경할 수 있습니다.

각 페이지는 <link>요소 안에 외부 스타일시트 파일에 대한 참조를 포함해야 합니다. 

<link>요소는 <head>섹션안에 위치합니다.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

외부 스타일 시트는 텍스트 에디터로 작성할 수 있습니다. 파일에 html태그를 포함할 수는 없습니다. 스타일 시트 파일은 .css확장자로 저장해야 합니다.

다음은 "mystyle.css"의 내용입니다.

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

** 속성값과 단위사이에 공백을 추가하지 마십시오.

margin-left: 20 px; (x)

margin-left: 20px;(o)


내부 스타일 시트

한 페이지에 고유한 스타일이 있으면 내부 스타일 시트를 사용할 수 있습니다.

내부 스타일은 <head>섹션내에 위치하며 <style>요소내에 정의됩니다.

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

인라인 스타일

인라인 스타일은 단일 요소에 고유한 스타일을 적용하는데 사용될 수 있습니다.

인라인 스타일을 사용하려면 관련 요소에 스타일 속성을 추가하십시오.

style속성은 모든 CSS속성을 포함할 수 있습니다.

아래 예제는 <h1>요소의 색상과 왼쪽 여백을 변경하는 방법을 보여줍니다.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

** 인라인 스타일은 스타일 시트의 많은 장점을 상실합니다. 권장사항은 아닙니다.


다중 스타일 시트

웹페이지에 여러 스타일 시트를 적용할 경우 마지막으로 읽은 스타일 시트의 값이 사용됩니다.

외부 스타일 시트가 <h1>요소에 대해 다음 스타일을 설정하였다고 가정하십시오.

h1 {
    color: navy;
}

내부 스타일 시트도 <h1>요소에 다음과 같이 설정하였다고 가정합니다.

h1 {
    color: orange;    
}

내부 스타일이 외부 스타일 다음에 정의되면 <h1>요소는 "orange"가 됩니다.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>

그러나 내부 스타일이 외부 스타일 링크요소 앞에 정의된 경우 <h1>요소는 "navy"가 됩니다.

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS 우선순위

HTML페이지내에서 CSS가 적용될 경우, 인라인, 내부스타일, 외부스타일, 브라우저 기본값중 모두 적용될 경우 우선순위를 아는 것이 중요합니다.

  1. 인라인 스타일(html요소 내부)
  2. 외부 및 내부 스타일 시트(head섹션에 위치)
  3. 브라우저 기본값

일반적으로 위 번호순으로 우선 순위가 높습니다. 

결국 인라인 스타일이 가장 우선 순위가 높습니다.


댓글목록

등록된 댓글이 없습니다.

코리아뉴스-웹학교 정보

회사명. 코리아뉴스
주소. 경기도 남양주시 진건읍 855
사업자 등록번호. 132-10-73100 대표. 한종배 전화. 031-574-3659 팩스. 0504-475-5402
통신판매업신고번호. 제2008-경기남양주-0513호 개인정보관리책임자. 한종배
Copyright © 2001- 2017 코리아뉴스. All Rights Reserved.