css selector 예시
*후손 element와 자식 element(직속) 구분하기
article + p {…}
: + 는 article과 인접한 형제 엘리먼트 p를 선택함.
section ~ p {…}
: ~ 는 section과 인접한 형제 엘리먼트 p를 모두 선택함.
#container .mx-auto {…}
: id가 container인 엘리먼트의 후손 엘리먼트 중 class가 mx-auto인 엘리먼트를 선택합니다.
#container.mx-auto {…}
: id가 container이면서 동시에 class가 mx-auto인 엘리먼트를 선택함.
a[href] {…}
: a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택함. 이런 걸 attribute 셀렉터라고 함.
div[class='center'] {…}
: div 엘리먼트 중에서, class가 center인 속성을 갖는 모든 엘리먼트를 선택함.
p:first-child {…}
: first-child는 p 엘리먼트 중에서, 다른 요소들의 첫 번째 자식 엘리먼트를 선택함.
section > p:nth-child(2n+1) {…}
: section의 자식 엘리먼트 중에서, 홀수 번째 자식 엘리먼트가 p인 것을 선택함.
div:nth-last-child(2) {…}
: div의 자식 엘리먼트 중에서, 마지막에서 두 번째 엘리먼트가 div인 것을 선택함.
p:first-of-type {…}
: p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택함. (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택함.)
div:last-of-type {…}
: div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택함.
그 외...
가상 클래스
a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }
요소 상태 셀렉터
input:checked + span { }
input:enabled + span { }
input:disabled + span { }
구조 가상 클래스 셀렉터
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 { }
CSS 레이아웃
Flexbox
<핵심 포인트>
방향: flex-direction
얼마나 늘릴 것인가?: flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items부모 요소에 스타일링 할 것
-
display: flex;
-
flex-direction : row(default)/ column
- row(행) :
main-axis는 가로,cross-axis는 세로 - column(열) :
main-axis는 세로,cross-axis는 가로
- row(행) :
이 axis들을 기준으로 정렬할 수 있는 속성들에 justify-content와 align-items가 있음.
justify-content 속성은 main axis를 기준으로 정렬하며, align-items 속성은 cross axis를 기준으로 정렬 -
justify-content(수평 정렬)
: flex-start / flex-end / center / space-between -
align-items(수직 정렬)
: flex-start / flex-end / center / stretch
자식 요소에 스타일링 할 것
flex: 0 1 auto;(default)
flex-grow(팽창지수) flex-shrink(수축지수) flex-basis(기본크기)
*flex-grow와 flex-shrink는 같이 쓰면 안 됨! (서로 상반된 개념)
flex-grow로 자식 요소간 비율을 조절할 수 있다!
예를 들어, flex한 부모요소 아래에 3개의 자식 요소가 있다고 가정할 때, 각각의 자식요소에 flex-grow: 1을 설정하면 각각 1/3의 비율을 차지하게 됨. 아니면 각각 2:3:5로 설정하면 그 비율대로 공간을 차지함.
*flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방하다고 함. (근데 난 1로 두니까 비율 변화가 없었음...🤔)
+flex-basis(기본크기)
자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기임. flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됨.(=flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됨)
diplay 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis로 설정된 크기가 항상 유지되는 것은 아님. flex-grow 속성의 값이 1 이상인 경우, flex-basis 속성에 적용한 값보다 커질 수도 있음. 이때는 basis 값을 0으로 설정하는 게 좋음.
flexbox 사용시 참고할 것
width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됨.
콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있음.
html의 기본값을 없애주는 코드
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}이런 코드를 reset css라고 함.
추가로 배운 것
크기 설정할 때 px같은 절대단위보다 vh나 rem 등 같은 상대단위를 주로 씀.
height 대신 min-height을 쓰는 게 더 안정적임.
: min-height는 최소높이로, 코드가 어긋나(?) 레이아웃이 설정한 height 대로 안 지켜지는 일이 많은데, 최소높이를 설정한 그 기준은 반드시 지켜짐.
html에서 구조 만들 때 id와 class를 많이 지정하게 되는데,
id는 겹치는 요소가 없을 때(유일할 때), class는 반복되는 항목이 많을 때 사용함.
단어 정리
와이어 프레임
: 웹 또는 앱을 개발할 때 화면 단위의 레이아웃을 설계하는 작업.
디자인 특화 프로그램으로 제작함.
목업
: 실물과 비슷하게 시제품을 제작하는 작업. 기능만 빠진 완제품.
프로토타입
: 처음부터 종료까지 핵심동작이 기능하게 구현된 앱.
하드코딩
:데이터를 코드 내부에 직접 입력하는 방식.
