[PHP] CSS 복습

CSS(Cascading Style Sheet)

  1. 삽입 방법
    1) style 태그 넣기
    <style> ... </style>
    2) 외부파일로 만들어서 링크 걸기
    <link rel="stylesheet" href="#">
    3) 태그에 직접 삽입
    <h1 style="background: dodgerblue"> ... </h1>
  2. 형식
    : selcetor(속성: 값; 속성: 값; 속성: 값;)
h1 { background: dodgerblue; }

위에 코드로 예시를 들면 h1은 태그, background는 속성, dodgerblue는 값이다.

  1. selector
    : 태그, 클래스, 아이디
  2. class
    : 선언할 때는 .class 이름, 적용시에는 class=class
  3. id
    : 선언할 때는 #id 이름, 적용시에는 id="id 이름"

    class는 여러 번 적용 가능하지만, id는 한 파일에서 한 번만 사용 가능하다. (이름이 중복되어서는 안 됨)


box 모델

  1. block 모델
    : 배치가 아래로 향한다.
    ex) div, p, h1~h6...

  2. inline 모델
    : 배치가 옆으로 향한다.
    ex) a, span

  3. inline-block 모델
    : inline과 block의 속성을 모두 가졌다.

block -> inline 모델으로 변경하려면?

display: inline;
or
display: inline-block;
// inline: width, height, padding-top 줄 수 없음
// inline-block: width, height 줄 수 있음

inline -> block 모델으로 변경하려면?

display: block;

selector

  1. 자식 선택자(>)
    : 내 바로 아래 자식만 선택한다.
div > ul
//div 밑에 있는 첫번째 자식에게만 스타일을 적용한다.

section > p {
	color: blue;
}
//section 밑에 있는 첫번째 p에서 파란색을 적용한다.
  1. 자손 선택자(:)
    : 내 아래에 있는 모든 애들을 선택한다.
div ul :
//div 밑에 있는 모든 ul에 스타일을 적용한다.

section : p {
	background: gray;
}
//section 밑에 있는 모든 p에 회색 배경을 적용한다.
  1. 형제 선택자
    : 같은 부모를 가진 형제들 사이에 적용한다.
div + h1
//div 태그의 형제중 첫번째 h1에게만 스타일을 적용한다.

div ~ h1
//div 태그의 형제중 모든 h1에게 스타일을 적용한다.
  1. 속성 선택자
    : 지정한 속성을 가진 태그에 적용한다.
a[href] {
	color: red;
}
//a 태그에 href 속성을 가진 태그에 빨간색을 적용한다.

가상 클래스와 요소

  1. 동작에 반응하는 클래스
  • a : link { }
    : 하이퍼 링크 걸렸을 때
  • a : visited { }
    : 클릭한 후
  • a : hover { }
    : 마우스를 올렸을 때
  • a : active { }
    : 마우스를 클릭했을 때

    focus: 초점이 맞추어졌을 때 스타일 적용(input...에 주로 적용)

  1. input에서 사용
  • : enabled
  • : disabled
  • : checked (radio, checkbox에서 선택했을 때의 스타일 지정)

nth-child

  1. nth-child(n)
    : 앞에서부터 n번째의 자식에 스타일을 적용한다.
  2. nth-last-child(n)
    : 뒤에서부터 n번째의 자식에 스타일을 적용한다.
  3. first-child
    : 첫번째 자식에 스타일을 적용한다.
  4. last-child
    : 마지막 자식에 스타일을 적용한다.
div p : nth-child(3)
//div의 자손 중 p에서 3번째 자식에 스타일을 적용한다.

div p : nth-child(odd)
//div의 자손 중 p에서 홀수번째 자식에 스타일을 적용한다.

div p : nth-child(even)
or
div p : nth-child(2n)
//div의 자손 중 p에서 짝수번째 자식에 스타일을 적용한다.

좋은 웹페이지 즐겨찾기