CSS

CSS파일을 html내에 가져오기

<link rel+=”stylesheet” href=”./css/main.css”> 

(병렬) [권장]
위의 방법으로 html에 CSS를 연결하고 또 외부의 CSS파일을 추가로 가져오고 싶을 경우,import를 사용한다.

@import url(“./box.css”); <-- CSS문서 안에서 또다른 CSS문서를 가져와 연결

단점은 main.css가 연결되기 전 까지는 box.css를 가지고 올 수 없음.
이것을 이용해서 연결을 지연시킬 수 도 있다. (직렬)

CSS 선택자(기본, 복합, 가상클래스, 가상요소, 속성) 순서대로 기억

• 기본 선택자(전체 선택자) (*) : 모든 요소를 선택[Universal Selector]
• 태그 선택자 : 별다른 기호 없이 태그이름이 OO인 것을 선택(li태그 전체를 선택) [Type Selector]
• 클래스 선택자 (.) : ‘ .’ 을 앞에 붙이는 것으로 표현
• ID 선택자 (#) : ‘#’를 앞에 붙이는 것으로 표현

복합 선택자

일치 선택자[Basic selector]: 만약 span.orange 라고 표현하면 span태그의 orange라는 값이 있다면 적용 // 만약 위치를 바꾼다면  브라우저가 인식을 못하기 때문에 태그선택자를 사용할때는 앞에 붙인다.

자식 선택자[Child selector]: ‘ >’ 기호를 사용하며 , ABC > XYZ 일 경우 선택자 ABC의 자식요소 XYZ를 선택 (ex. ul > .orange {})

하위(후손) 선택자[Descendant Combinator]: 띄어쓰기가 선택자의 기호 
(ex. div .orange{ })

인접 형제 선택자[Adjacent sibling combinator): ‘+’기호를 사용
선택자 ABC의 다음 형제 요소 XYZ하나를 선택 (ex. .orange + li { } 일 경우 orange클래스를 가지고 있는 요소의 ‘다음’ li 태그 하나)


일반 형제 선택자[General sibling combinator]: ‘~’기호를 사용하며 
선택자 ABC 다음 형제 요소 XYZ 모두를 선택

#선택자 가상 클래스 선택자

• 일반적인 동작들은 JS에서 담당하지만, CSS에서도 극히 일부분이 있다.

  “ .box:hover “에서 ':hover'가 가상 클래스임. 어떠한 행동을 했을 때 동작하는 개념

:hover - 마우스를 올렸을 때를 선택
:active -  클릭하고 있는 동안만을 선택
:focus - 어떠한 요소가 포커스되면 선택( Focus가 될 수 있는 요소는 따로 있는데 HTML 대화형 콘텐츠가 해당) input, a, button, label 등
** tabindex속성을 통해 Focus가 되도록 만들어 줄 수 있다. 
ex) <div class =”box” tabindex=”-1”> -1이 아닌 다른 값을 넣는 것은 흐름을 방해할 수 있어 권장X**

:first-child - ABC:first-child 선택자 ABC가 형제요소 중 첫째라면 선택.

:last-child 형제 요소중 막내라면 선택
:nth-child(n) - 형제 요소 중 (n)째 라면 선택 
ex. .fruits *:nth-child(2) ← fruits라는 클래스를 가진 요소의 하위요소중 둘째를 선택
.fruits *:nth-child(2n) <- n키워드를 사용할 수도 있는데 (n은 0부터 시작) 2에다 n을 곱한다는 뜻이됨 즉, 짝수 째 요소들을 선택한다는 뜻
.fruits *:nth-child(2n+1) <- 홀수째 를 선택한다는 뜻
.fruits *:nth-child(2n+2) <- n은 0부터 시작하기때문에 첫번째 요소는 건너뛰고 3번째부터 선택한다는 뜻.  
.fruits *:nth-child(-n+3) <- 앞에서 세 개의 요소를 나타낸다. [=-0+3, -1+3, -2+3]

:not(xyz) - ABC:not(XYZ) 선택자 XYZ가 아닌 ABC요소 선택

가상요소 선택자

::콜론이 두개가 붙는다. 가상의 요소를 만들어서 실제로 삽입할 수 있음
자주 사용됨

::before 선택자 요소의 내부 앞에 내용을 삽입/ 가상의 인라인 요소를 만들어서 내부의 앞쪽에 어떤 내용을 실제로 삽입

.box::before   

이렇게 사용한다.

::after 선택자 요소의 내부 뒤에 내용을 삽입

가상요소 선택자를 사용할 때는 항상 content를 사용/ 속성을 사용하지 않더라도 content를 추가하고 봐야함.

.box::after { content: “뒤!” ;}
사용하지 않더라도 .box::after{ content:””;}

가상요소 선택자는 인라인 요소이기 때문에 width, height 를 지정해도 적용 x
이렇게 쓰고 싶을 때에는 display: block; 으로 블록요소로 전환해주어야함.

속성 선택자

'[ ]'를 기호로 씀. [ABC] 속성 ABC를 포함한 요소선택

[ABC=”XYZ”] 속성 ABC을 포함하고 값이 XYZ인 요소 선택

자식, 하위 요소까지 영향을 미침 <- 스타일 상속
모든 것이 상속되는 것은 아님

**상속되는 CSS속성들
font-style, font-weight, font-size, line-height, font-family, color, text-align등등
(모두 글자/문자 관련 속성들이지만, 모든 글자/문자 속성은 아님!)

강제 상속

실질적으로 상속안되는 속성들도 임의로 상속이 되도록 하는 것
상속 안되는 속성에 inherit 을 값으로 주면서 부모 요소로부터 강제 상속받게 할 수 있음.

선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정
점수가 높은 선언이 우선함
점수가 같으면, 가장 마지막에 코드로 작성한 선언이 우선함.

• !important (무한점수) > 인라인 선언(1000점) > # (100점) > . ( 10점) > 태그선택자 (1점) > * (0점) > 상속

^ 위의 그림에서 우선순위가 큰 순서대로 정렬하면
!important > 인라인 선언(orange) > ID 선택자 (#) > Class 선택자( .) > 태그 선택자 > 전체선택자(*) > 상속 (우선순위 점수를 따로 계산하지 않음)

:hover처럼 가상 클래스 선택자도 클래스이기 때문에 10점 부여
::before 가상 요소 선택자는 태그 선택자의 점수를 가짐 1점 부여
마지막 줄에 :not은 가상 선택자이기는 하지만 부정한 상태로 선택하기 때문에 .box만 계산하여 10점 부여

CSS 속성(properties)

-html의 속성은 Attributes, JS의 속성은 properties

width : 가로너비,  따로 값을 지정하지 않으면 auto, 가로 전체에 뿌려줌
height: 세로너비, 따로 값을 지정하지 않으면 auto, 0으로 보이지 않음.
span: 대표적인 인라인 요소, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소(기본값은 가로세로너비가 모두 내부 컨텐츠 크기에 맞춰 줄어듬)
div: 대표적인 블록 요소, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 요소(부모요소의 크기 만큼 가로넓이는 자동으로 늘어나고, 세로 넓이는 자동으로 줄어듬(세로너비는 span과 동일)
max-width, max-height : 요소가 가질 수 있는 최대 가로/세로 너비 기본값은 none(최대너비 제한 없음)
min-width, min-height: 요소가 작아질 수 있는 최소 가로/세로 너비 기본값은 0; 숫자 0은 따로 단위를 붙일 필요가 없음