▶ CSS Display
- inline 요소의 특징
1. 자동줄바꿈 발생하지 않음
2. 너비, 높이 설정 불가(컨텐츠의 크기만큼만 차지)
3. margin top, bottom 적용불가능
-> a태그, span태그
- block 요소의 특징
1. 자동 줄바꿈
2. 너비, 높이 설정가능
3. padding margin 적용가능
-> div, p
- inline-block
기본은 inline인데 block요소 특징이 추가된것
1. 줄바꿈 발생하지 않음
2. 너비, 높이 설정 가능
3. margin top, bottom 가능
->button, select
- flex
1. 메인 축을 기반으로 정렬
2. 하나의 flex-container와 flex-item들로 구성
3. flex 선언시 부모요소들은 flex-container, 자식요소들은 자동으로 flex-item이 된다
▶ Flex 속성
- flex-direction: column;
/* flex의 핵심내용 - 주축과 교차축의 변경 */
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
- align-items: center; 교체축정렬 (특정요소만 self)
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
- justify-content: center; 주축정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
- order: 0(기본) -> 특정요소 순서바꾸기
- flex-wrap
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
- flex-flow : row wrap (direction+wrap)
- align-content
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
▶ position
position: relative;
top: 50px;
/* position의 기본값 static/ normal flow */조금만 움직이고 싶을때 -> **rerlative(상대적인)**
**absolute(절대적인)**
-> 자신의 "가장 ""가까운"" 부모중" 'position이 static이 아닌' 부모를 기준으로 배치된다.
->absolute를 사용하려면 부모가 존재해야된다
->static이 아닌 이라고 했으니까 그 부모가 어떤 position 속성을 가져야겠구나
->부모를 찾아갔는데 없으면->할아버지->증조 ,고조->단군(body)
부모에 아무도 static아닌게 없으면 body를 찾아감
- display : none과 visibility: hidden;.의 차이
- visibility: hidden; => 눈에만 안보인다
- display : none; => 존재 자체를 지운다
- DOCTYPE의 역할은 브라우저에게 우리문서가 html이라는것을 알림