본문 바로가기
교육/CSS

CSS 개발자 수업 53일차 - css, selector, background

by yhyuk 2021. 6. 12.
728x90
반응형

1. css

2. 선택자, selector

3. 배경, background

1. css

[ 정의 ] 

- CSS, Cascading Style Sheet

- 스타일 시트

- HTML 문서의 서식을 구현 및 확장한다.

- 디자인 담당 언어

- CSS는 독립 실행이 불가능하다. (반드시 HTML 문서를 기반으로 동작한다.)

- 버전: CSS1, CSS2, CSS3(HTML5)

 

[ 장점 ]

- 서식 기능이 많다. (현 시점에서 전세계의 모든 웹 페이지의 디자인 구현)

- 생산성이 높다. (코드 재사용성이 높다.)

- 코드 분리도가 높다. ( HTML <-> CSS 분리 )

 

[ HTML5에서 CSS를 작성하는 영역 ]

<!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>Document</title>
    <style>
        /* 
            CSS를 위해 만들어진 태그
            - 이 영역은 CSS 언어를 이해하고 실행하는 영역이다.
            - 이 영역에서는 HTML 언어를 이해를 못한다.(동작이 안된다.)
        */
    </style>
</head>
<body>
    <!-- HTML 언어 구현부 -->
</body>
</html>

 

[ HTML에서 CSS를 적용하는 방법 3가지 ]

1) 인라인 스타일 시트, Inline Style Sheet

- 서식을 적용하고 싶은 태그에 직접 <style> 속성을 명시한다.

- 적용 범위: 해당 태그만

- 작성법: 해당 태그 style = "CSS 구문"

- 장점: 가독성이 높다. (해당 태그에 직접 CSS를 작성하기 때문이다.)

- 단점: 재사용이 낮다.

- 특정 태그 디자인 처리할때 용이

2) 내부 스타일 시트, Embeded Style Sheet

- 페이지 상단, <head> 내에 <style>을 명시한다.

- 적용 범위: 현재 페이지내의 모든 태그

- 장점: 재사용이 높다.

- 단점: 가독성이 낮다. (해당 태그와 떨어져서 CSS를 작성하기 때문이다.)

- 한 페이지 내에서 반복되는 디자인 처리에 용이

3) 외부 스타일 시트, External Style Sheet

- 별도의 CSS 파일(*.css)을 만들어서 적용한다.

- 적용 범위: 사이트 전체 내의 모든 페이지

- 장점: 재사용이 가장 높다.

- 단점: 가독성이 가장 낮다. (물리적 파일이 분리되어 있기 때문이다.)

- 커다랗고 굵은 디자인 처리에 용이

 

**보통 위 3가지 방법을 전부 사용한다. 특정 방법만 사용 하기에는 애매하다.

**대표적인 가이드 라인은 3) 외부 스타일 시트  -> 2) 내부 스타일 시트 -> 1) 인라인 스타일 시트 순이다.  

 

2. 선택자, selector

[ 종류 ] 

1) 전체 선택자 ( * )

- 모든 요소에 스타일이 적용 된다. 

<style>
    * { font-size: 12pt; } <!-- 모든 페이지의 글꼴크기는 12pt로 지정한다. -->
</style>

 

2) 태그 선택자

- 특정 태그에 스타일이 적용 된다.

<style>
    h1 { font-size: 10pt; }   /* h1태그의 모든 글꼴크기는 12pt로 지정한다. */
</style>

 

3) ID 선택자 ( # )

- 원하는 태그에 개발자가 id속성을 정의한다. ( CSS에서 그 id를 검색해서 태그를 찾는 방식 )

- id: 영문자 + 숫자 + 특수문자( _, - ), 한글 X, 공백 X, 특수문자 X

- 문서내에 유일해야 한다.

- 원하는 태그를 검색하기 용이하다. But, id를 작성하는 추가 비용이 발생한다.

- 태그명#id { }

<style>
    h1#test1 { color: red; } /* h1태그에서 id값이 test1인 내용의 글꼴 색깔을 red로 지정한다. */
    #test2 { color: blue; } /* id값이 test2인 모든 내용의 글꼴 색깔을 blue로 지정한다. */
</style>

<!-- id 선택자는 #앞에 태그명을 생략해도 된다. (id값은 유일하기 때문이다.) -->

 

4) class 선택자 ( . )

- 원하는 태그에 개발자가 class속성을 정의한다. ( CSS에서 그 class를 검색해서 태그를 찾는 방식 )

- class: 영문자 + 숫자 + 특수문자( _, - ), 한글 X, 공백 X, 특수문자 X

