CSS_스타일시트의 종류

KH/CSS

CSS_스타일시트의 종류

오늘의 진 2022. 9. 14. 14:34

CSS (Cascading Style Sheet)

: CSS는 HTML 문서에 색이나 모양, 출력 위치 등 외관을 꾸미는 언어이며,

CSS 로 작성된 코드를 Style Sheet라고 부른다.

CSS는 CSS1이 나온 2002년 이후 CSS2, CSS3으로 발전하였고, CSS3를 CSS 레벨 3이라고 부르는데

CSS 버전 3이라고 부르지 않는 이유는 과거 레벨과 호환을 이루면서 새로운 기능을 추가하기 때문이다.

CSS3 는 많은 기능을 가지고 있지만 요약하면 다음과 같다.

색상과 배경
텍스트
폰트
Box Model
비주얼 포맷 및 효과
리스트
테이블
사용자 인터페이스

HTML 에 CSS를 적용시키는 방법은 세가지가 있다.

각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택해야 한다.

Inline Style Sheet

: HTML 태그의 style 속성에 css 코드를 넣는 방법

Internal Style Sheet (내부 스타일시트)

: HTML 문서안의 <style>과 </style>안에 CSS 코드를 넣는 방법

Linking Style Sheet(외부 스타일시트)

: 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

문서의 사이즈가 클 경우에는 Linking Style Sheet 방법을 사용한다.

예제들

Inline Style Sheet

: HTML 태그의 style 속성에 css 코드를 넣는 방법

예

<p style="color : blue"> 
Lorem ipsum dolor.
</p>

해당 <p> 태그가 선택자(selector)가 되고, (<p> </p> 사이의 선택된 영역의 스타일을 변경함으로 선택자 라고 함)

CSS 코드에는 속성(property)과 값(value)만 들어간다. (예: 속성 : color 값 : blue)

따라서 꾸미는데 한계가 있으며, 재사용이 불가능하다는 단점이 있다.

Internal Style Sheet (내부 스타일시트)

: HTML 문서안의안에 CSS 코드를 넣는 방법

예

<style>
h1{  color : blue;}
</style>

이 방법은 HTML 문서 안의 여러 요소를 한번에 꾸밀 수 있다는 장점이 있으나, 또 다른 HTML 문서에는 적용할 수 없다는 단점이 있다. (한 문서안에서만 사용)

Linking Style Sheet(외부 스타일시트)

: 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법

예를들어 모든 h1 요소의 글자를 빨간색으로 하고 싶다면 다음의 내용으로 style.css 파일을 만든다.

(css파일의 확장자는 css이다. )

h1{
       color : red;
  }

적용을 원하는 HTML 문서에 다음의 코드를 추가한다.

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

이 방법의 장점은 여러 html 문서에 사용할 수 있다는 것이다.

style.css 를 적용시키고 싶은 문서에 <link> 태그로 연결만 해주면 된다.

링크방법을 쓰거나 임포트 방법을 쓸때는 스타일 시트는 항상 해드부분에 존재해야한다.

다음은 가장 간단한 CSS 코드 입니다.

h1{ color : red;}

h1, color, red 세개의 단어가 있는데 각각 선택자, 속성 , 값이라고 한다.

선택자(selector)	무엇을 꾸밀지 정한다. h1은 h1 요소를 꾸미겟다는 뜻이다.
속성(property)	어떤 모양을 꾸밀지 정한다. color은 색을 꾸미겟다는 의미
값(value)	어떻게 꾸밀지 정한다. red는 빨간색으로 만들겟다는 의마.

즉, css코드는 다음처럼 구성된다.

selector { property : value }

이때 property , value를 합쳐 선언(declaration) 이라고 한다.

셀렉터는 여러 타입이 존재한다.

