🤖 참고 사이트
- HTML 요소 레퍼런스: https://developer.mozilla.org/ko/docs/Web/HTML/Element
- HTML 태그가 유효한지 아닌지 확인할 때: http://validator.w3.org/
- CSS reference: https://developer.mozilla.org/ko/docs/Web/CSS/Reference
- 태그 게임: https://flukeout.github.io/
- caniuse.com
- 컬러팔렛 사이트: https://material.io/resources/color/#!/?view.left=0&view.right=0
- 플렉스박스 참고자료: https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
- 플렉스박스 게임: flexboxfroggy
- jsbin.com
- jsfiddle.net
- codesandvbox.io
- 로고제작 사이트: https://ko.wix.com/
🤖 HTML & CSS
- 웹사이트 스트럭쳐: 헤더, 네비게이션바, 메인콘텐츠, 사이드바, 푸터
- 태그는 박스와 아이템으로 크게 나뉨
- 블록레벨은 한 줄에 하나, 인라인레벨은 공간이 허락하면 다른 태그 옆에 배치가 가능함
- 태그 사이에 있는게 콘텐츠, 태그랑 콘텐츠 다 합친게 엘리먼트, 노드
- 태그 안에 들어있는 속성이 어트리뷰트
디스플레이
- 디브도 디스플레이 인라인-블록설정해주면 한 줄에 여러 개 나올 수 있음
- 물론 반대로 스판태그도 디스플레이 블록 설정하면 디브기본설정처럼 한 줄에 하나씩 출력됨
- 인라인은 물건, 블록은 상자, 인라인블록은 상자인데 옆으로 배치 가능
포지션
- 기본 값으로 static이 설정되어있음 (위에서부터 보여주는 거?)
- 릴레이티브로 바꾸면 원래 있어야 하는 자리에서 left, top 등의 속성으로 먹여준 값만큼 이동함
- 앱솔루트 쓰면 해당 아이템이 담긴 상자를 기준으로 위치이동함
- 픽스드 쓰면 윈도우를 기준으로 위치이동!
- 스티키 쓰면 원래 있어야 하는 자리에 있으면서, 스크롤링 해도 없어지지 않고 원래 자리에 계속 붙어있음
플렉스박스^^*
-
박스와 아이템을 행또는 열로 자유자재로 배치하는 아이... 🧒
-
컨테이너 속성과 아이템에 먹이는 속성이 따로 있음
-
컨테이너 레벨의 속성
1) 디스플레이
2) 플렉스 디렉션: 로, 칼럼, 리버스도 가능 로우로 하면 기본축이 수평축!
3) 플렉스 랩: 기본값은 노랩. 랩으로 바꾸면, 넓이 조절시 애들이 자동으로 밑줄로 넘어감~~ 한 줄에 가득 찼을 때 넘어갈지 안 넘어 갈지 결정
4) 플렉스 플로우: 디렉션하고 랩 두개 인자쓸 수 있음!
5) 저스티파이 콘텐츠: 중심축에서 아이템 어떻게 배치할지 결정! 이거는 따로 포스팅했음~ (스페이스이븐리는 스페이스 어라운드랑 똑같은데 맨끝에 애들도 간격 완전 똑같이!)
6) 얼라인 아이템: 반대축에서 어떻게 배치할지 결정 (center, baseline)
7) 얼라인 콘텐트: 반대축의 아이템을 지정. 반대축을로 저스티파이콘텐츠 한다고 생각하면 됨... -
중심축과 반대축이 있음. 수직축을 중심축으로 설정하면 수평축은 반대축이 됨 / main axis와 cross axis
-
아이템에 들어가는 속성값
1) 오더: 기본값 0, 아이템 각각 순서 배정 (잘 안쓰인다고 함)
2) 플렉스 그로우: 기본값 0, 숫자 넣으면 영역을 채우기 시작! 콘테이너가 점점 늘어났을 때 어떻게 반응하는지
3) 플렉스 슈링크: 콘테이너가 점점 작아졌을 때 어떻게 반응하는지.
4) 플렉스 베이시스: 아이템들이 공간을 얼마나 차지할지 세부적으로 알려줌. 기본은 오토. 예를 들어 60% 커질때도 작아질때도 컨테이너기준 퍼센트를 유지
5) 얼라인 셀프: 아이템별로 아이템을 정렬할 수 있음. 아이템 하나만 특별하게 정렬하고 싶을 때! -
height 100% 100vh, %를 쓰면 부모의 높이의 100%를 채우겠다는 말! 부모 높이 개무시하고 걍 퍼센트로 쓰겠다는게 vh.
-
플로트의 원래 목적은 이미지와 텍스트를 어떻게 배치할지 정해주는것? 박스를 플로트로 정렬하는 게 사실 원래 목적에 부합한다고 보기는 힘듬.