- 문서내에 여러개 존재해도 된다.

- 원하는 태그를 검색하기 용이하다. But, class를 작성하는 추가 비용이 발생한다.

- 태그명.클래스명 { }

<style>
    p.content { color: red; } /* p태그의 class값이 content인 내용의 글씨만 red로 지정한다. */
    .content { color: blue; } /* class값이 content인 모든 내용의 글꼴의 색깔을 blue로 지정한다. */
</style>

<!-- class 선택자는 중복될 수 있으므로, 태그명을 붙여야 구분이 가능하다. -->

 

5) 그룹 선택자 ( , )

- 기존의 선택자들을 그룹 지어서 선언부(body)를 공유하는 선택자이다.

- 여러개의 선택자로 검색된 태그들이 공통된 서식을 적용 받는다.

<style>
    p, div { color: blue; }
    #test1, #test2, h1, .content { color: red; }
</style>

 

6) 자식 선택자 ( > )

- 부모를 조건으로 자식 태그를 검색한다.

- 구체적인 검색

- 자식을 조건으로 사용 불가

- 부모 > 자식 { }

<style>
    li > b { color: red; }
    div > b { color: blue; }
    p > b { color: green; }
    ol > li > b { color: yellow; }
    html > body > h1 > div > b { color: hotpink; }
</style>

 

7) 자손 선택자

- 조상을 조건으로 자식 태그를 검색한다.

- 넓은 범위의 검색

- 조상 자식 { }

<style>
    blockquote > div > div > ul > li > b { color: gold; } /* 자식 선택자 */
    blockquote b { color: red; } /* 자손 선택자 */
    #test1 b { color: blue; } /* 자손 선택자 */
</style>

 

8) 인접 형제 선택자 ( + )

- 바로 위의 형제를 조건으로 검색한다.

- 동생을 조건으로 사용 불가(자식 선택자와 유사하다.)

- 형제 + 선택자 { }

<style>
    div + p { color: red; }
    p + p { color: blue; }
    span + div + p { color: orange; }
    p + div + p { color: green; }
</style>

 

9) 형제 선택자 ( ~ )

- 형제로 조건으로 검색한다.

- 조건인 형제와 대상인 선택자 사이에 또 다른 중간 형제가 오는것도 가능하다. (자손 선택자와 유사하다.)

- 형제 ~ 선택자 { }

<style>
    span ~ p { color: orange; }
    p ~ p { color: blue; }
</style>

 

10) 의사 클래스

- 가상 클래스

- 실제 태그에는 존재 하지 않지만 임의로 가상의 선택자를 지정하여 사용하는 것

- 원래는 <a> 링크 태그에만 제공을 했지만, 현재는 다른 태그들에게도 제공 된다.

<!--
    <a> 태그에서의 가상 클래스 4가지
    a:link { color: black; }      -> 한번도 방문한적 없는 상태의 링크
    a:visited { color: orange; }  -> 방문 기록이 있는 상태의 링크
    a:active { color: red; }      -> 활성화된 상태의 링크(사용할 일 거의 없음)
    a:hover { color: gold; }      -> 마우스 커서가 올라가 있는 상태의 링크
-->

<style>
    a {
        color: black; /* 링크의 글꼴 색은 black */
        text-decoration: none; /* 링크의 밑줄 제거 */
    }
    
    a:hover {
        color: red; /* 커서가 올라가면 링크의 글꼴 색은 red */
        text-decoration: underline; /* 커서가 올라가면 밑줄 표시 */
    } 
</style>

<!-- 아직 전부 배운것은 아니지만, 위 2가지가 <a>태그에서 가장 많이 쓰인다. -->

 

[ 선택자 우선 순위 ]

1) 서로 다른 선택자가 하나의 태그를 선택했을 때?

  -> 동일한 속성을 적용한다.

  -> 속성 충돌이 발생한다.

  -> 선택자를 구성하는 요소들의 점수 종합을 계산해서 가장 높은 선택자가 적용된다. (점수 계산)

2) 선택자 별 점수

- 태그 선택자: 개당 1점

- 클래스 선택자: 개당10점

- 아이디 선택자: 개당 100점

- 선택자가 디테일 할수록 점수가 높고, 범위가 넓을 수록 점수가 낮다.

- tag < class < id (태그는 절대로 class와 id를 이길 수 없다.) ---> tag가 아무리 많아도 안됨.

3) 선택자 별 점수 의미

- 선택자 우선순위를 결정하는 점수의 개념적인 표현이다.

