CSS 설명 및 셀렉터

728x90

SMALL

CSS(Cascading Style Sheet)에 대해서

- 스타일을 정의해 주는 언어이다.

- HTML에 디자인적 요소를 추가해 준다

- 다양한 셀렉터를 만들어서 HTML요소에 선별적인 적용이 가능하다.

CSS에서의 주석

- css에서 주석은 /*로 시작해서 */로 끝난다

- 단일 행 또는 멀치 행 주석이 가능하다

/* 단일 행 주석 */
/*
주석 행1
주석 행2
*/

- 참고로 HTML에서의 주석 표기방법과 비교해본다.

CSS 적용하기

1. Inline style: 개별 태그 안에서 정의하고 적용할 수 있다.

예)

<= color 속성의 값 = red. 세미콜론으로 종료.

예)

<= 한가지 이상의 속성을 정해 줄 수 있다. 세미콜론으로 구별

2. Embedded style:문서의 head 부분에 위치한<style>~~</style>태그 안에 CSS를 작성해서 적용할 수 있다.

예). 앞으로 다루게 되는 CSS셀렉터를 사용한다.

3. Exermal file: "css"를 확장자로 하는 텍스트 파일에 CSS를 저장해 놓고 불러서 사용할 수도 있다.

<head>

</head>

예). 파일 내용. 앞으로 다루게 되는 CSS셀렉터를 사용한다.

body {

background-color:lightblue;

}

h1 {

color:navy;

font-weight: normal;

}

CSS 설렉터에 대해서

- Univaersal selector: 모든 태그에 일괄적으로 적용.

예)

<style>

padding:20px;

color:red;

</style>

- Element selector: 특정 유형의 태그에 적용

예) <h2>유형의 태그에 적용

<style>

h2{

color:red;

font-weight:normal;

}

</style>

- Class selector: 특정 클래스의 태그에 적용.

예) Class가 "my Class"인 모든 태그에 적용: 주의: 종류가 서로 다른 태그도 같은 class가 될 수 있다.

<style>

.myClass{

color:red;

}

</style>

-> 그리고, HTML에서는 다음과 같이 클래스를 정의할 수 있다.

- Element+Class selector: 태그의 유형과 클래스가 일치하는 경우 적용.

예) <h2>태그이면서 class가 "my Class"인 경우 적용.

<style>

h2.myClass {

color:red;

}

</style>

-> HTML에서는 다음과 같은 태그에 선별적으로 적용된다.

- ID selector: 아이디가 일치하는 태그에 적용(페이지에서 단 한 곳)

예). ID가 "my ID"인 단 한 곳에 적용.

<style>

# myID {

color:blue;

font-size:40px;

}

</style>

-> 그리고, HTML에서는 다음과 같이 태그의 id를 정의할 수 있다.

- Element+ID selector: 태그인 유형과 ID가 일치하는 경우 적용.

예) <h2>태그이면서 id가 "my ID"가 일치하는 경우 적용.

<style>

h2#myID{

padding:30px;

}

</style>

-> HTML에서 다음과 같은 태그에 선별적으로 적용됨.

- Group selector: 여러 유형의 태그에 동일하게 적용.

예) 모든 <h1>, <h2>, <p> 태그에 동일하게 적용.

<style>

h1, h2, p {

color:red;

font-weight:normal;

}

</style>

- Descender selector: 위계에 의한 선택적 적용. 상위 부터 하위로 좁혀가는 방법

예) <div> 아래에 있는 모든 <p> 태그에 동일하게 적용. 바로 아래에 있지 않아도 됨.

<style>

div p {

color:red;

font-weight:normal;

}

</style>

- Children selector: 위계에 의한 선택적 적용. 바로 아래 "자식"에게만 적용.

예) <div> 바로 아래에 있는 모든 <p> 태그에 동일하게 적용.

<style>

div > p {

color:red;

font-weight:normal;

}

