HTML/CSS/JS로 만드는 스타벅스 웹사이트

CSS 개요

기본 문법, 주석

div {
	font-size: 50px;
    color: blue;
    text-decoration: underline;
}

• selector { attribute: value; }
  • 선택자(selector)
    스타일을 적용할 대상
    HTML 파일에서의 tag
  • 속성(attribute)
    스타일의 종류
  • 값(value)
    스타일의 값
• 주석
  /*이것은 주석이다*/

인라인, 블록 요소

• 인라인
  width, height 적용 X
• 블록
  width, height 적용 O

CSS 선언 방식

CSS 선언 방식에는 내장 방식, 인라인 방식, 링크 방식, @import 방식이 있다.

• 내장 방식
  <style></style> 의 내용으로 스타일을 작성하는 방식
  HTML 내부에서 직접 작성하는 것이다.

• 인라인 방식
  HTMl 내부에서 태그 요소의 style 속성에 직접 스타일을 작성하는 방식으로 선택자가 없다.

• 링크 방식
  <link /> 태그를 이용해 외부 CSS 문서를 가져와서 연결하는 방식
  병렬으로 연결하는 것이다.

• @import 방식
  CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
  직렬으로 연결하는 것으로 연결이 지연될 수 있다.

@import url("./another.css");

CSS 선택자

기본 선택자

• 전체 선택자
  모든 요소 선택
  * { }

• 태그 선택자
  태그 이름에 해당하는 부분 선택
  ABC { }

• 클래스 선택자
  HTML class 속성의 값이 해당하는 요소를 선택
  .ABC { }

• ID 선택자
  HTML id 속성의 값이 해당하는 요소를 선택
  #ABC { }

복합 선택자

• 일치 선택자
  선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
  ABC.XYZ { }

• 자식 선택자
  선택자 ABC의 자식 요소인 XYZ를 선택
  ABC > .XYZ { }

• 하위(후손) 선택자
  선택자 ABC의 하위(후손) 요소인 XYZ를 선택
  '띄어쓰기'가 선택자의 기호!
  ABC .XYZ { }

• 인접 형제 선택자
  선택자 ABC의 다음 형제 요소 XYZ 중 하나를 선택
  .ABC + tag { }

• 일반 형제 선택자
  선택자 ABC의 다음 형제 요소 XYZ들 모두 선택
  .ABC ~ tag { }

가상 클래스 선택자

간단한 동작을 구현할 수 있다.

• HOVER
  선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 동작
  ABC:hover { }

• ACTIVE
  선택자 ABC 요소에 마우스를 클릭하고 있는 동안 동작
  ABC:active { }

• FOCUS
  선택자 ABC 요소가 포커스 되면 동작
  포커스가 가능한 요소에 가능하고, 대표적으로 input 요소에 사용 가능하다.
  input:focus { }

  tabindex=-1 속성을 이용하면 focus가 될 수 있는 요소로 만들 수 있다.

• FIRST-CHILD
  선택자 ABC가 형제 요소 중 첫째라면 동작
  .ABC tag:first-child { }

• LAST-CHILD
  선택자 ABC가 형제 요소 중 막내라면 동작
  .ABC tag:last-child { }

• NTH-CHILD
  선택자 ABC가 형제 요소 중 n번째면 동작
  .ABC *:nth-child(2) { }
.ABC *:nth-child(2n) { } > 2n번째
  .ABC *:nth-child(n+2) { } > 2번째부터

• NOT
  선택자 XYZ가 아닌 ABC 요소 선택
  .ABC *:not(XYZ) { }

가상 요소 선택자

• BEFORE
  인라인 요소
  선택자 ABC 요소의 내부 앞에 내용 삽입
  .ABC::before { content: "내용" }

• AFTER
  인라인 요소
  선택자 ABC 요소의 내부 뒤에 내용 삽입
  .ABC::after { content: "내용" }

before와 after는 인라인 요소로서 블록 요소로 쓰고 싶으면 display: block 를 추가해서 사용한다.

속성 선택자

• ATTR
  속성 ABC를 포함한 요소 선택
  [ABC] { }

• ATTR = VALUE
  속성 ABC를 포함하고 값이 XYZ인 요소 선택
  [ABC="XYZ"] { }

스타일 상속

자식, 하위 요소에 스타일을 상속시킬 수 있다.

상속되는 CSS 속성들은 글자/문자 관련 속성들이지만 모든 글자/문자 관련 속성들이 상속되는 것은 아니다.

강제 상속

상속 되지 않는 CSS 속성을 강제로 상속시키는 것

attribute: inherit;

선택자 우선순위

우선순위란?

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법

1. 점수가 높은 선언이 우선
2. 점수가 같으면, 가장 나중에 해석된 선언이 우선

선택자	점수
!important	무한대
인라인 선언	1000
id 선택자	100
class 선택자	10
태그 선택자	1
전체 선택자	0