본문 바로가기
CSS

1.기본

TechMan1 2019. 1. 23. 20:06


1. CSS 개론

2. CSS의 3가지 다른 사용방법

3. CSS의 규칙과 선택자

4. CSS 주석

5. Style Cascade와 상속



1. CSS 개론

1. CSS란 무엇인가?

     CSS는 Cascading Style Sheets의 약자이다.

       - Cascading은 CSS가 다른 스타일 위에 또 다른 스타일을 적용하는 계단형 방식이다.

       - StyleSheet는 웹 문서의 모양을 담당한다.

     CSS와 HTML은 함께 동작한다.

       - HTML은 페이지 구조를 정리한다.

       - CSS는 HTML 요소들이 어떻게 보일지 결정한다.

2. 왜 CSS를 사용하는가?

     - CSS는 특정 스타일을 특정 HTML 요소에 적용할 수 있게 한다.

     - 가장 큰 이점은 컨텐츠의 스타일만 뽑아 분류할 수 있다는 것이다.

     - HTML만 사용하면 모든 스타일과 형식이 같은 곳에 있어 페이지가 커지면 관리하기 어렵다.



2. CSS의 3가지 다른 사용방법

1. Inline CSS

    스타일 시트를 사용하는 방법중 하나는 인라인이다. 하나의 엘리먼트에 단독으로 스타일을 적용할 수 있다.

    인라인 스타일을 사용하기 위해 html 태그에 style 속성을 추가한다.

   
<p style="color:white; background-color:gray;">
  This is an example of inline styling.
</p>


2. Embedded/Internal  CSS -> 이 방법은 하나의 페이지에 특이한 스타일을 적용할 때 사용한다.

  Internal 방식은 head 아래 <style>태그 안에 작성한다.

   
<html>
    <head>
        <style>
            p {
                color:white;
                background-color:gray;
            }
        </style>
    </head>
    <body>
        <p>This is my first paragraph. </p>
        <p>This is my second paragraph. </p>
    </body>
</html>



3. External CSS모든 style은 하나의 텍스트 파일에 정의되며 css 확장자로 저장한다.

 작성된 CSS파일은 head 태그 안에 <link>태그를 사용하여 참조한다. 상대경로, 절대경로 모두 href 속성에 올 수 있다.

   
<head>
    <link rel="stylesheet" href="example.css">
</head>


3. CSS의 규칙과 선택자

1. CSS문법

     CSS는 브라우저가 해석하고 요소에 적용할 수 있는 스타일 규칙들로 구성된다. 스타일 규칙은 선택자, 속성, 값 이렇게 3가지 부분으로 구성된다.

        
h1 { color : orange; }


 2. 타입 선택자

      가장 보편적이고 쉬운 선택자는 타입 선택자다. 이 선택자는 웹 페이지의 태그를 선택한다.

예) 웹 페이지의 모든 P태그 선택 후 글자색을 빨강으로 하기

      
p { color : red;    }


 3. id, class 선택자

    Id 선택자는 id속성을 갖고 있는 요소를 선택한다. 그 요소가 문서의 어느 위치에 있던 선택한다. 문법은 #아이디다.

       CSS
#divMain { color : red; }

    html    
<div id="divMan">
    <p> main div입니다. </p>
</div>

    class선택자도 비슷한 방식으로 동작한다. 큰 차이점은 고유한 id는 각 페이지에 하나밖에 사용할 수 없지만 class는 필요한대로 사용할 수 있다. 문법은 .class명이다.


       CSS

.div-main {
    color : red;
}


      html

<div class="div-main">
    <p> 1번째 div-main class입니다. </p>
</div>
<div class="div-main">
    <p class="div-main"> 2번째 div-main class입니다. </p>
</div>


4. 자손 선택자

특정 요소의 아래 자손 요소들을 선택할 수 있다. 몇단계 아래 있던 상관없이 선택할 수 있다. 자손으로 이동은 스페이스로 한다.

       CSS

#idMain .div-main p{
    color : red;
}



      html

<div id="idMain">
    <div class="div-main">
        <p> 1번째 div-main class입니다. </p>
    </div>
</div>


4. CSS 주석

1. 코드를 설명하는 부분으로 브라우저에서는 나타나지 않는다.

       

p {
    /* Comment */
    color : red;
}





5. Style Cascade와 상속

1. Cascade

  - 웹페이지의 최종 구성은 다른 스타일들의 조합이다.

  - 캐스케이드를 구성하는 스타일 정보의 세가지는 다음과 같다.

     (작성자가 만든 스타일 시트, 브라우저의 기본스타일, 사용자가 지정한 스타일)

2. 상속

  상속은 속성들이 웹 페이지를 흐르는 방법을 의미한다. 자식 요소는 보통 부모 요소의 특성을 그대로 사용한다. body 안의 p태그는 body 태그의 스타일을 그대로 상속받는다.



<연관게시글>


'CSS' 카테고리의 다른 글

6.CSS3 그라데이션&배경  (0) 2019.01.29
5.CSS3 기본  (0) 2019.01.29
4.레이아웃  (0) 2019.01.29
3.Properties  (0) 2019.01.29
2.텍스트 스타일  (0) 2019.01.29

'CSS' Related Articles

티스토리툴바