CSS

CSS

cascading style sheet
css -> 콘텐트의 모양을 정의

+

HTML -> 콘텐트의 내용을 구성

+

JavaScript -> 콘텐트 모양이나 값을 제어

CSS-2

대상 {
스타일 속성명: 값;
스타일 속성명: 값;
}

대상 : selector

CSS - selector

스타일을 적용할 태그를 지정하는 문법

 

1. 태그명 {~~}

<태그명> </태그명>

 

태그 여러 개를 나열 할 때 콤마를 쓴다.

 

2. #태그아이디 {~~~}

<태그명 id="아이디"> </태그명>

 

태그에 아이디 속성을 붙였을 때 그 태그에 스타일을 지정할 때 쓰는 방법

 

아이디 속성에 해당 이름의 태그를 찾아서 지정한다.

 

3. .태그분류명{~~~}

<태그명 class = "분류명"> </태그명>

 

두개의 클래스를 동시에 지정할 때 앞에 선언한 클래스를 우선으로 한다.

 

4. 대상 : 상태 {~~~}

대상 태그가 지정된 상태일 때 적용

 

특정 상태에 놓여있는 태그이기 때문에 현존하는 대상이 아니고 특정 상태에만 놓여있을 때 존재하는 대상이다 (pseudo selector)

 

:hover = 마우스 커서가 대상자 위에 있는 상태

 

5. * {~~~}

모든 태그

 

6. 대상, 대상, 대상... {~~~}

여러 개의 대상을 지정

 

7. 조상 대상 {~~}

해당 조상을 갖는 대상 지정

 

8. 태그(부모) > 태그 {~~}

태그 아래 직계 자식을 가리킬 때 > 를 쓴다.

 

9. 형 + 다음동생대상자 {...}

특정 대상자 다음에 오는 태그를 지정하기. 특정 대상자를 바로 위의 형으로 갖는 경우.

CSS - 여러 스타일 속성을 한번에 설정하기

border-width: 값;
border-style: 값;
border-color: 값;

border 스타일에서 다음 문법을 제공
border : 너비 스타일 색상; (순서 상관없음)

CSS - 조건 지정하기

대상자#아이디 {...}
대상자.분류명 {...}
대상자:상태명 {...}
대상자[속성명] {...}

속성을 여러개 지정하고 싶을 때 대괄호를 나열하라

name^="..." > 속성의 값이 특정 문자열로 시작하는 경우

name$="..." > 속성의 값이 특정 문자열로 끝나는 경우

상속이 가능한 스타일

스타일 중에서 자손 태그로 값을 자동으로 상속하는 것이 있다.
예) 폰트, 색상 등

지정된 태그에 대해서만 스타일이 적용되는 것이 있다.
예) 테두리, 패딩, 마진 등

보더는 자식 태그들이 영향받지 않는다(상속받지 않는다)

CSS - 스타일 적용 순서

specificity 값?
실렉터의 우선 순위를 지정하기 위해 부여된 값

 

한 태그에 같은 스타일이 중복 지정된 경우
specificity 값을 계산하여 값이 높은 스타일이 적용된다.
스타일을 선언한 순서 보다 계산 값이 우선한다.
specificity 계산법

 

*: 0
태그 : 1
클래스, 조건 : 10
아이디 : 100
인라인스타일 : 1000

둘 다 같은 정수를 지정했을 때 나중에 지정된 스타일을 적용한다.

CSS - inline, block, inline-block

inline : a,i,b 콘텐트 한 줄 안에 함께 놓인다. 너비/높이 설정 불가능 = 콘텐트에 따라 크기가 자동 결정됨
block : div, hx, p, ul, ol 한 줄을 독점 + 너비/높이 설정해야 함
inline-block : inline 처럼 한 줄을 공유 + block 처럼 너비/ 높이 설정 가능

display: 출력유형; (block, inline, inline-block)

CSS - 박스 크기 설정 : content-box, border-box

1. content-box
   = 기본값

콘텐트 가로 = width
콘텐트 세로 = height

2. border-box

테두리 세로 = height
콘텐트
테두리 가로 = width

여러 이미지를 둘 때 먼저 지정한 것이 위에 오고 뒤에 지정한 것이 밑에 깔린다.