네이버 부스트캠프 및 칸 아카데미 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

---

CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. 주로 작업을 하면서 외부 스타일 시트 파일을 별도 작성합니다. 또한, style 시작하기에 앞서 reset CSS를 구성하여 기존에 default 값을 초기화 하는 작업을 거칩니다. 이러한 CSS를 통하여 보다 미적으로 사이트의 내용을 꾸며주는 것이 가능합니다.

▶ [csszengarden] 여러가지 style로 달라지는 예시

<link rel="stylesheet" href="css/style.css">

---

선택자

요소 선택자

* { color: yellow; }
h1, h2, h3, h4, h5, h6 { color: green; font-size: 2em; background-color: gray; }

• 태그 선택자
  문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용
  *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택가능
  이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용

• 그룹화
  선택자는 쉼표를 이용해서 그룹화 가능

.foo red blue { font-size: 30px; }
#zoo { border: 1px solid black }
#foo.bar { ... }

• class 선택자
  가장 일반적인 방법으로 스타일을 선언하는 방법
  클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 사용
  공백으로 구분하여 여러 개의 class 값 적용 가능
  선택자끼리는 조합하여 사용이 가능(요소 + class, id + 요소)

• id 선택자
  단독 대상으로 스타일을 선언하는 방법
  아아디 선택자를 쓸 때는, 맨 앞에 #(해시) 기호를 사용

<p class="baz" id="title">HTML</p>
p[class][id] { text-decoration: underline; }
p[id="title"] { text-decoration: underline; }

• 속성 선택자
  대괄호를 이용해서 선언하며 대괄호 안에 속성 이름 기입
  조합 사용 및 구체화시켜 사용이 가능
  부분 속성값으로 선택하여 사용 가능

  [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
  [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
  [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
  [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

---

문서 구조 관련 선택자

문서 구조의 이해

조상/자손 :
부모와 자식의 관계를 포함한 확장된 관계
조상 요소는 그 요소를 포함하는 모든 요소로 부모 요소를 포함하여 여러 개 가능
자손 요소는 그 반대로 그 요소가 포함하고 있는 모든 요소가 자손 요소

부모/자식 :
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나
자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개 가능

형제 :
같은 부모를 가지고 있는 요소들은 서로 형제 관계

구조 선택자

div span { color: red; }

• 자손 선택자
  자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
  

div > h1 { color: red; }

• 자식 선택자
  자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.
  꺽쇠 기호와 선택자 기호 사이에는 공백은 있거나 없어도 상관이 없습니다.

div + p { color: red; }

• 인접 형제 선택자
  인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.
  자식 선택자와 마찬가지로 공백은 있거나 없어도 상관이 없습니다.
  인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해 있는 요소를 선택하는 선택자입니다.

p ~ ul { background: #ff0000; }

• 틸트 형제 선택자
  틸트 형제 선택자는 선택자 사이에 ~ 기호를 넣습니다.
  인접이 아닌 특정 요소의 모든 형제 선택하여 스타일을 적용합니다.

---

가상 선택자

가상 클래스(pseudo class)

가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. :를 작성하여 사용하며 HTML 문서의 일부를 DOM 트리 구조와는 상관없는 방법으로 선택할 때 사용합니다.

1. 문서 구조와 관련된 가상 클래스

• :first-child : 첫 번째 자식 요소 선택
• :last-child : 마지막 자식 요소 선택

2. 앵커 요소와 관련된 가상 클래스

• :focus : 현재 입력 초점을 가진 요소에 적용
• :hover : 마우스 포인터가 있는 요소에 적용
• :active : 사용자 입력(클릭, 키보드포커스 등)으로 활성화된 요소에 적용

가상 요소(pseudo element)

HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여
가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속된 형식입니다. ::를 작성하여 사용하며 이는 문서에 나타난 것 이외에 추가로 정의된 DOM 트리의 추상화 레이어입니다.

• ::before : 가장 앞에 요소를 삽입
• ::after : 가장 뒤에 요소를 삽입
• ::first-line : 요소의 첫 번째 줄에 있는 텍스트
• ::first-letter : 블록 레벨 요소의 첫 번째 문자

---

Q&A

Q. ul>li a{...} 등 선택자의 복잡성?

• A1. 브라우저는 ul부터 인식하지 않습니다. 선택자의 작동 방식에서 문서구조를 활용하여 할 때 컴퓨터는 선택자를 오른쪽에서 왼쪽으로 읽기 시작합니다. 즉 a태그를 먼저 찾고 li 태그를 조상으로 갖는지 확인한 후, 직접적인 부모요소인 ul를 찾습니다. 그 이후 해당하는 a요소들이 선택됩니다.
• A2. 복잡하게 과잉 한정된 셀렉터는 오히려 가독성에 있어서 혼란을 가져옵니다. 경로를 따라가서 찾는 것이 복잡해지면 차후에 관리에 있어서 불편함이 증가하므로 가능한 짧게 셀렉터를 쓸 것을 고민해야 합니다.

Q. block와 inline 차이?

• A. 모든 HTML 요소는 사각형 박스 형태를 취하고 있다. 박스는 Box-model이라는 모델을 가지고 있습니다. CSS요소에는 display가 존재하는데, block은 수직으로 계속 쌓입니다. inline은 수평으로 계속 쌓입니다. 또한 inline 박스에 border나 padding이 눈에 보이더라도 사실은 line-height에 의해 높이가 조절됩니다. inline-block은 특이한데, 이 요소는 인라인 요소처럼 수평으로 쌓이지만 블록 레벨 요소의 박스처럼 높이를 계산합니다. 즉 line-height에 의존하지 않습니다