HTML&CSS

---

FLEX

먼저, display: flex 를 꼭 해야함

설정하면 자식 태그에 flex 기능을 적용할 수 있다.

justify-content

• flex-start : 컨테이너 왼쪽 정렬
• flex-end : 컨테이너 오른쪽 정렬
• center : 가운데 정렬
• space-between : 요소들 사이 동일한 간격
• space-around : 요소들 주위 동일한 간격

align-items

• flex-start : 컨테이너 맨 위 정렬
• flex-end : 컨테이너 맨 밑 정렬
• center : 세로선 가운데 정렬
• baseline : 컨테이너 시작 위치 정렬
• stretch : 컨테이너에 맞도록 늘린다.

flex-direction

• row : 가로 방향으로 정렬
• row-reverse : 가로 방향으로 뒤집어서 정렬
• column : 세로 방향으로 정렬
• column-reverse : 세로 역행으로 정렬 (아래에서 위)

flex-wrap

• nowrap : 한줄 배치
• wrap : 넘치면 여러라인에 걸쳐 배치
• wrap-reverse : 역방향으로 여러줄 배치

---

BLOCK, INLINE BLOCK

	block	inline-block
너비	설정되어 있지 않으면 최소한으로 줄어든다	최대한으로 넓어진다
높이	최소한으로 줄어든다	최소한으로 줄어든다
line	한 줄에 최대한 여러개	한 줄을 무조건 혼자 쓴다
정렬	부모에 의해 정렬	스스로 정렬

• a, span 태그는 기본적으로 inline임.
• inline 요소에는 width, height, margin, padding 이 잘 적용안됨.

---

POSITION

	absolute, fixed	relative	static
너비	최대한 줄어든다	유지	유지
겹침	가능	불가능	불가능
본질	유령화		기본값

사용

• position: absolute;

---

테일윈드

CSS를 빠르고 쉽게 사용할 수 있도록 도와주는 프레임워크

치트시트

https://nerdcave.com/tailwind-cheat-sheet

사용법

<script src="https://cdn.tailwindcss.com"></script>

사실 개념에 대해 정리하면 끝도 없기 때문에 html 과 css 지식은 상황에 맞춰 가져다 쓰는 능력이 중요하다 생각한다. 이를 위한 다양한 실습 경험이 중요한 것 같다.