</style>

- Attribute selector: 속성에 대한 조건이 맞으면 적용.

예) <a> 태그이면서 속성 target="_blank"인 경우 적용.

<style>

a[target="_blank"] {

color:green;

font-weight:normal;

}

</style>

- Active selector : link, active, hover, visited 등 태그의 상태에 따라서 적용. "Pseudo-class"라고도 불리운다.

예) <a> 태그이면서 마우스 포인터가 위에 있는 경우 적용.

<style>
        a:hover{
            color:red;
            font-style: italic;
        }
</style>

예제1)

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

<!-- 이 행은 주석. -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 셀렉터 예문1</title>

<!--Style 정의. -->
<!--Element selector를 정의해 본다. -->

<style>

    h1{
        color: blue;
        background-color: gray;
        font-weight: bolder;
      }
    h2{
        color: red;
        background-color: yellow;
        font-weight: lighter;
    }
    p{
        color: green;
        background-color: orange;
        font-weight: normal;
    }
    div{
        color: white;
        background-color: red;
        font-weight: normal;
    }
    ol{
        color: white;
        background-color: darkgreen;
        font-weight: normal;
    }
</style>
</head>
<!-- 여기까지가 헤드. -->
<body>
<h1> 헤더 1.1 </h1>
<h1> 헤더 1.2 </h1>
<h1> 헤더 1.3 </h1>

<h2> 헤더 1.1 </h2>
<h2> 헤더 1.2 </h2>
<h2> 헤더 1.3 </h2>

<p> Paragraph 1. </p>
<p> Paragraph 2. </p>
<p> Paragraph 3. </p>

<div>
<br>
    <span> A Single line within a div tag. </span>
<br>
<p> Paragraph 4. </p>
<p> Paragraph 5. </p>
<p> Paragraph 6. </p>
<br>
</div>
<br>

<div>
<br>
다음은 ordered list이다:
<ol>
<li> 아이템 하나. </li>
<li> 아이템 둘. </li>
<li> 아이템 셋. </li>
<li> 아이템 넷. </li>
<li> 아이템 다섯. </li>
</ol>
<br>
</div>

</body>
<!-- 여기까지가 몸통. -->
</html>

예제2)

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

<!-- 이 행은 주석. -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 셀렉터 예문2</title>

<!-- style 정의. -->
<!-- Class selector와 ID Selector를 정의해 본다. -->
<style>

    .myClass1{
        color:blue;
        background-color: gray;
        font-weight: bolder;
        }

    .myClass2{
        color:red;
        background-color: yellow;
        font-weight: lighter;
        }

    .myClass3{
        color:green;
        background-color: orange;
        font-weight: normal;
        }       
        
    div.myClass3{
        color:white;
        background-color: black;
        font-weight: normal;
        } 
                
    li.myClass3{
        color:gray;
        background-color: red;
        font-weight: bolder;
        }  
    #myID1{
        color:yellow;
        background-color: violet;
        font-weight: bolder;

    }
    #myID2{
        color:yellow;
        background-color: blue;
        font-weight: bolder;
    }

</style>

</head>
<!-- 여기까지가 헤드. -->

<body>
<h1 class="myClass1">헤더 1.1 </h1>
<h1 class="myClass2">헤더 1.2 </h1>
<h1 class="myClass3">헤더 1.3 </h1>

<h2 class="myClass1">헤더 1.1 </h2>
<h2 class="myClass2">헤더 1.2 </h2>
<h2 class="myClass3">헤더 1.3 </h2>
    
<p class="myClass1"> Paragraph 1. </p>
<p class="myClass2" id="myID1"> Paragraph 2. </p>
<p class="myClass3"> Paragraph 3. </p>

<div class="myClass3">
<br>
    <span> A Single line within a div tag. </span>
