[220516 / Day 10] margin-collapsing, flex box, Font Awesome 사용법

2022. 6. 28. 22:53

1. margin collapsing 마진 상쇄

큰 값이 작은 값을 상쇄, 상단 마진 하단 마진 똑같으면 겹침

부모 자식 요소에서도 똑같음 자식 요소만 시각적인 요소를 가지고 있을 때 겹쳐서 둘 중 큰 값 하나만 적용됨

100px + 200px 이면 300px 여백이 생겨야 하는데 200px 만 생긴다는 뜻

좌우 콜렙싱x

겹쳐서 내가 원하는대로 값이 나오지 않을 땐 패딩값을 따로 주는 등 다른 방법을 쓰면 됨

!!!인라인 요소는 상하 마진 안들어감!!!

2. 플렉스 박스 레이아웃 flex box

융통성 있게 만들어 주는 것, 반응형 할 때 쉽게 설정가능

display: flex; 을 부모요소에 부여해야 자식요소를 아이템으로 쓸 수 있음, 블록이든 뭐든 상관없이 저 요소를 부여하면 자동으로 수평으로 들어감

* 단축으로 똑같은 요소 여러개 만들기:

div.box${박스$}*3 => <div class="box1">박스1</div>

부모 container 에 설정할 수 있는 속성들

- flex-direction : 기본 진행이 로우, 가로로 되어 있는데 그 메인 축을 설정하는 것 / 가로 메인 축, 세로 반대가 크로스축 교차축 / 순서를 반대로 하고 싶으면 콜룸 리버스나 로우 리버스

- flex-wrap : 줄바꿈 속성 / 사이즈가 공간 보다 컸을 때 그게 공간 나누기 해서 자동으로 아래로 내려감 / wrap 과 데칼코마니처럼 반대로 하는 wrap-reverse 있음

- flex-flow: row wrap-reverse; = 축약, direction 과 wrap 다 같이 쓸 수 있는 것

- justify-content : “주축” 기준 배치 방법 결정 / 모든 속성값 다 필요함

- align-items : “교차축” 정렬 설정 / 속성값은 justify 와 동일, 높이값 안 적으면 stretch 가 기본값, 높이값 있으면 스트레치 적용x / 싱글라인

- align-content: 플렉스 항목이 여러 줄에 걸쳐 표시될 때, 교차축 방향의 배치방법 지정할 수 있음 / 멀티라인

자식 item 에 설정할 수 있는 속성들

- order: 아이템끼리 순서 바꾸는 방법, 바꿀 일 크게 많지 않음 / 아이템 요소에 직접 적용 / .wrap1>div:nth-child(1){order: 1;} / 정수면 맨 끝으로 음수면 맨 앞으로 0 은 그자리, 다른 요소가 값이 더 크다면 그 다음에 위치

- flex-grow : 플렉스 항목의 너비를 얼마나 늘릴지 설정 / 0 기본 / 총 값에서 나누는 것 / (총 넓이/총 속성값)*해당 속성값

- flex-shrink : 플렉스 항목의 너비를 얼마나 줄일지 설정 / 1 기본 / 넓이값을 따로 주지 않아도 1이 기본이라서 1:1:1로 설정, 넓이값을 넓게 줘도 부모요소에 맞춰 등분 / 아이템넓이 + (-아이템합에서부모넓이에서삐져나간값/총 속성값) * 해당 속성값 / 각 아이템의 넓이 400 -

- flex-basis : auto 기본 / 오토하면 안의 컨텐츠 크기만큼만 잡힘 크기 지정하면 지정한 크기만큼 늘어남

- flex : grow, shrink, basis 를 축약으로 사용 가능, 순서대로 속성값 적으면 됨 / 단위 있으면 basis 값 / flex: 1 이라고 하나만 설정하면 grow 값만 들어 감, 순서대로 1 1 0 로 들어감 / flex: none = 0 0 auto / flex: initial = 0 1 auto / flex: auto = 1 1 auto / flex: 1 50px = 1 1 50px / flex: 1 2 = 1 2 0

- align-self : flex-start, flex-end, stretch(높이 없을 때 길게 주는 것), center, baseline, auto(기본값) / 아이템 하나씩의 정렬을 바꿔주는 속성

3. Font Awesome 사용법

1) 회원가입, 로그인 후 홈페이지 상단 kits 에 들어간다

2) 본인 프로필로 들어간 뒤 파란색 버튼의 copy kit code! 를 눌러 복사 한다

3) <head> 태그 안에 복사한 링크를 넣는다, 그럼 준비는 끝

4) 홈페이지의 icons 에 들어가 맨 하단의 view all 16,083 icons 버튼을 누르고 들어간다

5) 원하는 아이콘을 선택한 뒤 나오는 창에서 <i> 어쩌구로 되어 있는 코드를 누르면 복사된다

* 무료로 이용하려면 왼쪽의 free 를 선택하고 고르는 것이 좋다

6) 원하는 곳에 넣으면 끝!

'🌱 SeSac > 공부 기록 (복습하며 업데이트 중)' 카테고리의 다른 글

[220518 / Day 12] CSS : filter, white-space / JS : 변수, 데이터 타입, 템플릿 리터럴, 객체 (0)	2022.06.28
[220517 / Day 11] animation, JS 기초 (0)	2022.06.28
[220513 / Day 9] 재플린(Zeplin)을 활용한 모바일 페이지 제작 (0)	2022.06.23
[220512 / Day 8] 재플린(Zeplin)을 활용한 페이지 제작 2 (0)	2022.06.23
[220511 / Day 7] 재플린(Zeplin)을 활용한 페이지 제작 1 (0)	2022.06.21

개발새발

[220516 / Day 10] margin-collapsing, flex box, Font Awesome 사용법

'🌱 SeSac > 공부 기록 (복습하며 업데이트 중)' 카테고리의 다른 글

+ Recent posts

티스토리툴바