210705

Boyun Jang·2021년 7월 5일

학습한 내용

1. maring-top 사용시 부모 자식 지간에 발생하는 마진 병합 현상이 일어나는지
2. top, right, bottim, left 속성을 사용할 수 있는지
3. 자식의 높이 값이 부모에게 영향을 주는지

Z-index: Z축에 영향을 미치는 속성

position: absolute; 적용하면 레이아웃이 겹쳐진 상태
같은 class(형제관계)일 때 absolute 속성이 동시에 들어갈 때, 
z-index: 10; (단위생략) 을 넣으면 해당 속성을 가진 영역이 위로... 
주의점: z-index는 z축에 있는 3차원적인 특징을 가진 position 속성 값에서만 사용 가능(ex: absolute, fix, relative) 

두번째 형재에 3차원 속성인 position: absolute 또는 fix를 넣으면 겹치지 않음. 

큰 영역의 웹사이트를 만들때는 2차원 속성으로 작업하면 겹치는 현상 X

float와 clear의 속성

float: left; 레이아웃 구조를 만들때 사용하는 속성
3차원적인 속성은 (형제관계에서) 먼저 기입하는 형제가 제일 앞으로 보임. 

float과 같이 쓰이는 속성 clear: both;
float을 마지막으로 사용한 영역(태그)의 다음 태그에 clear 넣어줌. 
float의 영역이 꺼진 영역에서 부터 clear 를 넣은 영역이 들어감. 

float을 사용할 때 주의점
1. 브라우저의 폭을 줄일 때 float이 만나는 영역에서부터는 레이아웃이 틀어지게 된다. (float의 단점)
2. tip: float을 사용하는 부모의 값은 고정값이어야 함. <body>(X) <section>(O) 그래야 레이아웃이 틀어지지 않는다. 
but, 값이 % 가변값일 경우 <section>으로 넣을 필요는 없다. 
3. float을 사용하려면 position 상태는 "static 이거나 relative" 이어야 한다. 3차원끼리 만나면 그 기능이 상쇄된다.

overflow: hidden; 공간의 박스에서 튀어나오는 텍스트는 숨김
overflow-y: scroll; y축으로 스크롤을 만들어서 공간 박스에서 튀어나오는 텍스트를 스크롤로 내려서 볼 수 있게 만듬.
(x 축으로 스크롤도 가능)

-부모의 속성 중 display: flew; 의 속성을 가진 부모의 자식들은 x축으로 정렬된다. 
-flex-direction: row; 자식들이 열로 정렬
				row-reverse; 역순으로 오른쪽에서부터 정열
                column; 행으로 정열(reverse 역순)
-flex-wrap: nowrap; 부모영역을 벗어나지 않고 그 안에 맞게 리사이즈 된다. 
           wrap; 자식들의 값이 크면 부모의 값이 리사이즈
-flex-flow: row wrap; direction과 wrap를 동시에 입력할 때 사용

X 축 정렬

justify-content: flew-start; 앞에서부터 정렬 <-> flew-end;
					cenrter; 가운데 위치
                    space-between; 각각의 박스 사이에 균일한 공백 생김
                    space-around; 박스의 바깥쪽까지 균일한 공백

-align-items: flex-start; 위쪽에 배치
www.flexbox.help 사이트에서 다양한 속성 확인가능

공간 배치(중앙정렬)

방법1. margin: 0 auto; 두개의 값을 입력할때는 앞에 0은 상하, 뒤 auto는 좌우
방법2. postion: relative;
		left: 50% 박스의 왼쪽면 기준으로 50% 왼쪽으로 
        margin-left: -150px (width 가 300px 인 박스의 반틈만큼 왼쪽으로 보낸다는 뜻, 단점은 박스의 넓이 width의 반틈만큼 계속 기입해야 함)

www.css.tricks.com 정렬에 관련된 수많은 코드가 있음.