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. 점수가 같으면, 가장 나중에 해석된 선언이 우선