위와 같이 공통되는 부분은 다중클래스를 사용해서 정리하는게 훨씬 더 깔끔하고 효율적.
( 공통되는 h2 태그의 마진과 패딩 값, 가운데 정렬용 width 값 등 등 . . )
* 포토샵
양쪽 대각선 마키툴 잡고, 쉬프트 누른 상태에서 반대쪽 대각선 잡고 마키툴 잡아주면 오른쪽 정보창에서 width값, height값 전부 나옴!
* 버튼 제어할 때 버튼 높이값만큼 line-height값을 주면 텍스트가 딱 맞게 중앙에 정렬되는 효과
* float 준 부모의 높이는 사라진다. 복구 시키기 위해선 clear 사용.
display : flex ->
flex는 float랑 비슷하지만 더 간단하고 깔끔하게 정리해주는 명령어라고 볼 수 있음!
float 보다 더 간단하게 레이아웃을 잡아줄 수 있음.
( 번거롭게 추후에 clear:fix를 안해줘도 된다는 장점이 )
display:flex는 부모와 자식요소 사용되는 기능이 나뉘어져있다.
flex-direction : column -> 세로 수직으로 쌓아주는 기능. 위에서 아래로 1,2,3,4 이런식.
flex-wrap : wrap 은 하위요소를 하나로 묶어주는 기능. 박스 순번은 위 사항에 column 이 들어가있기 때문.
align-content: flex-start -> 를 입력해주면 공간이 남지 않고 딱! 맞게 설정이 되는 효과, ( column 해제 )
justify-content:center ; ( 가운데 중앙 정렬 )
+ 추가로 주축 ( main-axis ) 과 교차축 ( cross-axis ) 에 대한 이해가 필요함.
-> display:flex를 이해할 때 중요한 개념.
row가 디폴트값이고, 이렇게 보면 어려워보이는데 그냥 명령어마다 주축과 교차축을 상황에 맞게 변경해준다~
이런 느낌으로 알고 있으면 될 듯. 그냥 몇 번 직접 코딩 쳐보면 더 확실히 느낌이 올 것 같음.
-- 여기까지만 알아두고 flex를 다른 곳에서도 더 써보면서 익숙해지면 될 듯.
( 굉장히 내용이 많고 꽤 깊어 보임. 쓸줄 알아야 할 듯 )
부모에 display:flex를 주고
자식에 flex:1을 주면 이렇게 됨!
* 위 태그는 ul li 형식의 태그. ul에 display:flex li에 flex:1 한 상황, ( 신기 )
border-radius를 이런 식으로도 제어가 가능.
순서는 시계방향. ( ul에다가 보더를 넣은 상황 )
https://github.com/wonpoem/test
GitHub - wonpoem/test
Contribute to wonpoem/test development by creating an account on GitHub.
github.com
https://rkqtlr15159.cafe24.com/test/
우리은행 시니어플러스
시니어플러스우리통장 우대금리, 수수료면제, 무료보이스피싱보험, 온천무료이용권, 헬스케어서비스등 바로가기
rkqtlr15159.cafe24.com