[PHP] CSS 복습
CSS(Cascading Style Sheet)
- 삽입 방법
1) style 태그 넣기<style> ... </style>
2) 외부파일로 만들어서 링크 걸기<link rel="stylesheet" href="#">
3) 태그에 직접 삽입<h1 style="background: dodgerblue"> ... </h1>
- 형식
: selcetor(속성: 값; 속성: 값; 속성: 값;)
h1 { background: dodgerblue; }
1) style 태그 넣기
<style> ... </style>
2) 외부파일로 만들어서 링크 걸기<link rel="stylesheet" href="#">
3) 태그에 직접 삽입<h1 style="background: dodgerblue"> ... </h1>
: selcetor(속성: 값; 속성: 값; 속성: 값;)
h1 { background: dodgerblue; }
위에 코드로 예시를 들면 h1은 태그, background는 속성, dodgerblue는 값이다.
- selector
: 태그, 클래스, 아이디 - class
: 선언할 때는 .class 이름, 적용시에는 class=class - id
: 선언할 때는 #id 이름, 적용시에는 id="id 이름"class는 여러 번 적용 가능하지만, id는 한 파일에서 한 번만 사용 가능하다. (이름이 중복되어서는 안 됨)
box 모델
-
block 모델
: 배치가 아래로 향한다.
ex) div, p, h1~h6... -
inline 모델
: 배치가 옆으로 향한다.
ex) a, span -
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
- 자식 선택자(>)
: 내 바로 아래 자식만 선택한다.
div > ul
//div 밑에 있는 첫번째 자식에게만 스타일을 적용한다.
section > p {
color: blue;
}
//section 밑에 있는 첫번째 p에서 파란색을 적용한다.
- 자손 선택자(:)
: 내 아래에 있는 모든 애들을 선택한다.
div ul :
//div 밑에 있는 모든 ul에 스타일을 적용한다.
section : p {
background: gray;
}
//section 밑에 있는 모든 p에 회색 배경을 적용한다.
- 형제 선택자
: 같은 부모를 가진 형제들 사이에 적용한다.
div + h1
//div 태그의 형제중 첫번째 h1에게만 스타일을 적용한다.
div ~ h1
//div 태그의 형제중 모든 h1에게 스타일을 적용한다.
- 속성 선택자
: 지정한 속성을 가진 태그에 적용한다.
a[href] {
color: red;
}
//a 태그에 href 속성을 가진 태그에 빨간색을 적용한다.
가상 클래스와 요소
- 동작에 반응하는 클래스
- a : link { }
: 하이퍼 링크 걸렸을 때 - a : visited { }
: 클릭한 후 - a : hover { }
: 마우스를 올렸을 때 - a : active { }
: 마우스를 클릭했을 때focus: 초점이 맞추어졌을 때 스타일 적용(input...에 주로 적용)
- input에서 사용
- : enabled
- : disabled
- : checked (radio, checkbox에서 선택했을 때의 스타일 지정)
nth-child
- nth-child(n)
: 앞에서부터 n번째의 자식에 스타일을 적용한다. - nth-last-child(n)
: 뒤에서부터 n번째의 자식에 스타일을 적용한다. - first-child
: 첫번째 자식에 스타일을 적용한다. - 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에서 짝수번째 자식에 스타일을 적용한다.
Author And Source
이 문제에 관하여([PHP] CSS 복습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@_leehyeryeong/PHP-CSS-복습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)