강의 |
1. flex
1.1 flex container와 item
flex container: display: flex 가 있는 요소를 이렇게 부름
flex items: flex container 안에 담겨있는 요소들
ㄴ flex item의 가로너비는 최대한 줄어드려고 함
1.2 justify-content: flex-end 와 end? (feat. flex & grid)
'flex-end'라는 것은 flex만 있었을 때부터 사용되었음.
이후 grid 나왔을 때: 'grid-end'라고 말해야 하나? 라는 논의 시작.
논의 결과 grid랑 flex라는 단어를 빼기로 함.
flex-end (x), grid-end (x), end(O)
근데 flex-end 는 표준 기술이 되어버린 시점이기 때문에 빠질 수 없었음.
그래서... end 쓰면 됨. flex와 grid에서 공통 사용 가능함.
1차원 레이아웃: flex 추천
2차원 레이아웃: grid 추천
1.3 단축속성
- border: 단축속성. border-color, -style, ...
- flex-flow도 단축속성 (활용도 떨어짐)
(flex-direction flex-wrap 같이 쓸 때. 근데 같이 잘 안씀)
1.4 주축(main-axis)
- 행row / 열column
- 주축은 항상 바뀔 수 있다. x가 row가 아닌 column이 될 수도 있다는 말. (vice versa)
1.5 flex-, align-
-
flex-grow: 증가 너비의 비율. 원래 값 0
-
flex-basis: (기본 너비. 웹사이트 참고)
주의할 점: flex: 1 쓰면 grow 1, shrink 1, basis 0됨 (오해의 여지가 있음) -
flex-shrink : 화면 줄어들어서 css 찌그러지는거 방지함.
-
align-items: 기본값 stretch.
-
align-self: 개별적 지정.
1.6 position
- position: 은 가까이 있는 조상요소에게 영향받음(위치상의 부모요소)
- position: fixed; 여도 화면 기준으로 안될 때 있음.
transform: scale 등 (transform, perspective, filter 속성 중 하나라도 none이 아닐 경우)쓸 경우 그러함. - position : absolute가 포지션 류에서 가장 어려움! 이것만 주의하면 된다!
- position 기본 값: static
- position: sticky(top bottom left right 중 하나 이상 필요함)
기본적으로 부모 요소에게 붙음
1.7 말줄임표
말 줄임표 만들려면 이렇게 :
text-overflow: ellipsis; (넘치는 글은 ...로 표기)(
white-space: nowrap;
overflow: hidden;
1.8 background
1) background-size:
- contain; (요소의 짧은 너비에 이미지를 맞춤)
- cover; (요소의 더 넓은 너비에 이미지를 맞춤)
2) background-image
3) background-repeat
text-indent
-9999: 상징적임(뭔가 있는데 화면에는 나올 필요 없는거 개발자들에게만 쇽샥 알려줌)
1.9 margin-collapsing
1) 형제 요소의 margin top과 margin bottom이 만나면 중복된다. 옆이 만났을 때는 중복 x
2) 부모요소와 자식요소의 마진 top끼리 (또한 bottom 끼리) 만날 때 중복된다. (부모가 뺏어감...)
content box
inline-block: flex가 없을 땐 레이아웃 잡는다고 필요했음
1.10 기타
- 1차원 레이아웃: x축만 있음
- 2차원 레이아웃: x,y
- inline-flex 잘 안 씀(글자처럼 취급해서) 대부분은 그냥 flex.
- reset-css js deliver => reset.css 에서 확인.
- 명시적으로 작성 <> 암시적으로 작성
: 명시는 직접 쓴거. 암시는 직접 안썼는데 자동으로 된거 - 가상요소(::)는 content: ""; 달고 시작하는 것임.
- width: min-content 내용의 최소 너비만큼 너비를 지정해라