셀렉터이름	선택하는것	예시
엘리먼트 셀렉터 (태그, 또는 타입 셀렉터라 불림)	특정 타입의 모든 HTML 엘리먼트 태그 그자체를 말함.	p <p> 를 선택
아이디 셀렉터	특정 아이디를 가진 페이지의 엘리먼트 (주어진 HTML 페이지에서 아이이당 딱 하나의 엘리먼트만 허용된다.)	#my-id <p id ="my id"> 또는 <a id ="my - id">를 선택
클래스 셀렉터	특정 클래스를 가진 페이지의 엘리먼트 (한페이지에 클래스가 여러번 타나탈 수 있다.)	.my-class <p class ="my-class">와 <a class ="my-class">를 선택
속성 셀렉터	특정 속성을 갖는 페이지의 엘리먼트	img[src] <img src="myimage.png">를 선택하지만 <img>는 선택안함
수도(Pseudo) 클래스 셀렉터	특정 엘리먼트지만 특정 상태에 있을때만, 예를 들면 hover, over 상태일때	a : hover <a>를 선택하지만, 마우스 포인터가 링크위에 있을때만 선택함

CSS3의 표준 단위

단위	의미	예시
em	배수	font-size : 3em // 현재 폰트의 3배 크기
%	퍼센트	font-size : 500% // 현재 폰트의 500% 크기
px	픽셀수	font-size : 10px // 10픽셀 크기
cm	센티미터
mm	밀리미터
in	인치	1in = 2.54cm = 96px
pt	포인터	1pt = 1/72in
pc	피카소(pucas)	1pc=12pt
deg	각도	transform:rotate(20deg) // 시계방향 20도 회전

실습

인터널 스타일시트 사용 예

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>스타일을 가진 웹 페이지</title>

    <style>
        /*css 스타일 시트 작성 */
        body {
            background-color: mistyrose;
        }

        h3 {
            color: purple;
        }

        hr {
            border: 5px solid yellowgreen;
        }

        span {
            color: blue;
            font-size: 20px;
        }
    </style>

</head>

<body>

    <h3>CSS 스타일 맛보기</h3>
    <hr>
    <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>
    <p>나는 <span>웹 프로그래밍</span>을 좋아합니다.</p>

</body>

</html>

인라인과 인터널 함께 사용해보기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> &lt;style&gt; 속성에 스타일 시트 만들기 </title>

    <style>
        p {
            color: red;
            font-size: 20px;
        }

        /*모든 p태그에 적용*/
        hr {
            border: 10px solid mistyrose;
        }
    </style>

</head>

<body>

    <h3>백일홍 교수님</h3>
    <hr>
    <p>오페라를 좋아하고</p>
    <p>수선화를 좋아하고</p>
    <p>엘비스 프레슬리를 좋아하고 </p>
    <p style="color: blue;"> 김치 부침개를 좋아하고</p>
    <p style="color: magenta; font-size : 30px">술을 좋아합니다.</p>
    <hr style="border: 10px dotted blue">

</body>

</html>

우선순위 : 인라인/인터널/링크드 순서

링크스타일로 만들기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt;link&gt; 태그로 스타일 파일 불러오기 </title>

<link type="text/css" rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h3>손연재</h3>
<hr>
<p>
    저는 체조 선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
    김치찌개와 막국수 무척 좋아합니다. 
</p>

</body>
</html>

mystyle.css

body{
    background-color: linen; color: blueviolet;
    margin-left: 30px; margin-right: 30px;
}
h3{
    text-align: center; color: darkred;
}

인터널 방식으로 바꾼 예시

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>&lt;link&gt; 태그로 스타일 파일 불러오기 </title>

    <style>
        body {
            background-color: linen;
            color: blueviolet;
            margin-left: 30px;
            margin-right: 30px;
        }

        h3 {
            text-align: center;
            color: darkred;
        }
    </style>
</head>

<body>
    <h3>손연재</h3>
    <hr>
    <p>
        저는 체조 선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
        김치찌개와 막국수 무척 좋아합니다.
    </p>
</body>

</html>

임포트방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>&lt; @import &gt; 로 외부 스타일 불러오기</title>

<style>
    @import url(mystyle.css)
</style>

</head>
<body>
    <h3>손연재</h3>
    <hr>
    <p>
        저는 체조 선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다.
        김치찌개와 막국수 무척 좋아합니다.
    </p>
</body>
</html>

스타일의 상속

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>부모 스타일 상속</title>
</head>