<br>
<p class="myClass1"> Paragraph 4. </p>
<p class="myClass2"> Paragraph 5. </p>
<p class="myClass3"> Paragraph 6. </p>
<br>
</div>
<br>

<div>
<br>
다음은 ordered list이다:
<ol>
<li class="myClass1"> 아이템 하나. </li>
<li class="myClass2"> 아이템 둘. </li>
<li class="myClass3" id="myID2"> 아이템 셋. </li>
<li class="myClass1"> 아이템 넷. </li>
<li class="myClass2"> 아이템 다섯. </li>
<li class="myClass3"> 아이템 여섯. </li>
</ol>
<br>
</div>

</body>
<!-- 여기까지가 몸통. -->

</html>

예제3)

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

<!-- 이 행은 주석. -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 셀렉터 예문2</title>

<!-- Style 정의. -->
<!-- 다양한 셀렉터를 정의해 본다. -->

<style>

    #myOD1.myClass2{
        color:red;
        background-color: yellow;
        font-weight:lighter;
    }

    h1, p{
    padding: 10px;
    }

    /*
     div li{
        color:oranger;
     }
    */

    /* 작동하지 않음!

       div > li {
        color:red;
    }
    */


    ol > li {
        color: navy;
        font-weight: bold;
    }

    a[href="http://www.naver.com"]{
        color:white;
        background-color: yellow;
    }

    p:hover{
        font-style:italic;
        color: red;
    }
    
    a:hover{
        font-style:italic;
        color: green;
    }

    /*아직 방문하지 않은 링크*/
    a:link{
        font-style:normal;
        color: blue;
    }   

    /* 클리어 하려면 브라우저의 방문 기록을 삭제해야 한다 */
    a:visited{
        font-style: bold;
        color: hotpink;
    }

</style>

</head>
<!-- 여기까지가 헤드. -->

<body>
<h1 class="myClass1"> 헤더 1.1 </h1>
<h1 class="myClass2"> 헤더 1.2 </h1>
<h1 class="myClass3"> 헤더 1.3 </h1>

<h2 class="myClass1"> 헤더 1.1 </h2>
<h2 class="myClass2"> 헤더 1.2 </h2>
<h2 class="myClass3"> 헤더 1.3 </h2>

<p class="myClass1"> Paragraph 1. </p>
<p class="myClass2" id="myID1"> Paragraph 2. </p>
<p class="myClass3"> Paragraph 3.</p>

<div class="myClass3">
<br>
    <span> A Sigle line within a div tag. </span>
<br>
<p class="myClass1"> Paragraph 4. </p>
<p class="myClass1"> Paragraph 5. </p>
<p class="myClass1"> Paragraph 6. </p>
<br>
</div>
<br>

<div>
<br>
다음은 ordered list이다:
<ol>
<li class="myClass1"> <a href="#1">아이템 하나. </a></li>    
<li class="myClass2"> <a href="#2">아이템 둘. </a></li>    
<li class="myClass3"> <a href="#3" id = "myID2">아이템 셋. </a></li>    
<li class="myClass1"> <a href="#4">아이템 넷. </a></li>    
<li class="myClass2"> <a href="http://www.naver.com">아이템 다셋. </a></li>    
<li class="myClass3"> <a href="#5">아이템 여섯. </a></li>    
</ol>
<br>
</div>

</body>
<!-- 여기까지가 몸통.-->

</html>

728x90

LIST

'CSS' 카테고리의 다른 글

CSS 와 Text: 글꼴 관련 속성 (0)	2022.09.12

순두부 호랑이

CSS 설명 및 셀렉터

CSS(Cascading Style Sheet)에 대해서

CSS에서의 주석

CSS 적용하기

CSS 설렉터에 대해서

'CSS' 카테고리의 다른 글

티스토리툴바

CSS 설명 및 셀렉터

CSS(Cascading Style Sheet)에 대해서

CSS에서의 주석

CSS 적용하기

CSS 설렉터에 대해서

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바