📍 CSS Selector

w3schools Reference
MDN Reference

전체 선택자 Universal Selector

* 기호를 사용하여 모든 형태의 모든 요소를 선택한다.

/* 모든 요소를 선택 */
* { }

유형 선택자 Type Selector

주어진 유형(노드)의 모든 요소를 선택한다.

/* 모든 div 요소를 선택 */
div { }

클래스 선택자 Class Selector

주어진 class 특성을 가진 모든 요소를 선택한다.

/* text라는 클래스를 가진 요소를 선택 */
.text { }

ID 선택자 ID Selector

ID 특성에 따라 요소를 선택한다.
문서 내에서 ID를 가진 요소가 하나만 존재해야 한다.

/* writing-section이라는 ID를 가진 요소를 선택 */
#writing-section { }

속성 선택자 Attribute Selector

주어진 특성(attribute)을 가진 모든 요소를 선택한다.

/* href 속성을 가진 모든 a 요소 */
a[href] { }

/* id 속성에 정확히 'only' 값을 가진 모든 p 요소 */
p[id="only"] { }

/* class 속성에 정확히 'out' 값을 가진 모든 p 요소, 공백으로 구분한 여러 개의 값을 가지고 있을 수 있다. */
p[class~="out"] { }

/* class 속성을 가지고 있고, 그 값이 정확히 'out'이거나 'out'으로 시작하면서 '-' 문자가 곧바로 뒤에 따라 붙는 모든 p 요소 */
p[class|="out"] { }

/* id 속성을 가지고 있고, 접두사로 'sect'가 값에 포함된 모든 section 요소 */
section[id^="sect"] { }

/* class 속성을 가지고 있고, 접미사로 '2'가 값에 포함된 모든 div 요소 */
div[class$="2"] { }

/* class 속성을 가지고 있고, 값에 'w' 문자열이 적어도 하나 이상 존재하는 모든 div 요소 */
div[class*="w"] { }

선택자 목록 Selector List

, 로 구분하여 선택자 그룹을 생성하는 방법으로, 일치하는 모든 요소를 선택한다.

/* 모든 section 요소와 h1 요소를 선택 */
section, h1 { }

후손 선택자 Descendant Combinator

공백으로 구분하여 첫 번째 요소의 후손인 모든 요소를 선택한다.

/* header의 후손인 모든 h1 요소를 선택 */
header h1 { }

자식 선택자 Child Combinator

> 로 구분하여 첫 번째 요소의 바로 아래 자식인 모든 요소를 선택한다.

/* header의 바로 아래 자식인 모든 div 요소를 선택 */
header > div { }

형제 선택자 General Sibling Combinator

~ 로 구분하여 첫 번째 요소에 뒤따르면서 같은 부모를 공유한 모든 요소를 선택한다.

/* p 요소에 뒤따르면서 p와 같은 부모를 가지는 모든 span 요소를 선택 */
p ~ span { }

인접 형제 선택자 Adjacent Sibling Combinator

+ 로 구분하여 첫 번째 요소 바로 뒤에 위치하면서 같은 부모를 공유한 두 번째 요소를 선택한다.

/* h2 요소 바로 뒤에 있고 h2와 같은 부모를 가지는 p 요소를 선택 */
h2 + p { }

💬 Twittler Mockup

와이어프레임 Wireframe

웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 작업을 말한다.
단순하게 레이아웃과 제품의 구조를 보여주는 용도이기 때문에
효과나 애니메이션, 스타일링이나 UX에 대한 판단은 하지 않는다.
(그래서 아래의 결과물은 와이어프레임이 아닐 수 있다...😢)

View Wireframe(Figma)↗️

목업 Mockup

실물 크기의 모형을 말한다.
소프트웨어 개발에 있어서 목업이란 마크업 언어(HTML)를 통해서
실제 어플리케이션이 작동하는 모습과 동일하게 작성한다.
자바스크립트로 동작을 적용하기 전에는
HTML에 직접 하드 코딩하는 방식으로 진행한다.

View Application↗️