<body>

    <h3>부모 스타일 상속</h3>
    <hr>
    <p style="color: green"> 자식 태그는 부모의 스타일을
        <em style="font-size: 25px;">상속</em>받는다.
    </p>

</body>

</html>

여기스넌 <p> <em> </em> </p> 로 p 내부에 em 태그가 존재한다.

이러한 형태일때 p가 부모태그, em을 자식태그라고 한다.

자식 태그인 em은 부모태그인 p의 속성을 물려 받는다. 즉 부모가 그린이므로 자식도 그린색으로 나타남

오버라이딩_스타일 합치기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 합치기 및 오버라이딩</title>

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

<style>
    p{ color: #555599; font-size : 20px; }
</style>
</head>
<body>
    <h3>p 태그에 스타일 중첩</h3>
    <hr>

<p>Hello, students!</p>
<p style="font-size: 35px; background : yellow;">안녕하세요 교수님 반갑습니다. !!!</p>
</body>
</html>

external.css

p{
    background: mistyrose;
}

우선순위는 인라인이 가장 높다.

그래서 맨 밑에 줄은 인라인에 준것이 모두 나옴

위의 <p>는 인터널에 있는 것이 먼저 적용된다.

보면 인터널에서는 백그라운드 색은 지정해 주지 않았는데 이때 따로 link해준 css 파일의 백그라운드 색이 적용됨

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>셀렉터 만들기</title>
<style>
    h3,li{ /*테그 이름 셀렉터 */
        color: brown;
    }
    div>div>strong{/*자식 셀렉터*/
        background: yellow;
    }
    ul strong{/*자손 셀렉터*/
        color: dodgerblue;
    }
.warning{/*class 셀렉터*/
    color: red;
}
body.main{/*class 셀렉터*/
    background: #cccc66;
}
#list{ /*id 셀렉터 */
    background: mistyrose;
}
#list span{/*자손 셀렉터*/
      color: forestgreen;
}
h3:first-letter{ /*가상 클래스 셀렉터*/
    color: red;
}
li:hover{/*가상 클래스 셀렉터 -> 어떤 상황이 발생하였을 때만 적용 */
    background: yellowgreen;
}

</style>
</head>
<body class="main">

    <h3>Web Programming</h3>
<hr>

<div>
    <div>
        2학기 <strong>학습내용</strong>입니다.
    </div>

<ul id="list">
    <li><span>HTML5</span></li>
    <li><strong>CSS</strong></li>
    <li>JAVASCRIPT</li>
</ul>
<div class="warning">60점 이하는 F</div>
</div>



</body>
</html>

해설

 ul strong{/*자손 셀렉터*/
        color: dodgerblue;
    }
ul 안에 strong이 들어있다면 색을 바꾼다. 
    

body.main{/*class 셀렉터*/
    background: #cccc66;
}
바디태그 안에 main이라는 클래스가 있다면 바꾼다. 

#list span{/*자손 셀렉터*/
      color: forestgreen;
}
# list 안에 span이 존재한다면 바꾼다. 

h3:first-letter{ /*가상 클래스 셀렉터*/
    color: red;
}
h3의 첫번째 글자의 색을 바꾼다. 

li:hover{/*가상 클래스 셀렉터 -> 어떤 상황이 발생하였을 때만 적용 */
    background: yellowgreen;
} 
hover : 마우스가 올라가면 
li :hover : 리스트에 마우스가 올라가면 바꿔라

자식은 한단계 및이 자식 자손은 안에 들어있으면 모두 자손

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 색 활용</title>
<style>
    div{
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 50px;
        color: white;
    }

#kbs{background-color: deepskyblue;}
.mbc{background-color: brown}

</style>