- tag < class < id (tag는 절대로 class와 id를 이길 수 없다.) ---> tag가 아무리 많아도 안됨!!

- class < id (class는 절대로 id를 이길 수 없다.) ---> class가 아무리 많아도 안됨!!

- 태그는 태그끼리, 클래스는 클래스끼리, 아이디는 아이디끼리.. 비교 할 것!!

<style>
    /* case 1 */
    div { color: red; }
    div { color: blue; } /* 마지막값인 이 코드가 적용된다. */
    
    /* case 2 */
    #box1 { color: orange; } /* 100점 */
    #box1 { color: green; } /* 100점 점수가 더 높으며, 마지막값인 이 코드가 적용된다. */ 
    .box { color: red; } /* 10점 */
    div { color: blue; } /* 1점 */
    
    /* case 3 */
    html > body > div.box.aaa { color: red; } /* 점수가 더 높은 이 코드가 적용 된다. */
    body > div.aaa.box { color: blue; }
    
</style>
<body>
    <div id="box1" class="box aaa">테스트 입니다.</div>
    <div class="box aaa">테스트 입니다.</div>
</body>

 

[ class 선택자 특성 ]

- class 선택자는 하나의 태그에 1개 이상의 클래스를 동시에 적용 할 수 있다.

<style>
    /* case1 하나씩 따로따로 지정하기. (골라서 쓸 수 있음) */
    .box { color: red; }
    .aaa { font-style: italic; }
    .bbb { text-decoration: underline; }
    .ccc { font-weight: bold; }
    
    /* case2 한꺼번에 지정하기. (불편사항이 많아짐) */
    .box {
        color: red;
        font-style: italic;
        text-decoration: underline;
        font-weight: bold;
    }
</style>
<body>
    <div class="box aaa bbb ccc">테스트 입니다.</div>
</body>

 

 

3. background

[ 정의 ]

- 웹 페이지내의 배경을 원하는대로 지정할 수 있다.

 

[ 속성 ]

1) background-color

- 배경색을 지정할 수 있다.

<style>
    #box { background-color: rgb( 0~255, 0~255, 0~255, 0~1 ); }
</style>

2) background-image 

- 배경 이미지를 지정할 수 있다.

<style>
    #box { background-image: url(이미지파일 경로); }
</style>

3) background-repeat

- 배경 이미지의 반복을 지정할 수 있다.

- repeat, repaet-x, repeat-y, no-repeat

<style>
    #box {
        background-repeat: repeat; /* 페이지내에서 이미지가 반복되어 나타난다. (기본값) */
        background-repeat: repeat-x; /* 페이지내에서 x축으로 이미지가 반복되어 나타난다. */
        background-repeat: repeat-y; /* 페이지내에서 y축으로 이미지가 반복되어 나타난다. */
        background-repeat: no-repeat; /* 페이지내에서 이미지가 원본 1개만 나타난다. */
    }
</style>

4) background-position

- 배경 이미지의 위치를 지정할 수 있다.

- 수평: left, center, right, 수치

- 수직: top, center, bottom, 수치

<style>
    #box {
    	background-position: center center; /* 페이지내 이미지는 가운데에 나타난다. */
        background-position: 50% 50%; /* 페이지내 이미지는 50% 50% (가운데)에 나타난다. */
    }
</style>

5) background-attachment

- 배경 고정 유무를 지정할 수 있다.

- scroll, fixed

<style>
    #box {
        background-attachment: scroll; /* 페이지내 이미지는 스크롤을 내릴때마다 따라다닌다. */
        background-attachment: fiexd; /* 페이지내 이미지는 고정된다. */
    }
</style>

MEMO> 

# css 1일차 인데, 기본 문법은 오늘 배운대로 굉장히 간단하지만, 그 안에서 조합 하는것이 머리아픈거 같다...

 

# css에서 가장 중요한 선택자 중 태그, id, class 선택자 먼저 제대로 공부하고 이해한다면 그 외의 선택자들은 쉬울 것이다.( 선생님 피셜 )

  --> 그러니까 오늘 배운 10가지 선택자 중에 저 3개의 선택자 만이라도 외우자!!

 

# 주말 공부하기!

728x90
반응형
저작자표시

'교육 > CSS' 카테고리의 다른 글

CSS 개발자 수업 58일차 - transform, transition  (0) 2021.06.20
CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow  (0) 2021.06.20
CSS 개발자 수업 56일차  (0) 2021.06.17
CSS 개발자 수업 55일차 - float, position, z-index  (0) 2021.06.17
CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity  (0) 2021.06.15

관련글

댓글

티스토리툴바