IT 세상 해석하기

[CSS] CSS의미와 작성하는 방법 본문

프로그래머 공간/CSS

[CSS] CSS의미와 작성하는 방법

ikohong 2019. 11. 24. 12:49
728x90
반응형
<p style="color:red; font-size:30px;">인라인 스타일 시트</p>

[CSS] CSS의미와 작성하는 방법

By i!kohong(아이코홍)

CSS = Cascading Style Sheet
자주 사용하는 스타일을 미리 정의해 두고 특정 이름으로 스타일을 호출하여 사용하는 방식의 코드
장점
코드의 관리와 수정이 쉬워진다.
웹 페이지를 로딩하는 속도가 빨라진다.
웹 페이지를 작성하는 시간이 줄어든다.

스타일 시트의 방식

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

인라인 스타일 시트

태그의 속성 값으로 스타일 지정
<p style="color:red; font-size:30px;">인라인 스타일 시트</p>

→ 인라인 스타일 시트의 경우 외부 스타일 시트보다 우선적으로 적용됨

내부 스타일 시트

<head>태그 내부에 스타일을 정의한다.
<head>
    <style type="text/css">
        <!--
         셀렉터 {속성:속성값;. 속성:속성값;}
        -->    
   </style>
</head>

→ 외부 스타일 시트와 함께 태그 스타일, 클래스 스타일, 네임드(Named)스타일을 만들 수 있다.

태그 스타일

특정 태그에 대해 동일한 속성을 지정할 때 사용
→ 태그이름 {속성:속성값; 속성:속성값; ...}
<head>
    <title>태그 스타일</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        <!--
        p { color : #00ff00; }
        -->
   </style>
</head>
<body>
<p>이 태그의 색상은 Green 입니다.</p>
</body>

클래스 스타일

태그 중에서 특정 태그에만 다른 속성을 지정하거나 속성을 추가할 때 사용

→ .스타일이름 {속성:속성값; 속성:속성값; ... }

<head>
    <title>클래스 스타일</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        <!--
        .addP { font-family: 휴먼옛체 }
        -->
   </style>
</head>
<body>
<p class="addP">이 글자는 휴먼옛체입니다.</p>
</body>

네임드스타일

특정 범위를 지정하여 속성을 지정하고 싶을 때 사용
<head>
    <title>클래스 스타일</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        <!--
        #change_color { color : #ff0000; }
        -->
   </style>
</head>
<body>
<p>이 글자는<span id="change_color">#ff0000</span>색상입니다.</p>
</body>

특정 태그의 내용부에 있는 태그에만 태그 스타일을 지정할 때

태그이름 태그이름 {속성 : 속성값; 속성:속성값; ... }
<head>
    <title>클래스 스타일</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
        <!--
        h1 b {color : blue}
        -->
   </style>
</head>
<body>
<h1>이건<b>파란색 글자</b>입나다.</h1>
</body>

외부 스타일 시트

하나의 문서를 확장자 CSS로 만들고, 이 문서에 필요한 스타일들을 정의하여 HTML페이지로 호출하여 사용한다.
<head>
    <link rel="stylesheet" type="text/css" href="파일이름.css">
</head>

예시

⊙ style.css

p { color : #ff00ff; }

⊙ stylecss.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p>이 글자는 자주색입니다.</p>
    </body>
</html>
728x90
반응형
저작자표시 비영리 동일조건

'프로그래머 공간 > CSS' 카테고리의 다른 글

[CSS] 글꼴, 텍스트, 표 관련 속성  (0) 2019.11.25
[CSS] 홈페이지 글꼴 색과 배경을 원하는데로! 글꼴 색과 배경 관련 속성  (0) 2019.11.25
[CSS] 셀렉터(Selector) 표 정리  (0) 2019.11.25
[CSS] 레이아웃의 단위  (0) 2019.11.25
네이버에 CSS가 없다면?  (0) 2019.11.24
공유하기 링크
'프로그래머 공간/CSS' Related Articles more
Comments