[CSS] 선택자, 가상클래스, Text, Font, Box model

CSS

: Cascading Style Sheet

- 디자인 요소 담당

- Color , 위치, 크기  담당

 

CSS 작성 위치

 a. Inline (비추) 

 - Element의 Style 속성에 css코드 작성

 

 b. Internal (비추) 

 - Head 태그 내에 <style></style> 내에 css코드 작성

 

 c. external (추천) 

 - CSS코드만 있는 전용 파일 생성 

 - 사용하려는 HTML 에서 Head태그 내에 <link>를 이용해서 불러오는 방식

 

 

1. 문법

선택자  {

 속성명  : 값;

 속성명 : 값2;

}

 

2. 선택자 (Selector)

 1) *  : 전체 선택자, 모든 Element를 선택

 2) 태그명 : 태그 선택자

 3) #id명 : ID 선택자

 4) .클래스명  : Class 선택자 (글로벌속성)

 5) 선택자 A > 선택자B : 자식 선택자, A선택요소의 직계 자손 B

 6) 선택자 A  선택자 C: 후손 선택자, A선택요소의 모든 C

    ex) 선택자A>선택자B>선택자C 

     =>선택자A 선택자C

이렇게 쓰는것도 가능하다.

선택자는 이것말고도 많다.

 

3. 가상 클래스(:pseudo-class)

  1) 앵커(a) 가상 클래스

      a. a: link  : 아직 방문하지 않은 링크 

      b. a: visited : 방문한 클래스

      c. a: hover : 마우스의 커서를 올렸을 때 

      d. a: active : element(요소)를 누르고 있을 때

      e. a: focus  : 포커스가 생겼을 때 

  - hover, active, focus 는 a 태그 뿐만아니라 다른 태그에서도 사용가능! 

 

  2) 순서 가상 클래스 

     a.  : first - child : 어떤 요소들 중에서 첫번째 요소 선택

     b.  : last -child : 요소들 중 마지막 요소 선택 

     c.  : nth-child(번호) : 번호에 해당하는 요소 선택, 시작번호는 1번

          번호에 홀수(odd) 짝수(even) 넣어서 사용 가능!

          : nth-child(odd) : 홀수

          : nth-child(even) : 짝수

 

  3) 타입 순서 가상 클래스 

     a.  : nth -of -type (번호)  : 같은 타입들 중 번호에 해당하는 요소 선택

 

4. 가상 요소

   - 이미지나 text 그라데이션 추가 할 목적

    a.  :: before  : 선택한 요소 앞에 가상의 요소를 추가

    b.  :: after    : 선택한 요소 뒤에 가상의 요소를 추가

        p :: before{

                content : "Text";

              }

        p :: after{

                content : url("image 경로");

              }

   

 

1. Text

 1. Color

   - Text의 색 지정

 

 2. text-decoration 

  - UnderLine

  - OverLine

  - Line-through

  - none(선이 없음)

  - 언더바, 윗선, 중간선, none

 

3. line - height 

 - 줄 간격 

 - Text의 수직 정렬시에도 사용

 

4. Text - align

 - 수평정렬

 - left

 - center

 - right

 - justify -> 완전 한쪽끝에 있음

 

5. text - transform 

  - text의 첫글자를 대문자로 변경 

 

6. text - indent

  - 첫줄 들여쓰기

 

7. letter - spacing 

 - 글자간의 간격

 

8. word - spacing 

  - 단어간의 간격

 

Font

서체, 크기, 스타일

1. font - size : 폰트 크기 지정

2. font - weight : 볼드체 지정 , 기존 폰트의 굵기

  - bold, bolder , lighter

3. font - style: italic체 지정

4. font-family

  - 서체 지정, 컴퓨터에 폰트가 있어야 함

  - 한글이름의 서체나 띄어쓰기가 있는 영문 서체는 ' '나 " " 로 감싸야 함

  - web font (자동으로 다운)

  -- font를 제공하는 Cloud Server 이용

  - @font - face: 운영서버에 있는 폰트를 클라이언트에게 다운로드

     src: url (경로명)

 

Box Model

- 다음 4가지가 모여서 하나의 Box라고 함

0. 가로(width) 세로(height)

 - box의 가로 세로 사이즈 조정

  1) width

  2) height

 

 1. margin

  Element(Box)와 Element(Box)간의 간격

  top, right, bottom, left

 

  margin - 방향 : 수치

  

  short-hand

  - margin : top, right, bottom, left (시계방향)

  ex) margin: 10px 50px 20px 30px

  - top과 bottom 수치가 같고 right left가 수치가 같을 때

  margin : top(buttom) right(left)

  - top, right, bottom, left 모두 동일한 수치 일 때 

  margin : 수치

 

  - 자식태그에서 margin-top을 줄 경우 부모와 동일하게 움직이는 버그 발생

  - 부모태그에 overflow : hidden; 을 주면 해결된다.

 

  -margin : 0px auto; => 상하는 0px auto는 자동으로  부모 x값의 중간에 위치 좌우정렬을 해준다!

 

2. border 

  element의 테두리 

  Top, Right, Bottom, Left

 

  1) 3가지 요소

   a. color : 선의 색 

   b. style :  선의 종류 (solid -실선, dotted -점선)

   c. width : 선의 두께

 

  2) 사용법

    border - 방향 - color 

    border - 방향 - style  

    border - 방향 - width 

 

    -short hand (단축)

  border - 방향 : color값 width값 style값

 

    -4방향 모두 같은 값을 가질 때

  border : color값 width값 style값

 

  3) Round 처리

   border -radius

   border - top - left - radius : 

   border - top - right - radius : 

   border - bottom - right -radius :

   border - bottom - left - radius :

 

   - short hand(한꺼번에 4개를 주고 싶을때)

  border-radius: TL TR BR BL

 

4) table border

 -td와 td간의 간격이 존재

a. 간격 조정 : border-spacing : 값;

b. spacing이 0 일때 각각의 border 처리 

-border -collapes 

--collapse: 합쳐진 선들 중 하나만 사용

--separate : 둘다 사용 

 

3. padding

  테두리와 contents간의 간격

  사용방법은 Margin 과 동일

  top, right, bottom, left

  padding - 방향 : 수치

 

  padding : top right bottom left

  padding : top(bottom) right(left)

  padding : 수치

 

4. box-sizing 

  1) content-box : 기본값, padding의 수치에 따라 box크기가 커짐

  2) border-box : padding내의 수치와 상관없이 box 크기는 고정!

 

 

5. Contents

  Element내의 contents(Element, Text 등)

---

 

 

 

 

*틀리거나 문제가 있을 시 바로 수정하겠습니다!

댓글로 남겨주시면 감사하겠습니다 :)