CSS 레이아웃, Selector

---

CSS Selector  

셀렉터

h1 { } 
div { }

전체 셀렉터

* { }​

Tag 셀렉터

section, h1 {}​

ID 셀렉터

#only {}​

class 셀렉터

.widget { } 
.center { }

attribute 셀렉터 (암기할 필요 x)

a[href] { } 
p[id="only"] { } 
p[class~="out"] { } 
p[class|="out"] { } 
section[id^="sect"] { } 
div[class$="2"] { } 
div[class*="w"] { }​

후손 셀렉터

header h1 {}

자식 셀렉터 (후손 셀렉터와의 차이를 반드시 알고 있어야 합니다)

header > p {}​

인접 형제 셀렉터

section + p {}​

형제 셀렉터

section ~ p {}​

가상 클래스

a:link { } 
a:visited { } 
a:hover { } 
a:active { } 
a:focus { }​

요소 상태 셀렉터

input:checked + span { } 
input:enabled + span { } 
input:disabled + span { }​

구조 가상 클래스 셀렉터 (암기할 필요 x)

p:first-child { } 
ul > li:last-child { } 
ul > li:nth-child(2n) { } 
section > p:nth-child(2n+1) { } 
ul > li:first-child { } 
li:last-child { } 
div > div:nth-child(4) { } 
div:nth-last-child(2) { } 
section > p:nth-last-child(2n + 1) { } 
p:first-of-type { } 
div:last-of-type { } 
ul:nth-of-type(2) { } 
p:nth-last-of-type(1) { }​

부정 셀렉터

input:not([type="password"]) { } 
div:not(:nth-of-type(2)) { }​

정합성 확인 셀렉터

input[type="text"]:valid { } 
input[type="text"]:invalid { }​

---

후손셀렉터와 자식셀렉터의 공통점은 본인 하위의 값을 선택한다는 것, 약간의 차이가 있다.

후손 셀렉터 : 자식과 그 후손까지의 모든 선택자를 지칭.
자식 셀렉터 : 자신의 자식만 선택하는 선택자이다.

---

레이아웃  - Flexbox  

display: flex 분석하기

부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법

기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치

Flex 요소에 방향 지정하기 (flex-direction)

• row (기본값)
• column

※ 주의할 점 ※

display 속성에 flex를 적용하는 것은 부모 요소에 적용합니다. (display: flex)
자식 요소는 flex라는 속성에 값을 적용합니다. 
(flex: 0 1 auto)

 

grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

grow(팽창 지수)

flex: 0 1 auto;
flex: (grow) (shrink) (basis);

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라짐
grow 값을 1로 설정하고, 자식 박스가 갖는 grow값의 총 합이 n이라면, 1/n 가로 또는 세로길이를 적용한다는 뜻이다.
모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우

shrink(수축 지수)

grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐
flex-grow 와 flex-shrink를 함께 사용하는 건 추천하지 않음 (실제 크기를 예측하기 어려워서)
flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방

basis(기본 크기)

자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다.
flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지

컨텐츠 정렬하는 방법

justify content (컨텐츠 수평 정렬)

부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있다.

flex-start
flex-end
center
space-between
align-items (컨텐츠 수직 정렬)

 

부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있다.

flex-start
flex-end
center
stretch

 

※ 와이어 프레임 / 목업 / 프로토타입 / 하드 코딩

• 와이어 프레임 : 화면 단위의 레이아웃을 설계하는 작업
• 목업 : 와이어 프레임에서 만든 설계를 HTML로 구현하는 작업 (기능이 빠진 껍데기라고 생각)
• 프로토타입 : 처음부터 종료까지 핵심 동작이 가능하게 구현한 앱
• 하드 코딩 : 데이터를 코드 내부에 직접 입력하는 것

 

---