</head>
<body>
<h3>CSS3 색 활용</h3>
<hr>
<div id="kbs" >deepskyblue(#00bfff)</div>
<div class="mbc">brown(#a52a5a)</div>
<div style="background-color: fuchsia">fuchsia(#ff00ff)</div>
<div style="background-color: darkorange">darkorange(#ff8c00)</div>
<div style="background-color: #0088bb8b">darkcyan(#0088bb8b)</div>
<div style="background-color: #6b8e23">olivedrab(#6b8e23)</div>
</body>
</html>

텍스트 꾸미기

serif	삐침 있는 명조 계열의 글골
sans-serif	삐침 없고 굵기가 일정한 고딕 계열의 글꼴
monospace	글자 폭과 간격이 일정한 글꼴
cursive	손으로 쓴 것 같은 필기계열의 글꼴
fantasy	화려한 글꼴
consolas	문자별 특징을 명확히 하여 구별이 쉬움 : 개발자가 사용하기 좋은 폰트

텍스트 꾸미기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>텍스트 꾸미기</title>

    <style>
        h3 {
            text-align: right;
            /*오른쪽 정렬*/
        }

        span {
            text-decoration: line-through;
            /*중간줄*/
        }

        strong {
            text-decoration: overline;
            /*윗줄*/
        }

        #p3 a {
            text-decoration: none;
            /*밑줄 없는 링크*/
        }

        .p1 {
            text-indent: 3em;
            /*3글자 들여쓰기*/
            text-align: justify;
            /*양쪽 정렬*/
        }

        .p2 {
            text-indent: 1em;
            /*1글자 들여쓰기*/
            text-align: center;
            /*중앙 정렬*/
        }
    </style>

</head>

<body>

    <h3>텍스트 꾸미기</h3>
    <hr>

    <p class="p1">
        HTML의 테그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백, 간격등과 세밀한
        <span>텍스트제어</span>를 할 수 없다.
    </p>

    <p class="p2">
        그러나 <strong>스타일시트</strong>는 이를 가능하게 한다. 들여쓰기, 정렬에 대해서 알아본다.
    </p>

    <p id="p3"><a href="http://www.daum.net">밑줄이 없는 다음 링크</a></p>


</body>

</html>

  #p3 a {
            text-decoration: none;
        }
/* id가 p3이면서 자손에 a태그가 있다면*/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Font Test</title>
<style>
    body{
        font-family: "Times New Rome", serif;
        font-size: large;
    }
    h3{
        font : italic bold 40px consolas, serif;
    }
</style>
</head>
<body>
<h3>consolas font</h3>
<hr>
<p style="font-weight: 900">font-weight 900</p>  /*font-weight : 진하게 */
<p style="font-weight: 100">font-weight 100</p>
<p style="font-style: italic">italic style</p>
<p style="font-style: oblique">oblique style</p>
<p>현재 크기의
    <span style="font-size: 1.5em ">1.5배</span>크기로
</p>



</body>
</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>박스 모델</title>
    <style>
        body {
            background: gray;
        }

        span {
            background: deepskyblue;
        }

        div.box1 {
            background: yellow;
            border-style: dotted;
            border-color: peru;
            margin: 40px;
            border-width: 10px;
            padding: 20px;
        }

        div.box2 {
            background: pink;
            border-style: solid;
            border-color: blue;
            margin: 40px;
            border-width: 3px;
            padding: 20px;
        }

        
    </style>
</head>

<body>

    <div class="box1">
        <span>DIVDIVDIVDIVDIV1</span>
    </div>

    <div class="box2">
        <span>DIVDIVDIVDIVDIV2</span>
    </div>

</body>

</html>

1.내용(content)

: 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분이다.

2.패딩(padding)

: 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않는다.

3.테두리(border)

: 내용과 패딩 주변을 감싸는 테두리

4.마진 (margin)

: 테두리와 이웃하는 요소 사이의 간격. 마진은 눈에 보이지 않는다.

'KH > CSS' 카테고리의 다른 글

CSS_애니매이션2 / list (0)	2022.09.19
CSS_프로퍼티(2) visibility, 애니매이션 효과, form 꾸미기 (1)	2022.09.16
CSS_ 마우스 이벤트/ 목록 꾸미기 (0)	2022.09.16
CSS_ 스타일시트의 기본적인 모습들 (0)	2022.09.15

현재글CSS_스타일시트의 종류

차곡차곡

Java, FOR, 반복문, 자바, HTML, 백준, oracle, 오라클, HTTP, Coding, 코딩, 개발자, 개발, IT, 코딩테스트, 화면개발, 알고리즘, 데이터베이스, CSS, 국비지원,

Today :
Yesterday :

차곡차곡